@accounter/client 0.0.8-alpha-20251023122652-765c7f951395441461726b3b4345eebd020632d7 → 0.0.8-alpha-20251023123704-5af903a2732fbfc73740e2810002ee0b9683cef2

package/src/components/common/modals/insert-business.tsx

@@ -1,84 +1,692 @@
-import { useContext, useState, type ReactElement } from 'react';
-import { useForm, type SubmitHandler } from 'react-hook-form';
-import { UserContext } from '@/providers/user-provider.js';
-import type { InsertNewBusinessInput } from '../../../gql/graphql.js';
-import { useInsertBusiness } from '../../../hooks/use-insert-business.js';
-import { Button } from '../../ui/button.js';
+import { useCallback, useContext, useState } from 'react';
+import { Globe, Mail, MapPin, Phone, Plus, X } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '../../ui/dialog.js';
-import { Form } from '../../ui/form.js';
-import { InsertBusinessFields } from '../index.js';
+} 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 { Textarea } from '@/components/ui/textarea.js';
+import { pcn874RecordEnum } from '@/helpers/index.js';
+import { useAllCountries } from '@/hooks/use-get-countries.js';
+import { useGetSortCodes } from '@/hooks/use-get-sort-codes.js';
+import { useGetTags } from '@/hooks/use-get-tags.js';
+import { useGetTaxCategories } from '@/hooks/use-get-tax-categories.js';
+import { UserContext } from '@/providers/user-provider.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { InsertNewBusinessInput, Pcn874RecordType } from '../../../gql/graphql.js';
+import { useInsertBusiness } from '../../../hooks/use-insert-business.js';
+import { ComboBox, MultiSelect, NumberInput } from '../index.js';
+
+// Zod schema for the business form
+const businessFormSchema = z
+  .object({
+    businessName: z.string().min(1, 'Business name is required'),
+    locality: z.string().min(1, 'Locality is required'),
+    localName: z.string().optional(),
+    govId: z.string().optional(),
+    address: z.string().optional(),
+    generalContacts: z.array(z.string().email()),
+    website: z.string().url().optional().or(z.literal('')),
+    phone: z.string().optional(),
+    taxCategory: z.string().optional(),
+    sortCode: z.string().optional(),
+    pcn874RecordType: z.string().optional(),
+    irsCode: z.int().optional(),
+    defaultDescription: z.string().optional(),
+    defaultTags: z.array(z.string()),
+    transactionPhrases: z.array(z.string()),
+    emailAddresses: z.array(z.string().email()),
+  })
+  .refine(
+    data => {
+      if (data.locality === 'Israel') {
+        return !!data.localName && !!data.govId;
+      }
+      return true;
+    },
+    {
+      message: 'Local name and company number are required for Israeli businesses',
+      path: ['localName'],
+    },
+  );
+
+type BusinessFormValues = z.infer<typeof businessFormSchema>;
+
+function convertFormDataToInsertNewBusinessInput(
+  formData: BusinessFormValues,
+): InsertNewBusinessInput {
+  const suggestionsDataExists =
+    formData.defaultDescription ||
+    formData.defaultTags?.length ||
+    formData.transactionPhrases?.length ||
+    formData.emailAddresses?.length;
+  const suggestions: InsertNewBusinessInput['suggestions'] | undefined = suggestionsDataExists
+    ? {
+        description: formData.defaultDescription,
+        tags: formData.defaultTags?.map(id => ({ id })),
+        phrases: formData.transactionPhrases,
+        emails: formData.emailAddresses,
+      }
+    : undefined;
+
+  return {
+    name: formData.businessName,
+    country: formData.locality,
+    hebrewName: formData.localName,
+    governmentId: formData.govId,
+    address: formData.address,
+    phoneNumber: formData.phone,
+    website: formData.website,
+    email: formData.generalContacts?.join(', '),
+    sortCode: formData.sortCode ? parseInt(formData.sortCode) : undefined,
+    taxCategory: formData.taxCategory,
+    pcn874RecordType: formData.pcn874RecordType as Pcn874RecordType,
+    irsCode: formData.irsCode,
+    suggestions,
+  };
+}
 
 export function InsertBusiness({
   description,
   onAdd,
 }: {
-  description: string;
+  description?: string;
   onAdd?: (businessId: string) => void;
-}): ReactElement {
-  const [open, setOpen] = useState(false);
+}) {
+  const [isNewBusinessOpen, setIsNewBusinessOpen] = useState(false);
+
+  const { insertBusiness, fetching: addingInProcess } = useInsertBusiness();
+
+  const form = useForm<BusinessFormValues>({
+    resolver: zodResolver(businessFormSchema),
+    defaultValues: {
+      businessName: description,
+      generalContacts: [],
+      defaultTags: [],
+      transactionPhrases: description ? [description] : [],
+      emailAddresses: [],
+    },
+  });
+
+  const onSubmit = async (data: BusinessFormValues) => {
+    const newBusiness = await insertBusiness({
+      fields: convertFormDataToInsertNewBusinessInput(data),
+    });
+    setIsNewBusinessOpen(false);
+    form.reset();
+    onAdd?.(newBusiness?.id ?? '');
+  };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={isNewBusinessOpen} onOpenChange={setIsNewBusinessOpen}>
       <DialogTrigger asChild>
-        <Button>Add Business</Button>
+        <Button>
+          <Plus className="size-4 mr-2" />
+          New Business
+        </Button>
       </DialogTrigger>
-      <DialogContent className="w-[90vw] max-w-screen-md">
+      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Add New Business</DialogTitle>
+          <DialogTitle>Create New Business</DialogTitle>
+          <DialogDescription>Add a new business to Accounter.</DialogDescription>
         </DialogHeader>
-        <CreateBusinessForm description={description} close={() => setOpen(false)} onAdd={onAdd} />
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <ContactInformationSection form={form} />
+
+            <DefaultsSection form={form} />
+
+            <AutoMatchingSection form={form} />
+
+            <div className="flex justify-end gap-3 pt-4 border-t">
+              <Button type="button" variant="outline" onClick={() => setIsNewBusinessOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={addingInProcess}>
+                Create Business
+              </Button>
+            </div>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );
 }
 
