@accounter/client 0.0.8-alpha-20251021150615-800574fc6d416cd319de216c97b431643d8958a2 → 0.0.8-alpha-20251021225827-178e480c997a9811913e16f85cb94329041b096e

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) {
+        // Handle client update
+        updateClient({
+          businessId,
+          fields: values,
+        });
+      } else {
+        if (!values.greenInvoiceId) {
+          form.setError('greenInvoiceId', { message: 'Green Invoice ID is required' });
+          return;
+        }
+        // Handle new client creation
+        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/accounter-table.tsx

@@ -1,6 +1,6 @@
 import { useState, type ReactElement, type ReactNode } from 'react';
+import { Button } from '@/components/ui/button.js';
 import { Pagination, Paper, Table, type PaginationProps } from '@mantine/core';
-import { Button } from './index.js';
 
 export interface AccounterTableProps<T, U> {
   highlightOnHover?: boolean;
@@ -47,7 +47,9 @@ export function AccounterTableRow<T, U>(props: AccountTableRow<T, U>): ReactElem
             {moreInfoValue === null ? (
               <p>No Data Related</p>
             ) : (
-              <Button title="More Info" onClick={(): void => setOpened(!opened)} />
+              <Button onClick={(): void => setOpened(!opened)} className="ml-auto">
+                More Info
+              </Button>
             )}
           </td>
         )}
@@ -73,15 +75,14 @@ export function AccounterTable<T, U>(props: AccounterTableProps<T, U>): ReactNod
       <div className="flex flex-row justify-end w-full">
         {props.pagination && <Pagination className="flex-auto" {...props.pagination} />}
         {props.showButton === true ? (
-          <button
-            className="inline-flex text-white bg-indigo-500 border-0 py-1.5 px-3 focus:outline-hidden hover:bg-indigo-600 rounded-sm text-sm"
+          <Button
             type="button"
             onClick={(): void => {
               setIsShowAll(prev => !prev);
             }}
           >
             {isShowAll ? 'Hide All' : 'Show All'}
-          </button>
+          </Button>
         ) : null}
       </div>
       <Table striped={props.striped} highlightOnHover={props.highlightOnHover}>

package/src/components/common/business-trip-report/parts/core-expense-row.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState, type ReactElement } from 'react';
 import { format } from 'date-fns';
 import { Controller, type Control } from 'react-hook-form';
+import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
 import { useQuery } from 'urql';
-import { NavLink, Select, Text } from '@mantine/core';
+import { Select, Text } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
 import {
   AttendeesByBusinessTripDocument,
@@ -236,15 +237,16 @@ export const CoreExpenseRow = ({
       <td>
         <div className="flex flex-col gap-2">
           {linkedChargeIds.map(id => (
-            <NavLink
+            <Link
               key={id}
-              label="To Charge"
-              className="[&>*>.mantine-NavLink-label]:font-semibold"
-              onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-                event.stopPropagation();
-                window.open(getChargeHref(id), '_blank', 'noreferrer');
-              }}
-            />
+              to={getChargeHref(id)}
+              target="_blank"
+              rel="noreferrer"
+              onClick={event => event.stopPropagation()}
+              className="inline-flex items-center font-semibold"
+            >
+              To Charge
+            </Link>
           ))}
         </div>
       </td>

package/src/components/common/business-trip-report/parts/uncategorized-transactions.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
 import { AlertCircle } from 'lucide-react';
-import { NavLink, Popover, Table, Text } from '@mantine/core';
+import { Link } from 'react-router-dom';
+import { Popover, Table, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
   BusinessTripUncategorizedTransactionsFieldsFragmentDoc,
@@ -92,18 +93,15 @@ export const UncategorizedTransactions = ({ data, onChange }: Props): ReactEleme
                 <DebitDate data={uncategorizedTransaction.transaction} />
                 <Amount data={uncategorizedTransaction} />
                 <td>
-                  <NavLink
-                    label="To Charge"
-                    className="[&>*>.mantine-NavLink-label]:font-semibold"
-                    onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-                      event.stopPropagation();
-                      window.open(
-                        getChargeHref(uncategorizedTransaction.transaction.chargeId),
-                        '_blank',
-                        'noreferrer',
-                      );
-                    }}
-                  />
+                  <Link
+                    to={getChargeHref(uncategorizedTransaction.transaction.chargeId)}
+                    target="_blank"
+                    rel="noreferrer"
+                    onClick={event => event.stopPropagation()}
+                    className="inline-flex items-center font-semibold"
+                  >
+                    To Charge
+                  </Link>
                 </td>
                 <Account data={uncategorizedTransaction.transaction} />
                 <Description data={uncategorizedTransaction.transaction} />

package/src/components/common/buttons/index.ts

@@ -1,5 +1,3 @@
-export * from './button.js';
-export * from './button-with-label.js';
 export * from './charge-navigate-button.js';
 export * from './close-document-button.js';
 export * from './confirm-mini-button.js';

package/src/components/common/buttons/logout-button.tsx

