@hed-hog/operations 0.0.306 → 0.0.309

package/hedhog/frontend/app/_components/contract-creation-wizard.tsx.ejs

@@ -1,631 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  FileText,
-  LayoutTemplate,
-  LoaderCircle,
-  Sparkles,
-  WandSparkles,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import { fetchOperations, mutateOperations } from '../_lib/api';
-import type { OperationsContractTemplate } from '../_lib/types';
-import type { ContractFormState } from './contract-form-screen';
-import { SectionCard } from './section-card';
-
-type CreationMode = 'upload' | 'template' | 'blank';
-
-type ExtractedContractDraft = Partial<ContractFormState> & {
-  summary?: string;
-  missingFields?: string[];
-  warnings?: string[];
-};
-
-type ContractCreationWizardProps = {
-  onCancel?: () => void;
-  onComplete: (options: {
-    initialTemplateId?: number;
-    initialValues?: Partial<ContractFormState>;
-  }) => void;
-};
-
-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 inferMimeType(file: File) {
-  if (file.type) {
-    return file.type;
-  }
-
-  const name = file.name.toLowerCase();
-  if (name.endsWith('.docx')) {
-    return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
-  }
-  if (name.endsWith('.doc')) {
-    return 'application/msword';
-  }
-
-  return 'application/pdf';
-}
-
-function toTextValue(value: unknown) {
-  return typeof value === 'string' ? value : value == null ? '' : String(value);
-}
-
-function toTextArray(value: unknown) {
-  return Array.isArray(value)
-    ? value.map((item) => toTextValue(item).trim()).filter(Boolean)
-    : [];
-}
-
-function ensureHtml(value: unknown) {
-  const content = toTextValue(value).trim();
-  if (!content) {
-    return '';
-  }
-
-  if (/<[a-z][\s\S]*>/i.test(content)) {
-    return content;
-  }
-
-  return content
-    .split(/\n{2,}/)
-    .map((paragraph) => `<p>${paragraph.replace(/\n/g, '<br />')}</p>`)
-    .join('');
-}
-
-function asRecord(value: unknown): Record<string, unknown> {
-  return value && typeof value === 'object'
-    ? (value as Record<string, unknown>)
-    : {};
-}
-
-function buildInitialValues(
-  draft: ExtractedContractDraft,
-  filePayload?: ContractFormState['pdfDocument']
-): Partial<ContractFormState> {
-  const parties = Array.isArray(draft.parties)
-    ? draft.parties
-        .map((party) => {
-          const partyRecord = asRecord(party);
-
-          return {
-            displayName: toTextValue(partyRecord.displayName),
-            partyRole: toTextValue(partyRecord.partyRole || 'client'),
-            partyType: toTextValue(partyRecord.partyType || 'company'),
-            documentNumber: toTextValue(partyRecord.documentNumber),
-            email: toTextValue(partyRecord.email),
-            phone: toTextValue(partyRecord.phone),
-            isPrimary: Boolean(partyRecord.isPrimary),
-          };
-        })
-        .filter((party) => party.displayName)
-    : [];
-
-  const signatures = Array.isArray(draft.signatures)
-    ? draft.signatures
-        .map((signature) => {
-          const signatureRecord = asRecord(signature);
-
-          return {
-            signerName: toTextValue(signatureRecord.signerName),
-            signerRole: toTextValue(signatureRecord.signerRole),
-            signerEmail: toTextValue(signatureRecord.signerEmail),
-            status: toTextValue(signatureRecord.status || 'pending'),
-            signedAt: toTextValue(signatureRecord.signedAt),
-          };
-        })
-        .filter((signature) => signature.signerName)
-    : [];
-
-  const financialTerms = Array.isArray(draft.financialTerms)
-    ? draft.financialTerms
-        .map((term) => {
-          const termRecord = asRecord(term);
-
-          return {
-            label: toTextValue(termRecord.label),
-            termType: toTextValue(termRecord.termType || 'value'),
-            amount: toTextValue(termRecord.amount),
-            recurrence: toTextValue(termRecord.recurrence || 'one_time'),
-            dueDay: toTextValue(termRecord.dueDay),
-            notes: toTextValue(termRecord.notes),
-          };
-        })
-        .filter((term) => term.label)
-    : [];
-
-  const revisions = Array.isArray(draft.revisions)
-    ? draft.revisions
-        .map((revision) => {
-          const revisionRecord = asRecord(revision);
-
-          return {
-            title: toTextValue(revisionRecord.title),
-            revisionType: toTextValue(
-              revisionRecord.revisionType || 'revision'
-            ),
-            effectiveDate: toTextValue(revisionRecord.effectiveDate),
-            status: toTextValue(revisionRecord.status || 'draft'),
-            summary: toTextValue(revisionRecord.summary),
-          };
-        })
-        .filter((revision) => revision.title)
-    : [];
-
-  return {
-    code: toTextValue(draft.code),
-    name: toTextValue(draft.name),
-    clientName: toTextValue(draft.clientName),
-    contractCategory:
-      toTextValue(draft.contractCategory || 'client') || 'client',
-    contractType:
-      toTextValue(draft.contractType || 'service_agreement') ||
-      'service_agreement',
-    signatureStatus:
-      toTextValue(draft.signatureStatus || 'not_started') || 'not_started',
-    isActive: draft.isActive ?? true,
-    billingModel:
-      toTextValue(draft.billingModel || 'time_and_material') ||
-      'time_and_material',
-    originType: toTextValue(draft.originType || 'manual') || 'manual',
-    originId: toTextValue(draft.originId),
-    startDate: toTextValue(draft.startDate),
-    endDate: toTextValue(draft.endDate),
-    signedAt: toTextValue(draft.signedAt),
-    effectiveDate: toTextValue(draft.effectiveDate),
-    budgetAmount: toTextValue(draft.budgetAmount),
-    monthlyHourCap: toTextValue(draft.monthlyHourCap),
-    status: toTextValue(draft.status || 'draft') || 'draft',
-    description: toTextValue(draft.description || draft.summary),
-    contentHtml: ensureHtml(draft.contentHtml),
-    parties,
-    signatures,
-    financialTerms,
-    revisions,
-    pdfDocument: filePayload ?? null,
-  };
-}
-
-export function ContractCreationWizard({
-  onCancel,
-  onComplete,
-}: ContractCreationWizardProps) {
-  const t = useTranslations('operations.ContractsPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, getSettingValue, currentLocaleCode } =
-    useApp();
-  const [mode, setMode] = useState<CreationMode | null>(null);
-  const [selectedTemplateId, setSelectedTemplateId] = useState<string>('none');
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [draft, setDraft] = useState<ExtractedContractDraft | null>(null);
-  const [isExtracting, setIsExtracting] = useState(false);
-  const [isContinuing, setIsContinuing] = useState(false);
-
-  const { data: contractTemplates = [] } = useQuery<
-    OperationsContractTemplate[]
-  >({
-    queryKey: [
-      'operations-contract-create-wizard-templates',
-      currentLocaleCode,
-    ],
-    queryFn: () =>
-      fetchOperations<OperationsContractTemplate[]>(
-        request,
-        '/operations/contract-templates'
-      ),
-  });
-
-  const hasOpenAi = Boolean(getSettingValue('ai-openai-api-key-enabled'));
-  const hasGemini = Boolean(getSettingValue('ai-gemini-api-key-enabled'));
-  const provider = hasOpenAi ? 'openai' : hasGemini ? 'gemini' : null;
-  const providerLabel = provider === 'openai' ? 'OpenAI' : 'Gemini';
-
-  const selectedTemplate = useMemo(
-    () =>
-      contractTemplates.find(
-        (template) => String(template.id) === selectedTemplateId
-      ) ?? null,
-    [contractTemplates, selectedTemplateId]
-  );
-
-  const resetUploadState = () => {
-    setSelectedFile(null);
-    setDraft(null);
-    setIsExtracting(false);
-  };
-
-  const handleModeChange = (nextMode: CreationMode) => {
-    setMode(nextMode);
-    if (nextMode !== 'upload') {
-      resetUploadState();
-    }
-    if (nextMode !== 'template') {
-      setSelectedTemplateId('none');
-    }
-  };
-
-  const handleExtractDraft = async () => {
-    if (!selectedFile) {
-      showToastHandler?.('error', t('wizard.messages.missingFile'));
-      return;
-    }
-
-    if (!provider) {
-      showToastHandler?.('error', t('wizard.messages.missingAiConfiguration'));
-      return;
-    }
-
-    setIsExtracting(true);
-
-    try {
-      const fileContentBase64 = await fileToBase64(selectedFile);
-      const parsedDraft = await mutateOperations<ExtractedContractDraft>(
-        request,
-        '/operations/contracts/extract-draft',
-        'POST',
-        {
-          provider,
-          promptMessage: t('wizard.upload.promptMessage'),
-          fileName: selectedFile.name,
-          mimeType: inferMimeType(selectedFile),
-          fileContentBase64,
-        }
-      );
-
-      setDraft(parsedDraft);
-      showToastHandler?.(
-        'success',
-        t('wizard.messages.extractSuccess', { provider: providerLabel })
-      );
-    } catch {
-      setDraft(null);
-      showToastHandler?.('error', t('wizard.messages.extractError'));
-    } finally {
-      setIsExtracting(false);
-    }
-  };
-
-  const continueWithUpload = async () => {
-    if (!selectedFile) {
-      showToastHandler?.('error', t('wizard.messages.missingFile'));
-      return;
-    }
-
-    setIsContinuing(true);
-
-    try {
-      const fileContentBase64 = await fileToBase64(selectedFile);
-      const initialValues = buildInitialValues(draft ?? {}, {
-        fileName: selectedFile.name,
-        mimeType: inferMimeType(selectedFile),
-        fileContentBase64,
-      });
-
-      onComplete({ initialValues });
-    } finally {
-      setIsContinuing(false);
-    }
-  };
-
-  const renderModeCard = (
-    value: CreationMode,
-    icon: React.ReactNode,
-    titleKey: string,
-    descriptionKey: string
-  ) => {
-    const isSelected = mode === value;
-
-    return (
-      <button
-        key={value}
-        type="button"
-        className={`cursor-pointer rounded-xl border p-3.5 text-left transition-all hover:border-primary/40 hover:bg-accent/20 ${
-          isSelected ? 'border-primary bg-accent/30 ring-1 ring-primary/30' : ''
-        }`}
-        onClick={() => handleModeChange(value)}
-      >
-        <div className="flex items-start gap-3">
-          <div className="mt-0.5 rounded-lg border p-2 text-primary">
-            {icon}
-          </div>
-          <div className="space-y-1">
-            <div className="font-medium">{t(titleKey)}</div>
-            <p className="text-sm text-muted-foreground">{t(descriptionKey)}</p>
-          </div>
-        </div>
-      </button>
-    );
-  };
-
-  return (
-    <div className="mt-3 space-y-3 pb-4">
-      <SectionCard
-        title={t('wizard.title')}
-        description={t('wizard.description')}
-        compact
-        descriptionMode="tooltip"
-      >
-        <div className="grid gap-2.5 xl:grid-cols-3">
-          {renderModeCard(
-            'upload',
-            <Sparkles className="size-5" />,
-            'wizard.options.upload.title',
-            'wizard.options.upload.description'
-          )}
-          {renderModeCard(
-            'template',
-            <LayoutTemplate className="size-5" />,
-            'wizard.options.template.title',
-            'wizard.options.template.description'
-          )}
-          {renderModeCard(
-            'blank',
-            <FileText className="size-5" />,
-            'wizard.options.blank.title',
-            'wizard.options.blank.description'
-          )}
-        </div>
-      </SectionCard>
-
-      {mode === 'upload' ? (
-        <SectionCard
-          title={t('wizard.upload.title')}
-          description={t('wizard.upload.description')}
-          compact
-          descriptionMode="tooltip"
-        >
-          <div className="space-y-3">
-            <label className="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-4 py-6 text-center transition-colors hover:border-primary/40 hover:bg-accent/20">
-              <WandSparkles className="size-6 text-primary" />
-              <div className="space-y-1">
-                <div className="font-medium">
-                  {t('wizard.upload.selectFile')}
-                </div>
-                <p className="text-sm text-muted-foreground">
-                  {t('wizard.upload.supportedFiles')}
-                </p>
-              </div>
-              <input
-                type="file"
-                className="hidden"
-                accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                onChange={(event) => {
-                  const file = event.target.files?.[0] ?? null;
-                  setSelectedFile(file);
-                  setDraft(null);
-                }}
-              />
-            </label>
-
-            {selectedFile ? (
-              <div className="rounded-lg border px-3 py-3 text-sm">
-                <div className="font-medium">{selectedFile.name}</div>
-                <div className="text-muted-foreground">
-                  {Math.max(selectedFile.size / 1024, 1).toFixed(0)} KB
-                </div>
-              </div>
-            ) : null}
-
-            <div className="rounded-lg border border-dashed px-3 py-3 text-sm text-muted-foreground">
-              {provider
-                ? t('wizard.upload.aiReady', { provider: providerLabel })
-                : t('wizard.upload.aiUnavailable')}
-            </div>
-
-            {draft ? (
-              <div className="space-y-3 rounded-xl border bg-muted/20 p-4">
-                <div>
-                  <div className="font-medium">{t('wizard.review.title')}</div>
-                  <p className="text-sm text-muted-foreground">
-                    {t('wizard.review.description')}
-                  </p>
-                </div>
-
-                {draft.summary ? (
-                  <div className="rounded-lg border bg-background px-3 py-3 text-sm">
-                    {draft.summary}
-                  </div>
-                ) : null}
-
-                {toTextArray(draft.missingFields).length ? (
-                  <div className="space-y-1">
-                    <div className="text-sm font-medium">
-                      {t('wizard.review.missingFields')}
-                    </div>
-                    <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
-                      {toTextArray(draft.missingFields).map((item) => (
-                        <li key={item}>{item}</li>
-                      ))}
-                    </ul>
-                  </div>
-                ) : null}
-
-                {toTextArray(draft.warnings).length ? (
-                  <div className="space-y-1">
-                    <div className="text-sm font-medium">
-                      {t('wizard.review.warnings')}
-                    </div>
-                    <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
-                      {toTextArray(draft.warnings).map((item) => (
-                        <li key={item}>{item}</li>
-                      ))}
-                    </ul>
-                  </div>
-                ) : null}
-              </div>
-            ) : null}
-
-            <div className="flex flex-wrap justify-between gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                className="cursor-pointer"
-                onClick={() => handleModeChange('blank')}
-              >
-                {t('wizard.actions.skipToBlank')}
-              </Button>
-
-              <div className="flex flex-wrap gap-2">
-                {provider && selectedFile && !draft ? (
-                  <Button
-                    type="button"
-                    className="cursor-pointer"
-                    disabled={isExtracting}
-                    onClick={() => void handleExtractDraft()}
-                  >
-                    {isExtracting ? (
-                      <LoaderCircle className="size-4 animate-spin" />
-                    ) : (
-                      <Sparkles className="size-4" />
-                    )}
-                    {t('wizard.actions.extractWithAi')}
-                  </Button>
-                ) : null}
-
-                {selectedFile ? (
-                  <Button
-                    type="button"
-                    className="cursor-pointer"
-                    disabled={isContinuing || isExtracting}
-                    onClick={() => void continueWithUpload()}
-                  >
-                    {isContinuing ? (
-                      <LoaderCircle className="size-4 animate-spin" />
-                    ) : null}
-                    {draft
-                      ? t('wizard.actions.reviewInForm')
-                      : t('wizard.actions.continueManual')}
-                  </Button>
-                ) : null}
-              </div>
-            </div>
-          </div>
-        </SectionCard>
-      ) : null}
-
-      {mode === 'template' ? (
-        <SectionCard
-          title={t('wizard.template.title')}
-          description={t('wizard.template.description')}
-          compact
-          descriptionMode="tooltip"
-        >
-          <div className="space-y-4">
-            <Select
-              value={selectedTemplateId}
-              onValueChange={setSelectedTemplateId}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder={t('wizard.template.placeholder')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="none">
-                  {t('wizard.template.placeholder')}
-                </SelectItem>
-                {contractTemplates.map((template) => (
-                  <SelectItem key={template.id} value={String(template.id)}>
-                    {template.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-
-            {selectedTemplate ? (
-              <div className="rounded-xl border p-4">
-                <div className="font-medium">{selectedTemplate.name}</div>
-                <p className="mt-1 text-sm text-muted-foreground">
-                  {selectedTemplate.description ||
-                    t('wizard.template.noDescription')}
-                </p>
-                <div className="mt-2 text-xs text-muted-foreground">
-                  {[selectedTemplate.code, selectedTemplate.contractType]
-                    .filter(Boolean)
-                    .join(' • ')}
-                </div>
-              </div>
-            ) : null}
-
-            <div className="flex justify-end gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                className="cursor-pointer"
-                onClick={onCancel}
-              >
-                {commonT('actions.cancel')}
-              </Button>
-              <Button
-                type="button"
-                className="cursor-pointer"
-                disabled={selectedTemplateId === 'none'}
-                onClick={() =>
-                  onComplete({ initialTemplateId: Number(selectedTemplateId) })
-                }
-              >
-                {t('wizard.actions.useTemplate')}
-              </Button>
-            </div>
-          </div>
-        </SectionCard>
-      ) : null}
-
-      {mode === 'blank' ? (
-        <SectionCard
-          title={t('wizard.blank.title')}
-          description={t('wizard.blank.description')}
-          compact
-          descriptionMode="tooltip"
-        >
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <p className="text-sm text-muted-foreground">
-              {t('wizard.blank.helper')}
-            </p>
-            <Button
-              type="button"
-              className="cursor-pointer"
-              onClick={() =>
-                onComplete({ initialValues: { originType: 'manual' } })
-              }
-            >
-              {t('wizard.actions.startBlank')}
-            </Button>
-          </div>
-        </SectionCard>
-      ) : null}
-
-      {!mode ? (
-        <div className="flex justify-end gap-2">
-          <Button
-            type="button"
-            variant="outline"
-            className="cursor-pointer"
-            onClick={onCancel}
-          >
-            {commonT('actions.cancel')}
-          </Button>
-        </div>
-      ) : null}
-    </div>
-  );
-}