-type CreateBusinessFormProps = {
-  close: () => void;
-  onAdd?: (businessId: string) => void;
-  description: string;
-};
+interface SectionProps {
+  form: ReturnType<typeof useForm<BusinessFormValues>>;
+}
+
+function ContactInformationSection({ form }: SectionProps) {
+  const [newContact, setNewContact] = useState('');
 
-function CreateBusinessForm({ description, close, onAdd }: CreateBusinessFormProps): ReactElement {
   const { userContext } = useContext(UserContext);
-  const formManager = useForm<InsertNewBusinessInput>({
-    defaultValues: {
-      name: description,
-      country: userContext?.context.locality || 'ISR',
-      suggestions: { phrases: [description] },
-    },
-  });
-  const { handleSubmit } = formManager;
-  const [fetching, setFetching] = useState(false);
+  const { countries, fetching: fetchingCountries } = useAllCountries();
 
-  const { insertBusiness, fetching: addingInProcess } = useInsertBusiness();
+  const { watch, setValue, control } = form;
+
+  const locality = watch('locality');
+
+  const addGeneralContact = (currentContacts: string[]) => {
+    if (newContact.trim()) {
+      setValue('generalContacts', [...currentContacts, newContact.trim()], {
+        shouldDirty: true,
+      });
+      setNewContact('');
+    }
+  };
 
-  const onSubmit: SubmitHandler<InsertNewBusinessInput> = data => {
-    data.sortCode &&= parseInt(data.sortCode.toString());
-    insertBusiness({ fields: data }).then(res => {
-      if (res?.id) {
-        onAdd?.(res.id);
-        close();
+  const removeGeneralContact = (currentContacts: string[], index: number) => {
+    setValue(
+      'generalContacts',
+      currentContacts.filter((_, i) => i !== index),
+      { shouldDirty: true },
+    );
+  };
+
+  const isLocalEntity = locality === userContext?.context.locality;
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-foreground">Contact Information</h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormField
+          control={control}
+          name="businessName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Business Name *</FormLabel>
+              <FormControl>
+                <Input {...field} required />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={control}
+          name="locality"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Locality / Country *</FormLabel>
+              <ComboBox
+                onChange={field.onChange}
+                data={countries.map(country => ({
+                  value: country.code,
+                  label: country.name,
+                }))}
+                value={field.value}
+                disabled={fetchingCountries}
+                placeholder="Scroll to see all options"
+                formPart
+              />
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {isLocalEntity && (
+          <>
+            <FormField
+              control={control}
+              name="localName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Local Name *</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Business name in local language" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={control}
+              name="govId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Government ID *</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter Government ID" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </>
+        )}
+
+        <FormField
+          control={control}
+          name="address"
+          render={({ field }) => (
+            <FormItem className="md:col-span-2">
+              <FormLabel>
+                <MapPin className="size-4" />
+                Address
+              </FormLabel>
+              <FormControl>
+                <Textarea {...field} rows={2} placeholder="Enter business address" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={control}
+          name="generalContacts"
+          render={({ field }) => (
+            <FormItem className="md:col-span-2">
+              <FormLabel className="flex items-center gap-2">
+                <Mail className="size-4" />
+                General Contacts
+              </FormLabel>
+              <FormControl>
+                <div className="space-y-2">
+                  {field.value?.map((contact, index) => (
+                    <Badge key={index} variant="secondary" className="gap-1 pr-1">
+                      {contact}
+                      <button
+                        type="button"
+                        onClick={() => removeGeneralContact(field.value ?? [], index)}
+                        className="ml-1 hover:bg-muted rounded-sm p-0.5"
+                      >
+                        <X className="size-3" />
+                      </button>
+                    </Badge>
+                  ))}
+                  <div className="flex gap-2">
+                    <Input
+                      value={newContact}
+                      onChange={e => setNewContact(e.target.value)}
+                      onKeyDown={e => {
+                        if (e.key === 'Enter') {
+                          e.preventDefault();
+                          addGeneralContact(field.value ?? []);
+                        }
+                      }}
+                      placeholder="Add contact email"
+                      type="email"
+                    />
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      disabled={!newContact.trim()}
+                      onClick={() => addGeneralContact(field.value ?? [])}
+                    >
+                      <Plus className="size-4" />
+                    </Button>
+                  </div>
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={control}
+          name="website"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Globe className="size-4" />
+                Website
+              </FormLabel>
+              <FormControl>
+                <Input {...field} type="url" placeholder="https://example.com" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={control}
+          name="phone"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Phone className="size-4" />
+                Phone
+              </FormLabel>
+              <FormControl>
+                <Input {...field} type="tel" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+function DefaultsSection({ form }: SectionProps) {
+  const { selectableSortCodes, fetching: fetchingSortCodes, sortCodes } = useGetSortCodes();
+  const { selectableTaxCategories, fetching: fetchingTaxCategories } = useGetTaxCategories();
+  const { selectableTags, fetching: fetchingTags } = useGetTags();
+
+  const { setValue, control } = form;
+
+  // When sort code changes, update IRS code if sort code has a default IRS code
+  const onSortCodeChangeUpdateIrsCode = useCallback(
+    (sortCode: string | null) => {
+      if (sortCode) {
+        const sortCodeObj = sortCodes.find(sc => Number(sc.key) === Number(sortCode));
+
+        if (sortCodeObj) {
+          if (sortCodeObj.defaultIrsCode) {
+            setValue('irsCode', sortCodeObj.defaultIrsCode, { shouldDirty: true });
+          } else {
+            setValue('irsCode', undefined, { shouldDirty: true });
+          }
+        }
       }
-    });
+    },
+    [setValue, sortCodes],
+  );
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-foreground">Defaults</h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <FormField
+          control={control}
+          name="sortCode"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Sort Code</FormLabel>
+              <FormControl>
+                <ComboBox
+                  onChange={sortCode => {
+                    onSortCodeChangeUpdateIrsCode(sortCode);
+                    field.onChange(sortCode);
+                  }}
+                  data={selectableSortCodes}
+                  value={field.value}
+                  disabled={fetchingSortCodes}
+                  placeholder="Scroll to see all options"
+                  formPart
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={control}
+          name="taxCategory"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Tax Category</FormLabel>
+              <FormControl>
+                <ComboBox
+                  data={selectableTaxCategories}
+                  disabled={fetchingTaxCategories}
+                  value={field.value}
+                  onChange={field.onChange}
+                  placeholder="Scroll to see all options"
+                  formPart
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={control}
+          name="pcn874RecordType"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>PCN874 Record Type</FormLabel>
+              <Select value={field.value} onValueChange={field.onChange}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select record type" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {Object.entries(pcn874RecordEnum).map(([value, label]) => (
+                    <SelectItem key={value} value={value}>
+                      {`${label} (${value})`}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={control}
+          name="irsCode"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>IRS Code</FormLabel>
+              <FormControl>
+                <NumberInput
+                  value={field.value ?? undefined}
+                  onValueChange={value => field.onChange(value ?? null)}
+                  hideControls
+                  decimalScale={0}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={control}
+          name="defaultDescription"
+          render={({ field }) => (
+            <FormItem className="md:col-span-2">
+              <FormLabel>Default Description</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter default charge description" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={control}
+          name="defaultTags"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Tags</FormLabel>
+              <FormControl>
+                <MultiSelect
+                  options={Object.values(selectableTags).map(({ value, label }) => ({
+                    label,
+                    value,
+                  }))}
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  value={field.value}
+                  placeholder="Select Default Tags"
+                  variant="default"
+                  disabled={fetchingTags}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+function AutoMatchingSection({ form }: SectionProps) {
+  const [newPhrase, setNewPhrase] = useState('');
+  const [newEmail, setNewEmail] = useState('');
+
+  const { getValues, setValue, control } = form;
+
+  const addPhrase = () => {
+    if (newPhrase.trim()) {
+      const currentPhrases = getValues('transactionPhrases');
+      form.setValue('transactionPhrases', [...currentPhrases, newPhrase.trim()], {
+        shouldDirty: true,
+      });
+      setNewPhrase('');
+    }
+  };
+
+  const addEmail = () => {
+    if (newEmail.trim()) {
+      const currentEmails = getValues('emailAddresses');
+      setValue('emailAddresses', [...currentEmails, newEmail.trim()], { shouldDirty: true });
+      setNewEmail('');
+    }
+  };
+
+  const removePhrase = (index: number) => {
+    const currentPhrases = getValues('transactionPhrases');
+    setValue(
+      'transactionPhrases',
+      currentPhrases.filter((_, i) => i !== index),
+      { shouldDirty: true },
+    );
+  };
+
+  const removeEmail = (index: number) => {
+    const currentEmails = getValues('emailAddresses');
+    setValue(
+      'emailAddresses',
+      currentEmails.filter((_, i) => i !== index),
+      { shouldDirty: true },
+    );
   };
 
   return (
-    <Form {...formManager}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <InsertBusinessFields formManager={formManager} setFetching={setFetching} />
-
-        <div className="flex justify-center mt-4">
-          <Button type="submit" disabled={addingInProcess || fetching}>
-            Add
-          </Button>
-        </div>
-      </form>
-    </Form>
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-foreground">Auto Matching</h3>{' '}
+      <p className="text-sm text-muted-foreground">
+        Configure patterns for automatic matching of bank transactions and documents
+      </p>
+      <div className="grid grid-cols-1 gap-4">
+        <FormField
+          control={control}
+          name="transactionPhrases"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Transaction Phrases</FormLabel>
+              {!!field.value?.length && (
+                <div className="flex flex-wrap gap-2">
+                  {field.value.map((phrase, index) => (
+                    <Badge key={index} variant="secondary" className="gap-1">
+                      {phrase}
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="p-0 size-3"
+                        onClick={() => removePhrase(index)}
+                      >
+                        <X className="size-3 cursor-pointer" onClick={() => removePhrase(index)} />
+                      </Button>
+                    </Badge>
+                  ))}
+                </div>
+              )}
+              <div className="flex gap-2">
+                <Input
+                  placeholder="Add phrase..."
+                  value={newPhrase}
+                  onChange={e => setNewPhrase(e.target.value)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      addPhrase();
+                    }
+                  }}
+                />
+                <Button type="button" size="sm" onClick={addPhrase}>
+                  <Plus className="size-4" />
+                </Button>
+              </div>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={control}
+          name="emailAddresses"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email Addresses</FormLabel>
+              {!!field.value?.length && (
+                <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>
+              )}
+              <div className="flex gap-2">
+                <Input
+                  type="email"
+                  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="size-4" />
+                </Button>
+              </div>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </div>
+    </div>
   );
 }