@accounter/client 0.0.8-alpha-20251028122020-22393814f274e46c107aca0d7b3f8acafeabbb81 → 0.0.8-alpha-20251028123001-a8ce4e53bbde9f6eeded7bfeea650700f6a63130

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

@@ -21,7 +21,7 @@ import {
   query ClientContractsSection($clientId: UUID!) {
     contractsByClient(clientId: $clientId) {
       id
-      purchaseOrder
+      purchaseOrders
       startDate
       endDate
       amount {
@@ -46,7 +46,7 @@ function convertContractDataToFormValues(
     id: contract.id,
     // TODO: activate this field later. requires additional backend support
     // operationsLimit: 0, // Placeholder, as this field is not in the query
-    po: contract.purchaseOrder ?? undefined,
+    pos: contract.purchaseOrders ?? undefined,
     startDate: contract.startDate,
     endDate: contract.endDate,
     paymentAmount: contract.amount.raw,
@@ -130,8 +130,22 @@ export function ContractsSection({ clientId }: Props) {
                 </div>
 
                 <div className="space-y-0">
-                  <p className="text-sm text-muted-foreground">PO Number</p>
-                  <p className="text-sm font-medium font-mono">{contract.purchaseOrder}</p>
+                  <p className="text-sm text-muted-foreground">PO Numbers</p>
+                  <p className="text-sm font-medium font-mono">
+                    {contract.purchaseOrders.toReversed()[0] ?? ''}
+                  </p>
+                  {contract.purchaseOrders.length > 1 && (
+                    <div className="space-x-1">
+                      {contract.purchaseOrders
+                        .toReversed()
+                        .slice(1)
+                        .map(po => (
+                          <span key={po} className="text-xs font-thin font-mono">
+                            {po}
+                          </span>
+                        ))}
+                    </div>
+                  )}
                 </div>
 
                 {/* TODO: activate this field later. requires additional backend support */}

package/src/components/clients/contracts/modify-contract-dialog.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 import { format } from 'date-fns';
-import { Plus } from 'lucide-react';
+import { 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,
@@ -48,7 +49,7 @@ const contractFormSchema = z.object({
   // operationsLimit: z.number().optional(),
   startDate: z.iso.date('Start date is required'),
   endDate: z.iso.date('End date is required'),
-  po: z.string().optional(),
+  pos: z.array(z.string()),
   paymentAmount: z.number().min(0, 'Payment amount must be non-negative'),
   paymentCurrency: z.enum(Object.values(Currency), 'Currency is required'),
   productType: z.enum(Object.values(Product)).optional(),
@@ -67,7 +68,7 @@ const newContractDefaultValues: ContractFormValues = {
   // operationsLimit: 0,
   startDate: '',
   endDate: '',
-  po: undefined,
+  pos: [],
   paymentAmount: 0,
   paymentCurrency: Currency.Usd,
   productType: Product.Hive,
@@ -88,6 +89,7 @@ interface Props {
 export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [editingContract, setEditingContract] = useState<ContractFormValues | null>(null);
+  const [newPO, setNewPO] = useState('');
 
   const { updateContract, updating } = useUpdateContract();
   const { createContract, creating } = useCreateContract();
@@ -97,6 +99,26 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
     defaultValues: contract || newContractDefaultValues,
   });
 
+  const addPO = () => {
+    const trimmedPO = newPO.trim();
+    if (trimmedPO) {
+      const currentLinks = form.getValues('pos');
+      if (!currentLinks.includes(trimmedPO)) {
+        form.setValue('pos', [...currentLinks, trimmedPO], { shouldDirty: true });
+      }
+      setNewPO('');
+    }
+  };
+
+  const removePO = (index: number) => {
+    const currentLinks = form.getValues('pos');
+    form.setValue(
+      'pos',
+      currentLinks.filter((_, i) => i !== index),
+      { shouldDirty: true },
+    );
+  };
+
   useEffect(() => {
     if (contract) {
       setEditingContract(contract);
@@ -105,7 +127,7 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
         // operationsLimit: contract.operationsLimit,
         startDate: contract.startDate,
         endDate: contract.endDate,
-        po: contract.po,
+        pos: contract.pos,
         paymentAmount: contract.paymentAmount,
         paymentCurrency: contract.paymentCurrency,
         productType: contract.productType,
@@ -141,7 +163,7 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
             msCloud: values.msCloudLink,
             plan: values.subscriptionPlan,
             product: values.productType,
-            purchaseOrder: values.po,
+            purchaseOrders: values.pos,
             remarks: values.defaultRemark,
             startDate: format(new Date(values.startDate), 'yyyy-MM-dd') as TimelessDateString,
           },
@@ -163,7 +185,7 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
             msCloud: values.msCloudLink,
             plan: values.subscriptionPlan,
             product: values.productType,
-            purchaseOrder: values.po,
+            purchaseOrders: values.pos,
             remarks: values.defaultRemark,
             startDate: format(new Date(values.startDate), 'yyyy-MM-dd') as TimelessDateString,
           },
@@ -211,15 +233,46 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
                     </FormItem>
                   )}
                 /> */}
+
                 <FormField
                   control={form.control}
-                  name="po"
+                  name="pos"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>PO Number</FormLabel>
-                      <FormControl>
-                        <Input placeholder="PO-2024-001" {...field} />
-                      </FormControl>
+                      <FormLabel>Purchase Orders</FormLabel>
+                      <div className="flex gap-2">
+                        <Input
+                          placeholder="Add PO..."
+                          value={newPO}
+                          onChange={e => setNewPO(e.target.value)}
+                          onKeyDown={e => {
+                            if (e.key === 'Enter') {
+                              e.preventDefault();
+                              addPO();
+                            }
+                          }}
+                        />
+                        <Button type="button" size="sm" onClick={addPO}>
+                          <Plus className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      <div className="flex flex-wrap gap-2 mt-2">
+                        {field.value?.map((link, index) => (
+                          <Badge key={link} variant="secondary" className="gap-1 max-w-xs truncate">
+                            {link}
+                            {index === field.value.length - 1 && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="p-0 size-3"
+                                onClick={() => removePO(index)}
+                              >
+                                <X className="size-3 cursor-pointer flex-shrink-0" />
+                              </Button>
+                            )}
+                          </Badge>
+                        ))}
+                      </div>
                       <FormMessage />
                     </FormItem>
                   )}

package/src/gql/gql.ts

@@ -26,7 +26,7 @@ type Documents = {
     "\n  query BusinessChargesSection($page: Int, $limit: Int, $filters: ChargeFilter) {\n    allCharges(page: $page, limit: $limit, filters: $filters) {\n      nodes {\n        id\n        ...ChargesTableFields\n      }\n      pageInfo {\n        totalPages\n      }\n    }\n  }\n": typeof types.BusinessChargesSectionDocument,
     "\n  fragment BusinessConfigurationSection on Business {\n    __typename\n    id\n    pcn874RecordType\n    irsCode\n    isActive\n    ... on LtdFinancialEntity {\n      optionalVAT\n      exemptDealer\n      isReceiptEnough\n      isDocumentsOptional\n      sortCode {\n        id\n        key\n        defaultIrsCode\n      }\n      taxCategory {\n        id\n      }\n      suggestions {\n        phrases\n        emails\n        tags {\n          id\n        }\n        description\n        emailListener {\n          internalEmailLinks\n          emailBody\n          attachments\n        }\n      }\n      clientInfo {\n        id\n      }\n    }\n  }\n": typeof types.BusinessConfigurationSectionFragmentDoc,
     "\n  fragment BusinessContactSection on Business {\n    __typename\n    id\n    ... on LtdFinancialEntity {\n      name\n      hebrewName\n      country\n      governmentId\n      address\n      email\n      # localAddress\n      phoneNumber\n      website\n      clientInfo {\n        id\n        emails\n      }\n    }\n  }\n": typeof types.BusinessContactSectionFragmentDoc,
-    "\n  query ClientContractsSection($clientId: UUID!) {\n    contractsByClient(clientId: $clientId) {\n      id\n      purchaseOrder\n      startDate\n      endDate\n      amount {\n        raw\n        currency\n      }\n      billingCycle\n      isActive\n      product\n      documentType\n      remarks\n      plan\n      msCloud\n    }\n  }\n": typeof types.ClientContractsSectionDocument,
+    "\n  query ClientContractsSection($clientId: UUID!) {\n    contractsByClient(clientId: $clientId) {\n      id\n      purchaseOrders\n      startDate\n      endDate\n      amount {\n        raw\n        currency\n      }\n      billingCycle\n      isActive\n      product\n      documentType\n      remarks\n      plan\n      msCloud\n    }\n  }\n": typeof types.ClientContractsSectionDocument,
     "\n  fragment BusinessPage on Business {\n    id\n    ... on LtdFinancialEntity {\n      clientInfo {\n        id\n      }\n      adminInfo {\n        id\n      }\n    }\n    ...ClientIntegrationsSection\n    ...BusinessHeader\n    ...BusinessContactSection\n    ...BusinessConfigurationSection\n    ...BusinessAdminSection\n  }\n": typeof types.BusinessPageFragmentDoc,
     "\n  fragment ClientIntegrationsSection on LtdFinancialEntity {\n    id\n    clientInfo {\n      id\n      greenInvoiceId\n      hiveId\n    }\n  }\n": typeof types.ClientIntegrationsSectionFragmentDoc,
     "\n  query ClientIntegrationsSectionGreenInvoice($clientId: UUID!) {\n    greenInvoiceClient(clientId: $clientId) {\n      id\n      country\n      emails\n      name\n      phone\n      taxId\n      address\n      city\n      zip\n      fax\n      mobile\n    }\n  }\n": typeof types.ClientIntegrationsSectionGreenInvoiceDocument,
@@ -211,7 +211,7 @@ type Documents = {
     "\n  mutation DeleteTag($tagId: UUID!) {\n    deleteTag(id: $tagId)\n  }\n": typeof types.DeleteTagDocument,
     "\n  mutation FetchIncomeDocuments($ownerId: UUID!) {\n    fetchIncomeDocuments(ownerId: $ownerId) {\n      id\n      ...NewFetchedDocumentFields\n    }\n  }\n": typeof types.FetchIncomeDocumentsDocument,
     "\n  query AllClients {\n    allClients {\n      id\n      greenInvoiceId\n      emails\n      originalBusiness {\n        id\n        name\n      }\n    }\n  }\n": typeof types.AllClientsDocument,
-    "\n  query AllOpenContracts {\n    allOpenContracts {\n      id\n      client {\n        id\n        greenInvoiceId\n        emails\n        originalBusiness {\n          id\n          name\n        }\n      }\n      purchaseOrder\n      startDate\n      endDate\n      remarks\n      amount {\n        raw\n        currency\n        formatted\n      }\n      documentType\n      billingCycle\n      isActive\n      product\n      plan\n      msCloud\n    }\n  }\n": typeof types.AllOpenContractsDocument,
+    "\n  query AllOpenContracts {\n    allOpenContracts {\n      id\n      client {\n        id\n        greenInvoiceId\n        emails\n        originalBusiness {\n          id\n          name\n        }\n      }\n      purchaseOrders\n      startDate\n      endDate\n      remarks\n      amount {\n        raw\n        currency\n        formatted\n      }\n      documentType\n      billingCycle\n      isActive\n      product\n      plan\n      msCloud\n    }\n  }\n": typeof types.AllOpenContractsDocument,
     "\n  query AllBusinesses {\n    allBusinesses {\n      nodes {\n        id\n        name\n      }\n    }\n  }\n": typeof types.AllBusinessesDocument,
     "\n  query AllCountries {\n    allCountries {\n      id\n      name\n      code\n    }\n  }\n": typeof types.AllCountriesDocument,
     "\n  query AllFinancialEntities {\n    allFinancialEntities {\n      nodes {\n        id\n        name\n      }\n    }\n  }\n": typeof types.AllFinancialEntitiesDocument,
@@ -278,7 +278,7 @@ const documents: Documents = {
     "\n  query BusinessChargesSection($page: Int, $limit: Int, $filters: ChargeFilter) {\n    allCharges(page: $page, limit: $limit, filters: $filters) {\n      nodes {\n        id\n        ...ChargesTableFields\n      }\n      pageInfo {\n        totalPages\n      }\n    }\n  }\n": types.BusinessChargesSectionDocument,
     "\n  fragment BusinessConfigurationSection on Business {\n    __typename\n    id\n    pcn874RecordType\n    irsCode\n    isActive\n    ... on LtdFinancialEntity {\n      optionalVAT\n      exemptDealer\n      isReceiptEnough\n      isDocumentsOptional\n      sortCode {\n        id\n        key\n        defaultIrsCode\n      }\n      taxCategory {\n        id\n      }\n      suggestions {\n        phrases\n        emails\n        tags {\n          id\n        }\n        description\n        emailListener {\n          internalEmailLinks\n          emailBody\n          attachments\n        }\n      }\n      clientInfo {\n        id\n      }\n    }\n  }\n": types.BusinessConfigurationSectionFragmentDoc,
     "\n  fragment BusinessContactSection on Business {\n    __typename\n    id\n    ... on LtdFinancialEntity {\n      name\n      hebrewName\n      country\n      governmentId\n      address\n      email\n      # localAddress\n      phoneNumber\n      website\n      clientInfo {\n        id\n        emails\n      }\n    }\n  }\n": types.BusinessContactSectionFragmentDoc,
-    "\n  query ClientContractsSection($clientId: UUID!) {\n    contractsByClient(clientId: $clientId) {\n      id\n      purchaseOrder\n      startDate\n      endDate\n      amount {\n        raw\n        currency\n      }\n      billingCycle\n      isActive\n      product\n      documentType\n      remarks\n      plan\n      msCloud\n    }\n  }\n": types.ClientContractsSectionDocument,
+    "\n  query ClientContractsSection($clientId: UUID!) {\n    contractsByClient(clientId: $clientId) {\n      id\n      purchaseOrders\n      startDate\n      endDate\n      amount {\n        raw\n        currency\n      }\n      billingCycle\n      isActive\n      product\n      documentType\n      remarks\n      plan\n      msCloud\n    }\n  }\n": types.ClientContractsSectionDocument,
     "\n  fragment BusinessPage on Business {\n    id\n    ... on LtdFinancialEntity {\n      clientInfo {\n        id\n      }\n      adminInfo {\n        id\n      }\n    }\n    ...ClientIntegrationsSection\n    ...BusinessHeader\n    ...BusinessContactSection\n    ...BusinessConfigurationSection\n    ...BusinessAdminSection\n  }\n": types.BusinessPageFragmentDoc,
     "\n  fragment ClientIntegrationsSection on LtdFinancialEntity {\n    id\n    clientInfo {\n      id\n      greenInvoiceId\n      hiveId\n    }\n  }\n": types.ClientIntegrationsSectionFragmentDoc,
     "\n  query ClientIntegrationsSectionGreenInvoice($clientId: UUID!) {\n    greenInvoiceClient(clientId: $clientId) {\n      id\n      country\n      emails\n      name\n      phone\n      taxId\n      address\n      city\n      zip\n      fax\n      mobile\n    }\n  }\n": types.ClientIntegrationsSectionGreenInvoiceDocument,
@@ -463,7 +463,7 @@ const documents: Documents = {
     "\n  mutation DeleteTag($tagId: UUID!) {\n    deleteTag(id: $tagId)\n  }\n": types.DeleteTagDocument,
     "\n  mutation FetchIncomeDocuments($ownerId: UUID!) {\n    fetchIncomeDocuments(ownerId: $ownerId) {\n      id\n      ...NewFetchedDocumentFields\n    }\n  }\n": types.FetchIncomeDocumentsDocument,
     "\n  query AllClients {\n    allClients {\n      id\n      greenInvoiceId\n      emails\n      originalBusiness {\n        id\n        name\n      }\n    }\n  }\n": types.AllClientsDocument,
-    "\n  query AllOpenContracts {\n    allOpenContracts {\n      id\n      client {\n        id\n        greenInvoiceId\n        emails\n        originalBusiness {\n          id\n          name\n        }\n      }\n      purchaseOrder\n      startDate\n      endDate\n      remarks\n      amount {\n        raw\n        currency\n        formatted\n      }\n      documentType\n      billingCycle\n      isActive\n      product\n      plan\n      msCloud\n    }\n  }\n": types.AllOpenContractsDocument,
+    "\n  query AllOpenContracts {\n    allOpenContracts {\n      id\n      client {\n        id\n        greenInvoiceId\n        emails\n        originalBusiness {\n          id\n          name\n        }\n      }\n      purchaseOrders\n      startDate\n      endDate\n      remarks\n      amount {\n        raw\n        currency\n        formatted\n      }\n      documentType\n      billingCycle\n      isActive\n      product\n      plan\n      msCloud\n    }\n  }\n": types.AllOpenContractsDocument,
     "\n  query AllBusinesses {\n    allBusinesses {\n      nodes {\n        id\n        name\n      }\n    }\n  }\n": types.AllBusinessesDocument,
     "\n  query AllCountries {\n    allCountries {\n      id\n      name\n      code\n    }\n  }\n": types.AllCountriesDocument,
     "\n  query AllFinancialEntities {\n    allFinancialEntities {\n      nodes {\n        id\n        name\n      }\n    }\n  }\n": types.AllFinancialEntitiesDocument,
@@ -583,7 +583,7 @@ export function graphql(source: "\n  fragment BusinessContactSection on Business
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query ClientContractsSection($clientId: UUID!) {\n    contractsByClient(clientId: $clientId) {\n      id\n      purchaseOrder\n      startDate\n      endDate\n      amount {\n        raw\n        currency\n      }\n      billingCycle\n      isActive\n      product\n      documentType\n      remarks\n      plan\n      msCloud\n    }\n  }\n"): (typeof documents)["\n  query ClientContractsSection($clientId: UUID!) {\n    contractsByClient(clientId: $clientId) {\n      id\n      purchaseOrder\n      startDate\n      endDate\n      amount {\n        raw\n        currency\n      }\n      billingCycle\n      isActive\n      product\n      documentType\n      remarks\n      plan\n      msCloud\n    }\n  }\n"];
+export function graphql(source: "\n  query ClientContractsSection($clientId: UUID!) {\n    contractsByClient(clientId: $clientId) {\n      id\n      purchaseOrders\n      startDate\n      endDate\n      amount {\n        raw\n        currency\n      }\n      billingCycle\n      isActive\n      product\n      documentType\n      remarks\n      plan\n      msCloud\n    }\n  }\n"): (typeof documents)["\n  query ClientContractsSection($clientId: UUID!) {\n    contractsByClient(clientId: $clientId) {\n      id\n      purchaseOrders\n      startDate\n      endDate\n      amount {\n        raw\n        currency\n      }\n      billingCycle\n      isActive\n      product\n      documentType\n      remarks\n      plan\n      msCloud\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -1323,7 +1323,7 @@ export function graphql(source: "\n  query AllClients {\n    allClients {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query AllOpenContracts {\n    allOpenContracts {\n      id\n      client {\n        id\n        greenInvoiceId\n        emails\n        originalBusiness {\n          id\n          name\n        }\n      }\n      purchaseOrder\n      startDate\n      endDate\n      remarks\n      amount {\n        raw\n        currency\n        formatted\n      }\n      documentType\n      billingCycle\n      isActive\n      product\n      plan\n      msCloud\n    }\n  }\n"): (typeof documents)["\n  query AllOpenContracts {\n    allOpenContracts {\n      id\n      client {\n        id\n        greenInvoiceId\n        emails\n        originalBusiness {\n          id\n          name\n        }\n      }\n      purchaseOrder\n      startDate\n      endDate\n      remarks\n      amount {\n        raw\n        currency\n        formatted\n      }\n      documentType\n      billingCycle\n      isActive\n      product\n      plan\n      msCloud\n    }\n  }\n"];
+export function graphql(source: "\n  query AllOpenContracts {\n    allOpenContracts {\n      id\n      client {\n        id\n        greenInvoiceId\n        emails\n        originalBusiness {\n          id\n          name\n        }\n      }\n      purchaseOrders\n      startDate\n      endDate\n      remarks\n      amount {\n        raw\n        currency\n        formatted\n      }\n      documentType\n      billingCycle\n      isActive\n      product\n      plan\n      msCloud\n    }\n  }\n"): (typeof documents)["\n  query AllOpenContracts {\n    allOpenContracts {\n      id\n      client {\n        id\n        greenInvoiceId\n        emails\n        originalBusiness {\n          id\n          name\n        }\n      }\n      purchaseOrders\n      startDate\n      endDate\n      remarks\n      amount {\n        raw\n        currency\n        formatted\n      }\n      documentType\n      billingCycle\n      isActive\n      product\n      plan\n      msCloud\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */