@accounter/client 0.0.8-alpha-20251030162201-d2f279aafe537912ec3546af855cbd3a38ac0f5c → 0.0.8-alpha-20251030164843-d2f490daba879840366288d1f62974ab25081876

package/src/components/clients/contracts/modify-contract-dialog.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { format } from 'date-fns';
-import { Plus, X } from 'lucide-react';
+import { Edit, Plus, X } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { useQuery } from 'urql';
 import { z } from 'zod';
 import { Badge } from '@/components/ui/badge.js';
 import { Button } from '@/components/ui/button.js';
@@ -32,7 +33,14 @@ import {
 } from '@/components/ui/select.js';
 import { Switch } from '@/components/ui/switch.js';
 import { Textarea } from '@/components/ui/textarea.js';
-import { BillingCycle, Currency, DocumentType, Product, SubscriptionPlan } from '@/gql/graphql.js';
+import {
+  BillingCycle,
+  ContractsEditModalDocument,
+  Currency,
+  DocumentType,
+  Product,
+  SubscriptionPlan,
+} from '@/gql/graphql.js';
 import {
   getDocumentNameFromType,
   standardBillingCycle,
@@ -43,6 +51,30 @@ import { useCreateContract } from '@/hooks/use-create-contract.js';
 import { useUpdateContract } from '@/hooks/use-update-contract.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  query ContractsEditModal($contractId: UUID!) {
+    contractsById(id: $contractId) {
+      id
+      startDate
+      endDate
+      purchaseOrders
+      amount {
+        raw
+        currency
+      }
+      product
+      msCloud
+      billingCycle
+      plan
+      isActive
+      remarks
+      documentType
+      operationsLimit
+    }
+  }
+`;
+
 const contractFormSchema = z.object({
   id: z.uuid().optional(),
   // TODO: activate this field later. requires additional backend support
@@ -85,10 +117,11 @@ const newContractDefaultValues: ContractFormValues = {
 interface Props {
   clientId: string;
   contract?: ContractFormValues | null;
+  contractId?: string;
   onDone?: () => void;
 }
 
-export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
+export function ModifyContractDialog({ clientId, contract, contractId, onDone }: Props) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [editingContract, setEditingContract] = useState<ContractFormValues | null>(null);
   const [newPO, setNewPO] = useState('');
@@ -96,6 +129,15 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
   const { updateContract, updating } = useUpdateContract();
   const { createContract, creating } = useCreateContract();
 
+  // Only fetch if we don't have loader data
+  const [{ data: fetchedContractData, fetching }] = useQuery({
+    query: ContractsEditModalDocument,
+    pause: !contractId || !isDialogOpen,
+    variables: {
+      contractId: contractId ?? '',
+    },
+  });
+
   const form = useForm<ContractFormValues>({
     resolver: zodResolver(contractFormSchema),
     defaultValues: contract || newContractDefaultValues,
@@ -145,6 +187,32 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
     }
   }, [contract, form]);
 
+  useEffect(() => {
+    if (fetchedContractData?.contractsById) {
+      const fetchedContract = fetchedContractData.contractsById;
+      const formData: ContractFormValues = {
+        startDate: fetchedContract.startDate,
+        endDate: fetchedContract.endDate,
+        pos: fetchedContract.purchaseOrders,
+        paymentAmount: fetchedContract.amount.raw,
+        paymentCurrency: fetchedContract.amount.currency,
+        productType: fetchedContract.product ?? undefined,
+        msCloudLink: fetchedContract.msCloud?.toString() ?? undefined,
+        billingCycle: fetchedContract.billingCycle,
+        subscriptionPlan: fetchedContract.plan ?? undefined,
+        isActive: fetchedContract.isActive,
+        defaultRemark: fetchedContract.remarks ?? undefined,
+        defaultDocumentType: fetchedContract.documentType,
+        operationsLimit: fetchedContract.operationsLimit,
+      };
+      setEditingContract({
+        id: fetchedContract.id,
+        ...formData,
+      });
+      form.reset(formData);
+    }
+  }, [fetchedContractData, form]);
+
   const handleNew = () => {
     setEditingContract(null);
     form.reset(newContractDefaultValues);
@@ -207,8 +275,14 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
     <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
       <DialogTrigger asChild>
         <Button size="sm" onClick={handleNew}>
-          <Plus className="h-4 w-4 mr-2" />
-          New Contract
+          {contractId ? (
+            <Edit className="size-4" />
+          ) : (
+            <>
+              <Plus className="size-4 mr-2" />
+              New Contract
+            </>
+          )}
         </Button>
       </DialogTrigger>
       <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
@@ -220,166 +294,260 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
               : 'Add a new contract with all required details'}
           </DialogDescription>
         </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <div className="grid gap-4 py-4">
-              <div className="grid gap-4 md:grid-cols-2">
-                <FormField
-                  control={form.control}
-                  name="operationsLimit"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Operations Limit</FormLabel>
-                      <FormControl>
-                        <Input type="number" placeholder="500" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="pos"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Purchase Orders</FormLabel>
-                      <div className="flex gap-2">
-                        <Input
-                          placeholder="Add PO..."
-                          value={newPO}
-                          onChange={e => setNewPO(e.target.value)}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter') {
-                              e.preventDefault();
-                              addPO();
-                            }
-                          }}
-                        />
-                        <Button type="button" size="sm" onClick={addPO}>
-                          <Plus className="h-4 w-4" />
-                        </Button>
-                      </div>
-                      <div className="flex flex-wrap gap-2 mt-2">
-                        {field.value?.map((link, index) => (
-                          <Badge key={link} variant="secondary" className="gap-1 max-w-xs truncate">
-                            {link}
-                            {index === field.value.length - 1 && (
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="p-0 size-3"
-                                onClick={() => removePO(index)}
-                              >
-                                <X className="size-3 cursor-pointer flex-shrink-0" />
-                              </Button>
-                            )}
-                          </Badge>
-                        ))}
-                      </div>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
+        {fetching ? (
+          <>Fetching contract details...</>
+        ) : (
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)}>
+              <div className="grid gap-4 py-4">
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    control={form.control}
+                    name="operationsLimit"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Operations Limit</FormLabel>
+                        <FormControl>
+                          <Input type="number" placeholder="500" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="pos"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Purchase Orders</FormLabel>
+                        <div className="flex gap-2">
+                          <Input
+                            placeholder="Add PO..."
+                            value={newPO}
+                            onChange={e => setNewPO(e.target.value)}
+                            onKeyDown={e => {
+                              if (e.key === 'Enter') {
+                                e.preventDefault();
+                                addPO();
+                              }
+                            }}
+                          />
+                          <Button type="button" size="sm" onClick={addPO}>
+                            <Plus className="h-4 w-4" />
+                          </Button>
+                        </div>
+                        <div className="flex flex-wrap gap-2 mt-2">
+                          {field.value?.map((link, index) => (
+                            <Badge
+                              key={link}
+                              variant="secondary"
+                              className="gap-1 max-w-xs truncate"
+                            >
+                              {link}
+                              {index === field.value.length - 1 && (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="p-0 size-3"
+                                  onClick={() => removePO(index)}
+                                >
+                                  <X className="size-3 cursor-pointer flex-shrink-0" />
+                                </Button>
+                              )}
+                            </Badge>
+                          ))}
+                        </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
 
-              <div className="grid gap-4 md:grid-cols-2">
-                <FormField
-                  control={form.control}
-                  name="startDate"
-                  render={({ field: { onChange, ...field } }) => (
-                    <FormItem>
-                      <FormLabel>Start Date</FormLabel>
-                      <FormControl>
-                        <Input type="date" {...field} onInput={date => onChange(date)} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="endDate"
-                  render={({ field: { onChange, ...field } }) => (
-                    <FormItem>
-                      <FormLabel>End Date</FormLabel>
-                      <FormControl>
-                        <Input type="date" {...field} onInput={date => onChange(date)} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    control={form.control}
+                    name="startDate"
+                    render={({ field: { onChange, ...field } }) => (
+                      <FormItem>
+                        <FormLabel>Start Date</FormLabel>
+                        <FormControl>
+                          <Input type="date" {...field} onInput={date => onChange(date)} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="endDate"
+                    render={({ field: { onChange, ...field } }) => (
+                      <FormItem>
+                        <FormLabel>End Date</FormLabel>
+                        <FormControl>
+                          <Input type="date" {...field} onInput={date => onChange(date)} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
 
-              <div className="grid gap-4 md:grid-cols-3">
-                <FormField
-                  control={form.control}
-                  name="paymentAmount"
-                  render={({ field }) => (
-                    <FormItem className="md:col-span-2">
-                      <FormLabel>Payment Amount</FormLabel>
-                      <FormControl>
-                        <Input
-                          type="number"
-                          placeholder="24000"
-                          {...field}
-                          onChange={event => {
-                            field.onChange(
-                              event?.target.value ? Number(event?.target.value) : undefined,
-                            );
-                          }}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="paymentCurrency"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Currency</FormLabel>
-                      <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <div className="grid gap-4 md:grid-cols-3">
+                  <FormField
+                    control={form.control}
+                    name="paymentAmount"
+                    render={({ field }) => (
+                      <FormItem className="md:col-span-2">
+                        <FormLabel>Payment Amount</FormLabel>
                         <FormControl>
-                          <SelectTrigger>
-                            <SelectValue />
-                          </SelectTrigger>
+                          <Input
+                            type="number"
+                            placeholder="24000"
+                            {...field}
+                            onChange={event => {
+                              field.onChange(
+                                event?.target.value ? Number(event?.target.value) : undefined,
+                              );
+                            }}
+                          />
                         </FormControl>
-                        <SelectContent>
-                          {Object.values(Currency).map(currency => (
-                            <SelectItem key={currency} value={currency}>
-                              {currency}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="paymentCurrency"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Currency</FormLabel>
+                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {Object.values(Currency).map(currency => (
+                              <SelectItem key={currency} value={currency}>
+                                {currency}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    control={form.control}
+                    name="productType"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Product Type</FormLabel>
+                        <FormControl>
+                          <Input placeholder="Cloud Services" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="billingCycle"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Billing Cycle</FormLabel>
+                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {Object.values(BillingCycle).map(cycle => (
+                              <SelectItem key={cycle} value={cycle}>
+                                {standardBillingCycle(cycle)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <FormField
+                    control={form.control}
+                    name="subscriptionPlan"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Subscription Plan</FormLabel>
+                        <FormControl>
+                          <Select onValueChange={field.onChange} defaultValue={field.value}>
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {Object.values(SubscriptionPlan).map(plan => (
+                                <SelectItem key={plan} value={plan}>
+                                  {standardPlan(plan)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="isActive"
+                    render={({ field }) => (
+                      <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                        <div className="space-y-0.5">
+                          <FormLabel className="text-base">Active Status</FormLabel>
+                        </div>
+                        <FormControl>
+                          <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </div>
 
-              <div className="grid gap-4 md:grid-cols-2">
                 <FormField
                   control={form.control}
-                  name="productType"
+                  name="msCloudLink"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Product Type</FormLabel>
+                      <FormLabel>MS Cloud Link</FormLabel>
                       <FormControl>
-                        <Input placeholder="Cloud Services" {...field} />
+                        <Input
+                          type="url"
+                          placeholder="https://portal.azure.com/contract-id"
+                          {...field}
+                        />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
+
                 <FormField
                   control={form.control}
-                  name="billingCycle"
+                  name="defaultDocumentType"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Billing Cycle</FormLabel>
+                      <FormLabel>Default Document Type</FormLabel>
                       <Select onValueChange={field.onChange} defaultValue={field.value}>
                         <FormControl>
                           <SelectTrigger>
@@ -387,9 +555,9 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                          {Object.values(BillingCycle).map(cycle => (
-                            <SelectItem key={cycle} value={cycle}>
-                              {standardBillingCycle(cycle)}
+                          {Object.values(DocumentType).map(type => (
+                            <SelectItem key={type} value={type}>
+                              {getDocumentNameFromType(type)}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -398,122 +566,36 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
                     </FormItem>
                   )}
                 />
-              </div>
 
-              <div className="grid gap-4 md:grid-cols-2">
                 <FormField
                   control={form.control}
-                  name="subscriptionPlan"
+                  name="defaultRemark"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Subscription Plan</FormLabel>
+                      <FormLabel>Default Remark</FormLabel>
                       <FormControl>
-                        <Select onValueChange={field.onChange} defaultValue={field.value}>
-                          <FormControl>
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            {Object.values(SubscriptionPlan).map(plan => (
-                              <SelectItem key={plan} value={plan}>
-                                {standardPlan(plan)}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
+                        <Textarea
+                          placeholder="Enter default remark for this contract..."
+                          rows={3}
+                          {...field}
+                        />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
-                <FormField
-                  control={form.control}
-                  name="isActive"
-                  render={({ field }) => (
-                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                      <div className="space-y-0.5">
-                        <FormLabel className="text-base">Active Status</FormLabel>
-                      </div>
-                      <FormControl>
-                        <Switch checked={field.value} onCheckedChange={field.onChange} />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
               </div>
-
-              <FormField
-                control={form.control}
-                name="msCloudLink"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>MS Cloud Link</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="url"
-                        placeholder="https://portal.azure.com/contract-id"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="defaultDocumentType"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Default Document Type</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {Object.values(DocumentType).map(type => (
-                          <SelectItem key={type} value={type}>
-                            {getDocumentNameFromType(type)}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="defaultRemark"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Default Remark</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Enter default remark for this contract..."
-                        rows={3}
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={creating || updating}>
-                {editingContract ? 'Update Contract' : 'Create Contract'}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
+              <DialogFooter>
+                <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={creating || updating}>
+                  {editingContract ? 'Update Contract' : 'Create Contract'}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        )}
       </DialogContent>
     </Dialog>
   );