@hed-hog/operations 0.0.327 → 0.0.329

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

@@ -1,698 +0,0 @@
-'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>
-  );
-}