@accounter/client 0.0.7-alpha-20251020201456-275b6a9424e58d4d2c7e9099986230d087ccd6cd → 0.0.8-alpha-20251021150028-9eb73ba6576d67c75a60786d0e4ab0876fd7a95c

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

@@ -1,426 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Plus } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { Button } from '@/components/ui/button.js';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog.js';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} 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 { getDocumentNameFromType, standardBillingCycle, standardPlan } from '@/helpers/index.js';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-const contractFormSchema = z.object({
-  id: z.uuid().optional(),
-  operationsLimit: z.number().min(1, 'Operations limit must be at least 1'),
-  startDate: z.iso.datetime('Start date is required'),
-  endDate: z.iso.datetime('End date is required'),
-  po: z.string().optional(),
-  paymentAmount: z.number().min(0, 'Payment amount must be non-negative'),
-  paymentCurrency: z.enum(Object.values(Currency), 'Currency is required'),
-  productType: z.enum(Object.values(Product)).optional(),
-  signedAgreementLink: z.url().optional().or(z.literal('')),
-  msCloudLink: z.url().optional().or(z.literal('')),
-  billingCycle: z.enum(Object.values(BillingCycle)).optional(),
-  subscriptionPlan: z.enum(Object.values(SubscriptionPlan)).optional(),
-  isActive: z.boolean(),
-  defaultRemark: z.string().optional(),
-  defaultDocumentType: z.enum(Object.values(DocumentType)),
-});
-
-export type ContractFormValues = z.infer<typeof contractFormSchema>;
-
-const newContractDefaultValues: ContractFormValues = {
-  operationsLimit: 0,
-  startDate: '',
-  endDate: '',
-  po: '',
-  paymentAmount: 0,
-  paymentCurrency: Currency.Usd,
-  productType: Product.Hive,
-  signedAgreementLink: '',
-  msCloudLink: '',
-  billingCycle: BillingCycle.Monthly,
-  subscriptionPlan: undefined,
-  isActive: true,
-  defaultRemark: undefined,
-  defaultDocumentType: DocumentType.Proforma,
-};
-
-interface Props {
-  contract?: ContractFormValues | null;
-  onDone?: () => void;
-}
-
-export function ModifyContractDialog({ contract, onDone }: Props) {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [editingContract, setEditingContract] = useState<ContractFormValues | null>(null);
-
-  const form = useForm<ContractFormValues>({
-    resolver: zodResolver(contractFormSchema),
-    defaultValues: contract || newContractDefaultValues,
-  });
-
-  useEffect(() => {
-    if (contract) {
-      setEditingContract(contract);
-      form.reset({
-        operationsLimit: contract.operationsLimit,
-        startDate: contract.startDate,
-        endDate: contract.endDate,
-        po: contract.po,
-        paymentAmount: contract.paymentAmount,
-        paymentCurrency: contract.paymentCurrency,
-        productType: contract.productType,
-        signedAgreementLink: contract.signedAgreementLink,
-        msCloudLink: contract.msCloudLink,
-        billingCycle: contract.billingCycle,
-        subscriptionPlan: contract.subscriptionPlan,
-        isActive: contract.isActive,
-        defaultRemark: contract.defaultRemark,
-        defaultDocumentType: contract.defaultDocumentType,
-      });
-      setIsDialogOpen(true);
-    }
-  }, [contract, form]);
-
-  const handleNew = () => {
-    setEditingContract(null);
-    form.reset(newContractDefaultValues);
-    setIsDialogOpen(true);
-  };
-
-  const onSubmit = useCallback(
-    async (values: ContractFormValues) => {
-      if (editingContract) {
-        console.log('[v0] Updating contract:', editingContract.id, values);
-        // TODO: Handle contract update
-      } else {
-        console.log('[v0] Creating new contract:', values);
-        // TODO: Handle contract creation
-      }
-      setIsDialogOpen(false);
-      setEditingContract(null);
-      onDone?.();
-    },
-    [editingContract, onDone],
-  );
-
-  return (
-    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <DialogTrigger asChild>
-        <Button size="sm" onClick={handleNew}>
-          <Plus className="h-4 w-4 mr-2" />
-          New Contract
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>{editingContract ? 'Edit Contract' : 'Create New Contract'}</DialogTitle>
-          <DialogDescription>
-            {editingContract
-              ? 'Update contract details'
-              : '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="po"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>PO Number</FormLabel>
-                      <FormControl>
-                        <Input placeholder="PO-2024-001" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <div className="grid gap-4 md:grid-cols-2">
-                <FormField
-                  control={form.control}
-                  name="startDate"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Start Date</FormLabel>
-                      <FormControl>
-                        <Input type="date" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="endDate"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>End Date</FormLabel>
-                      <FormControl>
-                        <Input type="date" {...field} />
-                      </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} />
-                      </FormControl>
-                      <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>
-
-              <FormField
-                control={form.control}
-                name="signedAgreementLink"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Signed Agreement Link</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="url"
-                        placeholder="https://example.com/agreements/contract.pdf"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <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">
-                {editingContract ? 'Update Contract' : 'Create Contract'}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/clients/modify-client-dialog.tsx

@@ -1,276 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Plus, X } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { Button } from '@/components/ui/button.js';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog.js';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select.js';
-import { DocumentType } from '@/gql/graphql.js';
-import { getDocumentNameFromType } from '@/helpers/index.js';
-import { useInsertClient } from '@/hooks/use-insert-client.js';
-import { useUpdateClient } from '@/hooks/use-update-client.js';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Badge } from '../ui/badge';
-
-const clientFormSchema = z.object({
-  id: z.uuid().optional(),
-  emails: z.array(z.email()).optional(),
-  generatedDocumentType: z.enum(Object.values(DocumentType)),
-  greenInvoiceId: z.uuid().optional(),
-  hiveId: z.string().optional(),
-});
-
-export type ClientFormValues = z.infer<typeof clientFormSchema>;
-
-interface Props {
-  businessId: string;
-  client?: ClientFormValues | null;
-  onDone?: () => void;
-}
-
-export function ModifyClientDialog({ client, businessId, onDone }: Props) {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [editingClient, setEditingClient] = useState<ClientFormValues | null>(null);
-
-  const { updateClient } = useUpdateClient();
-  const { insertClient } = useInsertClient();
-
-  const [newEmail, setNewEmail] = useState('');
-
-  const newClientDefaultValues: ClientFormValues = {
-    id: businessId,
-    generatedDocumentType: DocumentType.Proforma,
-    emails: [],
-  };
-
-  const form = useForm<ClientFormValues>({
-    resolver: zodResolver(clientFormSchema),
-    defaultValues: client || newClientDefaultValues,
-  });
-
-  useEffect(() => {
-    if (client) {
-      setEditingClient(client);
-      form.reset({
-        emails: client.emails,
-        greenInvoiceId: client.greenInvoiceId,
-        hiveId: client.hiveId,
-        generatedDocumentType: client.generatedDocumentType,
-        id: client.id,
-      });
-      setIsDialogOpen(true);
-    }
-  }, [client, form]);
-
-  const handleNew = () => {
-    setEditingClient(null);
-    form.reset(newClientDefaultValues);
-    setIsDialogOpen(true);
-  };
-
-  const addEmail = () => {
-    if (newEmail.trim()) {
-      const currentEmails = form.getValues('emails');
-      form.setValue('emails', [...(currentEmails ?? []), newEmail.trim()], { shouldDirty: true });
-      setNewEmail('');
-    }
-  };
-
-  const removeEmail = (index: number) => {
-    const currentEmails = form.getValues('emails');
-    form.setValue(
-      'emails',
-      (currentEmails ?? []).filter((_, i) => i !== index),
-      { shouldDirty: true },
-    );
-  };
-
-  const onSubmit = useCallback(
-    async (values: ClientFormValues) => {
-      if (editingClient) {
-        console.log('[v0] Updating client:', editingClient.id, values);
-        updateClient({
-          businessId,
-          fields: values,
-        });
-      } else {
-        if (!values.greenInvoiceId) {
-          form.setError('greenInvoiceId', { message: 'Green Invoice ID is required' });
-          return;
-        }
-        console.log('[v0] Creating new client:', values);
-        insertClient({
-          fields: {
-            ...values,
-            greenInvoiceId: values.greenInvoiceId!,
-            businessId,
-          },
-        });
-      }
-      setIsDialogOpen(false);
-      setEditingClient(null);
-      onDone?.();
-    },
-    [editingClient, onDone, updateClient, businessId, insertClient, form],
-  );
-
-  return (
-    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <DialogTrigger asChild>
-        <Button size="sm" onClick={handleNew}>
-          <Plus className="h-4 w-4 mr-2" />
-          New Client
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>{editingClient ? 'Edit Client' : 'Create New Client'}</DialogTitle>
-          <DialogDescription>
-            {editingClient ? 'Update client details' : 'Add a new client 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="emails"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Emails</FormLabel>
-                      <div className="flex gap-2">
-                        <Input
-                          placeholder="Add email..."
-                          value={newEmail}
-                          onChange={e => setNewEmail(e.target.value)}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter') {
-                              e.preventDefault();
-                              addEmail();
-                            }
-                          }}
-                        />
-                        <Button type="button" size="sm" onClick={addEmail}>
-                          <Plus className="h-4 w-4" />
-                        </Button>
-                      </div>
-                      <div className="flex flex-wrap gap-2">
-                        {field.value?.map((email, index) => (
-                          <Badge key={index} variant="secondary" className="gap-1">
-                            {email}
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="p-0 size-3"
-                              onClick={() => removeEmail(index)}
-                            >
-                              <X className="size-3 cursor-pointer" />
-                            </Button>
-                          </Badge>
-                        ))}
-                      </div>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="generatedDocumentType"
-                  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="greenInvoiceId"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Green Invoice ID</FormLabel>
-                      <FormControl>
-                        <Input
-                          type="text"
-                          placeholder="Enter Green Invoice ID"
-                          {...field}
-                          required={!editingClient}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="hiveId"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Hive ID</FormLabel>
-                      <FormControl>
-                        <Input
-                          type="text"
-                          placeholder="Enter Hive ID"
-                          {...field}
-                          required={!editingClient}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-            </div>
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
-                Cancel
-              </Button>
-              <Button type="submit">{editingClient ? 'Update Client' : 'Create Client'}</Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}