@hed-hog/operations 0.0.299 → 0.0.301

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

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