@accounter/client 0.0.8-alpha-20251029232510-4bc0c8b8c08a26f0c27788725ae584e515236d20 → 0.0.8-alpha-20251029233659-8fb74309c9f1de4f20423db029c5740e2df4bb5d

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

@@ -2,9 +2,8 @@
 
 import type React from 'react';
 import { useEffect, useState } from 'react';
-import { format } from 'date-fns';
-import { Plus, Save, Shield, X } from 'lucide-react';
-import { useFieldArray, useForm } from 'react-hook-form';
+import { Save, Shield } from 'lucide-react';
+import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { Button } from '@/components/ui/button.js';
 import {
@@ -39,7 +38,6 @@ 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
@@ -49,81 +47,59 @@ 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,
-): Partial<AdminBusinessFormValues> {
+): AdminBusinessFormValues {
   if (!admin || admin.__typename !== 'LtdFinancialEntity' || !admin.adminInfo) {
-    return {};
+    return {} as AdminBusinessFormValues;
   }
 
   return {
-    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,
-    })),
+    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 ?? '',
   };
 }
 
@@ -131,17 +107,14 @@ 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))
+      ? (formatTimelessDateString(new Date(formData.registrationDate)) as TimelessDateString)
       : undefined,
-    withholdingTaxAnnualIds: formData.withholdingTaxAnnualIds,
-    withholdingTaxCompanyId: formData.withholdingTaxCompanyId,
-    socialSecurityEmployerIds: formData.socialSecurityEmployerIds,
-    socialSecurityDeductionsId: formData.socialSecurityDeductionsId,
-    taxAdvancesRates: formData.taxAdvancesRates as
-      | { date: TimelessDateString; rate: number }[]
-      | undefined,
-    taxAdvancesAnnualIds: formData.taxAdvancesAnnualIds,
   };
 }
 
@@ -193,75 +166,6 @@ 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 addAnnualId = (
-    field: 'withholdingTaxAnnualIds' | 'taxAdvancesAnnualIds' | 'socialSecurityEmployerIds',
-  ) => {
-    switch (field) {
-      case 'withholdingTaxAnnualIds':
-        appendWithholdingTax({ year: new Date().getFullYear(), id: '' });
-        break;
-      case 'taxAdvancesAnnualIds':
-        appendTaxAdvances({ year: new Date().getFullYear(), id: '' });
-        break;
-      case 'socialSecurityEmployerIds':
-        appendSocialSecurity({ year: new Date().getFullYear(), id: '' });
-        break;
-    }
-  };
-
-  const removeAnnualId = (
-    field: 'withholdingTaxAnnualIds' | 'taxAdvancesAnnualIds' | 'socialSecurityEmployerIds',
-    index: number,
-  ): void => {
-    switch (field) {
-      case 'withholdingTaxAnnualIds':
-        removeWithholdingTax(index);
-        break;
-      case 'taxAdvancesAnnualIds':
-        removeTaxAdvances(index);
-        break;
-      case 'socialSecurityEmployerIds':
-        removeSocialSecurity(index);
-        break;
-    }
-  };
-
-  // 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>
@@ -283,13 +187,13 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
 
               <FormField
                 control={form.control}
-                name="withholdingTaxCompanyId"
+                name="withholdingTaxBookNumber"
                 render={({ field, fieldState }) => (
                   <FormItem>
-                    <FormLabel>Company Tax ID</FormLabel>
+                    <FormLabel>Book Number</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Enter company ID"
+                        placeholder="Enter book number"
                         {...field}
                         className={dirtyFieldMarker(fieldState)}
                       />
@@ -299,127 +203,67 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
                 )}
               />
 
-              <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>
+              <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>
+                )}
+              />
 
               <Separator className="md:col-span-2" />
 
               <h3 className="text-sm font-semibold text-foreground md:col-span-2">Tax Advances</h3>
 
-              <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="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>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>
+              <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>
+                )}
+              />
 
               <Separator className="md:col-span-2" />
 
@@ -427,15 +271,16 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
                 Social Security
               </h3>
 
+              {/* Social Security Employer ID */}
               <FormField
                 control={form.control}
