@accounter/client 0.0.8-alpha-20251028124234-328844c99a42b68aa9e2f32fd86da80b4832f631 → 0.0.8-alpha-20251028124537-8b0946b10a6e597c997017c33fb80fbf674e2feb

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

@@ -38,6 +38,7 @@ import {
 } from '@/helpers/index.js';
 import { useUpdateAdminBusiness } from '@/hooks/use-update-admin-business.js';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Separator } from '../ui/separator';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -46,10 +47,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
     ... on LtdFinancialEntity {
       adminInfo {
         id
-        employerWithholdingTaxAccountNumber
-        taxPrepaymentId
-        nationalInsuranceEmployerId
-        advanceTaxRate
+        withholdingTaxBookNumber
+        withholdingTaxFileNumber
+        socialSecurityEmployerId
+        taxAdvancesRate
+        taxAdvancesId
         registrationDate
       }
     }
@@ -57,16 +59,16 @@ import { zodResolver } from '@hookform/resolvers/zod';
 `;
 
 const adminBusinessFormSchema = z.object({
-  employerWithholdingTaxAccountNumber: z.string().min(1, {
-    message: 'Employer Withholding Tax Account Number is required',
+  withholdingTaxBookNumber: z.string().min(1, {
+    message: 'Withholding Tax Book Number is required',
   }),
-  taxPrepaymentId: z.string().min(1, {
-    message: 'Tax Prepayment ID is required',
+  withholdingTaxFileNumber: z.string().min(1, {
+    message: 'Withholding Tax File Number is required',
   }),
-  nationalInsuranceEmployerId: z.string().min(1, {
+  socialSecurityEmployerId: z.string().min(1, {
     message: 'National Insurance Employer ID is required',
   }),
-  advanceTaxRate: z
+  taxAdvancesRate: z
     .number()
     .min(0, {
       message: 'Advance Tax Rate must be at least 0',
@@ -74,8 +76,11 @@ const adminBusinessFormSchema = z.object({
     .max(100, {
       message: 'Advance Tax Rate must be at most 100',
     }),
+  taxAdvancesId: z.string().min(1, {
+    message: 'Tax Advances ID is required',
+  }),
   registrationDate: z.string().min(1, {
-    message: 'Registration Date is required',
+    message: 'Business Registration Start Date is required',
   }),
 });
 
@@ -89,10 +94,11 @@ function BusinessAdminSectionFragmentToFormValues(
   }
 
   return {
-    employerWithholdingTaxAccountNumber: admin.adminInfo.employerWithholdingTaxAccountNumber ?? '',
-    taxPrepaymentId: admin.adminInfo.taxPrepaymentId ?? '',
-    nationalInsuranceEmployerId: admin.adminInfo.nationalInsuranceEmployerId ?? '',
-    advanceTaxRate: admin.adminInfo.advanceTaxRate ?? 0,
+    withholdingTaxBookNumber: admin.adminInfo.withholdingTaxBookNumber ?? '',
+    withholdingTaxFileNumber: admin.adminInfo.withholdingTaxFileNumber ?? '',
+    socialSecurityEmployerId: admin.adminInfo.socialSecurityEmployerId ?? '',
+    taxAdvancesRate: admin.adminInfo.taxAdvancesRate ?? 0,
+    taxAdvancesId: admin.adminInfo.taxAdvancesId ?? '',
     registrationDate: admin.adminInfo.registrationDate ?? '',
   };
 }
@@ -101,10 +107,11 @@ function convertFormDataToUpdateAdminBusinessInput(
   formData: Partial<AdminBusinessFormValues>,
 ): UpdateAdminBusinessInput {
   return {
-    employerWithholdingTaxAccountNumber: formData.employerWithholdingTaxAccountNumber,
-    taxPrepaymentId: formData.taxPrepaymentId,
-    nationalInsuranceEmployerId: formData.nationalInsuranceEmployerId,
-    advanceTaxRate: formData.advanceTaxRate,
+    withholdingTaxBookNumber: formData.withholdingTaxBookNumber,
+    withholdingTaxFileNumber: formData.withholdingTaxFileNumber,
+    socialSecurityEmployerId: formData.socialSecurityEmployerId,
+    taxAdvancesRate: formData.taxAdvancesRate,
+    taxAdvancesId: formData.taxAdvancesId,
     registrationDate: formData.registrationDate
       ? (formatTimelessDateString(new Date(formData.registrationDate)) as TimelessDateString)
       : undefined,
@@ -174,16 +181,19 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <CardContent>
             <div className="grid gap-6 md:grid-cols-2">
-              {/* Employer Withholding Tax Account Number */}
+              <h3 className="text-sm font-semibold text-foreground md:col-span-2">
+                Withholding Tax
+              </h3>
+
               <FormField
                 control={form.control}
-                name="employerWithholdingTaxAccountNumber"
+                name="withholdingTaxBookNumber"
                 render={({ field, fieldState }) => (
                   <FormItem>
-                    <FormLabel>Employer Withholding Tax Account Number</FormLabel>
+                    <FormLabel>Book Number</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Enter account number"
+                        placeholder="Enter book number"
                         {...field}
                         className={dirtyFieldMarker(fieldState)}
                       />
@@ -193,16 +203,15 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
                 )}
               />
 
-              {/* Tax Prepayment ID */}
               <FormField
                 control={form.control}
-                name="taxPrepaymentId"
+                name="withholdingTaxFileNumber"
                 render={({ field, fieldState }) => (
                   <FormItem>
-                    <FormLabel>Tax Prepayment ID</FormLabel>
+                    <FormLabel>File Number</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Enter prepayment ID"
+                        placeholder="Enter file number"
                         {...field}
                         className={dirtyFieldMarker(fieldState)}
                       />
@@ -212,16 +221,19 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
                 )}
               />
 
-              {/* National Insurance Employer ID */}
+              <Separator className="md:col-span-2" />
+
+              <h3 className="text-sm font-semibold text-foreground md:col-span-2">Tax Advances</h3>
+
               <FormField
                 control={form.control}
-                name="nationalInsuranceEmployerId"
+                name="taxAdvancesId"
                 render={({ field, fieldState }) => (
                   <FormItem>
-                    <FormLabel>National Insurance Employer ID</FormLabel>
+                    <FormLabel>Identification number</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="Enter employer ID"
+                        placeholder="Enter tax advances ID"
                         {...field}
                         className={dirtyFieldMarker(fieldState)}
                       />
@@ -231,13 +243,12 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
                 )}
               />
 
-              {/* Advance Tax Rate */}
               <FormField
                 control={form.control}
-                name="advanceTaxRate"
+                name="taxAdvancesRate"
                 render={({ field, fieldState }) => (
                   <FormItem>
-                    <FormLabel>Advance Tax Rate (%)</FormLabel>
+                    <FormLabel>Tax Rate (%)</FormLabel>
                     <FormControl>
                       <Input
                         type="number"
@@ -254,13 +265,40 @@ export function AdminBusinessSection({ data, refetchBusiness }: Props): React.Re
                 )}
               />
 
-              {/* Registration Date */}
+              <Separator className="md:col-span-2" />
+
+              <h3 className="text-sm font-semibold text-foreground md:col-span-2">
+                Social Security
+              </h3>
+
+              {/* Social Security Employer ID */}
+              <FormField
+                control={form.control}
+                name="socialSecurityEmployerId"
+                render={({ field, fieldState }) => (
+                  <FormItem>
+                    <FormLabel>Employer Identifier</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter employer ID"
+                        {...field}
+                        className={dirtyFieldMarker(fieldState)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Separator className="md:col-span-2" />
+
+              {/* Business Registration Start Date */}
               <FormField
                 control={form.control}
                 name="registrationDate"
                 render={({ field, fieldState }) => (
                   <FormItem>
-                    <FormLabel>Registration Date</FormLabel>
+                    <FormLabel>Business Registration Start Date</FormLabel>
                     <FormControl>
                       <Input type="date" {...field} className={dirtyFieldMarker(fieldState)} />
                     </FormControl>

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 {
@@ -35,6 +35,7 @@ import {
       remarks
       plan
       msCloud
+      operationsLimit
     }
   }
 `;
