@hed-hog/operations 0.0.322 → 0.0.326

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

@@ -0,0 +1,698 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Download, FileText, Save, Upload } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type { OperationsContractDetails } from '../_lib/types';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import { OperationsHeader } from './operations-header';
+import { SectionCard } from './section-card';
+import { StatusBadge } from './status-badge';
+
+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[];
+};
+
+function emptyParty(): PartyState {
+  return {
+    displayName: '',
+    partyRole: 'client',
+    partyType: 'company',
+    documentNumber: '',
+    email: '',
+    phone: '',
+    isPrimary: false,
+  };
+}
+
+function buildEmptyForm(): ContractFormState {
+  return {
+    code: '',
+    name: '',
+    clientName: '',
+    contractCategory: 'client',
+    contractType: 'service_agreement',
+    signatureStatus: 'not_started',
+    isActive: true,
+    billingModel: 'time_and_material',
+    accountManagerCollaboratorId: 'none',
+    relatedCollaboratorId: 'none',
+    originType: 'manual',
+    originId: '',
+    startDate: '',
+    endDate: '',
+    signedAt: '',
+    effectiveDate: '',
+    budgetAmount: '',
+    monthlyHourCap: '',
+    status: 'active',
+    description: '',
+    contentHtml: '',
+    parties: [emptyParty()],
+    pdfDocument: null,
+    additionalUploadedDocuments: [],
+    deletedDocumentIds: [],
+  };
+}
+
+function toFormState(contract: OperationsContractDetails): ContractFormState {
+  return {
+    code: contract.code ?? '',
+    name: contract.name ?? '',
+    clientName: contract.clientName ?? '',
+    contractCategory: contract.contractCategory ?? 'client',
+    contractType: contract.contractType ?? 'service_agreement',
+    signatureStatus: contract.signatureStatus ?? 'not_started',
+    isActive: contract.isActive ?? true,
+    billingModel: contract.billingModel ?? 'time_and_material',
+    accountManagerCollaboratorId: contract.accountManagerCollaboratorId
+      ? String(contract.accountManagerCollaboratorId)
+      : 'none',
+    relatedCollaboratorId: contract.relatedCollaboratorId
+      ? String(contract.relatedCollaboratorId)
+      : 'none',
+    originType: contract.originType ?? 'manual',
+    originId:
+      contract.originId !== null && contract.originId !== undefined
+        ? String(contract.originId)
+        : '',
+    startDate: contract.startDate ?? '',
+    endDate: contract.endDate ?? '',
+    signedAt: contract.signedAt ?? '',
+    effectiveDate: contract.effectiveDate ?? '',
+    budgetAmount:
+      contract.budgetAmount !== null && contract.budgetAmount !== undefined
+        ? String(contract.budgetAmount)
+        : '',
+    monthlyHourCap:
+      contract.monthlyHourCap !== null && contract.monthlyHourCap !== undefined
+        ? String(contract.monthlyHourCap)
+        : '',
+    status: contract.status ?? 'active',
+    description: contract.description ?? '',
+    contentHtml: contract.contentHtml ?? '',
+    parties: contract.parties.length
+      ? contract.parties.map((party) => ({
+          displayName: party.displayName ?? '',
+          partyRole: party.partyRole ?? 'other',
+          partyType: party.partyType ?? 'company',
+          documentNumber: party.documentNumber ?? '',
+          email: party.email ?? '',
+          phone: party.phone ?? '',
+          isPrimary: party.isPrimary ?? false,
+        }))
+      : [emptyParty()],
+    pdfDocument: null,
+    additionalUploadedDocuments: [],
+    deletedDocumentIds: [],
+  };
+}
+
+function fileToBase64(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result ?? '');
+      const [, base64 = ''] = result.split(',');
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+function buildStoredFileUrl(fileId?: number | null) {
+  if (!fileId) {
+    return null;
+  }
+
+  const baseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
+  return `${baseUrl}/file/open/${fileId}`;
+}
+
+function downloadBase64File(
+  fileName: string,
+  mimeType: string,
+  base64: string
+) {
+  const link = document.createElement('a');
+  link.href = `data:${mimeType};base64,${base64}`;
+  link.download = fileName;
+  link.click();
+}
+
+export 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;
+}) {
+  void initialTemplateId;
+
+  const t = useTranslations('operations.ContractFormPage');
+  const commonT = useTranslations('operations.Common');
+  const detailT = useTranslations('operations.ContractDetailsPage');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const sourceId = contractId ?? duplicateFromId;
+  const isSheetMode = Boolean(onCancel);
+  const [form, setForm] = useState<ContractFormState>(() => ({
+    ...buildEmptyForm(),
+    ...initialValues,
+  }));
+
+  const { data: contract, isLoading: isLoadingContract } =
+    useQuery<OperationsContractDetails>({
+      queryKey: ['operations-contract-form', currentLocaleCode, sourceId],
+      enabled: Boolean(sourceId),
+      queryFn: () =>
+        fetchOperations<OperationsContractDetails>(
+          request,
+          `/operations/contracts/${sourceId}`
+        ),
+    });
+
+  useEffect(() => {
+    if (!contract) {
+      return;
+    }
+
+    const next = toFormState(contract);
+
+    if (duplicateFromId) {
+      const currentDocument =
+        contract.documents.find(
+          (document) =>
+            document.isCurrent &&
+            ['source_upload', 'generated_pdf'].includes(document.documentType)
+        ) ?? null;
+
+      next.code = '';
+      next.name = `${contract.name || contract.code || 'Contrato'} Copy`;
+      next.isActive = true;
+      next.status = 'active';
+      next.pdfDocument = currentDocument
+        ? {
+            fileId: currentDocument.fileId ?? null,
+            fileName: currentDocument.fileName,
+            mimeType: currentDocument.mimeType,
+            fileContentBase64: currentDocument.fileContentBase64 ?? null,
+          }
+        : null;
+    }
+
+    setForm({
+      ...next,
+      pdfDocument: next.pdfDocument,
+    });
+  }, [contract, duplicateFromId]);
+
+  const currentDocument = useMemo(() => {
+    if (!contract) {
+      return null;
+    }
+
+    return (
+      contract.documents.find(
+        (document) =>
+          document.isCurrent &&
+          ['source_upload', 'generated_pdf'].includes(document.documentType)
+      ) ??
+      contract.documents.find((document) => document.isCurrent) ??
+      null
+    );
+  }, [contract]);
+
+  const downloadableDocuments = useMemo(
+    () => [
+      ...(form.pdfDocument
+        ? [{ ...form.pdfDocument, id: 'draft-primary', isPending: true }]
+        : []),
+      ...form.additionalUploadedDocuments.map((document, index) => ({
+        ...document,
+        id: `draft-attachment-${index}`,
+        isPending: true,
+      })),
+      ...(contract?.documents
+        .filter((document) => !form.deletedDocumentIds.includes(document.id))
+        .filter(
+          (document) =>
+            !(
+              form.pdfDocument?.fileId &&
+              document.fileId === form.pdfDocument.fileId &&
+              document.fileName === form.pdfDocument.fileName
+            )
+        )
+        .map((document) => ({
+          ...document,
+          id: document.id,
+          isPending: false,
+        })) ?? []),
+    ],
+    [
+      contract?.documents,
+      form.additionalUploadedDocuments,
+      form.deletedDocumentIds,
+      form.pdfDocument,
+    ]
+  );
+
+  const handleSubmit = async () => {
+    if (!form.name.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    const nextStatus = form.isActive ? 'active' : 'archived';
+    const payload = {
+      code: trimToNull(form.code),
+      name: form.name.trim(),
+      clientName: trimToNull(form.clientName),
+      contractCategory: form.contractCategory,
+      contractType: form.contractType,
+      signatureStatus: form.signatureStatus,
+      isActive: form.isActive,
+      billingModel: form.billingModel,
+      accountManagerCollaboratorId:
+        form.accountManagerCollaboratorId === 'none'
+          ? null
+          : parseNumberInput(form.accountManagerCollaboratorId),
+      relatedCollaboratorId:
+        form.relatedCollaboratorId === 'none'
+          ? null
+          : parseNumberInput(form.relatedCollaboratorId),
+      originType: form.originType,
+      originId: parseNumberInput(form.originId),
+      startDate: trimToNull(form.startDate),
+      endDate: trimToNull(form.endDate),
+      signedAt: trimToNull(form.signedAt),
+      effectiveDate: trimToNull(form.effectiveDate),
+      budgetAmount: parseNumberInput(form.budgetAmount),
+      monthlyHourCap: parseNumberInput(form.monthlyHourCap),
+      status: nextStatus,
+      description: trimToNull(form.description),
+      contentHtml: trimToNull(form.contentHtml),
+      parties: form.parties
+        .filter((party) => party.displayName.trim())
+        .map((party) => ({
+          displayName: party.displayName.trim(),
+          partyRole: party.partyRole,
+          partyType: party.partyType,
+          documentNumber: trimToNull(party.documentNumber),
+          email: trimToNull(party.email),
+          phone: trimToNull(party.phone),
+          isPrimary: party.isPrimary,
+        })),
+      replaceUploadedPdfDocument: form.pdfDocument,
+      additionalUploadedDocuments: form.additionalUploadedDocuments,
+      deletedDocumentIds: form.deletedDocumentIds,
+    };
+
+    try {
+      const response = contractId
+        ? await mutateOperations<OperationsContractDetails>(
+            request,
+            `/operations/contracts/${contractId}`,
+            'PATCH',
+            payload
+          )
+        : await mutateOperations<OperationsContractDetails>(
+            request,
+            '/operations/contracts',
+            'POST',
+            payload
+          );
+
+      showToastHandler?.(
+        'success',
+        contractId ? t('messages.updateSuccess') : t('messages.createSuccess')
+      );
+
+      if (onSaved) {
+        await onSaved(response);
+        return;
+      }
+
+      router.push(`/operations/contracts/${response.id}`);
+    } catch {
+      showToastHandler?.(
+        'error',
+        contractId ? t('messages.updateError') : t('messages.createError')
+      );
+    }
+  };
+
+  const handleFilesSelected = async (files: FileList | null) => {
+    if (!files?.length) {
+      return;
+    }
+
+    const uploadedDocuments = await Promise.all(
+      Array.from(files).map(async (file) => ({
+        fileName: file.name,
+        mimeType:
+          file.type ||
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        fileContentBase64: await fileToBase64(file),
+      }))
+    );
+
+    setForm((current) => {
+      const hasPrimaryDocument = Boolean(current.pdfDocument || currentDocument);
+      const nextPrimaryDocument = hasPrimaryDocument
+        ? current.pdfDocument
+        : uploadedDocuments[0] ?? null;
+      const extraDocuments = hasPrimaryDocument
+        ? uploadedDocuments
+        : uploadedDocuments.slice(1);
+
+      return {
+        ...current,
+        pdfDocument: nextPrimaryDocument,
+        additionalUploadedDocuments: [
+          ...current.additionalUploadedDocuments,
+          ...extraDocuments,
+        ],
+      };
+    });
+  };
+
+  const handleRemoveDocument = (documentId: string | number) => {
+    setForm((current) => {
+      if (documentId === 'draft-primary') {
+        return {
+          ...current,
+          pdfDocument: null,
+        };
+      }
+
+      if (String(documentId).startsWith('draft-attachment-')) {
+        const index = Number(String(documentId).replace('draft-attachment-', ''));
+        return {
+          ...current,
+          additionalUploadedDocuments: current.additionalUploadedDocuments.filter(
+            (_item, itemIndex) => itemIndex !== index
+          ),
+        };
+      }
+
+      const numericId = Number(documentId);
+      if (!Number.isInteger(numericId) || numericId <= 0) {
+        return current;
+      }
+
+      return {
+        ...current,
+        deletedDocumentIds: current.deletedDocumentIds.includes(numericId)
+          ? current.deletedDocumentIds
+          : [...current.deletedDocumentIds, numericId],
+      };
+    });
+  };
+
+  const noAccessState = (
+    <EmptyState
+      icon={<FileText className="size-12" />}
+      title={commonT('states.noAccessTitle')}
+      description={t('noAccessDescription')}
+      actionLabel={commonT('actions.refresh')}
+      onAction={() => router.refresh()}
+    />
+  );
+
+  if (!access.isDirector && !access.isLoading) {
+    if (isSheetMode) {
+      return <div className="pt-4">{noAccessState}</div>;
+    }
+
+    return (
+      <Page>
+        <OperationsHeader
+          title={t(contractId ? 'editTitle' : 'newTitle')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        {noAccessState}
+      </Page>
+    );
+  }
+
+  const content = (
+    <div className="space-y-4">
+      <SectionCard
+        title={t('sections.overview')}
+        description={t('sections.simpleDescription')}
+        compact={isSheetMode}
+        descriptionMode={isSheetMode ? 'tooltip' : 'inline'}
+      >
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label>{t('fields.name')}</Label>
+            <Input
+              value={form.name}
+              placeholder={t('fields.name')}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  name: event.target.value,
+                }))
+              }
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>{commonT('labels.status')}</Label>
+            <div className="flex min-h-10 items-center justify-between rounded-lg border px-3">
+              <div className="flex items-center gap-2">
+                <StatusBadge
+                  label={
+                    form.isActive
+                      ? detailT('labels.active')
+                      : detailT('labels.inactive')
+                  }
+                  className={
+                    form.isActive
+                      ? 'bg-emerald-100 text-emerald-700'
+                      : 'bg-muted text-muted-foreground'
+                  }
+                />
+              </div>
+              <Switch
+                checked={form.isActive}
+                onCheckedChange={(checked) =>
+                  setForm((current) => ({
+                    ...current,
+                    isActive: checked,
+                  }))
+                }
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2 md:col-span-2">
+            <Label>{t('sections.documents')}</Label>
+            <label className="flex cursor-pointer flex-col gap-3 rounded-lg border border-dashed px-4 py-4 transition-colors hover:border-primary/40 hover:bg-accent/20">
+              <div className="flex items-center gap-3">
+                <div className="rounded-full bg-primary/10 p-2 text-primary">
+                  <Upload className="size-4" />
+                </div>
+                <div className="min-w-0">
+                  <div className="font-medium">
+                    {form.pdfDocument?.fileName ||
+                      currentDocument?.fileName ||
+                      t('sections.documents')}
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {t('messages.pdfHint')}
+                  </p>
+                </div>
+              </div>
+              <input
+                type="file"
+                className="hidden"
+                multiple
+                accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                onChange={async (event) => {
+                  await handleFilesSelected(event.target.files);
+                  event.target.value = '';
+                }}
+              />
+            </label>
+
+            {downloadableDocuments.length ? (
+              <div className="space-y-2">
+                {downloadableDocuments.map((document) => {
+                  const storedUrl =
+                    'fileId' in document
+                      ? buildStoredFileUrl(document.fileId)
+                      : null;
+
+                  return (
+                    <div
+                      key={String(document.id)}
+                      className="flex flex-col gap-3 rounded-lg border px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+                    >
+                      <div className="min-w-0">
+                        <div className="truncate font-medium">
+                          {document.fileName}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {document.mimeType}
+                        </div>
+                      </div>
+
+                      <div className="flex flex-wrap gap-2">
+                        {storedUrl ? (
+                          <Button type="button" variant="outline" asChild>
+                            <a href={storedUrl} download>
+                              <Download className="size-4" />
+                              {detailT('actions.download')}
+                            </a>
+                          </Button>
+                        ) : document.fileContentBase64 ? (
+                          <Button
+                            type="button"
+                            variant="outline"
+                            onClick={() =>
+                              downloadBase64File(
+                                document.fileName,
+                                document.mimeType,
+                                document.fileContentBase64 || ''
+                              )
+                            }
+                          >
+                            <Download className="size-4" />
+                            {detailT('actions.download')}
+                          </Button>
+                        ) : null}
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={() => handleRemoveDocument(document.id)}
+                        >
+                          {commonT('actions.delete')}
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </SectionCard>
+
+      <div className="flex flex-wrap justify-between gap-2">
+        {isSheetMode ? (
+          <Button type="button" variant="outline" onClick={onCancel}>
+            {commonT('actions.cancel')}
+          </Button>
+        ) : (
+          <Button type="button" variant="outline" asChild>
+            <Link href="/operations/contracts">
+              {commonT('actions.cancel')}
+            </Link>
+          </Button>
+        )}
+
+        <Button type="button" onClick={() => void handleSubmit()}>
+          <Save className="size-4" />
+          {commonT(contractId ? 'actions.save' : 'actions.create')}
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (isSheetMode) {
+    if (sourceId && isLoadingContract) {
+      return (
+        <div className="px-4 py-6 text-sm text-muted-foreground">
+          {t('loading')}
+        </div>
+      );
+    }
+
+    return <div className="px-4 py-4">{content}</div>;
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t(contractId ? 'editTitle' : 'newTitle')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+      {sourceId && isLoadingContract ? (
+        <div className="text-sm text-muted-foreground">{t('loading')}</div>
+      ) : (
+        content
+      )}
+    </Page>
+  );
+}