@accounter/client 0.0.7-alpha-20251020201144-e623a2bb538d1219a5f541df2364646012ebe9ea → 0.0.7-alpha-20251021062721-ab43b5f013b9852ff5216bc141852da9dcfe0df7

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

@@ -0,0 +1,276 @@
+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>
+  );
+}

package/src/components/common/documents/issue-document/index.tsx

@@ -20,7 +20,7 @@ import {
 } from '../../forms/index.js';
 import { IssueDocumentModal, type IssueDocumentData } from './issue-document-modal.js';
 import { PdfViewer } from './pdf-viewer.js';
-import { RecentClientDocs } from './recent-client-docs.js';
+import { RecentBusinessDocs } from './recent-business-docs.js';
 import { RecentDocsOfSameType } from './recent-docs-of-same-type.js';
 
 interface GenerateDocumentProps {
@@ -235,8 +235,8 @@ export function GenerateDocument({
 
             {/* Previous client documents */}
             {formData.client?.id && (
-              <RecentClientDocs
-                clientId={formData.client?.id}
+              <RecentBusinessDocs
+                businessId={formData.client?.id}
                 linkedDocumentIds={formData.linkedDocumentIds ?? []}
               />
             )}

package/src/components/common/documents/issue-document/{recent-client-docs.tsx → recent-business-docs.tsx}

@@ -4,12 +4,12 @@ import { useMemo } from 'react';
 import { useQuery } from 'urql';
 import { flexRender, getCoreRowModel, useReactTable, type ColumnDef } from '@tanstack/react-table';
 import {
-  RecentClientIssuedDocumentsDocument,
+  RecentBusinessIssuedDocumentsDocument,
   TableDocumentsRowFieldsFragmentDoc,
 } from '../../../../gql/graphql.js';
 import { getFragmentData } from '../../../../gql/index.js';
-import { columns, type DocumentsTableRowType } from '../../../documents-table/columns.js';
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card.js';
+import { columns, type DocumentsTableRowType } from '../../../documents-table/columns.jsx';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card.jsx';
 import {
   Table,
   TableBody,
@@ -17,12 +17,12 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '../../../ui/table.js';
+} from '../../../ui/table.jsx';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
-  query RecentClientIssuedDocuments($clientId: UUID!) {
-    recentDocumentsByClient(clientId: $clientId) {
+  query RecentBusinessIssuedDocuments($businessId: UUID!, $limit: Int) {
+    recentDocumentsByBusiness(businessId: $businessId, limit: $limit) {
       id
       ... on FinancialDocument {
         issuedDocumentInfo {
@@ -42,25 +42,31 @@ type RowType = DocumentsTableRowType & {
   };
 };
 
-interface RecentClientDocsProps {
-  clientId: string;
+interface RecentBusinessDocsProps {
+  businessId: string;
   linkedDocumentIds: string[];
+  limit?: number;
 }
 
-export function RecentClientDocs({ clientId, linkedDocumentIds }: RecentClientDocsProps) {
+export function RecentBusinessDocs({
+  businessId,
+  linkedDocumentIds,
+  limit,
+}: RecentBusinessDocsProps) {
   const [{ data, fetching }] = useQuery({
-    query: RecentClientIssuedDocumentsDocument,
+    query: RecentBusinessIssuedDocumentsDocument,
     variables: {
-      clientId,
+      businessId,
+      limit,
     },
   });
 
   const rows = useMemo(
     (): RowType[] =>
-      data?.recentDocumentsByClient?.map(
+      data?.recentDocumentsByBusiness?.map(
         rawDocument => getFragmentData(TableDocumentsRowFieldsFragmentDoc, rawDocument) as RowType,
       ) ?? [],
-    [data?.recentDocumentsByClient],
+    [data?.recentDocumentsByBusiness],
   );
   const limitedColumns = ['date', 'amount', 'vat', 'type', 'serial', 'description', 'file'];
   const table = useReactTable<RowType>({

package/src/components/common/forms/business-card.tsx

@@ -56,6 +56,7 @@ import { ModifyBusinessFields } from './modify-business-fields.js';
         }
         optionalVAT
         irsCode
+        pcn874RecordType
       }
     }
   }

package/src/components/common/forms/modify-business-fields.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState, type ReactElement } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
+import { useAllCountries } from '@/hooks/use-get-countries.js';
 import {
   EmailAttachmentType,
   type InsertNewBusinessInput,
-  type Pcn874RecordType,
   type UpdateBusinessInput,
 } from '../../../gql/graphql.js';
-import { dirtyFieldMarker } from '../../../helpers/index.js';
+import { dirtyFieldMarker, pcn874RecordEnum } from '../../../helpers/index.js';
 import { useGetSortCodes } from '../../../hooks/use-get-sort-codes.js';
 import { useGetTaxCategories } from '../../../hooks/use-get-tax-categories.js';
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../ui/form.js';
@@ -15,22 +15,6 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 import { Switch } from '../../ui/switch.js';
 import { ComboBox, MultiSelect, NumberInput, StringArrayInput, TagsInput } from '../index.js';
 
-const pcn874RecordType: Record<Pcn874RecordType, string> = {
-  C: 'INPUT_SELF_INVOICE',
-  H: 'INPUT_SINGLE_DOC_BY_LAW',
-  I: 'SALE_PALESTINIAN_CUSTOMER',
-  K: 'INPUT_PETTY_CASH',
-  L1: 'SALE_UNIDENTIFIED_CUSTOMER',
-  L2: 'SALE_UNIDENTIFIED_ZERO_OR_EXEMPT',
-  M: 'SALE_SELF_INVOICE',
-  P: 'INPUT_PALESTINIAN_SUPPLIER',
-  R: 'INPUT_IMPORT',
-  S1: 'SALE_REGULAR',
-  S2: 'SALE_ZERO_OR_EXEMPT',
-  T: 'INPUT_REGULAR',
-  Y: 'SALE_EXPORT',
-} as const;
-
 type ModalProps<T extends boolean> = {
   isInsert: T;
   formManager: UseFormReturn<
@@ -60,9 +44,12 @@ export function ModifyBusinessFields({
     sortCodes: rawSortCodes,
   } = useGetSortCodes();
 
+  // Countries handle
+  const { countries, fetching: fetchingCountries } = useAllCountries();
+
   useEffect(() => {
-    setFetching(tagsFetching || fetchingTaxCategories || fetchingSortCodes);
-  }, [setFetching, tagsFetching, fetchingTaxCategories, fetchingSortCodes]);
+    setFetching(tagsFetching || fetchingTaxCategories || fetchingSortCodes || fetchingCountries);
+  }, [setFetching, tagsFetching, fetchingTaxCategories, fetchingSortCodes, fetchingCountries]);
 
   // on sort code change, update IRS code
   const sortCode = watch('sortCode');
@@ -138,21 +125,16 @@ export function ModifyBusinessFields({
               <FormLabel>Locality</FormLabel>
               <Select required onValueChange={field.onChange} value={field.value ?? undefined}>
                 <FormControl>
-                  <SelectTrigger className="w-full truncate">
-                    <SelectValue placeholder="Select type" />
+                  <SelectTrigger
+                    className={(isInsert ? '' : dirtyFieldMarker(fieldState)) + ' w-full truncate'}
+                  >
+                    <SelectValue placeholder="Select Country" />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent onClick={event => event.stopPropagation()}>
-                  {[
-                    { value: 'Israel', label: 'Local' },
-                    { value: 'FOREIGN', label: 'Foreign' },
-                  ].map(({ value, label }) => (
-                    <SelectItem
-                      key={value}
-                      value={value}
-                      className={isInsert ? '' : dirtyFieldMarker(fieldState)}
-                    >
-                      {label}
+                  {countries.map(({ code, name }) => (
+                    <SelectItem key={code} value={code}>
+                      {name}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -328,7 +310,7 @@ export function ModifyBusinessFields({
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent onClick={event => event.stopPropagation()}>
-                  {Object.entries(pcn874RecordType).map(([value, label]) => (
+                  {Object.entries(pcn874RecordEnum).map(([value, label]) => (
                     <SelectItem key={value} value={value}>
                       {`${label} (${value})`}
                     </SelectItem>

package/src/components/common/inputs/combo-box.tsx

@@ -50,7 +50,7 @@ export function ComboBox({
   if (isDesktop) {
     return (
       <Popover modal open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
+        <PopoverTrigger asChild className="w-fit min-w-40">
           <Trigger
             placeholder={placeholder}
             selectedDatum={selectedDatum}

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

@@ -1,5 +1,6 @@
-import { useState, type ReactElement } from 'react';
+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';
@@ -44,10 +45,11 @@ type CreateBusinessFormProps = {
 };
 
 function CreateBusinessForm({ description, close, onAdd }: CreateBusinessFormProps): ReactElement {
+  const { userContext } = useContext(UserContext);
   const formManager = useForm<InsertNewBusinessInput>({
     defaultValues: {
       name: description,
-      country: 'Israel',
+      country: userContext?.context.locality || 'ISR',
       suggestions: { phrases: [description] },
     },
   });

package/src/components/reports/trial-balance-report/trial-balance-report-group.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import { Text } from '@mantine/core';
 import { Currency } from '../../../gql/graphql.js';
-import { currencyCodeToSymbol, formatStringifyAmount } from '../../../helpers/index.js';
+import { formatAmountWithCurrency } from '../../../helpers/index.js';
 import { TrialBalanceReportFilters } from './trial-balance-report-filters.js';
 import {
   TrialBalanceReportSortCode,
@@ -44,16 +44,14 @@ export const TrialBalanceReportGroup = ({
         <td colSpan={2}>Group total:</td>
         <td colSpan={1}>{group.replaceAll('0', '*')}</td>
         <td colSpan={1}>
-          {!!data.totalDebit &&
-            `${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(data.totalDebit)}`}
+          {!!data.totalDebit && formatAmountWithCurrency(data.totalDebit, Currency.Ils)}
         </td>
         <td colSpan={1}>
-          {!!data.totalCredit &&
-            `${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(data.totalCredit)}`}
+          {!!data.totalCredit && formatAmountWithCurrency(data.totalCredit, Currency.Ils)}
         </td>
         <td colSpan={1}>
           <Text fw={700} c={data.sum > 0 ? 'green' : data.sum < 0 ? 'red' : undefined}>
-            {`${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(data.sum)}`}
+            {formatAmountWithCurrency(data.sum, Currency.Ils)}
           </Text>
         </td>
       </tr>

package/src/components/reports/trial-balance-report/trial-balance-report-sort-code.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import { Text } from '@mantine/core';
 import { Currency } from '../../../gql/graphql.js';
-import { currencyCodeToSymbol, formatStringifyAmount } from '../../../helpers/index.js';
+import { formatAmountWithCurrency } from '../../../helpers/index.js';
 import {
   TrialBalanceReportBusiness,
   type ExtendedBusiness,
@@ -55,29 +55,26 @@ export const TrialBalanceReportSortCode = ({
             <td colSpan={2}>Group total:</td>
             <td colSpan={1}>{sortCode.key}</td>
             <td colSpan={1}>
-              {!!sortCode.totalDebit &&
-                `${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.totalDebit)}`}
+              {!!sortCode.totalDebit && formatAmountWithCurrency(sortCode.totalDebit, Currency.Ils)}
             </td>
             <td colSpan={1}>
               {!!sortCode.totalCredit &&
-                `${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.totalCredit)}`}
+                formatAmountWithCurrency(sortCode.totalCredit, Currency.Ils)}
             </td>
             <td colSpan={1}>
-              <Text
-                c={sortCode.sum > 0 ? 'green' : sortCode.sum < 0 ? 'red' : undefined}
-              >{`${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.sum)}`}</Text>
+              <Text c={sortCode.sum > 0 ? 'green' : sortCode.sum < 0 ? 'red' : undefined}>
+                {formatAmountWithCurrency(sortCode.sum, Currency.Ils)}
+              </Text>
               {!!sortCode.debit && (
                 <>
                   <br />
-                  Total Debit Balances:{' '}
-                  {`${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.debit)}`}
+                  Total Debit Balances: {formatAmountWithCurrency(sortCode.debit, Currency.Ils)}
                 </>
               )}
               {!!sortCode.credit && (
                 <>
                   <br />
-                  Total Credit Balances:{' '}
-                  {`${currencyCodeToSymbol(Currency.Ils)} ${formatStringifyAmount(sortCode.credit)}`}
+                  Total Credit Balances: {formatAmountWithCurrency(sortCode.credit, Currency.Ils)}
                 </>
               )}
             </td>

package/src/components/screens/businesses/business.tsx

@@ -0,0 +1,50 @@
+import { useEffect, type ReactElement } from 'react';
+import { useMatch } from 'react-router-dom';
+import { useQuery } from 'urql';
+import Business from '@/components/business/index.js';
+import { BusinessScreenDocument } from '../../../gql/graphql.js';
+import { AccounterLoader } from '../../common/index.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  query BusinessScreen($businessId: UUID!) {
+    business(id: $businessId) {
+      id
+      ...BusinessPage
+    }
+  }
+`;
+
+export function getBusinessHref(businessId: string): string {
+  return `/businesses/${businessId}`;
+}
+
+export const BusinessScreen = (): ReactElement => {
+  const match = useMatch('/businesses/:businessId');
+
+  const businessId = match?.params.businessId;
+
+  const [{ data, fetching }, fetchBusiness] = useQuery({
+    query: BusinessScreenDocument,
+    pause: !businessId,
+    variables: {
+      businessId: businessId ?? '',
+    },
+  });
+
+  useEffect(() => {
+    if (businessId) {
+      fetchBusiness();
+    }
+  }, [businessId, fetchBusiness]);
+
+  if (fetching && !data?.business) {
+    return <AccounterLoader />;
+  }
+
+  if (!businessId || !data?.business) {
+    return <div>Business not found</div>;
+  }
+
+  return <Business data={data.business} refetchBusiness={async () => fetchBusiness()} />;
+};

package/src/components/screens/documents/issue-documents/edit-issue-document-modal.tsx

@@ -3,7 +3,7 @@ import { Check, Edit, Eye, FileText, Loader2 } from 'lucide-react';
 import type { NewDocumentInfoFragment } from '../../../../gql/graphql.js';
 import { usePreviewDocument } from '../../../../hooks/use-preview-document.js';
 import { PdfViewer } from '../../../common/documents/issue-document/pdf-viewer.js';
-import { RecentClientDocs } from '../../../common/documents/issue-document/recent-client-docs.js';
+import { RecentBusinessDocs } from '../../../common/documents/issue-document/recent-business-docs.js';
 import { RecentDocsOfSameType } from '../../../common/documents/issue-document/recent-docs-of-same-type.js';
 import {
   convertNewDocumentInfoFragmentIntoPreviewDocumentInput,
@@ -201,10 +201,10 @@ export function EditIssueDocumentModal({ onApprove, draft }: Props): ReactElemen
                   </CardContent>
                 </Card>
 
-                {/* Previous client documents */}
+                {/* Previous business documents */}
                 {document.client?.id && (
-                  <RecentClientDocs
-                    clientId={document.client?.id}
+                  <RecentBusinessDocs
+                    businessId={document.client?.id}
                     linkedDocumentIds={document.linkedDocumentIds ?? []}
                   />
                 )}

package/src/components/ui/progress.tsx

@@ -0,0 +1,25 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react';
+import { cn } from '@/lib/utils.js';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+const Progress = forwardRef<
+  ComponentRef<typeof ProgressPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-2 w-full overflow-hidden rounded-full bg-gray-900/20 dark:bg-gray-50/20',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-gray-900 transition-all dark:bg-gray-50"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };