테이블 칼럼 리사이즈 및 핀 충돌 해결

1 files changed, 183 insertions, 176 deletions

diff --git a/lib/po/table/sign-request-dialog.tsx b/lib/po/table/sign-request-dialog.tsx
index f70e5e33..38e3e0f9 100644
--- a/lib/po/table/sign-request-dialog.tsx
+++ b/lib/po/table/sign-request-dialog.tsx
@@ -45,7 +45,8 @@ import {
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
-import { ContractDetail } from "@/db/schema/contract"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { ContractDetail, ContractDetailParsed } from "@/db/schema/contract"
 import { getVendorContacts } from "../service"
 
 // Type for vendor contact
@@ -92,7 +93,7 @@ interface SigningParty {
 
 // Updated interface to accept multiple signers
 interface SignatureRequestModalProps {
-  contract: ContractDetail
+  contract: ContractDetailParsed
   open: boolean
   onOpenChange: (open: boolean) => void
   onSubmit: (
@@ -217,7 +218,7 @@ export function SignatureRequestModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[600px]">
+      <DialogContent className="sm:max-w-[600px] max-h-[90vh]">
         <DialogHeader>
           <DialogTitle>Request Electronic Signatures</DialogTitle>
           <DialogDescription>
@@ -225,185 +226,191 @@ export function SignatureRequestModal({
           </DialogDescription>
         </DialogHeader>
         
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
-            <Accordion type="multiple" defaultValue={["requester", "vendor"]} className="w-full">
-              {/* Requester Signature Section */}
-              <AccordionItem value="requester">
-                <div className="flex items-center space-x-2">
-                  <FormField
-                    control={form.control}
-                    name="includeRequesterSigner"
-                    render={({ field }) => (
-                      <FormItem className="flex flex-row items-center space-x-3 space-y-0 my-2">
-                        <FormControl>
-                          <Checkbox
-                            checked={field.value}
-                            onCheckedChange={field.onChange}
+   
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
+            <ScrollArea className="pr-4" style={{height:500}}>
+              <Accordion type="multiple" defaultValue={["requester", "vendor"]} className="w-full">
+                {/* Requester Signature Section */}
+                <AccordionItem value="requester">
+                  <div className="flex items-center space-x-2">
+                    <FormField
+                      control={form.control}
+                      name="includeRequesterSigner"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-center space-x-3 space-y-0 my-2">
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                          <AccordionTrigger className="hover:no-underline ml-2">
+                            <div className="text-sm font-medium">Requester Signature</div>
+                          </AccordionTrigger>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                  <AccordionContent>
+                    {form.watch("includeRequesterSigner") && (
+                      <Card className="border-none shadow-none">
+                        <CardContent className="p-0 space-y-4">
+                          <FormField
+                            control={form.control}
+                            name="requesterEmail"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Signer Email</FormLabel>
+                                <FormControl>
+                                  <Input placeholder="email@example.com" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
                           />
-                        </FormControl>
-                        <AccordionTrigger className="hover:no-underline ml-2">
-                          <div className="text-sm font-medium">Requester Signature</div>
-                        </AccordionTrigger>
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <AccordionContent>
-                  {form.watch("includeRequesterSigner") && (
-                    <Card className="border-none shadow-none">
-                      <CardContent className="p-0 space-y-4">
-                        <FormField
-                          control={form.control}
-                          name="requesterEmail"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>Signer Email</FormLabel>
-                              <FormControl>
-                                <Input placeholder="email@example.com" {...field} />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                        
-                        <FormField
-                          control={form.control}
-                          name="requesterName"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>Signer Name</FormLabel>
-                              <FormControl>
-                                <Input placeholder="Full Name" {...field} />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                        
-                        <FormField
-                          control={form.control}
-                          name="requesterPosition"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>Signer Position</FormLabel>
-                              <FormControl>
-                                <Input placeholder="e.g. CEO, Manager" {...field} />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      </CardContent>
-                    </Card>
-                  )}
-                </AccordionContent>
-              </AccordionItem>
-              
-              {/* Vendor Signature Section */}
-              <AccordionItem value="vendor">
-                <div className="flex items-center space-x-2">
-                  <FormField
-                    control={form.control}
-                    name="includeVendorSigner"
-                    render={({ field }) => (
-                      <FormItem className="flex flex-row items-center space-x-3 space-y-0 my-2">
-                        <FormControl>
-                          <Checkbox
-                            checked={field.value}
-                            onCheckedChange={field.onChange}
+                          
+                          <FormField
+                            control={form.control}
+                            name="requesterName"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Signer Name</FormLabel>
+                                <FormControl>
+                                  <Input placeholder="Full Name" {...field} />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
                           />
-                        </FormControl>
-                        <AccordionTrigger className="hover:no-underline ml-2">
-                          <div className="text-sm font-medium">Vendor Signature</div>
-                        </AccordionTrigger>
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <AccordionContent>
-                  {form.watch("includeVendorSigner") && (
-                    <Card className="border-none shadow-none">
-                      <CardContent className="p-0 space-y-4">
-                        <FormField
-                          control={form.control}
-                          name="vendorContactId"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>Select Vendor Contact</FormLabel>
-                              <Select 
-                                onValueChange={handleVendorContactSelect}
-                                defaultValue={field.value?.toString()}
-                              >
+                          
+                          <FormField
+                            control={form.control}
+                            name="requesterPosition"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Signer Position</FormLabel>
                                 <FormControl>
-                                  <SelectTrigger>
-                                    <SelectValue placeholder="Select a contact" />
-                                  </SelectTrigger>
+                                  <Input placeholder="e.g. CEO, Manager" {...field} />
                                 </FormControl>
-                                <SelectContent>
-                                  {vendorContacts.length > 0 ? (
-                                    vendorContacts.map((contact) => (
-                                      <SelectItem 
-                                        key={contact.id} 
-                                        value={contact.id.toString()}
-                                      >
-                                        {contact.contactName} {contact.isPrimary ? "(Primary)" : ""}
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </CardContent>
+                      </Card>
+                    )}
+                  </AccordionContent>
+                </AccordionItem>
+                
+                {/* Vendor Signature Section */}
+                <AccordionItem value="vendor">
+                  <div className="flex items-center space-x-2">
+                    <FormField
+                      control={form.control}
+                      name="includeVendorSigner"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-center space-x-3 space-y-0 my-2">
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                          <AccordionTrigger className="hover:no-underline ml-2">
+                            <div className="text-sm font-medium">Vendor Signature</div>
+                          </AccordionTrigger>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                  <AccordionContent>
+                    {form.watch("includeVendorSigner") && (
+                      <Card className="border-none shadow-none">
+                        <CardContent className="p-0 space-y-4">
+                          <FormField
+                            control={form.control}
+                            name="vendorContactId"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>Select Vendor Contact</FormLabel>
+                                <Select 
+                                  onValueChange={handleVendorContactSelect}
+                                  defaultValue={field.value?.toString()}
+                                >
+                                  <FormControl>
+                                    <SelectTrigger>
+                                      <SelectValue placeholder="Select a contact" />
+                                    </SelectTrigger>
+                                  </FormControl>
+                                  <SelectContent>
+                                    {vendorContacts.length > 0 ? (
+                                      vendorContacts.map((contact) => (
+                                        <SelectItem 
+                                          key={contact.id} 
+                                          value={contact.id.toString()}
+                                        >
+                                          {contact.contactName} {contact.isPrimary ? "(Primary)" : ""}
+                                        </SelectItem>
+                                      ))
+                                    ) : (
+                                      <SelectItem value="none" disabled>
+                                        No contacts available
                                       </SelectItem>
-                                    ))
-                                  ) : (
-                                    <SelectItem value="none" disabled>
-                                      No contacts available
-                                    </SelectItem>
-                                  )}
-                                </SelectContent>
-                              </Select>
-                              <FormMessage />
-                            </FormItem>
+                                    )}
+                                  </SelectContent>
+                                </Select>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                          
+                          {/* Display selected contact info (read-only) */}
+                          {selectedVendorContact && (
+                            <>
+                              <FormItem className="pb-2">
+                                <FormLabel>Contact Email</FormLabel>
+                                <div className="p-2 border rounded-md bg-muted">
+                                  {selectedVendorContact.contactEmail}
+                                </div>
+                              </FormItem>
+                              
+                              <FormItem className="pb-2">
+                                <FormLabel>Contact Name</FormLabel>
+                                <div className="p-2 border rounded-md bg-muted">
+                                  {selectedVendorContact.contactName}
+                                </div>
+                              </FormItem>
+                              
+                              <FormItem className="pb-2">
+                                <FormLabel>Contact Position</FormLabel>
+                                <div className="p-2 border rounded-md bg-muted">
+                                  {selectedVendorContact.contactPosition || "N/A"}
+                                </div>
+                              </FormItem>
+                            </>
                           )}
-                        />
-                        
-                        {/* Display selected contact info (read-only) */}
-                        {selectedVendorContact && (
-                          <>
-                            <FormItem className="pb-2">
-                              <FormLabel>Contact Email</FormLabel>
-                              <div className="p-2 border rounded-md bg-muted">
-                                {selectedVendorContact.contactEmail}
-                              </div>
-                            </FormItem>
-                            
-                            <FormItem className="pb-2">
-                              <FormLabel>Contact Name</FormLabel>
-                              <div className="p-2 border rounded-md bg-muted">
-                                {selectedVendorContact.contactName}
-                              </div>
-                            </FormItem>
-                            
-                            <FormItem className="pb-2">
-                              <FormLabel>Contact Position</FormLabel>
-                              <div className="p-2 border rounded-md bg-muted">
-                                {selectedVendorContact.contactPosition || "N/A"}
-                              </div>
-                            </FormItem>
-                          </>
-                        )}
-                      </CardContent>
-                    </Card>
-                  )}
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-            
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isSubmitting}>
-                {isSubmitting ? "Sending..." : "Send Requests"}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
+                        </CardContent>
+                      </Card>
+                    )}
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+              </ScrollArea>
+
+              <div className="pt-4 pb-2">
+                <DialogFooter className="pt-2">
+                  <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                    Cancel
+                  </Button>
+                  <Button type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? "Sending..." : "Send Requests"}
+                  </Button>
+                </DialogFooter>
+              </div>
+            </form>
+          </Form>
+      
       </DialogContent>
     </Dialog>
   )