@hed-hog/operations 0.0.295 → 0.0.296

package/hedhog/frontend/app/_components/contract-details-screen.tsx.ejs

@@ -0,0 +1,132 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Download, FileText, Pencil } from 'lucide-react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { OperationsHeader } from './operations-header';
+import { SectionCard } from './section-card';
+import { StatusBadge } from './status-badge';
+import { fetchOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type { OperationsContractDetails } from '../_lib/types';
+import {
+  formatCurrency,
+  formatDate,
+  formatDateTime,
+  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();
+}
+
+export function ContractDetailsScreen({ contractId }: { contractId: number }) {
+  const t = useTranslations('operations.ContractDetailsPage');
+  const commonT = useTranslations('operations.Common');
+  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 currentPdf = contract.documents.find((document) => document.isCurrent);
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={contract.name}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex gap-2">
+            {currentPdf?.fileContentBase64 ? (
+              <Button variant="outline" size="sm" onClick={() => downloadBase64File(currentPdf.fileName, currentPdf.mimeType, currentPdf.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="signatures">{t('tabs.signatures')}</TabsTrigger>
+          <TabsTrigger value="financials">{t('tabs.financials')}</TabsTrigger>
+          <TabsTrigger value="documents">{t('tabs.documents')}</TabsTrigger>
+          <TabsTrigger value="revisions">{t('tabs.revisions')}</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-3">
+              <div><dt className="text-muted-foreground">{commonT('labels.contract')}</dt><dd className="font-medium">{contract.name}</dd></div>
+              <div><dt className="text-muted-foreground">{t('labels.origin')}</dt><dd className="font-medium">{formatEnumLabel(contract.originType)}</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">{formatEnumLabel(contract.contractType)}</dd></div>
+              <div><dt className="text-muted-foreground">{t('labels.signatureStatus')}</dt><dd className="font-medium"><StatusBadge label={formatEnumLabel(contract.signatureStatus)} className={getStatusBadgeClass(contract.signatureStatus)} /></dd></div>
+              <div><dt className="text-muted-foreground">{t('labels.activeState')}</dt><dd className="font-medium">{contract.isActive ? t('labels.active') : t('labels.inactive')}</dd></div>
+              <div><dt className="text-muted-foreground">{commonT('labels.startDate')}</dt><dd className="font-medium">{formatDate(contract.startDate)}</dd></div>
+              <div><dt className="text-muted-foreground">{commonT('labels.endDate')}</dt><dd className="font-medium">{formatDate(contract.endDate)}</dd></div>
+              <div><dt className="text-muted-foreground">{commonT('labels.status')}</dt><dd className="font-medium"><StatusBadge label={formatEnumLabel(contract.status)} className={getStatusBadgeClass(contract.status)} /></dd></div>
+            </dl>
+            {contract.contentHtml ? <div className="prose prose-sm mt-4 max-w-none rounded-lg border p-4" dangerouslySetInnerHTML={{ __html: contract.contentHtml }} /> : null}
+          </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>{formatEnumLabel(party.partyRole)}</TableCell><TableCell>{formatEnumLabel(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="signatures"><SectionCard title={t('sections.signatures')}>{contract.signatures.length ? <div className="overflow-x-auto rounded-md border"><Table><TableHeader><TableRow><TableHead>{t('labels.signer')}</TableHead><TableHead>{commonT('labels.status')}</TableHead><TableHead>{t('labels.signedAt')}</TableHead></TableRow></TableHeader><TableBody>{contract.signatures.map((signature) => <TableRow key={signature.id}><TableCell>{signature.signerName}</TableCell><TableCell><StatusBadge label={formatEnumLabel(signature.status)} className={getStatusBadgeClass(signature.status)} /></TableCell><TableCell>{formatDate(signature.signedAt)}</TableCell></TableRow>)}</TableBody></Table></div> : <p className="text-sm text-muted-foreground">{t('states.noSignatures')}</p>}</SectionCard></TabsContent>
+        <TabsContent value="financials"><SectionCard title={t('sections.financials')}><dl className="grid gap-3 text-sm md:grid-cols-4"><div><dt className="text-muted-foreground">{t('labels.value')}</dt><dd className="font-medium">{formatCurrency(contract.valueAmount ?? 0)}</dd></div><div><dt className="text-muted-foreground">{t('labels.payment')}</dt><dd className="font-medium">{formatCurrency(contract.paymentAmount ?? 0)}</dd></div><div><dt className="text-muted-foreground">{t('labels.revenue')}</dt><dd className="font-medium">{formatCurrency(contract.revenueAmount ?? 0)}</dd></div><div><dt className="text-muted-foreground">{t('labels.fine')}</dt><dd className="font-medium">{formatCurrency(contract.fineAmount ?? 0)}</dd></div></dl></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">{formatEnumLabel(document.documentType)} • {formatDateTime(document.createdAt)}</div></div>{document.fileContentBase64 ? <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="revisions"><SectionCard title={t('sections.revisions')}>{contract.revisions.length ? <div className="overflow-x-auto rounded-md border"><Table><TableHeader><TableRow><TableHead>{t('labels.revision')}</TableHead><TableHead>{commonT('labels.status')}</TableHead><TableHead>{commonT('labels.startDate')}</TableHead></TableRow></TableHeader><TableBody>{contract.revisions.map((revision) => <TableRow key={revision.id}><TableCell>{revision.title}</TableCell><TableCell><StatusBadge label={formatEnumLabel(revision.status)} className={getStatusBadgeClass(revision.status)} /></TableCell><TableCell>{formatDate(revision.effectiveDate)}</TableCell></TableRow>)}</TableBody></Table></div> : <p className="text-sm text-muted-foreground">{t('states.noRevisions')}</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">{formatEnumLabel(item.action)}</div><div className="text-muted-foreground">{formatDateTime(item.createdAt)}</div><div>{item.note || commonT('labels.noNotes')}</div></div>)}</div> : <p className="text-sm text-muted-foreground">{t('states.noHistory')}</p>}</SectionCard></TabsContent>
+      </Tabs>
+    </Page>
+  );
+}