@accounter/client 0.0.8-alpha-20251030162303-87017b2c2addf0e61478260aac336b9343f15c98 → 0.0.8-alpha-20251031025517-bd142395bc1d7267ab00d6b53b116062b581b7d8

package/src/components/business/admin-business-section.tsx

@@ -2,8 +2,9 @@
 
 import type React from 'react';
 import { useEffect, useState } from 'react';
-import { Save, Shield } from 'lucide-react';
-import { useForm } from 'react-hook-form';
+import { format } from 'date-fns';
+import { Plus, Save, Shield, X } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { Button } from '@/components/ui/button.js';
 import {
@@ -38,6 +39,7 @@ import {
 } from '@/helpers/index.js';
 import { useUpdateAdminBusiness } from '@/hooks/use-update-admin-business.js';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Label } from '../ui/label';
 import { Separator } from '../ui/separator';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -47,59 +49,81 @@ import { Separator } from '../ui/separator';
     ... on LtdFinancialEntity {
       adminInfo {
         id
-        withholdingTaxBookNumber
-        withholdingTaxFileNumber
-        socialSecurityEmployerId
-        taxAdvancesRate
-        taxAdvancesId
         registrationDate
+        withholdingTaxAnnualIds {
+          id
+          year
+        }
+        withholdingTaxCompanyId
+        socialSecurityEmployerIds {
+          id
+          year
+        }
+        socialSecurityDeductionsId
+        taxAdvancesAnnualIds {
+          id
+          year
+        }
+        taxAdvancesRates {
+          date
+          rate
+        }
       }
     }
   }
 `;
 
+const annualIdSchema = z.object({
+  year: z.number().min(2000).max(2100),
+  id: z.string().min(1, { message: 'ID is required' }),
+});
+
 const adminBusinessFormSchema = z.object({
-  withholdingTaxBookNumber: z.string().min(1, {
-    message: 'Withholding Tax Book Number is required',
-  }),
-  withholdingTaxFileNumber: z.string().min(1, {
-    message: 'Withholding Tax File Number is required',
-  }),
-  socialSecurityEmployerId: z.string().min(1, {
-    message: 'National Insurance Employer ID is required',
-  }),
-  taxAdvancesRate: z
-    .number()
-    .min(0, {
-      message: 'Advance Tax Rate must be at least 0',
-    })
-    .max(100, {
-      message: 'Advance Tax Rate must be at most 100',
-    }),
-  taxAdvancesId: z.string().min(1, {
-    message: 'Tax Advances ID is required',
-  }),
   registrationDate: z.string().min(1, {
     message: 'Business Registration Start Date is required',
   }),
+  withholdingTaxAnnualIds: z.array(annualIdSchema),
+  withholdingTaxCompanyId: z.string().min(1, { message: 'Withholding Tax Company ID is required' }),
+  socialSecurityEmployerIds: z.array(annualIdSchema),
+  socialSecurityDeductionsId: z
+    .string()
+    .min(1, { message: 'Social Security Deductions ID is required' }),
+  taxAdvancesAnnualIds: z.array(annualIdSchema),
+  taxAdvancesRates: z.array(
+    z.object({
+      date: z.iso.date(),
+      rate: z
+        .number()
+        .min(0, { message: 'Rate must be at least 0' })
+        .max(100, { message: 'Rate must be at most 100' }),
+    }),
+  ),
 });
 
 type AdminBusinessFormValues = z.infer<typeof adminBusinessFormSchema>;
 
 function BusinessAdminSectionFragmentToFormValues(
   admin?: BusinessAdminSectionFragment,
-): AdminBusinessFormValues {
+): Partial<AdminBusinessFormValues> {
   if (!admin || admin.__typename !== 'LtdFinancialEntity' || !admin.adminInfo) {
-    return {} as AdminBusinessFormValues;
+    return {};
   }
 
   return {
-    withholdingTaxBookNumber: admin.adminInfo.withholdingTaxBookNumber ?? '',
-    withholdingTaxFileNumber: admin.adminInfo.withholdingTaxFileNumber ?? '',
-    socialSecurityEmployerId: admin.adminInfo.socialSecurityEmployerId ?? '',
-    taxAdvancesRate: admin.adminInfo.taxAdvancesRate ?? 0,
-    taxAdvancesId: admin.adminInfo.taxAdvancesId ?? '',
-    registrationDate: admin.adminInfo.registrationDate ?? '',
+    registrationDate: admin.adminInfo.registrationDate,
+    withholdingTaxAnnualIds: admin.adminInfo.withholdingTaxAnnualIds.sort(
+      (a, b) => b.year - a.year,
+    ),
+    withholdingTaxCompanyId: admin.adminInfo.withholdingTaxCompanyId ?? undefined,
+    socialSecurityEmployerIds: admin.adminInfo.socialSecurityEmployerIds.sort(
+      (a, b) => b.year - a.year,
+    ),
+    socialSecurityDeductionsId: admin.adminInfo.socialSecurityDeductionsId ?? undefined,
+    taxAdvancesAnnualIds: admin.adminInfo.taxAdvancesAnnualIds.sort((a, b) => b.year - a.year),
+    taxAdvancesRates: admin.adminInfo.taxAdvancesRates?.map(rate => ({
+      date: rate.date,
+      rate: rate.rate * 100,
+    })),
   };
 }
 
@@ -107,14 +131,17 @@ function convertFormDataToUpdateAdminBusinessInput(
   formData: Partial<AdminBusinessFormValues>,
 ): UpdateAdminBusinessInput {
   return {
-    withholdingTaxBookNumber: formData.withholdingTaxBookNumber,
-    withholdingTaxFileNumber: formData.withholdingTaxFileNumber,
-    socialSecurityEmployerId: formData.socialSecurityEmployerId,
-    taxAdvancesRate: formData.taxAdvancesRate,
-    taxAdvancesId: formData.taxAdvancesId,
     registrationDate: formData.registrationDate
-      ? (formatTimelessDateString(new Date(formData.registrationDate)) as TimelessDateString)
+      ? formatTimelessDateString(new Date(formData.registrationDate))
       : undefined,
+    withholdingTaxAnnualIds: formData.withholdingTaxAnnualIds,
+    withholdingTaxCompanyId: formData.withholdingTaxCompanyId,
+    socialSecurityEmployerIds: formData.socialSecurityEmployerIds,
+    taxAdvancesRates: formData.taxAdvancesRates?.map(rate => ({
+      date: rate.date,
+      rate: rate.rate / 100,
+    })) as { date: TimelessDateString; rate: number }[] | undefined,
+    taxAdvancesAnnualIds: formData.taxAdvancesAnnualIds,
   };
 }
 
@@ -166,6 +193,58 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
     }
   }, [admin, form]);
 
+  // Make taxAdvancesAnnualIds a controlled field array using RHF's useFieldArray
+  const {
+    fields: taxAdvancesFields,
+    append: appendTaxAdvances,
+    remove: removeTaxAdvances,
+  } = useFieldArray({ control: form.control, name: 'taxAdvancesAnnualIds' as const });
+
+  // Make withholdingTaxAnnualIds a controlled field array using RHF's useFieldArray
+  const {
+    fields: withholdingTaxFields,
+    append: appendWithholdingTax,
+    remove: removeWithholdingTax,
+  } = useFieldArray({ control: form.control, name: 'withholdingTaxAnnualIds' as const });
+
+  // Make socialSecurityEmployerIds a controlled field array using RHF's useFieldArray
+  const {
+    fields: socialSecurityFields,
+    append: appendSocialSecurity,
+    remove: removeSocialSecurity,
+  } = useFieldArray({ control: form.control, name: 'socialSecurityEmployerIds' as const });
+
+  const annualIdActions = {
+    withholdingTaxAnnualIds: { append: appendWithholdingTax, remove: removeWithholdingTax },
+    taxAdvancesAnnualIds: { append: appendTaxAdvances, remove: removeTaxAdvances },
+    socialSecurityEmployerIds: { append: appendSocialSecurity, remove: removeSocialSecurity },
+  };
+
+  type AnnualIdField = keyof typeof annualIdActions;
+
+  const addAnnualId = (field: AnnualIdField) => {
+    annualIdActions[field].append({ year: new Date().getFullYear(), id: '' });
+  };
+
+  const removeAnnualId = (field: AnnualIdField, index: number): void => {
+    annualIdActions[field].remove(index);
+  };
+
+  // Make taxAdvancesRates a controlled field array using RHF's useFieldArray
+  const {
+    fields: taxAdvancesRateFields,
+    append: appendTaxAdvancesRate,
+    remove: removeTaxAdvancesRate,
+  } = useFieldArray({ control: form.control, name: 'taxAdvancesRates' as const });
+
+  const addRate = () => {
+    appendTaxAdvancesRate({ date: format(new Date(), 'yyyy-MM-dd'), rate: 0 });
+  };
+
+  const removeRate = (index: number): void => {
+    removeTaxAdvancesRate(index);
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -187,13 +266,13 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
 
               <FormField
                 control={form.control}
-                name="withholdingTaxBookNumber"
+                name="withholdingTaxCompanyId"
                 render={({ field, fieldState }) => (
                   <FormItem>
-                    <FormLabel>Book Number</FormLabel>
+                    <FormLabel>Company Tax ID</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Enter book number"
+                        placeholder="Enter company ID"
                         {...field}
                         className={dirtyFieldMarker(fieldState)}
                       />
@@ -203,67 +282,127 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
                 )}
               />
 
-              <FormField
-                control={form.control}
-                name="withholdingTaxFileNumber"
-                render={({ field, fieldState }) => (
-                  <FormItem>
-                    <FormLabel>File Number</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Enter file number"
-                        {...field}
-                        className={dirtyFieldMarker(fieldState)}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <Label>Annual IDs</Label>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => addAnnualId('withholdingTaxAnnualIds')}
+                  >
+                    <Plus className="size-4" />
+                  </Button>
+                </div>
+                <div className="space-y-3">
+                  {withholdingTaxFields.map((field, index) => (
+                    <div key={field.id} className="flex gap-2 items-start">
+                      <div className="flex-1 grid grid-cols-2 gap-2">
+                        <Input
+                          placeholder="Year"
+                          type="number"
+                          {...form.register(`withholdingTaxAnnualIds.${index}.year`, {
+                            valueAsNumber: true,
+                          })}
+                        />
+                        <Input
+                          placeholder="ID"
+                          {...form.register(`withholdingTaxAnnualIds.${index}.id`)}
+                        />
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removeAnnualId('withholdingTaxAnnualIds', index)}
+                      >
+                        <X className="size-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
 
               <Separator className="md:col-span-2" />
 
               <h3 className="text-sm font-semibold text-foreground md:col-span-2">Tax Advances</h3>
 
-              <FormField
-                control={form.control}
-                name="taxAdvancesId"
-                render={({ field, fieldState }) => (
-                  <FormItem>
-                    <FormLabel>Identification number</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Enter tax advances ID"
-                        {...field}
-                        className={dirtyFieldMarker(fieldState)}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <Label>Annual IDs</Label>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => addAnnualId('taxAdvancesAnnualIds')}
+                  >
+                    <Plus className="size-4" />
+                  </Button>
+                </div>
+                <div className="space-y-3">
+                  {taxAdvancesFields.map((field, index) => (
+                    <div key={field.id} className="flex gap-2 items-start">
+                      <div className="flex-1 grid grid-cols-2 gap-2">
+                        <Input
+                          placeholder="Year"
+                          type="number"
+                          {...form.register(`taxAdvancesAnnualIds.${index}.year`, {
+                            valueAsNumber: true,
+                          })}
+                        />
+                        <Input
+                          placeholder="ID"
+                          {...form.register(`taxAdvancesAnnualIds.${index}.id`)}
+                        />
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removeAnnualId('taxAdvancesAnnualIds', index)}
+                      >
+                        <X className="size-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
 
-              <FormField
-                control={form.control}
-                name="taxAdvancesRate"
-                render={({ field, fieldState }) => (
-                  <FormItem>
-                    <FormLabel>Tax Rate (%)</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="number"
-                        step="0.01"
-                        min="0"
-                        max="100"
-                        placeholder="Enter tax rate"
-                        {...field}
-                        className={dirtyFieldMarker(fieldState)}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <Label>Rates (%)</Label>
+                  <Button type="button" variant="outline" size="sm" onClick={addRate}>
+                    <Plus className="size-4" />
+                  </Button>
+                </div>
+                <div className="space-y-3">
+                  {taxAdvancesRateFields.map((field, index) => (
+                    <div key={field.id} className="flex gap-2 items-start">
+                      <div className="flex-1 grid grid-cols-2 gap-2">
+                        <Input
+                          placeholder="Date"
+                          type="date"
+                          {...form.register(`taxAdvancesRates.${index}.date`)}
+                        />
+                        <Input
+                          placeholder="Rate"
+                          {...form.register(`taxAdvancesRates.${index}.rate`, {
+                            valueAsNumber: true,
+                          })}
+                        />
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removeRate(index)}
+                      >
+                        <X className="size-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
 
               <Separator className="md:col-span-2" />
 
@@ -271,16 +410,15 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
                 Social Security
               </h3>
 
-              {/* Social Security Employer ID */}
               <FormField
                 control={form.control}
-                name="socialSecurityEmployerId"
+                name="socialSecurityDeductionsId"
                 render={({ field, fieldState }) => (
                   <FormItem>
-                    <FormLabel>Employer Identifier</FormLabel>
+                    <FormLabel>Deductions ID</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Enter employer ID"
+                        placeholder="Enter deductions ID"
                         {...field}
                         className={dirtyFieldMarker(fieldState)}
                       />
@@ -290,6 +428,47 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
                 )}
               />
 
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <Label>Annual Employer IDs</Label>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => addAnnualId('socialSecurityEmployerIds')}
+                  >
+                    <Plus className="size-4" />
+                  </Button>
+                </div>
+                <div className="space-y-3">
+                  {socialSecurityFields.map((field, index) => (
+                    <div key={field.id} className="flex gap-2 items-start">
+                      <div className="flex-1 grid grid-cols-2 gap-2">
+                        <Input
+                          placeholder="Year"
+                          type="number"
+                          {...form.register(`socialSecurityEmployerIds.${index}.year`, {
+                            valueAsNumber: true,
+                          })}
+                        />
+                        <Input
+                          placeholder="ID"
+                          {...form.register(`socialSecurityEmployerIds.${index}.id`)}
+                        />
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removeAnnualId('socialSecurityEmployerIds', index)}
+                      >
+                        <X className="size-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
               <Separator className="md:col-span-2" />
 
               {/* Business Registration Start Date */}

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

@@ -130,7 +130,7 @@ export function ModifyContractDialog({ clientId, contract, contractId, onDone }:
   const { createContract, creating } = useCreateContract();
 
   // Only fetch if we don't have loader data
-  const [{ data: fetchedContractData, fetching }, fetchContract] = useQuery({
+  const [{ data: fetchedContractData, fetching }] = useQuery({
     query: ContractsEditModalDocument,
     pause: !contractId || !isDialogOpen,
     variables: {
@@ -138,12 +138,6 @@ export function ModifyContractDialog({ clientId, contract, contractId, onDone }:
     },
   });
 
-  useEffect(() => {
-    if (isDialogOpen && contractId) {
-      fetchContract();
-    }
-  }, [isDialogOpen, contractId, fetchContract]);
-
   const form = useForm<ContractFormValues>({
     resolver: zodResolver(contractFormSchema),
     defaultValues: contract || newContractDefaultValues,

package/src/components/contracts/cells/date.tsx

@@ -6,5 +6,9 @@ type Props = {
 };
 
 export const DateCell = ({ timelessDate }: Props): ReactElement => {
-  return <p className="text-sm font-medium">{new Date(timelessDate).toLocaleDateString()}</p>;
+  return (
+    <p className="text-sm font-medium">
+      {new Date(timelessDate).toLocaleDateString(undefined, { timeZone: 'UTC' })}
+    </p>
+  );
 };

package/src/components/contracts/columns.tsx

@@ -123,7 +123,7 @@ export const columns: ColumnDef<ContractRow>[] = [
       <div className="flex flex-row gap-1 items-center">
         {row.original.msCloud && (
           <Link to={row.original.msCloud} target="_blank" rel="noreferrer" className="size-8">
-            <Button variant="link" size="sm" disabled>
+            <Button variant="link" size="sm">
               <LinkIcon className="size-4" />
             </Button>
           </Link>

package/src/components/contracts/contracts-filter.tsx

@@ -47,7 +47,7 @@ export function ContractsFilter({ table }: Props) {
               <Label>Product Type</Label>
               <Select
                 onValueChange={value =>
-                  table.getColumn('product')?.setFilterValue(value === 'NULL' ? '' : value)
+                  table.getColumn('product')?.setFilterValue(value === 'NULL' ? undefined : value)
                 }
                 value={table.getColumn('product')?.getFilterValue() as Product | ''}
               >
@@ -70,7 +70,9 @@ export function ContractsFilter({ table }: Props) {
               <Label>Billing Cycle</Label>
               <Select
                 onValueChange={value =>
-                  table.getColumn('billingCycle')?.setFilterValue(value === 'NULL' ? '' : value)
+                  table
+                    .getColumn('billingCycle')
+                    ?.setFilterValue(value === 'NULL' ? undefined : value)
                 }
                 value={table.getColumn('billingCycle')?.getFilterValue() as BillingCycle | ''}
               >
@@ -96,7 +98,7 @@ export function ContractsFilter({ table }: Props) {
               <Label>Subscription Plan</Label>
               <Select
                 onValueChange={value =>
-                  table.getColumn('plan')?.setFilterValue(value === 'NULL' ? '' : value)
+                  table.getColumn('plan')?.setFilterValue(value === 'NULL' ? undefined : value)
                 }
                 value={table.getColumn('plan')?.getFilterValue() as SubscriptionPlan | ''}
               >
@@ -122,7 +124,9 @@ export function ContractsFilter({ table }: Props) {
                 onValueChange={value =>
                   table
                     .getColumn('isActive')
-                    ?.setFilterValue(value === 'NULL' ? '' : value === 'active' ? true : false)
+                    ?.setFilterValue(
+                      value === 'NULL' ? undefined : value === 'active' ? true : false,
+                    )
                 }
                 value={convertBooleanToString(
                   table.getColumn('isActive')?.getFilterValue() as boolean | undefined,
@@ -140,11 +144,6 @@ export function ContractsFilter({ table }: Props) {
                 </SelectContent>
               </Select>
             </div>
-
-            {/* <div>
-              <FormLabel className="text-base">Active Status</FormLabel>
-              <Switch checked={field.value} onCheckedChange={field.onChange} />
-            </div> */}
           </div>
         </div>
       </DialogContent>

package/src/components/contracts/index.tsx

@@ -163,7 +163,6 @@ export const ContractsTable = ({ data }: Props): ReactElement => {
   });
 
   useEffect(() => {
-    console.log('Row selection changed:', rowSelection);
     const selectedIndexes = Object.entries(rowSelection)
       .filter(([, value]) => !!value)
       .map(([key]) => Number(key));

package/src/components/contracts/issue-documents-modal.tsx

@@ -113,7 +113,7 @@ export const IssueDocumentsModal = ({ contractIds }: Props): ReactElement => {
       return {
         ...field,
         ...watchFieldArray[index],
-        id: field.client?.id,
+        id: field.id,
       };
     });
   }, [fields, watchFieldArray]);
@@ -127,8 +127,10 @@ export const IssueDocumentsModal = ({ contractIds }: Props): ReactElement => {
       </DialogTrigger>
       <DialogContent className="min-w-[90vw] w-full max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Filter Contracts</DialogTitle>
-          <DialogDescription>Filter contracts based on various criteria</DialogDescription>
+          <DialogTitle>Issue Documents for Contracts</DialogTitle>
+          <DialogDescription>
+            Review and issue monthly documents for the selected contracts
+          </DialogDescription>
         </DialogHeader>
         {fetching ? (
           <AccounterLoader />

package/src/components/screens/businesses/clients/contracts/contracts.tsx

@@ -30,7 +30,7 @@ export const ContractsScreen = (): ReactElement => {
   }
 
   // Only fetch if we don't have loader data
-  const [{ data, fetching }, fetchContracts] = useQuery({
+  const [{ data, fetching }] = useQuery({
     query: ContractsScreenDocument,
     pause: !adminId || !!loaderData,
     variables: {
@@ -50,7 +50,5 @@ export const ContractsScreen = (): ReactElement => {
     return <div>Contracts not found</div>;
   }
 
-  return (
-    <ContractsTable data={contractsData.contractsByAdmin} onChange={async () => fetchContracts()} />
-  );
+  return <ContractsTable data={contractsData.contractsByAdmin} />;
 };