@@ -1,19 +1,20 @@
-import { useCallback, useContext, type ReactElement } from 'react';
+import { useContext, type ReactElement } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../../providers/auth-guard.js';
+import { ROUTES } from '../../../router/routes.js';
 import { Button } from '../../ui/button.js';
 
 export function LogoutButton(): ReactElement {
   const navigate = useNavigate();
   const { authService } = useContext(AuthContext);
 
-  const onLogout = useCallback(() => {
-    authService.logout();
-    navigate('/login');
-  }, [navigate, authService]);
+  const handleLogout = async (): Promise<void> => {
+    await authService.logout();
+    navigate(ROUTES.LOGIN);
+  };
 
   return (
-    <Button variant="ghost" onClick={onLogout}>
+    <Button variant="ghost" onClick={handleLogout}>
       Log out
     </Button>
   );

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/documents-to-charge-matcher/selection-handler/index.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState, type ReactElement } from 'react';
+import { Button } from '@/components/ui/button.js';
 import {
   ChargeToMatchDocumentsFieldsFragmentDoc,
   DocumentsToMatchFieldsFragmentDoc,
@@ -9,7 +10,6 @@ import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
 import { useUpdateDocument } from '../../../../hooks/use-update-document.js';
 import { FormLabel } from '../../../ui/form.js';
 import { Switch } from '../../../ui/switch.js';
-import { Button } from '../../index.js';
 import { StrictFilteredSelection } from './strict-filtered-selection.js';
 import { WideFilteredSelection } from './wide-filtered-selection.js';
 
@@ -165,7 +165,9 @@ export function SelectionHandler({ chargeProps, documentsProps, onDone }: Props)
             <Switch checked={filterSuggestions} onCheckedChange={setFilterSuggestions} />
           </div>
         )}
-        <Button title="Accept" disabled={selectedDocuments.length === 0} onClick={onExecuteMatch} />
+        <Button disabled={selectedDocuments.length === 0} onClick={onExecuteMatch}>
+          Accept
+        </Button>
       </div>
       <div>
         {filterSuggestions ? (

package/src/components/common/documents-to-charge-matcher/selection-handler/wide-filtered-selection.tsx

@@ -1,10 +1,11 @@
 import { useState, type ReactElement } from 'react';
+import { Button } from '@/components/ui/button.js';
 import { Image } from '@mantine/core';
 import {
   type ChargeToMatchDocumentsFieldsFragment,
   type DocumentsToMatchFieldsFragment,
 } from '../../../../gql/graphql.js';
-import { AccounterTable, Button, PopUpModal } from '../../index.js';
+import { AccounterTable, PopUpModal } from '../../index.js';
 
 interface Props {
   documents: Exclude<
@@ -53,12 +54,9 @@ export function WideFilteredSelection({
             title: 'File',
             value: doc =>
               doc.file && (
-                <Button
-                  target="_blank"
-                  rel="noreferrer"
-                  herf={doc.file?.toString()}
-                  title="Open Link"
-                />
+                <a href={doc.file?.toString()} target="_blank" rel="noreferrer">
+                  <Button>Open Link</Button>
+                </a>
               ),
           },
           { title: 'Date', value: doc => ('date' in doc ? doc.date : null) },

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/edit-document.tsx

@@ -1,12 +1,15 @@
 import { useEffect, useState, type ReactElement } from 'react';
 import { useForm, type SubmitHandler } from 'react-hook-form';
+import { Link } from 'react-router-dom';
 import { useQuery } from 'urql';
+import { Button } from '@/components/ui/button.js';
+import { Label } from '@/components/ui/label.js';
 import { Drawer, Image, Loader } from '@mantine/core';
 import { EditDocumentDocument, type UpdateDocumentFieldsInput } from '../../../gql/graphql.js';
 import { relevantDataPicker, type MakeBoolean } from '../../../helpers/form.js';
 import { useUpdateDocument } from '../../../hooks/use-update-document.js';
 import { Form } from '../../ui/form.js';
-import { ButtonWithLabel, ImageMagnifier, SimpleGrid } from '../index.js';
+import { ImageMagnifier, SimpleGrid } from '../index.js';
 import { ModifyDocumentFields } from './modify-document-fields.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -106,21 +109,31 @@ export const EditDocument = ({ documentId, onDone, onChange }: Props): ReactElem
               <form onSubmit={handleSubmit(onSubmit)}>
                 <SimpleGrid cols={4}>
                   <ModifyDocumentFields document={document} formManager={formManager} />
-                  <ButtonWithLabel
-                    target="_blank"
-                    textLabel="File"
-                    url={document?.file?.toString()}
-                    title="Open Link"
-                  />
+
+                  <div className="space-y-2">
+                    <Label htmlFor="file">File</Label>
+                    <Link
+                      to={document?.file?.toString() || ''}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="flex flex-col items-center justify-center mt-5"
+                    >
+                      <Button variant="outline" className="w-full mb-2">
+                        Open File
+                      </Button>
+                    </Link>
+                  </div>
                 </SimpleGrid>
                 <div className="flex justify-center mt-5">
-                  <button
+                  <Button
                     type="submit"
-                    className="inline-flex cursor-pointer justify-center py-2 px-4 w-2/12  border border-transparent shadow-xs text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    variant="default"
+                    // className="inline-flex cursor-pointer justify-center py-2 px-4 w-2/12 mr-5 border border-transparent shadow-xs text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    onClick={onDone}
                     disabled={fetching || Object.keys(dirtyFields).length === 0}
                   >
                     Save
-                  </button>
+                  </Button>
                 </div>
               </form>
             </Form>