@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/src/app/(app)/(libraries)/operations/contracts/page.tsx

@@ -0,0 +1,536 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Download,
+  Eye,
+  FileText,
+  MoreHorizontal,
+  Pencil,
+  ShieldCheck,
+  ShieldOff,
+  Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useMemo, useState } from 'react';
+import { ContractFormScreen } from '../_components/contract-form-screen';
+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,
+  OperationsContractStats,
+  PaginatedResponse,
+} from '../_lib/types';
+import { 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();
+}
+
+function buildStoredFileUrl(fileId?: number | null) {
+  if (!fileId) return null;
+  const baseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
+  return `${baseUrl}/file/open/${fileId}`;
+}
+
+export default function OperationsContractsPage() {
+  const t = useTranslations('operations.ContractsPage');
+  const commonT = useTranslations('operations.Common');
+  const detailT = useTranslations('operations.ContractDetailsPage');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = useState('');
+  const [isActiveFilter, setIsActiveFilter] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
+  const [contractToDelete, setContractToDelete] =
+    useState<OperationsContract | null>(null);
+  const [isDeletingContract, setIsDeletingContract] = useState(false);
+
+  const editParam = searchParams.get('edit');
+  const editingContractId =
+    editParam && /^\d+$/.test(editParam) ? Number(editParam) : null;
+
+  const updateSheetQuery = (options?: { editId?: number | null }) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete('edit');
+
+    if (options?.editId && options.editId > 0) {
+      params.set('edit', String(options.editId));
+    }
+
+    const nextUrl = params.size ? `${pathname}?${params.toString()}` : pathname;
+    router.replace(nextUrl, { scroll: false });
+  };
+
+  const closeFormSheet = () => {
+    setIsCreateSheetOpen(false);
+    if (editingContractId !== null) {
+      updateSheetQuery();
+    }
+  };
+
+  const { data: contractsResponse, refetch } = useQuery<
+    PaginatedResponse<OperationsContract>
+  >({
+    queryKey: [
+      'operations-contracts-list',
+      currentLocaleCode,
+      search,
+      isActiveFilter,
+      page,
+      pageSize,
+    ],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+
+      if (search.trim()) params.set('search', search.trim());
+      if (isActiveFilter !== 'all') {
+        params.set('isActive', String(isActiveFilter === 'active'));
+      }
+
+      return fetchOperations<PaginatedResponse<OperationsContract>>(
+        request,
+        `/operations/contracts?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
+  });
+
+  const { data: stats } = useQuery<OperationsContractStats>({
+    queryKey: ['operations-contracts-stats', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<OperationsContractStats>(request, '/operations/contracts/stats'),
+  });
+
+  const rows = contractsResponse?.data ?? [];
+  const statsCards = useMemo(
+    () => [
+      {
+        key: 'total',
+        title: t('cards.total'),
+        value: stats?.total ?? 0,
+        icon: FileText,
+      },
+      {
+        key: 'active',
+        title: t('cards.active'),
+        value: stats?.active ?? 0,
+        icon: ShieldCheck,
+      },
+      {
+        key: 'inactive',
+        title: t('cards.inactive'),
+        value: stats?.inactive ?? 0,
+        icon: ShieldOff,
+      },
+      {
+        key: 'withFile',
+        title: t('cards.withFile'),
+        value: stats?.withFile ?? 0,
+        icon: Download,
+      },
+    ],
+    [stats, t]
+  );
+
+  const downloadContract = async (contractId: number) => {
+    const detail = await fetchOperations<OperationsContractDetails>(
+      request,
+      `/operations/contracts/${contractId}`
+    );
+    const document =
+      detail.documents.find(
+        (item) =>
+          item.isCurrent &&
+          ['generated_pdf', 'source_upload'].includes(item.documentType)
+      ) ?? null;
+
+    if (document?.fileId) {
+      window.open(buildStoredFileUrl(document.fileId) || '', '_blank', 'noopener,noreferrer');
+      return;
+    }
+
+    if (!document?.fileContentBase64) {
+      showToastHandler?.('error', t('messages.noPdf'));
+      return;
+    }
+
+    downloadBase64File(
+      document.fileName,
+      document.mimeType,
+      document.fileContentBase64
+    );
+  };
+
+  const handleDeleteContract = async () => {
+    if (!contractToDelete?.id) {
+      return;
+    }
+
+    try {
+      setIsDeletingContract(true);
+      await request({
+        url: `/operations/contracts/${contractToDelete.id}`,
+        method: 'DELETE',
+      });
+      showToastHandler?.('success', t('messages.deleteSuccess'));
+      setContractToDelete(null);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.deleteError'));
+    } finally {
+      setIsDeletingContract(false);
+    }
+  };
+
+  const toggleActive = async (contract: OperationsContract) => {
+    try {
+      const nextIsActive = !contract.isActive;
+      await mutateOperations(
+        request,
+        `/operations/contracts/${contract.id}`,
+        'PATCH',
+        {
+          isActive: nextIsActive,
+          status: nextIsActive ? 'active' : 'archived',
+        }
+      );
+      showToastHandler?.('success', t('messages.statusSuccess'));
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.statusError'));
+    }
+  };
+
+  const renderActions = (contract: OperationsContract) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="cursor-pointer"
+          aria-label={commonT('labels.actions')}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <MoreHorizontal className="size-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuItem
+          onSelect={() => router.push(`/operations/contracts/${contract.id}`)}
+        >
+          <Eye className="size-4" />
+          {detailT('actions.preview')}
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => void downloadContract(contract.id)}>
+          <Download className="size-4" />
+          {t('actions.downloadPdf')}
+        </DropdownMenuItem>
+        {access.isDirector ? <DropdownMenuSeparator /> : null}
+        {access.isDirector ? (
+          <DropdownMenuItem onSelect={() => updateSheetQuery({ editId: contract.id })}>
+            <Pencil className="size-4" />
+            {commonT('actions.edit')}
+          </DropdownMenuItem>
+        ) : null}
+        {access.isDirector ? (
+          <DropdownMenuItem onSelect={() => void toggleActive(contract)}>
+            {contract.isActive ? (
+              <ShieldOff className="size-4" />
+            ) : (
+              <ShieldCheck className="size-4" />
+            )}
+            {contract.isActive ? detailT('labels.inactive') : detailT('labels.active')}
+          </DropdownMenuItem>
+        ) : null}
+        {access.isDirector ? <DropdownMenuSeparator /> : null}
+        {access.isDirector ? (
+          <DropdownMenuItem
+            onSelect={() => setContractToDelete(contract)}
+            className="text-destructive focus:text-destructive"
+          >
+            <Trash2 className="size-4 text-destructive" />
+            {t('actions.delete')}
+          </DropdownMenuItem>
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          access.isDirector ? (
+            <Button
+              size="sm"
+              className="cursor-pointer"
+              onClick={() => setIsCreateSheetOpen(true)}
+            >
+              {commonT('actions.create')}
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <KpiCardsGrid items={statsCards} columns={4} />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={(value) => {
+          setSearch(value);
+          setPage(1);
+        }}
+        showSearchButton={false}
+        debounceMs={500}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'status',
+            type: 'select',
+            value: isActiveFilter,
+            onChange: (value) => {
+              setIsActiveFilter(value);
+              setPage(1);
+            },
+            placeholder: commonT('labels.status'),
+            options: [
+              { value: 'all', label: commonT('filters.allStatuses') },
+              { value: 'active', label: detailT('labels.active') },
+              { value: 'inactive', label: detailT('labels.inactive') },
+            ],
+          },
+        ]}
+      />
+
+      {rows.length ? (
+        <div className="overflow-x-auto rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.title')}</TableHead>
+                <TableHead>{t('columns.file')}</TableHead>
+                <TableHead>{commonT('labels.status')}</TableHead>
+                <TableHead className="w-32 text-right">
+                  {commonT('labels.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.map((contract) => (
+                <TableRow
+                  key={contract.id}
+                  className="cursor-pointer hover:bg-muted/30"
+                  onClick={() => router.push(`/operations/contracts/${contract.id}`)}
+                >
+                  <TableCell>
+                    <div className="min-w-0">
+                      <div className="truncate font-medium">
+                        {contract.name ||
+                          contract.code ||
+                          commonT('labels.notAvailable')}
+                      </div>
+                      <div className="truncate text-xs text-muted-foreground">
+                        {contract.mainRelatedPartyName ||
+                          commonT('labels.notAvailable')}
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <span className="truncate text-sm text-muted-foreground">
+                      {contract.currentPdfFileName || commonT('labels.notAvailable')}
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={
+                        contract.isActive
+                          ? detailT('labels.active')
+                          : detailT('labels.inactive')
+                      }
+                      className={getStatusBadgeClass(
+                        contract.isActive ? 'active' : 'archived'
+                      )}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div
+                      className="flex justify-end"
+                      onClick={(event) => event.stopPropagation()}
+                    >
+                      {renderActions(contract)}
+                    </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
+              ? () => setIsCreateSheetOpen(true)
+              : () => void refetch()
+          }
+        />
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={contractsResponse?.total ?? 0}
+        pageSizeOptions={[12, 24, 48]}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(1);
+        }}
+      />
+
+      <AlertDialog
+        open={contractToDelete !== null}
+        onOpenChange={(open) => {
+          if (!open && !isDeletingContract) {
+            setContractToDelete(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t('messages.confirmDeleteTitle')}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('messages.confirmDeleteDescription', {
+                name:
+                  contractToDelete?.name ||
+                  contractToDelete?.code ||
+                  commonT('labels.notAvailable'),
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeletingContract}>
+              {commonT('actions.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={isDeletingContract}
+              className="bg-destructive text-white hover:bg-destructive/90"
+              onClick={(event) => {
+                event.preventDefault();
+                void handleDeleteContract();
+              }}
+            >
+              {t('actions.delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Sheet
+        open={isCreateSheetOpen || editingContractId !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            closeFormSheet();
+          }
+        }}
+      >
+        <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
+          <SheetHeader className="sr-only">
+            <SheetTitle>
+              {editingContractId ? commonT('actions.edit') : commonT('actions.create')}
+            </SheetTitle>
+            <SheetDescription>{t('description')}</SheetDescription>
+          </SheetHeader>
+          <ContractFormScreen
+            key={
+              editingContractId
+                ? `edit-${editingContractId}`
+                : isCreateSheetOpen
+                  ? 'create-contract'
+                  : 'contract-sheet'
+            }
+            contractId={editingContractId ?? undefined}
+            onCancel={closeFormSheet}
+            onSaved={async () => {
+              closeFormSheet();
+              await refetch();
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/departments/page.d.ts

@@ -0,0 +1,2 @@
+export default function OperationsDepartmentsPage(): import("react").JSX.Element;
+//# sourceMappingURL=page.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/departments/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["page.tsx"],"names":[],"mappings":"AAqDA,MAAM,CAAC,OAAO,UAAU,yBAAyB,gCAyiBhD"}