el-contador 1.2.15 → 1.2.16

package/docker-compose.yml

@@ -41,6 +41,13 @@ services:
       INIT_ADMIN_PASSWORD: ${INIT_ADMIN_PASSWORD}
       GEMINI_API_KEY: ${GEMINI_API_KEY:-}
       GEMINI_MODEL: ${GEMINI_MODEL:-gemini-3.1-flash-lite-preview}
+      SMTP_HOST: ${SMTP_HOST:-}
+      SMTP_TLS_SERVERNAME: ${SMTP_TLS_SERVERNAME:-}
+      SMTP_PORT: ${SMTP_PORT:-587}
+      SMTP_SECURE: ${SMTP_SECURE:-false}
+      SMTP_USER: ${SMTP_USER:-}
+      SMTP_PASS: ${SMTP_PASS:-}
+      SMTP_FROM: ${SMTP_FROM:-}
       PORT: 3080
     ports:
       - "${ADMIN_PORT:-3080}:3080"

package/frontend/src/components/ui/checkbox.tsx

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary",
         className
       )}
       {...props}

package/frontend/src/components/ui/switch.tsx

@@ -14,14 +14,14 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[checked]:bg-primary data-[unchecked]:bg-input dark:data-[unchecked]:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[checked]:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-[checked]:translate-x-[calc(100%-2px)] dark:data-[checked]:bg-primary-foreground group-data-[size=default]/switch:data-[unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[unchecked]:translate-x-0 dark:data-[unchecked]:bg-foreground"
       />
     </SwitchPrimitive.Root>
   )

package/frontend/src/hooks/useContactLinks.ts