-                name="socialSecurityDeductionsId"
+                name="socialSecurityEmployerId"
                 render={({ field, fieldState }) => (
                   <FormItem>
-                    <FormLabel>Deductions ID</FormLabel>
+                    <FormLabel>Employer Identifier</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Enter deductions ID"
+                        placeholder="Enter employer ID"
                         {...field}
                         className={dirtyFieldMarker(fieldState)}
                       />
@@ -445,47 +290,6 @@ 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/business/index.tsx

@@ -1,12 +1,10 @@
-import { useContext, useEffect, type ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import {
   ArrowLeftRight,
   Building2,
-  ChartLine,
   DollarSign,
   FileCheck,
   FileText,
-  Notebook,
   Plug,
   Settings,
   Shield,
@@ -15,10 +13,8 @@ import {
 import { useSearchParams } from 'react-router-dom';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
 import { getFragmentData, type FragmentType } from '@/gql/index.js';
-import { FiltersContext } from '@/providers/filters-context.js';
 import { BusinessPageFragmentDoc } from '../../gql/graphql.js';
 import { AdminBusinessSection } from './admin-business-section.js';
-import { BalanceSection } from './balance-section.js';
 import { BusinessHeader } from './business-header.js';
 import { ChargesSection } from './charges-section.jsx';
 import { ChartsSection } from './charts-section.jsx';
@@ -27,7 +23,6 @@ import { ContactInfoSection } from './contact-info-section.jsx';
 import { ContractsSection } from './contracts-section.jsx';
 import { DocumentsSection } from './documents-section.jsx';
 import { IntegrationsSection } from './integrations-section.jsx';
-import { LedgerSection } from './ledger-section.js';
 import { TransactionsSection } from './transactions-section.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -58,11 +53,6 @@ interface Props {
 export default function Business({ data, refetchBusiness }: Props): ReactElement {
   const business = getFragmentData(BusinessPageFragmentDoc, data);
   const [searchParams, setSearchParams] = useSearchParams();
-  const { setFiltersContext } = useContext(FiltersContext);
-
-  useEffect(() => {
-    setFiltersContext(null);
-  }, [setFiltersContext]);
 
   const activeTab = searchParams.get('tab') || 'contact';
 
@@ -119,20 +109,6 @@ export default function Business({ data, refetchBusiness }: Props): ReactElement
               <FileText className="h-4 w-4" />
               <span className="hidden sm:inline">Documents</span>
             </TabsTrigger>
-            <TabsTrigger
-              value="ledger"
-              className="flex items-center gap-2 data-[state=active]:bg-background"
-            >
-              <Notebook className="h-4 w-4" />
-              <span className="hidden sm:inline">Ledger</span>
-            </TabsTrigger>
-            <TabsTrigger
-              value="balance"
-              className="flex items-center gap-2 data-[state=active]:bg-background"
-            >
-              <ChartLine className="h-4 w-4" />
-              <span className="hidden sm:inline">Balance</span>
-            </TabsTrigger>
             {isClient && (
               <>
                 <TabsTrigger
@@ -189,14 +165,6 @@ export default function Business({ data, refetchBusiness }: Props): ReactElement
             <DocumentsSection businessId={business.id} />
           </TabsContent>
 
-          <TabsContent value="ledger" className="mt-0">
-            <LedgerSection businessId={business.id} />
-          </TabsContent>
-
-          <TabsContent value="balance" className="mt-0">
-            <BalanceSection businessId={business.id} />
-          </TabsContent>
-
           {isClient && (
             <>
               <TabsContent value="contracts" className="mt-0">

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

@@ -1,33 +1,11 @@
-import { useQuery } from 'urql';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
-import { BusinessTransactionsSectionDocument } from '@/gql/graphql.js';
-import { TransactionsTable } from '../transactions-table';
+import { BusinessExtendedInfo } from '../business-transactions/business-extended-info';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
-/* GraphQL */ `
-  query BusinessTransactionsSection($businessId: UUID!) {
-    transactionsByFinancialEntity(financialEntityID: $businessId) {
-      id
-      ...TransactionForTransactionsTableFields
-    }
-  }
-`;
 interface Props {
   businessId: string;
 }
 
 export function TransactionsSection({ businessId }: Props) {
-  const [{ data, fetching }] = useQuery({
-    query: BusinessTransactionsSectionDocument,
-    variables: {
-      businessId,
-    },
-  });
-
-  if (fetching) {
-    return <div>Loading transactions...</div>;
-  }
-
   return (
     <Card>
       <CardHeader className="flex w-full justify-between items-center">
@@ -40,7 +18,7 @@ export function TransactionsSection({ businessId }: Props) {
       </CardHeader>
       <CardContent>
         <div className="rounded-md border">
-          <TransactionsTable transactionsProps={data?.transactionsByFinancialEntity ?? []} />
+          <BusinessExtendedInfo businessID={businessId} filter={{}} />
         </div>
       </CardContent>
     </Card>