@hed-hog/operations 0.0.295 → 0.0.296

package/hedhog/frontend/app/contracts/page.tsx.ejs

@@ -1,181 +1,262 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PaginationFooter,
-  SearchBar,
-} from '@/components/entity-list';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useMemo, useState } from 'react';
-import { Layers } from 'lucide-react';
-import { OperationsHeader } from '../_components/operations-header';
-import { SectionCard } from '../_components/section-card';
-import { StatusBadge } from '../_components/status-badge';
-import { useOperationsData } from '../_lib/hooks/use-operations-data';
-import { formatCurrency, formatDate } from '../_lib/utils/format';
-import {
-  getContractBadgeClasses,
-  getContractTypeLabel,
-} from '../_lib/utils/status';
-
-const PAGE_SIZE_OPTIONS = [10, 20, 30, 50];
-const DEFAULT_PAGE_SIZE = PAGE_SIZE_OPTIONS[0] ?? 10;
-
-export default function ContractsPage() {
-  const t = useTranslations('operations.ContractsPage');
-  const { contracts } = useOperationsData();
-  const [searchInput, setSearchInput] = useState('');
-  const [search, setSearch] = useState('');
-  const [status, setStatus] = useState('all');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
-
-  const filteredContracts = useMemo(
-    () =>
-      contracts.filter((contract) => {
-        const matchesSearch =
-          `${contract.name} ${contract.client}`
-            .toLowerCase()
-            .includes(search.toLowerCase());
-        const matchesStatus = status === 'all' || contract.status === status;
-        return matchesSearch && matchesStatus;
-      }),
-    [contracts, search, status]
-  );
-
-  const totalPages = Math.max(1, Math.ceil(filteredContracts.length / pageSize));
-  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
-  const paginatedContracts = useMemo(() => {
-    const start = (safePage - 1) * pageSize;
-    return filteredContracts.slice(start, start + pageSize);
-  }, [filteredContracts, safePage, pageSize]);
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <SearchBar
-        className="mb-6"
-        searchQuery={searchInput}
-        onSearchChange={setSearchInput}
-        placeholder={t('searchPlaceholder')}
-        onSearch={() => {
-          setSearch(searchInput);
-          setCurrentPage(1);
-        }}
-        controls={[
-          {
-            id: 'status-filter',
-            type: 'select',
-            value: status,
-            onChange: (value) => {
-              setStatus(value);
-              setCurrentPage(1);
-            },
-            placeholder: t('filters.all'),
-            options: [
-              { value: 'all', label: t('filters.all') },
-              { value: 'active', label: t('filters.active') },
-              { value: 'renewal', label: t('filters.renewal') },
-              { value: 'expired', label: t('filters.expired') },
-              { value: 'draft', label: t('filters.draft') },
-            ],
-          },
-        ]}
-      />
-
-      <SectionCard title={t('tableTitle')} description={t('tableDescription')}>
-        {filteredContracts.length === 0 ? (
-          <EmptyState
-            icon={<Layers className="h-12 w-12" />}
-            title={t('emptyState.title')}
-            description={t('emptyState.description')}
-            actionLabel={t('emptyState.action')}
-            onAction={() => {
-              setSearch('');
-              setSearchInput('');
-              setStatus('all');
-              setCurrentPage(1);
-            }}
-          />
-        ) : (
-          <div className="space-y-4">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t('columns.name')}</TableHead>
-                  <TableHead>{t('columns.client')}</TableHead>
-                  <TableHead>{t('columns.type')}</TableHead>
-                  <TableHead>{t('columns.startDate')}</TableHead>
-                  <TableHead>{t('columns.endDate')}</TableHead>
-                  <TableHead>{t('columns.hourRate')}</TableHead>
-                  <TableHead>{t('columns.hourLimit')}</TableHead>
-                  <TableHead>{t('columns.status')}</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {paginatedContracts.map((contract) => (
-                  <TableRow key={contract.id}>
-                    <TableCell>
-                      <Link
-                        className="font-medium text-primary hover:underline"
-                        href={`/operations/contracts/${contract.id}`}
-                      >
-                        {contract.name}
-                      </Link>
-                    </TableCell>
-                    <TableCell>{contract.client}</TableCell>
-                    <TableCell>{getContractTypeLabel(contract.type)}</TableCell>
-                    <TableCell>{formatDate(contract.startDate)}</TableCell>
-                    <TableCell>{formatDate(contract.endDate)}</TableCell>
-                    <TableCell>{formatCurrency(contract.hourlyRate)}</TableCell>
-                    <TableCell>{contract.hourLimit}h</TableCell>
-                    <TableCell>
-                      <StatusBadge
-                        label={contract.status}
-                        className={getContractBadgeClasses(contract.status)}
-                      />
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-            <PaginationFooter
-              currentPage={safePage}
-              pageSize={pageSize}
-              totalItems={filteredContracts.length}
-              onPageChange={setCurrentPage}
-              onPageSizeChange={(nextSize) => {
-                setPageSize(nextSize);
-                setCurrentPage(1);
-              }}
-              pageSizeOptions={PAGE_SIZE_OPTIONS}
-            />
-          </div>
-        )}
-      </SectionCard>
-    </Page>
-  );
-}
+'use client';
+
+import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Download, Eye, FileText, Pencil, Upload } from 'lucide-react';
+import Link from 'next/link';
+import { useMemo, useRef, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { OperationsHeader } from '../_components/operations-header';
+import { StatusBadge } from '../_components/status-badge';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type { OperationsContract, OperationsContractDetails } from '../_lib/types';
+import {
+  formatCurrency,
+  formatDate,
+  formatEnumLabel,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
+
+function downloadBase64File(fileName: string, mimeType: string, base64: string) {
+  const href = `data:${mimeType};base64,${base64}`;
+  const link = document.createElement('a');
+  link.href = href;
+  link.download = fileName;
+  link.click();
+}
+
+async function fileToBase64(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result ?? '');
+      const [, base64 = ''] = result.split(',');
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+export default function OperationsContractsPage() {
+  const t = useTranslations('operations.ContractsPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [categoryFilter, setCategoryFilter] = useState('all');
+  const [originFilter, setOriginFilter] = useState('all');
+  const uploadTargetRef = useRef<number | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { data: contracts = [], refetch } = useQuery<OperationsContract[]>({
+    queryKey: ['operations-contracts-list', currentLocaleCode],
+    queryFn: () => fetchOperations<OperationsContract[]>(request, '/operations/contracts'),
+  });
+
+  const filteredRows = useMemo(
+    () =>
+      contracts.filter((item) => {
+        const matchesSearch = !search.trim()
+          ? true
+          : [
+              item.name,
+              item.code,
+              item.mainRelatedPartyName,
+              item.clientName,
+              item.contractType,
+            ]
+              .filter(Boolean)
+              .some((value) =>
+                String(value).toLowerCase().includes(search.trim().toLowerCase())
+              );
+        const matchesStatus = statusFilter === 'all' ? true : item.status === statusFilter;
+        const matchesCategory =
+          categoryFilter === 'all' ? true : item.contractCategory === categoryFilter;
+        const matchesOrigin =
+          originFilter === 'all' ? true : item.originType === originFilter;
+        return matchesSearch && matchesStatus && matchesCategory && matchesOrigin;
+      }),
+    [contracts, search, statusFilter, categoryFilter, originFilter]
+  );
+
+  const downloadPdf = async (contractId: number) => {
+    const detail = await fetchOperations<OperationsContractDetails>(
+      request,
+      `/operations/contracts/${contractId}`
+    );
+    const document = detail.documents.find((item) => item.isCurrent && item.fileContentBase64);
+    if (!document?.fileContentBase64) {
+      showToastHandler?.('error', t('messages.noPdf'));
+      return;
+    }
+    downloadBase64File(document.fileName, document.mimeType, document.fileContentBase64);
+  };
+
+  const duplicateContract = async (contractId: number) => {
+    window.location.href = `/operations/contracts/new?duplicate=${contractId}`;
+  };
+
+  const toggleArchived = async (contract: OperationsContract) => {
+    try {
+      await mutateOperations(request, `/operations/contracts/${contract.id}`, 'PATCH', {
+        status: contract.status === 'archived' ? 'active' : 'archived',
+        isActive: contract.status === 'archived',
+      });
+      showToastHandler?.('success', t('messages.statusSuccess'));
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.statusError'));
+    }
+  };
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          access.isDirector ? (
+            <Button size="sm" asChild>
+              <Link href="/operations/contracts/new">{commonT('actions.create')}</Link>
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={setSearch}
+        onSearch={() => undefined}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'category',
+            type: 'select',
+            value: categoryFilter,
+            onChange: setCategoryFilter,
+            placeholder: commonT('labels.contractCategory'),
+            options: [{ value: 'all', label: commonT('filters.allTypes') }, ...['employee','contractor','client','supplier','vendor','partner','internal','other'].map((value) => ({ value, label: formatEnumLabel(value) }))],
+          },
+          {
+            id: 'origin',
+            type: 'select',
+            value: originFilter,
+            onChange: setOriginFilter,
+            placeholder: t('filters.originType'),
+            options: [{ value: 'all', label: commonT('filters.allTypes') }, ...['manual','employee_hiring','client_project'].map((value) => ({ value, label: formatEnumLabel(value) }))],
+          },
+          {
+            id: 'status',
+            type: 'select',
+            value: statusFilter,
+            onChange: setStatusFilter,
+            placeholder: commonT('labels.status'),
+            options: [{ value: 'all', label: commonT('filters.allStatuses') }, ...['draft','under_review','active','renewal','expired','closed','archived'].map((value) => ({ value, label: formatEnumLabel(value) }))],
+          },
+        ]}
+      />
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="application/pdf"
+        className="hidden"
+        onChange={async (event) => {
+          const file = event.target.files?.[0];
+          const contractId = uploadTargetRef.current;
+          if (!file || !contractId) return;
+          try {
+            const fileContentBase64 = await fileToBase64(file);
+            await mutateOperations(request, `/operations/contracts/${contractId}`, 'PATCH', {
+              replaceUploadedPdfDocument: {
+                fileName: file.name,
+                mimeType: file.type || 'application/pdf',
+                fileContentBase64,
+              },
+            });
+            showToastHandler?.('success', t('messages.uploadSuccess'));
+            await refetch();
+          } catch {
+            showToastHandler?.('error', t('messages.uploadError'));
+          } finally {
+            uploadTargetRef.current = null;
+            event.target.value = '';
+          }
+        }}
+      />
+
+      {filteredRows.length ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.title')}</TableHead>
+                <TableHead>{t('columns.code')}</TableHead>
+                <TableHead>{commonT('labels.contractCategory')}</TableHead>
+                <TableHead>{t('columns.type')}</TableHead>
+                <TableHead>{t('columns.origin')}</TableHead>
+                <TableHead>{t('columns.party')}</TableHead>
+                <TableHead>{commonT('labels.startDate')}</TableHead>
+                <TableHead>{commonT('labels.endDate')}</TableHead>
+                <TableHead>{t('columns.signatureStatus')}</TableHead>
+                <TableHead>{t('columns.active')}</TableHead>
+                <TableHead>{t('columns.financials')}</TableHead>
+                <TableHead>{commonT('labels.status')}</TableHead>
+                <TableHead className="w-[320px] text-right">{commonT('labels.actions')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredRows.map((contract) => (
+                <TableRow key={contract.id}>
+                  <TableCell>{contract.name}</TableCell>
+                  <TableCell>{contract.code}</TableCell>
+                  <TableCell>{formatEnumLabel(contract.contractCategory)}</TableCell>
+                  <TableCell>{formatEnumLabel(contract.contractType)}</TableCell>
+                  <TableCell>{formatEnumLabel(contract.originType)}</TableCell>
+                  <TableCell>{contract.mainRelatedPartyName || commonT('labels.notAvailable')}</TableCell>
+                  <TableCell>{formatDate(contract.startDate)}</TableCell>
+                  <TableCell>{formatDate(contract.endDate)}</TableCell>
+                  <TableCell><StatusBadge label={formatEnumLabel(contract.signatureStatus)} className={getStatusBadgeClass(contract.signatureStatus)} /></TableCell>
+                  <TableCell>{contract.isActive ? t('labels.active') : t('labels.inactive')}</TableCell>
+                  <TableCell>{formatCurrency((contract.valueAmount ?? 0) + (contract.revenueAmount ?? 0))}</TableCell>
+                  <TableCell><StatusBadge label={formatEnumLabel(contract.status)} className={getStatusBadgeClass(contract.status)} /></TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <Button variant="outline" size="icon" asChild><Link href={`/operations/contracts/${contract.id}`}><Eye className="size-4" /></Link></Button>
+                      {access.isDirector ? <Button variant="outline" size="icon" asChild><Link href={`/operations/contracts/${contract.id}/edit`}><Pencil className="size-4" /></Link></Button> : null}
+                      <Button variant="outline" size="icon" onClick={() => void downloadPdf(contract.id)}><Download className="size-4" /></Button>
+                      {access.isDirector ? <Button variant="outline" size="icon" onClick={() => { uploadTargetRef.current = contract.id; fileInputRef.current?.click(); }}><Upload className="size-4" /></Button> : null}
+                      {access.isDirector ? <Button variant="outline" size="sm" onClick={() => void duplicateContract(contract.id)}>{t('actions.duplicate')}</Button> : null}
+                      {access.isDirector ? <Button variant="outline" size="sm" onClick={() => void toggleArchived(contract)}>{contract.status === 'archived' ? commonT('actions.activate') : t('actions.archive')}</Button> : null}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <EmptyState
+          icon={<FileText className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={access.isDirector ? commonT('actions.create') : commonT('actions.refresh')}
+          onAction={access.isDirector ? () => { window.location.href = '/operations/contracts/new'; } : () => void refetch()}
+        />
+      )}
+    </Page>
+  );
+}