@accounter/client 0.0.8-alpha-20251030162201-d2f279aafe537912ec3546af855cbd3a38ac0f5c → 0.0.8-alpha-20251030164843-d2f490daba879840366288d1f62974ab25081876

package/src/components/contracts/cells/client.tsx

@@ -0,0 +1,24 @@
+import { type ReactElement } from 'react';
+import { Link } from 'react-router-dom';
+import { ROUTES } from '@/router/routes.js';
+
+type Props = {
+  id: string;
+  name: string;
+};
+
+export function Client({ id, name }: Props): ReactElement {
+  return (
+    <div className="flex flex-wrap flex-col justify-center">
+      <Link
+        to={ROUTES.BUSINESSES.DETAIL(id)}
+        target="_blank"
+        rel="noreferrer"
+        onClick={event => event.stopPropagation()}
+        className="inline-flex items-center font-semibold"
+      >
+        {name}
+      </Link>
+    </div>
+  );
+}

package/src/components/contracts/cells/date.tsx

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+import type { TimelessDateString } from '@/helpers/index.js';
+
+type Props = {
+  timelessDate: TimelessDateString;
+};
+
+export const DateCell = ({ timelessDate }: Props): ReactElement => {
+  return (
+    <p className="text-sm font-medium">
+      {new Date(timelessDate).toLocaleDateString(undefined, { timeZone: 'UTC' })}
+    </p>
+  );
+};

package/src/components/contracts/cells/index.ts

@@ -0,0 +1,2 @@
+export { DateCell } from './date.js';
+export { Client } from './client.js';

package/src/components/contracts/columns.tsx

@@ -0,0 +1,182 @@
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff, LinkIcon } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import type { BillingCycle, SubscriptionPlan } from '@/gql/graphql.js';
+import type { TimelessDateString } from '@/helpers/dates.js';
+import { cn } from '@/lib/utils.js';
+import type { Column, ColumnDef } from '@tanstack/react-table';
+import { ModifyContractDialog } from '../clients/contracts/modify-contract-dialog.js';
+import { Badge } from '../ui/badge.js';
+import { Button } from '../ui/button.js';
+import { Checkbox } from '../ui/checkbox.js';
+import { Client, DateCell } from './cells/index.js';
+import type { ContractRow } from './index.js';
+
+interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="data-[state=open]:bg-accent -ml-3 h-8">
+            <span>{title}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <ArrowDown />
+            ) : column.getIsSorted() === 'asc' ? (
+              <ArrowUp />
+            ) : (
+              <ChevronsUpDown />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export const columns: ColumnDef<ContractRow>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'isActive',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Is Active" />,
+    cell: ({ row }) => {
+      const isActive = row.getValue<boolean>('isActive');
+      return isActive ? (
+        <Badge variant="default">Active</Badge>
+      ) : (
+        <Badge variant="destructive">Inactive</Badge>
+      );
+    },
+  },
+  {
+    accessorKey: 'client.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Client" />,
+    cell: ({ row }) => {
+      return <Client id={row.original.client.id} name={row.original.client.name} />;
+    },
+  },
+  {
+    accessorKey: 'startDate',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Start" />,
+    cell: ({ row }) => <DateCell timelessDate={row.getValue<TimelessDateString>('startDate')} />,
+  },
+  {
+    accessorKey: 'endDate',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="End" />,
+    cell: ({ row }) => <DateCell timelessDate={row.getValue<TimelessDateString>('endDate')} />,
+  },
+  {
+    accessorKey: 'purchaseOrder',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Purchase Order" />,
+    cell: ({ row }) => (
+      <div className="flex flex-row gap-1 items-center">
+        {row.original.msCloud && (
+          <Link to={row.original.msCloud} target="_blank" rel="noreferrer" className="size-8">
+            <Button variant="link" size="sm">
+              <LinkIcon className="size-4" />
+            </Button>
+          </Link>
+        )}
+        <span className="text-sm font-medium">{row.getValue<string>('purchaseOrder')}</span>
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'product',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Product" />,
+    cell: ({ row }) => <p className="text-sm font-medium">{row.getValue<string>('product')}</p>,
+  },
+  {
+    accessorKey: 'plan',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Subscription Plan" />,
+    cell: ({ row }) => (
+      <p className="text-sm font-medium">{row.getValue<SubscriptionPlan>('plan')}</p>
+    ),
+  },
+  {
+    accessorKey: 'billingCycle',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Billing Cycle" />,
+    cell: ({ row }) => (
+      <p className="text-sm font-medium">{row.getValue<BillingCycle>('billingCycle')}</p>
+    ),
+  },
+  {
+    accessorKey: 'amount.raw',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />,
+    cell: ({ row }) => <p className="text-sm font-medium">{row.original.amount.formatted}</p>,
+  },
+  {
+    accessorKey: 'operationsLimit',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Operations Limit" />,
+    cell: ({ row }) => {
+      const operationsLimit = row.getValue<number>('operationsLimit');
+      if (!operationsLimit) {
+        return null;
+      }
+      return <p className="text-sm font-medium">{operationsLimit}</p>;
+    },
+  },
+  {
+    accessorKey: 'edit',
+    header: '',
+    cell: ({ row }) => (
+      <ModifyContractDialog
+        clientId={row.original.client.id}
+        contractId={row.original.id}
+        // onDone={refetch}
+      />
+    ),
+    enableSorting: false,
+  },
+];