@@ -0,0 +1,74 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../lib/api';
+
+export type ContactLink = {
+  id: string;
+  supplierId: string;
+  supplierName: string;
+  customerId: string;
+  customerName: string;
+  notes: string;
+  createdAt: string;
+};
+
+export type InvoiceSettlement = {
+  id: string;
+  date: string;
+  description: string;
+  adjustmentAmount: number;
+  contactLinkId: string | null;
+  supplierId: string | null;
+  supplierName: string | null;
+  customerId: string | null;
+  customerName: string | null;
+  createdAt: string;
+  salesTotal: number;
+  expenseTotal: number;
+  sales: Array<{ id: string; invoiceNo: string; customer: string; total: number }>;
+  expenses: Array<{ id: string; vendor: string; invoiceNumber: string | null; total: number }>;
+};
+
+export function useContactLinks() {
+  return useQuery({
+    queryKey: ['contact-links'],
+    queryFn: async () => {
+      const { data } = await api.get<ContactLink[]>('/contact-links');
+      return data;
+    },
+  });
+}
+
+export function useCreateContactLink() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (body: { supplierId: string; customerId: string; notes?: string }) => {
+      const { data } = await api.post<ContactLink>('/contact-links', body);
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['contact-links'] });
+    },
+  });
+}
+
+export function useDeleteContactLink() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string) => {
+      await api.delete(`/contact-links/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['contact-links'] });
+    },
+  });
+}
+
+export function useInvoiceSettlements() {
+  return useQuery({
+    queryKey: ['reconciliation', 'settlements'],
+    queryFn: async () => {
+      const { data } = await api.get<{ settlements: InvoiceSettlement[] }>('/reconciliation/settlements');
+      return data.settlements;
+    },
+  });
+}

package/frontend/src/hooks/useContacts.ts

@@ -75,6 +75,20 @@ export function useDeleteCustomer() {
   });
 }
 
+export function useMergeCustomers() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (body: { keepCustomerId: string; mergeCustomerIds: string[] }) => {
+      const { data } = await api.post<{ ok: boolean; mergedCount: number }>('/customers/merge', body);
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['customers'] });
+      queryClient.invalidateQueries({ queryKey: ['sales'] });
+    },
+  });
+}
+
 // Suppliers
 export function useSuppliers() {
   return useQuery({

package/frontend/src/hooks/useExpenses.ts

@@ -22,6 +22,8 @@ export type Expense = {
   reconciledAt: string | null;
   supplierId: string | null;
   bankTransactionId: string | null;
+  settlementId?: string | null;
+  paymentSource?: 'bank' | 'settlement' | null;
   createdAt: string;
   createdBy?: string | null;
   creatorEmail?: string | null;
@@ -50,7 +52,7 @@ export function useExpenseCategories() {
   });
 }
 
-/** Accounts for expenses: not asset/revenue (100-299) and Allow expenses enabled on the account */
+/** Accounts for expenses: Allow expenses enabled on the account */
 export function useExpenseAccounts() {
   return useQuery({
     queryKey: ['accounts', 'expense'],

package/frontend/src/pages/Contacts.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react';
-import { useCustomers, useCreateCustomer, useUpdateCustomer, useDeleteCustomer, type Customer } from '../hooks/useContacts';
+import { useCustomers, useCreateCustomer, useUpdateCustomer, useDeleteCustomer, useMergeCustomers, type Customer } from '../hooks/useContacts';
 import { useSuppliers, useCreateSupplier, useUpdateSupplier, useDeleteSupplier, useMergeSuppliers, type Supplier } from '../hooks/useContacts';
 import { usePayees, useCreatePayee, useUpdatePayee, useDeletePayee, type Payee } from '../hooks/useContacts';
+import { useContactLinks, useCreateContactLink, useDeleteContactLink } from '../hooks/useContactLinks';
 import { useExpenseCategories as useExpenseCategoriesHook, useExpenseAccounts } from '../hooks/useExpenses';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
@@ -40,6 +41,10 @@ export default function Contacts() {
   const createCustomer = useCreateCustomer();
   const updateCustomer = useUpdateCustomer();
   const deleteCustomer = useDeleteCustomer();
+  const mergeCustomers = useMergeCustomers();
+
+  const [clientMergeMode, setClientMergeMode] = useState(false);
+  const [clientIdsSelectedForMerge, setClientIdsSelectedForMerge] = useState<Set<string>>(new Set());
 
   const { data: suppliers, isLoading: loadingSuppliers } = useSuppliers();
   const { data: categories } = useExpenseCategoriesHook();
@@ -53,9 +58,18 @@ export default function Contacts() {
   const [supplierMergeMode, setSupplierMergeMode] = useState(false);
   const [supplierIdsSelectedForMerge, setSupplierIdsSelectedForMerge] = useState<Set<string>>(new Set());
   const [mergeWizardOpen, setMergeWizardOpen] = useState(false);
-  const [mergeCandidates, setMergeCandidates] = useState<Supplier[]>([]);
+  const [mergeType, setMergeType] = useState<'client' | 'supplier' | null>(null);
+  const [mergeCandidates, setMergeCandidates] = useState<(Customer | Supplier)[]>([]);
   const [mergeKeepId, setMergeKeepId] = useState<string>('');
+  const [mergeConfirmOpen, setMergeConfirmOpen] = useState(false);
   const [supplierDuplicateMatches, setSupplierDuplicateMatches] = useState<Array<{ id: string; name: string }> | null>(null);
+  const [linkDialogOpen, setLinkDialogOpen] = useState(false);
+  const [linkSupplierId, setLinkSupplierId] = useState('');
+  const [linkCustomerId, setLinkCustomerId] = useState('');
+
+  const { data: contactLinks = [], isLoading: loadingContactLinks } = useContactLinks();
+  const createContactLink = useCreateContactLink();
+  const deleteContactLink = useDeleteContactLink();
 
   const { data: payees, isLoading: loadingPayees } = usePayees();
   const createPayee = useCreatePayee();
@@ -163,6 +177,63 @@ export default function Contacts() {
         <p className="text-muted-foreground">Manage clients, suppliers and payees. Add account numbers for bank or ledger reference.</p>
       </div>
 
+      <Card>
+        <CardHeader className="flex flex-row flex-wrap items-center justify-between gap-2 py-4">
+          <div>
+            <span className="text-sm font-medium">Supplier–client links</span>
+            <p className="text-xs text-muted-foreground mt-1">
+              Connect the same party on both sides (e.g. CP3 as supplier and client) for invoice offset reconciliation.
+            </p>
+          </div>
+          <Button type="button" size="sm" onClick={() => { setLinkSupplierId(''); setLinkCustomerId(''); setLinkDialogOpen(true); }}>
+            Add link
+          </Button>
+        </CardHeader>
+        <CardContent>
+          {loadingContactLinks ? (
+            <Skeleton className="h-16 w-full" />
+          ) : contactLinks.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No links yet. Link a supplier to a client when they are the same organisation.</p>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Supplier</TableHead>
+                  <TableHead>Client</TableHead>
+                  <TableHead className="w-[100px]">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {contactLinks.map((link) => (
+                  <TableRow key={link.id}>
+                    <TableCell>{link.supplierName}</TableCell>
+                    <TableCell>{link.customerName}</TableCell>
+                    <TableCell>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 text-destructive"
+                        onClick={async () => {
+                          if (!confirm(`Remove link between ${link.supplierName} and ${link.customerName}?`)) return;
+                          try {
+                            await deleteContactLink.mutateAsync(link.id);
+                          } catch (err) {
+                            console.error(err);
+                            alert('Failed to remove link');
+                          }
+                        }}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
       <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as ContactType)} className="space-y-4">
         <TabsList>
           <TabsTrigger value="client">Clients</TabsTrigger>
@@ -172,9 +243,39 @@ export default function Contacts() {
 
         <TabsContent value="client" className="space-y-4">
           <Card>
-            <CardHeader className="flex flex-row items-center justify-between py-4">
+            <CardHeader className="flex flex-row flex-wrap items-center justify-between gap-2 py-4">
               <span className="text-sm font-medium">Customers you invoice</span>
-              <Button onClick={handleOpenCreate}>Add client</Button>
+              <div className="flex flex-wrap items-center gap-2">
+                <Button
+                  type="button"
+                  variant={clientMergeMode ? 'secondary' : 'outline'}
+                  size="sm"
+                  onClick={() => {
+                    setClientMergeMode((m) => !m);
+                    setClientIdsSelectedForMerge(new Set());
+                  }}
+                >
+                  {clientMergeMode ? 'Exit merge mode' : 'Merge clients'}
+                </Button>
+                {clientMergeMode && clientIdsSelectedForMerge.size >= 2 && (
+                  <Button
+                    type="button"
+                    size="sm"
+                    onClick={() => {
+                      const ids = Array.from(clientIdsSelectedForMerge);
+                      const candidates = (customers ?? []).filter((c) => ids.includes(c.id));
+                      if (candidates.length < 2) return;
+                      setMergeType('client');
+                      setMergeCandidates(candidates);
+                      setMergeKeepId(candidates[0].id);
+                      setMergeWizardOpen(true);
+                    }}
+                  >
+                    Merge selected ({clientIdsSelectedForMerge.size})
+                  </Button>
+                )}
+                <Button onClick={handleOpenCreate}>Add client</Button>
+              </div>
             </CardHeader>
             <CardContent>
               {loadingCustomers ? (
@@ -183,6 +284,7 @@ export default function Contacts() {
                 <Table>
                   <TableHeader>
                     <TableRow>
+                      {clientMergeMode && <TableHead className="w-10" />}
                       <TableHead>Name</TableHead>
                       <TableHead>Account number</TableHead>
                       <TableHead>Email</TableHead>
@@ -193,23 +295,51 @@ export default function Contacts() {
                   <TableBody>
                     {(customers ?? []).length === 0 ? (
                       <TableRow>
-                        <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
+                        <TableCell colSpan={clientMergeMode ? 6 : 5} className="text-center py-8 text-muted-foreground">
                           No clients yet. Add one to get started.
                         </TableCell>
                       </TableRow>
                     ) : (
                       (customers ?? []).map((row) => (
                         <TableRow key={row.id}>
+                          {clientMergeMode && (
+                            <TableCell className="w-10">
+                              <Checkbox
+                                checked={clientIdsSelectedForMerge.has(row.id)}
+                                onCheckedChange={(checked) => {
+                                  setClientIdsSelectedForMerge((prev) => {
+                                    const next = new Set(prev);
+                                    if (checked === true) next.add(row.id);
+                                    else next.delete(row.id);
+                                    return next;
+                                  });
+                                }}
+                                aria-label={`Select ${row.name} for merge`}
+                              />
+                            </TableCell>
+                          )}
                           <TableCell className="font-medium">{row.name}</TableCell>
                           <TableCell>{row.accountNumber || '-'}</TableCell>
                           <TableCell>{row.email || '-'}</TableCell>
                           <TableCell>{row.phone || '-'}</TableCell>
                           <TableCell>
                             <div className="flex items-center gap-1">
-                              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleOpenEdit(row)}>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8"
+                                disabled={clientMergeMode}
+                                onClick={() => handleOpenEdit(row)}
+                              >
                                 <Pencil className="h-4 w-4" />
                               </Button>
-                              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive" onClick={() => handleDelete('client', row.id)}>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8 text-destructive"
+                                disabled={clientMergeMode}
+                                onClick={() => handleDelete('client', row.id)}
+                              >
                                 <Trash2 className="h-4 w-4" />
                               </Button>
                             </div>
@@ -248,6 +378,7 @@ export default function Contacts() {
                       const ids = Array.from(supplierIdsSelectedForMerge);
                       const candidates = (suppliers ?? []).filter((s) => ids.includes(s.id));
                       if (candidates.length < 2) return;
+                      setMergeType('supplier');
                       setMergeCandidates(candidates);
                       setMergeKeepId(candidates[0].id);
                       setMergeWizardOpen(true);
@@ -397,15 +528,18 @@ export default function Contacts() {
         open={mergeWizardOpen}
         onOpenChange={(open) => {
           setMergeWizardOpen(open);
-          if (!open) setMergeCandidates([]);
+          if (!open) {
+            setMergeCandidates([]);
+            setMergeType(null);
+          }
         }}
       >
         <DialogContent className="sm:max-w-[480px]">
           <DialogHeader>
-            <DialogTitle>Merge suppliers</DialogTitle>
+            <DialogTitle>Merge {mergeType === 'client' ? 'clients' : 'suppliers'}</DialogTitle>
           </DialogHeader>
           <p className="text-sm text-muted-foreground">
-            Choose the supplier to keep. The others will be removed and any expenses linked to them will point to the kept supplier. Contact details on the kept row are filled from merged rows when empty.
+            Choose the {mergeType === 'client' ? 'client' : 'supplier'} to keep. Contact details on the kept row are filled from merged rows when empty.
           </p>
           <div className="space-y-2 max-h-[40vh] overflow-y-auto">
             {mergeCandidates.map((s) => (
@@ -427,22 +561,101 @@ export default function Contacts() {
             </Button>
             <Button
               type="button"
-              disabled={mergeSuppliers.isPending || !mergeKeepId || mergeCandidates.length < 2}
+              disabled={!mergeKeepId || mergeCandidates.length < 2}
+              onClick={() => {
+                setMergeWizardOpen(false);
+                setMergeConfirmOpen(true);
+              }}
+            >
+              Continue
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={mergeConfirmOpen}
+        onOpenChange={(open) => {
+          setMergeConfirmOpen(open);
+          if (!open) {
+            setMergeCandidates([]);
+            setMergeType(null);
+            setMergeKeepId('');
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>Confirm merge</DialogTitle>
+          </DialogHeader>
+          <div className="rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm space-y-2">
+            <p className="font-medium text-destructive">This action cannot be undone.</p>
+            <p className="text-muted-foreground">
+              {mergeCandidates.filter((c) => c.id !== mergeKeepId).length}{' '}
+              {mergeType === 'client' ? 'client' : 'supplier'}
+              {mergeCandidates.filter((c) => c.id !== mergeKeepId).length === 1 ? '' : 's'} will be permanently removed:
+            </p>
+            <ul className="list-disc list-inside text-muted-foreground">
+              {mergeCandidates
+                .filter((c) => c.id !== mergeKeepId)
+                .map((c) => (
+                  <li key={c.id}>{c.name}</li>
+                ))}
+            </ul>
+            <p className="text-muted-foreground">
+              {mergeType === 'client'
+                ? 'Any sales linked to the removed clients will point to '
+                : 'Any expenses linked to the removed suppliers will point to '}
+              <span className="font-medium text-foreground">
+                {mergeCandidates.find((c) => c.id === mergeKeepId)?.name}
+              </span>
+              .
+            </p>
+          </div>
+          <div className="flex justify-end gap-2 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setMergeConfirmOpen(false);
+                setMergeWizardOpen(true);
+              }}
+            >
+              Go back
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              disabled={
+                (mergeType === 'client' ? mergeCustomers.isPending : mergeSuppliers.isPending) ||
+                !mergeKeepId ||
+                mergeCandidates.length < 2
+              }
               onClick={async () => {
-                const mergeSupplierIds = mergeCandidates.filter((s) => s.id !== mergeKeepId).map((s) => s.id);
+                const mergeIds = mergeCandidates.filter((c) => c.id !== mergeKeepId).map((c) => c.id);
                 try {
-                  await mergeSuppliers.mutateAsync({ keepSupplierId: mergeKeepId, mergeSupplierIds });
-                  setMergeWizardOpen(false);
+                  if (mergeType === 'client') {
+                    await mergeCustomers.mutateAsync({ keepCustomerId: mergeKeepId, mergeCustomerIds: mergeIds });
+                    setClientIdsSelectedForMerge(new Set());
+                    setClientMergeMode(false);
+                  } else {
+                    await mergeSuppliers.mutateAsync({ keepSupplierId: mergeKeepId, mergeSupplierIds: mergeIds });
+                    setSupplierIdsSelectedForMerge(new Set());
+                    setSupplierMergeMode(false);
+                  }
+                  setMergeConfirmOpen(false);
                   setMergeCandidates([]);
-                  setSupplierIdsSelectedForMerge(new Set());
-                  setSupplierMergeMode(false);
+                  setMergeType(null);
+                  setMergeKeepId('');
                 } catch (e) {
                   console.error(e);
                   alert('Merge failed. Try again or check the server log.');
                 }
               }}
             >
-              {mergeSuppliers.isPending ? 'Merging…' : 'Confirm merge'}
+              {(mergeType === 'client' ? mergeCustomers.isPending : mergeSuppliers.isPending)
+                ? 'Merging…'
+                : 'Yes, merge permanently'}
             </Button>
           </div>
         </DialogContent>
@@ -567,6 +780,82 @@ export default function Contacts() {
                 )}
               </div>
             )}
+            {activeTab === 'supplier' && editing?.id && (
+              <div className="space-y-2 rounded-md border p-3 bg-muted/30">
+                <label className="text-sm font-medium">Linked clients</label>
+                {(contactLinks.filter((l) => l.supplierId === editing.id)).length === 0 ? (
+                  <p className="text-xs text-muted-foreground">No linked clients. Use &quot;Add link&quot; above or pick a client below.</p>
+                ) : (
+                  <ul className="text-sm space-y-1">
+                    {contactLinks.filter((l) => l.supplierId === editing.id).map((l) => (
+                      <li key={l.id}>{l.customerName}</li>
+                    ))}
+                  </ul>
+                )}
+                <Select
+                  value={linkCustomerId}
+                  onValueChange={async (customerId) => {
+                    if (!customerId || !editing?.id) return;
+                    try {
+                      await createContactLink.mutateAsync({ supplierId: editing.id, customerId });
+                      setLinkCustomerId('');
+                    } catch (err) {
+                      console.error(err);
+                      alert('Failed to create link');
+                    }
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Link to client…" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(customers ?? [])
+                      .filter((c) => !contactLinks.some((l) => l.supplierId === editing.id && l.customerId === c.id))
+                      .map((c) => (
+                        <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+            {activeTab === 'client' && editing?.id && (
+              <div className="space-y-2 rounded-md border p-3 bg-muted/30">
+                <label className="text-sm font-medium">Linked suppliers</label>
+                {(contactLinks.filter((l) => l.customerId === editing.id)).length === 0 ? (
+                  <p className="text-xs text-muted-foreground">No linked suppliers. Use &quot;Add link&quot; above or pick a supplier below.</p>
+                ) : (
+                  <ul className="text-sm space-y-1">
+                    {contactLinks.filter((l) => l.customerId === editing.id).map((l) => (
+                      <li key={l.id}>{l.supplierName}</li>
+                    ))}
+                  </ul>
+                )}
+                <Select
+                  value={linkSupplierId}
+                  onValueChange={async (supplierId) => {
+                    if (!supplierId || !editing?.id) return;
+                    try {
+                      await createContactLink.mutateAsync({ supplierId, customerId: editing.id });
+                      setLinkSupplierId('');
+                    } catch (err) {
+                      console.error(err);
+                      alert('Failed to create link');
+                    }
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Link to supplier…" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(suppliers ?? [])
+                      .filter((s) => !contactLinks.some((l) => l.customerId === editing.id && l.supplierId === s.id))
+                      .map((s) => (
+                        <SelectItem key={s.id} value={s.id}>{s.name}</SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
             <div className="space-y-2">
               <label className="text-sm font-medium">Address</label>
               <Input value={form.address} onChange={(e) => setForm((p) => ({ ...p, address: e.target.value }))} />
@@ -586,6 +875,65 @@ export default function Contacts() {
           </form>
         </DialogContent>
       </Dialog>
+
+      <Dialog open={linkDialogOpen} onOpenChange={setLinkDialogOpen}>
+        <DialogContent className="sm:max-w-[480px]">
+          <DialogHeader>
+            <DialogTitle>Link supplier to client</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Supplier</label>
+              <Select value={linkSupplierId} onValueChange={(v) => setLinkSupplierId(v || '')}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select supplier" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(suppliers ?? []).map((s) => (
+                    <SelectItem key={s.id} value={s.id}>{s.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Client</label>
+              <Select value={linkCustomerId} onValueChange={(v) => setLinkCustomerId(v || '')}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select client" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(customers ?? []).map((c) => (
+                    <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex justify-end gap-2 pt-2">
+              <Button type="button" variant="outline" onClick={() => setLinkDialogOpen(false)}>Cancel</Button>
+              <Button
+                type="button"
+                disabled={!linkSupplierId || !linkCustomerId || createContactLink.isPending}
+                onClick={async () => {
+                  try {
+                    await createContactLink.mutateAsync({
+                      supplierId: linkSupplierId,
+                      customerId: linkCustomerId,
+                    });
+                    setLinkDialogOpen(false);
+                    setLinkSupplierId('');
+                    setLinkCustomerId('');
+                  } catch (err) {
+                    console.error(err);
+                    alert('Failed to create link');
+                  }
+                }}
+              >
+                {createContactLink.isPending ? 'Linking…' : 'Create link'}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }