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

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

@@ -0,0 +1,196 @@
+import { useState } from 'react';
+import { Calendar, ExternalLink, LinkIcon, Pencil } from 'lucide-react';
+import { useQuery } from 'urql';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { ClientContractsSectionDocument, type ClientContractsSectionQuery } from '@/gql/graphql.js';
+import {
+  formatAmountWithCurrency,
+  getDocumentNameFromType,
+  standardBillingCycle,
+  standardPlan,
+} from '@/helpers/index.js';
+import {
+  ModifyContractDialog,
+  type ContractFormValues,
+} from '../clients/contracts/modify-contract-dialog.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  query ClientContractsSection($clientId: UUID!) {
+    contractsByClient(clientId: $clientId) {
+      id
+      purchaseOrder
+      startDate
+      endDate
+      amount {
+        raw
+        currency
+      }
+      billingCycle
+      isActive
+      product
+      documentType
+      remarks
+      plan
+      msCloud
+    }
+  }
+`;
+
+function convertContractDataToFormValues(
+  contract: ClientContractsSectionQuery['contractsByClient'][number],
+): ContractFormValues {
+  return {
+    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,
+    startDate: contract.startDate,
+    endDate: contract.endDate,
+    paymentAmount: contract.amount.raw,
+    paymentCurrency: contract.amount.currency,
+    productType: contract.product ?? undefined,
+    billingCycle: contract.billingCycle,
+    msCloudLink: contract.msCloud?.toString(),
+    isActive: contract.isActive,
+    subscriptionPlan: contract.plan ?? undefined,
+    defaultRemark: contract.remarks ?? undefined,
+    defaultDocumentType: contract.documentType ?? undefined,
+  };
+}
+
+interface Props {
+  clientId: string;
+}
+
+export function ContractsSection({ clientId }: Props) {
+  const [editingContract, setEditingContract] = useState<ContractFormValues | null>(null);
+
+  const [{ data, fetching }, refetch] = useQuery({
+    query: ClientContractsSectionDocument,
+    variables: {
+      clientId,
+    },
+  });
+
+  const contracts = data?.contractsByClient ?? [];
+
+  if (fetching) {
+    return <div>Loading contracts...</div>;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Contracts</CardTitle>
+            <CardDescription>Current and past contracts sorted by start date</CardDescription>
+          </div>
+          <ModifyContractDialog clientId={clientId} contract={editingContract} onDone={refetch} />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {contracts.map(contract => {
+          const isActive = !!contract.isActive;
+
+          return (
+            <div key={contract.id} className="rounded-lg border p-4 space-y-4">
+              <div className="flex items-start justify-between">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <h4 className="font-semibold">{contract.product}</h4>
+                    <Badge variant={isActive ? 'default' : 'secondary'}>
+                      {contract.isActive ? 'Active' : 'Inactive'}
+                    </Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground font-mono">{contract.id}</p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setEditingContract(convertContractDataToFormValues(contract))}
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <div className="space-y-0">
+                  <p className="text-sm text-muted-foreground flex items-center gap-1">
+                    <Calendar className="h-3 w-3" />
+                    Contract Period
+                  </p>
+                  <p className="text-sm font-medium">
+                    {new Date(contract.startDate).toLocaleDateString()} →{' '}
+                    {new Date(contract.endDate).toLocaleDateString()}
+                  </p>
+                </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>
+                </div>
+
+                {/* TODO: activate this field later. requires additional backend support */}
+                {/* <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">Payment</p>
+                  <p className="text-sm font-medium">
+                    {formatAmountWithCurrency(contract.amount.raw, contract.amount.currency)}
+                  </p>
+                </div>
+
+                <div className="space-y-0">
+                  <p className="text-sm text-muted-foreground">Billing Cycle</p>
+                  <p className="text-sm font-medium">
+                    {standardBillingCycle(contract.billingCycle)}
+                  </p>
+                </div>
+
+                <div className="space-y-0">
+                  <p className="text-sm text-muted-foreground">Subscription Plan</p>
+                  <p className="text-sm font-medium">
+                    {contract.plan ? standardPlan(contract.plan) : 'N/A'}
+                  </p>
+                </div>
+
+                <div className="space-y-0">
+                  <p className="text-sm text-muted-foreground">Document Type</p>
+                  <p className="text-sm font-medium">
+                    {getDocumentNameFromType(contract.documentType)}
+                  </p>
+                </div>
+              </div>
+
+              {contract.remarks && (
+                <div className="space-y-0">
+                  <p className="text-sm text-muted-foreground">Remark</p>
+                  <p className="text-sm">{contract.remarks}</p>
+                </div>
+              )}
+
+              <div className="flex flex-wrap gap-2">
+                {contract.msCloud && (
+                  <Button variant="outline" size="sm" asChild>
+                    <a href={contract.msCloud.toString()} target="_blank" rel="noopener noreferrer">
+                      <LinkIcon className="h-4 w-4 mr-2" />
+                      MS Cloud
+                      <ExternalLink className="h-3 w-3 ml-1" />
+                    </a>
+                  </Button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { RecentBusinessDocs } from '../common/documents/issue-document/recent-business-docs.js';
+
+interface Props {
+  businessId: string;
+}
+
+export function DocumentsSection({ businessId }: Props) {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>Documents</CardTitle>
+            <CardDescription>
+              Invoices, proformas, receipts, and other accounting documents
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <RecentBusinessDocs businessId={businessId} linkedDocumentIds={[]} limit={1000} />
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/business/index.tsx

@@ -0,0 +1,171 @@
+import type { ReactElement } from 'react';
+import {
+  ArrowLeftRight,
+  Building2,
+  DollarSign,
+  FileCheck,
+  FileText,
+  Plug,
+  Settings,
+  //   TrendingUp,
+} from 'lucide-react';
+import { useSearchParams } from 'react-router-dom';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
+import { getFragmentData, type FragmentType } from '@/gql/index.js';
+import { BusinessPageFragmentDoc } from '../../gql/graphql.js';
+import { BusinessHeader } from './business-header.js';
+import { ChargesSection } from './charges-section.jsx';
+import { ChartsSection } from './charts-section.jsx';
+import { ConfigurationsSection } from './configurations-section.jsx';
+import { ContactInfoSection } from './contact-info-section.jsx';
+import { ContractsSection } from './contracts-section.jsx';
+import { DocumentsSection } from './documents-section.jsx';
+import { IntegrationsSection } from './integrations-section.jsx';
+import { TransactionsSection } from './transactions-section.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  fragment BusinessPage on Business {
+    id
+    ... on LtdFinancialEntity {
+      clientInfo {
+        id
+      }
+    }
+    ...ClientIntegrationsSection
+    ...BusinessHeader
+    ...BusinessContactSection
+    ...BusinessConfigurationSection
+  }
+`;
+
+interface Props {
+  data?: FragmentType<typeof BusinessPageFragmentDoc>;
+  refetchBusiness?: () => Promise<void>;
+}
+
+export default function Business({ data, refetchBusiness }: Props): ReactElement {
+  const business = getFragmentData(BusinessPageFragmentDoc, data);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const activeTab = searchParams.get('tab') || 'contact';
+
+  const handleTabChange = (value: string) => {
+    setSearchParams({ tab: value });
+  };
+
+  if (!business) {
+    return <div>Business not found</div>;
+  }
+
+  const isClient = 'clientInfo' in business && !!business.clientInfo;
+
+  return (
+    <div className="min-h-screen bg-background">
+      <BusinessHeader data={business} />
+
+      <main className="container mx-auto px-4 py-6 md:px-6 lg:px-8 max-w-7xl">
+        <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
+          <TabsList className="grid w-full lg:grid-cols-8 sm:grid-cols-4 grid-cols-8 mb-6 h-auto gap-1 bg-muted/50 p-1">
+            <TabsTrigger
+              value="contact"
+              className="flex items-center gap-2 data-[state=active]:bg-background"
+            >
+              <Building2 className="h-4 w-4" />
+              <span className="hidden sm:inline">Contact</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="config"
+              className="flex items-center gap-2 data-[state=active]:bg-background"
+            >
+              <Settings className="h-4 w-4" />
+              <span className="hidden sm:inline">Config</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="charges"
+              className="flex items-center gap-2 data-[state=active]:bg-background"
+            >
+              <DollarSign className="h-4 w-4" />
+              <span className="hidden sm:inline">Charges</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="transactions"
+              className="flex items-center gap-2 data-[state=active]:bg-background"
+            >
+              <ArrowLeftRight className="h-4 w-4" />
+              <span className="hidden sm:inline">Transactions</span>
+            </TabsTrigger>
+            <TabsTrigger
+              value="documents"
+              className="flex items-center gap-2 data-[state=active]:bg-background"
+            >
+              <FileText className="h-4 w-4" />
+              <span className="hidden sm:inline">Documents</span>
+            </TabsTrigger>
+            {isClient && (
+              <>
+                <TabsTrigger
+                  value="contracts"
+                  className="flex items-center gap-2 data-[state=active]:bg-background"
+                >
+                  <FileCheck className="h-4 w-4" />
+                  <span className="hidden sm:inline">Contracts</span>
+                </TabsTrigger>
+                <TabsTrigger
+                  value="integrations"
+                  className="flex items-center gap-2 data-[state=active]:bg-background"
+                >
+                  <Plug className="h-4 w-4" />
+                  <span className="hidden sm:inline">Integrations</span>
+                </TabsTrigger>
+                {/* <TabsTrigger
+                  value="charts"
+                  className="flex items-center gap-2 data-[state=active]:bg-background"
+                >
+                  <TrendingUp className="h-4 w-4" />
+                  <span className="hidden sm:inline">Charts</span>
+                </TabsTrigger> */}
+              </>
+            )}
+          </TabsList>
+
+          <TabsContent value="contact" className="mt-0">
+            <ContactInfoSection data={business} refetchBusiness={refetchBusiness} />
+          </TabsContent>
+
+          <TabsContent value="config" className="mt-0">
+            <ConfigurationsSection data={business} refetchBusiness={refetchBusiness} />
+          </TabsContent>
+
+          <TabsContent value="charges" className="mt-0">
+            <ChargesSection businessId={business.id} />
+          </TabsContent>
+
+          <TabsContent value="transactions" className="mt-0">
+            <TransactionsSection businessId={business.id} />
+          </TabsContent>
+
+          <TabsContent value="documents" className="mt-0">
+            <DocumentsSection businessId={business.id} />
+          </TabsContent>
+
+          {isClient && (
+            <>
+              <TabsContent value="contracts" className="mt-0">
+                <ContractsSection clientId={business.id} />
+              </TabsContent>
+
+              <TabsContent value="integrations" className="mt-0">
+                <IntegrationsSection data={business} />
+              </TabsContent>
+
+              <TabsContent value="charts" className="mt-0">
+                <ChartsSection />
+              </TabsContent>
+            </>
+          )}
+        </Tabs>
+      </main>
+    </div>
+  );
+}