@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/contract-details-screen.tsx

@@ -0,0 +1,342 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Download, FileText, Pencil } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { fetchOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type { OperationsContractDetails } from '../_lib/types';
+import {
+  formatDateTime,
+  formatEnumLabel,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
+import { OperationsHeader } from './operations-header';
+import { SectionCard } from './section-card';
+import { StatusBadge } from './status-badge';
+
+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 function ContractDetailsScreen({ contractId }: { contractId: number }) {
+  const t = useTranslations('operations.ContractDetailsPage');
+  const commonT = useTranslations('operations.Common');
+  const formT = useTranslations('operations.ContractFormPage');
+  const { request, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+
+  const { data: contract, refetch } = useQuery<OperationsContractDetails>({
+    queryKey: ['operations-contract-details', currentLocaleCode, contractId],
+    queryFn: () =>
+      fetchOperations<OperationsContractDetails>(
+        request,
+        `/operations/contracts/${contractId}`
+      ),
+  });
+
+  if (!contract) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        <EmptyState
+          icon={<FileText className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('notFound')}
+          actionLabel={commonT('actions.refresh')}
+          onAction={() => void refetch()}
+        />
+      </Page>
+    );
+  }
+
+  const currentDocument =
+    contract.documents.find(
+      (document) =>
+        document.isCurrent &&
+        ['generated_pdf', 'source_upload'].includes(document.documentType)
+    ) ??
+    contract.documents.find((document) => document.isCurrent) ??
+    null;
+  const contractTitle =
+    contract.name || contract.code || commonT('labels.notAvailable');
+
+  const getOptionLabel = (group: string, value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.${group}.${value}`;
+    return formT.has(key) ? formT(key) : formatEnumLabel(value);
+  };
+
+  const getHistoryNoteLabel = (note?: string | null) => {
+    if (!note) {
+      return commonT('labels.noNotes');
+    }
+
+    const normalizedNote = note.trim();
+    const historyNoteMap: Record<string, string> = {
+      'Manual contract created from registry.': t('historyNotes.manualCreated'),
+      'Contract registry data updated.': t('historyNotes.registryUpdated'),
+      'Contract documents removed.': t('historyNotes.documentsRemoved'),
+    };
+
+    return historyNoteMap[normalizedNote] ?? normalizedNote;
+  };
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={contractTitle}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex flex-wrap gap-2">
+            {currentDocument?.fileId || currentDocument?.fileContentBase64 ? (
+              currentDocument.fileId ? (
+                <Button variant="outline" size="sm" asChild>
+                  <a href={buildStoredFileUrl(currentDocument.fileId) || '#'} download>
+                    <Download className="size-4" />
+                    {t('actions.downloadPdf')}
+                  </a>
+                </Button>
+              ) : (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    downloadBase64File(
+                      currentDocument.fileName,
+                      currentDocument.mimeType,
+                      currentDocument.fileContentBase64 || ''
+                    )
+                  }
+                >
+                  <Download className="size-4" />
+                  {t('actions.downloadPdf')}
+                </Button>
+              )
+            ) : null}
+            {access.isDirector ? (
+              <Button size="sm" asChild>
+                <Link href={`/operations/contracts/${contract.id}/edit`}>
+                  <Pencil className="size-4" />
+                  {commonT('actions.edit')}
+                </Link>
+              </Button>
+            ) : null}
+          </div>
+        }
+      />
+
+      <Tabs defaultValue="overview">
+        <TabsList className="flex-wrap">
+          <TabsTrigger value="overview">{t('tabs.overview')}</TabsTrigger>
+          <TabsTrigger value="parties">{t('tabs.parties')}</TabsTrigger>
+          <TabsTrigger value="documents">{t('tabs.documents')}</TabsTrigger>
+          <TabsTrigger value="history">{t('tabs.history')}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview">
+          <SectionCard title={t('sections.overview')}>
+            <dl className="grid gap-3 text-sm md:grid-cols-4">
+              <div>
+                <dt className="text-muted-foreground">
+                  {commonT('labels.contract')}
+                </dt>
+                <dd className="font-medium">{contractTitle}</dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {commonT('labels.status')}
+                </dt>
+                <dd className="font-medium">
+                  <StatusBadge
+                    label={
+                      contract.isActive
+                        ? t('labels.active')
+                        : t('labels.inactive')
+                    }
+                    className={getStatusBadgeClass(
+                      contract.isActive ? 'active' : 'archived'
+                    )}
+                  />
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {t('labels.mainParty')}
+                </dt>
+                <dd className="font-medium">
+                  {contract.mainRelatedPartyName ||
+                    commonT('labels.notAvailable')}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {t('labels.contractType')}
+                </dt>
+                <dd className="font-medium">
+                  {getOptionLabel('contractTypes', contract.contractType)}
+                </dd>
+              </div>
+            </dl>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="parties">
+          <SectionCard title={t('sections.parties')}>
+            {contract.parties.length ? (
+              <div className="overflow-x-auto rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{t('labels.mainParty')}</TableHead>
+                      <TableHead>{t('labels.partyRole')}</TableHead>
+                      <TableHead>{t('labels.partyType')}</TableHead>
+                      <TableHead>{t('labels.documentNumber')}</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {contract.parties.map((party) => (
+                      <TableRow key={party.id}>
+                        <TableCell>{party.displayName}</TableCell>
+                        <TableCell>
+                          {getOptionLabel('partyRoles', party.partyRole)}
+                        </TableCell>
+                        <TableCell>
+                          {getOptionLabel('partyTypes', party.partyType)}
+                        </TableCell>
+                        <TableCell>
+                          {party.documentNumber ||
+                            commonT('labels.notAvailable')}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                {t('states.noParties')}
+              </p>
+            )}
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="documents">
+          <SectionCard title={t('sections.documents')}>
+            {contract.documents.length ? (
+              <div className="space-y-3">
+                {contract.documents.map((document) => (
+                  <div
+                    key={document.id}
+                    className="flex items-center justify-between rounded-lg border px-4 py-3"
+                  >
+                    <div>
+                      <div className="font-medium">{document.fileName}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {getOptionLabel('documentTypes', document.documentType)}{' '}
+                        • {formatDateTime(document.createdAt)}
+                      </div>
+                    </div>
+                    {document.fileId || document.fileContentBase64 ? (
+                      document.fileId ? (
+                        <Button variant="outline" size="sm" asChild>
+                          <a
+                            href={buildStoredFileUrl(document.fileId) || '#'}
+                            download
+                          >
+                            <Download className="size-4" />
+                            {t('actions.download')}
+                          </a>
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() =>
+                            downloadBase64File(
+                              document.fileName,
+                              document.mimeType,
+                              document.fileContentBase64 || ''
+                            )
+                          }
+                        >
+                          <Download className="size-4" />
+                          {t('actions.download')}
+                        </Button>
+                      )
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                {t('states.noDocuments')}
+              </p>
+            )}
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="history">
+          <SectionCard title={t('sections.history')}>
+            {contract.history.length ? (
+              <div className="space-y-3">
+                {contract.history.map((item) => (
+                  <div
+                    key={item.id}
+                    className="rounded-lg border px-4 py-3 text-sm"
+                  >
+                    <div className="font-medium">
+                      {getOptionLabel('historyActions', item.action)}
+                    </div>
+                    <div className="text-muted-foreground">
+                      {formatDateTime(item.createdAt)}
+                    </div>
+                    <div>{getHistoryNoteLabel(item.note)}</div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                {t('states.noHistory')}
+              </p>
+            )}
+          </SectionCard>
+        </TabsContent>
+      </Tabs>
+    </Page>
+  );
+}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/contract-form-screen.d.ts

@@ -0,0 +1,58 @@
+import type { OperationsContractDetails } from '../_lib/types';
+type PartyState = {
+    displayName: string;
+    partyRole: string;
+    partyType: string;
+    documentNumber: string;
+    email: string;
+    phone: string;
+    isPrimary: boolean;
+};
+type ContractUploadDocument = {
+    fileId?: number | null;
+    fileName: string;
+    mimeType: string;
+    fileContentBase64?: string | null;
+};
+export type ContractFormState = {
+    code: string;
+    name: string;
+    clientName: string;
+    contractCategory: string;
+    contractType: string;
+    signatureStatus: string;
+    isActive: boolean;
+    billingModel: string;
+    accountManagerCollaboratorId: string;
+    relatedCollaboratorId: string;
+    originType: string;
+    originId: string;
+    startDate: string;
+    endDate: string;
+    signedAt: string;
+    effectiveDate: string;
+    budgetAmount: string;
+    monthlyHourCap: string;
+    status: string;
+    description: string;
+    contentHtml: string;
+    parties: PartyState[];
+    pdfDocument: {
+        fileId?: number | null;
+        fileName: string;
+        mimeType: string;
+        fileContentBase64?: string | null;
+    } | null;
+    additionalUploadedDocuments: ContractUploadDocument[];
+    deletedDocumentIds: number[];
+};
+export declare function ContractFormScreen({ contractId, duplicateFromId, initialTemplateId, initialValues, onSaved, onCancel, }: {
+    contractId?: number;
+    duplicateFromId?: number;
+    initialTemplateId?: number;
+    initialValues?: Partial<ContractFormState>;
+    onSaved?: (contract: OperationsContractDetails) => void | Promise<void>;
+    onCancel?: () => void;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=contract-form-screen.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/_components/contract-form-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contract-form-screen.d.ts","sourceRoot":"","sources":["contract-form-screen.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAM/D,KAAK,UAAU,GAAG;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,4BAA4B,EAAE,MAAM,CAAC;IACrC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,EAAE;QACX,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACnC,GAAG,IAAI,CAAC;IACT,2BAA2B,EAAE,sBAAsB,EAAE,CAAC;IACtD,kBAAkB,EAAE,MAAM,EAAE,CAAC;CAC9B,CAAC;AAkIF,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,QAAQ,GACT,EAAE;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,yBAAyB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,+BAoeA"}