@@ -46,7 +47,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,
@@ -58,6 +59,7 @@ function convertContractDataToFormValues(
     subscriptionPlan: contract.plan ?? undefined,
     defaultRemark: contract.remarks ?? undefined,
     defaultDocumentType: contract.documentType ?? undefined,
+    operationsLimit: contract.operationsLimit,
   };
 }
 
@@ -130,8 +132,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 */}
@@ -161,6 +177,11 @@ export function ContractsSection({ clientId }: Props) {
                   </p>
                 </div>
 
+                <div className="space-y-0">
+                  <p className="text-sm text-muted-foreground">Operations Limit</p>
+                  <p className="text-sm font-medium">{contract.operationsLimit.toLocaleString()}</p>
+                </div>
+
                 <div className="space-y-0">
                   <p className="text-sm text-muted-foreground">Document Type</p>
                   <p className="text-sm font-medium">

package/src/components/business-transactions/business-extended-info.tsx

@@ -3,7 +3,6 @@ import { format } from 'date-fns';
 import { ChevronsLeftRightEllipsis, ChevronsRightLeft } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { useQuery } from 'urql';
-import { ROUTES } from '@/router/routes.js';
 import { Mark, Table, Tooltip } from '@mantine/core';
 import {
   BusinessTransactionsInfoDocument,
@@ -13,8 +12,10 @@ import {
 } from '../../gql/graphql.js';
 import { FIAT_CURRENCIES, formatAmountWithCurrency } from '../../helpers/index.js';
 import { AccounterLoader } from '../common/index.js';
+import { getChargeHref } from '../screens/charges/charge.js';
 import { Button } from '../ui/button.js';
 import { DownloadCSV } from './download-csv.js';
+import { getBusinessTransactionsHref } from './index.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -228,15 +229,14 @@ export function BusinessExtendedInfo({ businessID, filter }: Props): ReactElemen
             {extendedTransactions.map((row, index) => (
               <tr
                 key={index}
-                className="cursor-pointer"
                 onClick={event => {
                   event.stopPropagation();
-                  window.open(ROUTES.CHARGES.DETAIL(row.chargeId), '_blank', 'noreferrer');
+                  window.open(getChargeHref(row.chargeId), '_blank', 'noreferrer');
                 }}
               >
                 <td>
                   <Link
-                    to={ROUTES.BUSINESSES.DETAIL(row.business.id)}
+                    to={getBusinessTransactionsHref({ businessIDs: [row.business.id] })}
                     target="_blank"
                     rel="noreferrer"
                     onClick={event => event.stopPropagation()}
@@ -274,7 +274,7 @@ export function BusinessExtendedInfo({ businessID, filter }: Props): ReactElemen
                 <td>
                   {row.counterAccount && (
                     <Link
-                      to={ROUTES.BUSINESSES.DETAIL(row.counterAccount.id)}
+                      to={getBusinessTransactionsHref({ businessIDs: [row.counterAccount.id] })}
                       target="_blank"
                       rel="noreferrer"
                       onClick={event => event.stopPropagation()}

package/src/components/business-transactions/index.tsx

@@ -21,7 +21,10 @@ import { AccounterTableRow } from '../common/index.js';
 import { PageLayout } from '../layout/page-layout.js';
 import { Button } from '../ui/button.js';
 import { BusinessExtendedInfo } from './business-extended-info.js';
-import { BusinessTransactionsFilters } from './business-transactions-filters.js';
+import {
+  BusinessTransactionsFilters,
+  encodeTransactionsFilters,
+} from './business-transactions-filters.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -66,6 +69,30 @@ import { BusinessTransactionsFilters } from './business-transactions-filters.js'
   }
 `;
 
+export function getBusinessTransactionsHref(filter?: BusinessTransactionsFilter | null): string {
+  const params = new URLSearchParams();
+
+  let businessId: string | undefined = undefined;
+  let adjustedFilter = filter;
+  if (filter?.businessIDs && filter.businessIDs.length === 1) {
+    const { businessIDs, ...rest } = filter;
+    businessId = businessIDs[0];
+    adjustedFilter = rest;
+  }
+
+  const transactionsFilters = encodeTransactionsFilters(adjustedFilter);
+  if (transactionsFilters) {
+    // Add it as a single encoded parameter
+    params.append('transactionsFilters', transactionsFilters);
+  }
+
+  const queryParams = params.size > 0 ? `?${params}` : '';
+  if (businessId) {
+    return `/businesses/${businessId}/transactions${queryParams}`;
+  }
+  return `/businesses/transactions${queryParams}`;
+}
+
 type BusinessTransactionsSum = Extract<
   BusinessTransactionsSummeryQuery['businessTransactionsSumFromLedgerRecords'],
   { businessTransactionsSum: unknown }

package/src/components/businesses/index.tsx

@@ -159,16 +159,12 @@ export const Businesses = (): ReactElement => {
                   tabIndex={0}
                   className="flex-1 cursor-pointer"
                   onClick={(): void => {
-                    navigate(ROUTES.BUSINESSES.DETAIL(business.id), {
-                      state: { from: ROUTES.BUSINESSES.ALL },
-                    });
+                    navigate(ROUTES.BUSINESSES.DETAIL(business.id));
                   }}
                   onKeyDown={(e): void => {
                     if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault();
-                      navigate(ROUTES.BUSINESSES.DETAIL(business.id), {
-                        state: { from: ROUTES.BUSINESSES.ALL },
-                      });
+                      navigate(ROUTES.BUSINESSES.DETAIL(business.id));
                     }
                   }}
                 >

package/src/components/charges/cells/business-trip.tsx

@@ -1,6 +1,5 @@
 import { type ReactElement } from 'react';
 import { Link } from 'react-router-dom';
-import { ROUTES } from '@/router/routes.js';
 import { ChargesTableBusinessTripFieldsFragmentDoc } from '../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../gql/index.js';
 
@@ -31,11 +30,7 @@ export const BusinessTrip = ({ data }: Props): ReactElement => {
   return (
     <td>
       <Link
-        to={
-          charge.businessTrip?.id
-            ? ROUTES.BUSINESS_TRIPS.DETAIL(charge.businessTrip?.id)
-            : ROUTES.BUSINESS_TRIPS.ROOT
-        }
+        to={`/business-trips/${charge.businessTrip?.id}`}
         target="_blank"
         rel="noreferrer"
         onClick={event => event.stopPropagation()}

package/src/components/charges/cells/counterparty.tsx

@@ -1,9 +1,14 @@
-import { useMemo, type ReactElement } from 'react';
+import { useCallback, useMemo, type ReactElement } from 'react';
 import { Link } from 'react-router-dom';
-import { ROUTES } from '@/router/routes.js';
 import { Indicator } from '@mantine/core';
-import { ChargesTableEntityFieldsFragmentDoc, MissingChargeInfo } from '../../../gql/graphql.js';
+import {
+  ChargesTableEntityFieldsFragmentDoc,
+  MissingChargeInfo,
+  type ChargeFilter,
+} from '../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../gql/index.js';
+import { useUrlQuery } from '../../../hooks/use-url-query.js';
+import { getBusinessTransactionsHref } from '../../business-transactions/index.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -27,6 +32,7 @@ type Props = {
 };
 
 export const Counterparty = ({ data }: Props): ReactElement => {
+  const { get } = useUrlQuery();
   const { counterparty, validationData, __typename } = getFragmentData(
     ChargesTableEntityFieldsFragmentDoc,
     data,
@@ -53,13 +59,31 @@ export const Counterparty = ({ data }: Props): ReactElement => {
   );
   const { name, id } = counterparty ?? { name: 'Missing', id: undefined };
 
+  const encodedFilters = get('chargesFilters');
+
+  const getHref = useCallback(
+    (businessID: string) => {
+      const currentFilters = encodedFilters
+        ? (JSON.parse(decodeURIComponent(encodedFilters as string)) as ChargeFilter)
+        : {};
+
+      return getBusinessTransactionsHref({
+        fromDate: currentFilters.fromDate,
+        toDate: currentFilters.toDate,
+        ownerIds: currentFilters.byOwners,
+        businessIDs: [businessID],
+      });
+    },
+    [encodedFilters],
+  );
+
   return (
     <td>
       <div className="flex flex-wrap">
         <Indicator inline size={12} disabled={!isError} color="red" zIndex="auto">
           {!isError && id && (
             <Link
-              to={ROUTES.BUSINESSES.DETAIL(id)}
+              to={getHref(id)}
               target="_blank"
               rel="noreferrer"
               onClick={event => event.stopPropagation()}

package/src/components/charges/helpers.ts

@@ -0,0 +1,15 @@
+import type { ChargeFilter } from '../../gql/graphql.js';
+import { getBusinessTransactionsHref } from '../business-transactions/index.js';
+
+export const getBusinessHref = (businessID: string, encodedFilters: string): string => {
+  const currentFilters = encodedFilters
+    ? (JSON.parse(decodeURIComponent(encodedFilters)) as ChargeFilter)
+    : {};
+
+  return getBusinessTransactionsHref({
+    fromDate: currentFilters.fromDate,
+    toDate: currentFilters.toDate,
+    ownerIds: currentFilters.byOwners,
+    businessIDs: [businessID],
+  });
+};

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(),
@@ -58,6 +59,7 @@ const contractFormSchema = z.object({
   isActive: z.boolean(),
   defaultRemark: z.string().optional(),
   defaultDocumentType: z.enum(Object.values(DocumentType)),
+  operationsLimit: z.int().min(0, 'Operations limit must be non-negative'),
 });
 
 export type ContractFormValues = z.infer<typeof contractFormSchema>;
@@ -67,7 +69,7 @@ const newContractDefaultValues: ContractFormValues = {
   // operationsLimit: 0,
   startDate: '',
   endDate: '',
-  po: undefined,
+  pos: [],
   paymentAmount: 0,
   paymentCurrency: Currency.Usd,
   productType: Product.Hive,
@@ -77,6 +79,7 @@ const newContractDefaultValues: ContractFormValues = {
   isActive: true,
   defaultRemark: undefined,
   defaultDocumentType: DocumentType.Proforma,
+  operationsLimit: 0,
 };
 
 interface Props {
@@ -88,6 +91,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 +101,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 +129,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,
@@ -115,6 +139,7 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
         isActive: contract.isActive,
         defaultRemark: contract.defaultRemark,
         defaultDocumentType: contract.defaultDocumentType,
+        operationsLimit: contract.operationsLimit,
       });
       setIsDialogOpen(true);
     }
@@ -141,9 +166,10 @@ 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,
+            operationsLimit: values.operationsLimit,
           },
         });
       } else {
@@ -163,9 +189,10 @@ 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,
+            operationsLimit: values.operationsLimit,
           },
         });
       }
@@ -197,8 +224,7 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <div className="grid gap-4 py-4">
               <div className="grid gap-4 md:grid-cols-2">
-                {/* TODO: activate this field later. requires additional backend support */}
-                {/* <FormField
+                <FormField
                   control={form.control}
                   name="operationsLimit"
                   render={({ field }) => (
@@ -210,16 +236,46 @@ export function ModifyContractDialog({ clientId, contract, onDone }: Props) {
                       <FormMessage />
                     </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>
                   )}