@hed-hog/operations 0.0.306 → 0.0.310

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

@@ -19,8 +19,6 @@ 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,
@@ -41,14 +39,10 @@ function downloadBase64File(
   link.click();
 }
 
-function openStoredFile(fileId?: number | null) {
-  if (!fileId) return;
+function buildStoredFileUrl(fileId?: number | null) {
+  if (!fileId) return null;
   const baseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
-  window.open(
-    `${baseUrl}/file/open/${fileId}`,
-    '_blank',
-    'noopener,noreferrer'
-  );
+  return `${baseUrl}/file/open/${fileId}`;
 }
 
 export function ContractDetailsScreen({ contractId }: { contractId: number }) {
@@ -86,9 +80,23 @@ export function ContractDetailsScreen({ contractId }: { contractId: number }) {
     );
   }
 
-  const currentPdf = contract.documents.find((document) => document.isCurrent);
+  const currentDocument =
+    contract.documents.find(
+      (document) =>
+        document.isCurrent &&
+        ['generated_pdf', 'source_upload'].includes(document.documentType)
+    ) ??
+    contract.documents.find((document) => document.isCurrent) ??
+    null;
+
+  const previewSource = currentDocument?.fileContentBase64
+    ? `data:${currentDocument.mimeType};base64,${currentDocument.fileContentBase64}`
+    : buildStoredFileUrl(currentDocument?.fileId);
+  const canPreview =
+    Boolean(previewSource) && currentDocument?.mimeType?.includes('pdf');
   const contractTitle =
     contract.name || contract.code || commonT('labels.notAvailable');
+
   const getOptionLabel = (group: string, value?: string | null) => {
     if (!value) {
       return '-';
@@ -105,24 +113,35 @@ export function ContractDetailsScreen({ contractId }: { contractId: number }) {
         description={t('description')}
         current={t('breadcrumb')}
         actions={
-          <div className="flex gap-2">
-            {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>
+          <div className="flex flex-wrap gap-2">
+            {currentDocument?.fileId || currentDocument?.fileContentBase64 ? (
+              currentDocument.fileId ? (
+                <Button variant="outline" size="sm" asChild>
+                  <a
+                    href={buildStoredFileUrl(currentDocument.fileId) || '#'}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <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>
@@ -136,105 +155,73 @@ export function ContractDetailsScreen({ contractId }: { contractId: number }) {
         }
       />
 
-      <Tabs defaultValue="overview">
+      <Tabs defaultValue="preview">
         <TabsList className="flex-wrap">
+          <TabsTrigger value="preview">{t('tabs.preview')}</TabsTrigger>
           <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="preview">
+          <SectionCard title={t('sections.preview')}>
+            {canPreview && previewSource ? (
+              <iframe
+                title={t('sections.preview')}
+                src={previewSource}
+                className="h-180 w-full rounded-lg border"
+              />
+            ) : (
+              <div className="rounded-lg border border-dashed px-4 py-12 text-center text-sm text-muted-foreground">
+                {t('states.previewUnavailable')}
+              </div>
+            )}
+          </SectionCard>
+        </TabsContent>
+
         <TabsContent value="overview">
           <SectionCard title={t('sections.overview')}>
-            <dl className="grid gap-3 text-sm md:grid-cols-3">
+            <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">{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')}
+                  {commonT('labels.status')}
                 </dt>
                 <dd className="font-medium">
                   <StatusBadge
-                    label={getOptionLabel(
-                      'signatureStatuses',
-                      contract.signatureStatus
+                    label={
+                      contract.isActive
+                        ? t('labels.active')
+                        : t('labels.inactive')
+                    }
+                    className={getStatusBadgeClass(
+                      contract.isActive ? 'active' : 'archived'
                     )}
-                    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')}
+                  {t('labels.mainParty')}
                 </dt>
                 <dd className="font-medium">
-                  {formatDate(contract.startDate)}
+                  {contract.mainRelatedPartyName ||
+                    commonT('labels.notAvailable')}
                 </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')}
+                  {t('labels.contractType')}
                 </dt>
                 <dd className="font-medium">
-                  <StatusBadge
-                    label={getOptionLabel('statuses', contract.status)}
-                    className={getStatusBadgeClass(contract.status)}
-                  />
+                  {getOptionLabel('contractTypes', contract.contractType)}
                 </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>
 
@@ -277,74 +264,7 @@ export function ContractDetailsScreen({ contractId }: { contractId: number }) {
             )}
           </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 ? (
@@ -362,22 +282,33 @@ export function ContractDetailsScreen({ contractId }: { contractId: number }) {
                       </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>
+                      document.fileId ? (
+                        <Button variant="outline" size="sm" asChild>
+                          <a
+                            href={buildStoredFileUrl(document.fileId) || '#'}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            <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>
                 ))}
@@ -389,43 +320,7 @@ export function ContractDetailsScreen({ contractId }: { contractId: number }) {
             )}
           </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 ? (