@hed-hog/operations 0.0.300 → 0.0.301

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

@@ -2,7 +2,6 @@
 
 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,
@@ -11,13 +10,11 @@ import {
   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 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 Link from 'next/link';
 import { fetchOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
 import type { OperationsContractDetails } from '../_lib/types';
@@ -28,8 +25,15 @@ import {
   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) {
+function downloadBase64File(
+  fileName: string,
+  mimeType: string,
+  base64: string
+) {
   const href = `data:${mimeType};base64,${base64}`;
   const link = document.createElement('a');
   link.href = href;
@@ -37,22 +41,40 @@ function downloadBase64File(fileName: string, mimeType: string, base64: string)
   link.click();
 }
 
+function openStoredFile(fileId?: number | null) {
+  if (!fileId) return;
+  const baseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
+  window.open(
+    `${baseUrl}/file/open/${fileId}`,
+    '_blank',
+    'noopener,noreferrer'
+  );
+}
+
 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}`),
+      fetchOperations<OperationsContractDetails>(
+        request,
+        `/operations/contracts/${contractId}`
+      ),
   });
 
   if (!contract) {
     return (
       <Page>
-        <OperationsHeader title={t('title')} description={t('description')} current={t('breadcrumb')} />
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
         <EmptyState
           icon={<FileText className="size-12" />}
           title={commonT('states.emptyTitle')}
@@ -65,17 +87,39 @@ export function ContractDetailsScreen({ contractId }: { contractId: number }) {
   }
 
   const currentPdf = contract.documents.find((document) => document.isCurrent);
+  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);
+  };
 
   return (
     <Page>
       <OperationsHeader
-        title={contract.name}
+        title={contractTitle}
         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 || '')}>
+            {currentPdf?.fileId || currentPdf?.fileContentBase64 ? (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() =>
+                  currentPdf?.fileId
+                    ? openStoredFile(currentPdf.fileId)
+                    : downloadBase64File(
+                        currentPdf.fileName,
+                        currentPdf.mimeType,
+                        currentPdf.fileContentBase64 || ''
+                      )
+                }
+              >
                 <Download className="size-4" />
                 {t('actions.downloadPdf')}
               </Button>
@@ -106,26 +150,308 @@ export function ContractDetailsScreen({ contractId }: { contractId: number }) {
         <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>
+              <div>
+                <dt className="text-muted-foreground">
+                  {commonT('labels.contract')}
+                </dt>
+                <dd className="font-medium">{contractTitle}</dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">{t('labels.origin')}</dt>
+                <dd className="font-medium">
+                  {getOptionLabel('originTypes', 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">
+                  {getOptionLabel('contractTypes', contract.contractType)}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">
+                  {t('labels.signatureStatus')}
+                </dt>
+                <dd className="font-medium">
+                  <StatusBadge
+                    label={getOptionLabel(
+                      'signatureStatuses',
+                      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={getOptionLabel('statuses', 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}
+            {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>
+        <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="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={getOptionLabel(
+                              'signatureStatuses',
+                              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">
+                        {getOptionLabel('documentTypes', document.documentType)}{' '}
+                        • {formatDateTime(document.createdAt)}
+                      </div>
+                    </div>
+                    {document.fileId || document.fileContentBase64 ? (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() =>
+                          document.fileId
+                            ? openStoredFile(document.fileId)
+                            : 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={getOptionLabel('statuses', 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">
+                      {getOptionLabel('historyActions', 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>
   );