package/src/components/contracts/contracts-filter.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import { Filter } from 'lucide-react';
+import { Button } from '@/components/ui/button.js';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog.js';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select.js';
+import { BillingCycle, Product, SubscriptionPlan } from '@/gql/graphql.js';
+import { standardBillingCycle, standardPlan } from '@/helpers/index.js';
+import type { Table } from '@tanstack/react-table';
+import { Label } from '../ui/label.js';
+import type { ContractRow } from './index.js';
+
+interface Props {
+  table: Table<ContractRow>;
+}
+
+export function ContractsFilter({ table }: Props) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" variant="outline">
+          <Filter className="size-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Filter Contracts</DialogTitle>
+          <DialogDescription>Filter contracts based on various criteria</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>Product Type</Label>
+              <Select
+                onValueChange={value =>
+                  table.getColumn('product')?.setFilterValue(value === 'NULL' ? undefined : value)
+                }
+                value={table.getColumn('product')?.getFilterValue() as Product | ''}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="NULL" className="font-light text-xs">
+                    (None)
+                  </SelectItem>
+                  {Object.values(Product).map(product => (
+                    <SelectItem key={product} value={product}>
+                      {product}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>Billing Cycle</Label>
+              <Select
+                onValueChange={value =>
+                  table
+                    .getColumn('billingCycle')
+                    ?.setFilterValue(value === 'NULL' ? undefined : value)
+                }
+                value={table.getColumn('billingCycle')?.getFilterValue() as BillingCycle | ''}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="NULL" className="font-light text-xs">
+                    (None)
+                  </SelectItem>
+                  {Object.values(BillingCycle).map(cycle => (
+                    <SelectItem key={cycle} value={cycle}>
+                      {standardBillingCycle(cycle)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>Subscription Plan</Label>
+              <Select
+                onValueChange={value =>
+                  table.getColumn('plan')?.setFilterValue(value === 'NULL' ? undefined : value)
+                }
+                value={table.getColumn('plan')?.getFilterValue() as SubscriptionPlan | ''}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="NULL" className="font-light text-xs">
+                    (None)
+                  </SelectItem>
+                  {Object.values(SubscriptionPlan).map(plan => (
+                    <SelectItem key={plan} value={plan}>
+                      {standardPlan(plan)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Is Active</Label>
+              <Select
+                onValueChange={value =>
+                  table
+                    .getColumn('isActive')
+                    ?.setFilterValue(
+                      value === 'NULL' ? undefined : value === 'active' ? true : false,
+                    )
+                }
+                value={convertBooleanToString(
+                  table.getColumn('isActive')?.getFilterValue() as boolean | undefined,
+                )}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="NULL" className="font-light text-xs">
+                    (None)
+                  </SelectItem>
+                  <SelectItem value="active">Active</SelectItem>
+                  <SelectItem value="inactive">Inactive</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function convertBooleanToString(value: boolean | undefined): string {
+  if (value === undefined) {
+    return 'NULL';
+  }
+  return value ? 'active' : 'inactive';
+}

package/src/components/contracts/index.tsx

@@ -0,0 +1,263 @@
+import { useEffect, useMemo, useState, type ReactElement } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Pagination } from '@/components/common/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table.js';
+import { ContractForContractsTableFieldsFragmentDoc } from '@/gql/graphql.js';
+import { getFragmentData, type FragmentType } from '@/gql/index.js';
+import type { TimelessDateString } from '@/helpers/dates.js';
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnFiltersState,
+  type SortingState,
+} from '@tanstack/react-table';
+import type { BillingCycle, Product, SubscriptionPlan } from '../../gql/graphql.js';
+import { Button } from '../ui/button.js';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
+import { columns } from './columns.js';
+import { ContractsFilter } from './contracts-filter.js';
+import { IssueDocumentsModal } from './issue-documents-modal.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  fragment ContractForContractsTableFields on Contract {
+    id
+    isActive
+    client {
+      id
+      originalBusiness {
+        id
+        name
+      }
+    }
+    purchaseOrders
+    startDate
+    endDate
+    amount {
+      raw
+      formatted
+    }
+    billingCycle
+    product
+    plan
+    operationsLimit
+    msCloud
+    # documentType
+    # remarks
+    # operationsLimit
+  }
+`;
+
+export interface ContractRow {
+  id: string;
+  isActive: boolean;
+  client: {
+    id: string;
+    name: string;
+  };
+  purchaseOrder?: string;
+  startDate: TimelessDateString;
+  endDate: TimelessDateString;
+  amount: {
+    raw: number;
+    formatted: string;
+  };
+  billingCycle: BillingCycle;
+  product?: Product;
+  plan?: SubscriptionPlan;
+  operationsLimit?: number;
+  msCloud?: string;
+  // documentType
+  // remarks
+  // operationsLimit
+}
+
+function convertContractFragmentToTableRow(
+  data: FragmentType<typeof ContractForContractsTableFieldsFragmentDoc>,
+): ContractRow {
+  const fragmentData = getFragmentData(ContractForContractsTableFieldsFragmentDoc, data);
+  return {
+    id: fragmentData.id,
+    isActive: fragmentData.isActive,
+    client: {
+      id: fragmentData.client.id,
+      name: fragmentData.client.originalBusiness.name,
+    },
+    purchaseOrder: fragmentData.purchaseOrders[0],
+    startDate: fragmentData.startDate,
+    endDate: fragmentData.endDate,
+    amount: {
+      raw: fragmentData.amount.raw,
+      formatted: fragmentData.amount.formatted,
+    },
+    billingCycle: fragmentData.billingCycle,
+    product: fragmentData.product ?? undefined,
+    plan: fragmentData.plan ?? undefined,
+    operationsLimit: fragmentData.operationsLimit,
+    msCloud: fragmentData.msCloud?.toString() ?? undefined,
+  };
+}
+
+type Props = {
+  data: FragmentType<typeof ContractForContractsTableFieldsFragmentDoc>[];
+  onChange?: () => void;
+};
+
+export const ContractsTable = ({ data }: Props): ReactElement => {
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: 'endDate',
+      desc: true,
+    },
+    {
+      id: 'amount.raw',
+      desc: true,
+    },
+  ]);
+  const [rowSelection, setRowSelection] = useState({});
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [selectedContractIds, setSelectedContractIds] = useState<string[]>([]);
+
+  const contracts = useMemo(
+    () => data.map(rawContract => convertContractFragmentToTableRow(rawContract)),
+    [data],
+  );
+
+  const table = useReactTable({
+    data: contracts,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onRowSelectionChange: setRowSelection,
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      rowSelection,
+      columnFilters,
+    },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 50,
+      },
+    },
+  });
+
+  useEffect(() => {
+    const selectedIndexes = Object.entries(rowSelection)
+      .filter(([, value]) => !!value)
+      .map(([key]) => Number(key));
+    const newSelectedContractIds = Array.from(
+      new Set(contracts.filter((_, i) => selectedIndexes.includes(i)).map(c => c.id)),
+    );
+    if (
+      selectedContractIds.length !== newSelectedContractIds.length ||
+      !selectedContractIds.every(id => newSelectedContractIds.includes(id))
+    ) {
+      setSelectedContractIds(newSelectedContractIds);
+    }
+  }, [rowSelection, contracts, selectedContractIds, columnFilters]);
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center py-4 gap-4">
+        <ContractsFilter table={table} />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">
+              Columns <ChevronDown />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter(column => column.getCanHide())
+              .map(column => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={value => column.toggleVisibility(!!value)}
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <div className="ml-auto">
+          <IssueDocumentsModal contractIds={selectedContractIds} className="ml-auto" />
+        </div>
+      </div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map(header => (
+                  <TableHead key={header.id} colSpan={header.colSpan}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="text-muted-foreground flex-1 text-sm">
+          {table.getFilteredSelectedRowModel().rows.length} of{' '}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+        <Pagination
+          className="w-fit mx-0"
+          value={table.getState().pagination.pageIndex}
+          total={table.getPageCount()}
+          onChange={page => table.setPageIndex(page)}
+        />
+      </div>
+    </div>
+  );
+};