@hed-hog/operations 0.0.300 → 0.0.302

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

@@ -0,0 +1,526 @@
+'use client';
+
+import { EmptyState, Page } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { FormActions } from '@/components/ui/form-actions';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { ArrowLeft, Files, Save } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import type { OperationsContractTemplate } from '../_lib/types';
+import { formatEnumLabel } from '../_lib/utils/format';
+import { trimToNull } from '../_lib/utils/forms';
+import { ContractContentEditor } from './contract-content-editor';
+import { OperationsHeader } from './operations-header';
+
+type ContractTemplateFormState = {
+  code: string;
+  name: string;
+  description: string;
+  contractCategory: string;
+  contractType: string;
+  billingModel: string;
+  signatureStatus: string;
+  isActive: boolean;
+  status: string;
+  contentHtml: string;
+};
+
+function buildEmptyForm(): ContractTemplateFormState {
+  return {
+    code: '',
+    name: '',
+    description: '',
+    contractCategory: 'client',
+    contractType: 'service_agreement',
+    billingModel: 'time_and_material',
+    signatureStatus: 'not_started',
+    isActive: true,
+    status: 'active',
+    contentHtml: '',
+  };
+}
+
+function toFormState(
+  template: OperationsContractTemplate
+): ContractTemplateFormState {
+  return {
+    code: template.code ?? '',
+    name: template.name ?? '',
+    description: template.description ?? '',
+    contractCategory: template.contractCategory ?? 'client',
+    contractType: template.contractType ?? 'service_agreement',
+    billingModel: template.billingModel ?? 'time_and_material',
+    signatureStatus: template.signatureStatus ?? 'not_started',
+    isActive: template.isActive ?? true,
+    status: template.status ?? 'active',
+    contentHtml: template.contentHtml ?? '',
+  };
+}
+
+type ContractTemplateFormScreenProps = {
+  templateId?: number;
+  onSaved?: (template: OperationsContractTemplate) => void | Promise<void>;
+  onCancel?: () => void;
+};
+
+export function ContractTemplateFormScreen({
+  templateId,
+  onSaved,
+  onCancel,
+}: ContractTemplateFormScreenProps) {
+  const t = useTranslations('operations.ContractTemplateFormPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const [form, setForm] = useState<ContractTemplateFormState>(buildEmptyForm());
+  const isSheetMode = Boolean(onCancel);
+  const [sheetStep, setSheetStep] = useState(0);
+  const nextLabel = currentLocaleCode?.toLowerCase().startsWith('pt')
+    ? 'Proximo'
+    : 'Next';
+
+  const { data: template, isLoading } = useQuery<OperationsContractTemplate>({
+    queryKey: [
+      'operations-contract-template-form',
+      currentLocaleCode,
+      templateId,
+    ],
+    enabled: Boolean(templateId) && access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsContractTemplate>(
+        request,
+        `/operations/contract-templates/${templateId}`
+      ),
+  });
+
+  useEffect(() => {
+    if (template) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setForm(toFormState(template));
+      return;
+    }
+
+    if (!templateId) {
+      setForm(buildEmptyForm());
+    }
+  }, [template, templateId]);
+
+  useEffect(() => {
+    if (!isSheetMode) return;
+    setSheetStep(0);
+  }, [isSheetMode, templateId]);
+
+  const validateOverviewStep = () => {
+    if (!form.name.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return false;
+    }
+
+    return true;
+  };
+
+  const onSubmit = async () => {
+    if (!form.name.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    const normalizedStatus = form.isActive
+      ? form.status === 'inactive' || form.status === 'archived'
+        ? 'active'
+        : form.status
+      : form.status === 'archived'
+        ? 'archived'
+        : 'inactive';
+
+    const payload = {
+      code: trimToNull(form.code)?.toUpperCase() ?? null,
+      name: form.name.trim(),
+      description: trimToNull(form.description),
+      contractCategory: form.contractCategory,
+      contractType: form.contractType,
+      billingModel: form.billingModel,
+      signatureStatus: form.signatureStatus,
+      isActive: form.isActive,
+      status: normalizedStatus,
+      contentHtml: trimToNull(form.contentHtml),
+    };
+
+    try {
+      const response = templateId
+        ? await mutateOperations<OperationsContractTemplate>(
+            request,
+            `/operations/contract-templates/${templateId}`,
+            'PATCH',
+            payload
+          )
+        : await mutateOperations<OperationsContractTemplate>(
+            request,
+            '/operations/contract-templates',
+            'POST',
+            payload
+          );
+
+      showToastHandler?.(
+        'success',
+        templateId ? t('messages.updateSuccess') : t('messages.createSuccess')
+      );
+
+      if (onSaved) {
+        await onSaved(response);
+        return;
+      }
+
+      router.push('/operations/contracts/templates');
+    } catch {
+      showToastHandler?.(
+        'error',
+        templateId ? t('messages.updateError') : t('messages.createError')
+      );
+    }
+  };
+
+  const noAccessState = (
+    <EmptyState
+      icon={<Files 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(templateId ? 'editTitle' : 'newTitle')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        {noAccessState}
+      </Page>
+    );
+  }
+
+  const overviewSection = (
+    <section className="space-y-6">
+      <div className="space-y-1">
+        <h2 className="text-xl font-semibold">{t('sections.overview')}</h2>
+        <p className="text-sm text-muted-foreground">
+          {t('sections.overviewDescription')}
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-12">
+        <div className="space-y-2 md:col-span-3">
+          <Label htmlFor="contract-template-code">{t('fields.code')}</Label>
+          <Input
+            id="contract-template-code"
+            value={form.code}
+            placeholder={t('placeholders.code')}
+            onChange={(event) =>
+              setForm((current) => ({ ...current, code: event.target.value }))
+            }
+          />
+        </div>
+        <div className="space-y-2 md:col-span-6">
+          <Label htmlFor="contract-template-name">{t('fields.name')}</Label>
+          <Input
+            id="contract-template-name"
+            value={form.name}
+            placeholder={t('placeholders.name')}
+            onChange={(event) =>
+              setForm((current) => ({ ...current, name: event.target.value }))
+            }
+          />
+        </div>
+        <div className="space-y-2 md:col-span-3">
+          <Label>{commonT('labels.status')}</Label>
+          <Select
+            value={form.status}
+            onValueChange={(value) =>
+              setForm((current) => ({ ...current, status: value }))
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {['active', 'draft', 'inactive', 'archived'].map((value) => (
+                <SelectItem key={value} value={value}>
+                  {formatEnumLabel(value)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2 md:col-span-3">
+          <Label>{t('fields.contractCategory')}</Label>
+          <Select
+            value={form.contractCategory}
+            onValueChange={(value) =>
+              setForm((current) => ({ ...current, contractCategory: value }))
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {[
+                'employee',
+                'contractor',
+                'client',
+                'supplier',
+                'vendor',
+                'partner',
+                'internal',
+                'other',
+              ].map((value) => (
+                <SelectItem key={value} value={value}>
+                  {formatEnumLabel(value)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2 md:col-span-3">
+          <Label>{t('fields.contractType')}</Label>
+          <Select
+            value={form.contractType}
+            onValueChange={(value) =>
+              setForm((current) => ({ ...current, contractType: value }))
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {[
+                'clt',
+                'pj',
+                'freelancer_agreement',
+                'service_agreement',
+                'fixed_term',
+                'recurring_service',
+                'nda',
+                'amendment',
+                'addendum',
+                'other',
+              ].map((value) => (
+                <SelectItem key={value} value={value}>
+                  {formatEnumLabel(value)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2 md:col-span-3">
+          <Label>{commonT('labels.billingModel')}</Label>
+          <Select
+            value={form.billingModel}
+            onValueChange={(value) =>
+              setForm((current) => ({ ...current, billingModel: value }))
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {['time_and_material', 'monthly_retainer', 'fixed_price'].map(
+                (value) => (
+                  <SelectItem key={value} value={value}>
+                    {formatEnumLabel(value)}
+                  </SelectItem>
+                )
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2 md:col-span-3">
+          <Label>{t('fields.signatureStatus')}</Label>
+          <Select
+            value={form.signatureStatus}
+            onValueChange={(value) =>
+              setForm((current) => ({ ...current, signatureStatus: value }))
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {[
+                'not_started',
+                'pending',
+                'partially_signed',
+                'signed',
+                'expired',
+              ].map((value) => (
+                <SelectItem key={value} value={value}>
+                  {formatEnumLabel(value)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2 md:col-span-12">
+          <Label htmlFor="contract-template-description">
+            {t('fields.description')}
+          </Label>
+          <Textarea
+            id="contract-template-description"
+            rows={3}
+            value={form.description}
+            placeholder={t('placeholders.description')}
+            onChange={(event) =>
+              setForm((current) => ({
+                ...current,
+                description: event.target.value,
+              }))
+            }
+          />
+        </div>
+
+        <div className="flex items-center justify-between rounded-lg border px-4 py-4 md:col-span-12">
+          <div className="space-y-1">
+            <div className="text-sm font-medium">{t('fields.isActive')}</div>
+            <div className="text-xs text-muted-foreground">
+              {t('fields.isActiveDescription')}
+            </div>
+          </div>
+          <Switch
+            checked={form.isActive}
+            onCheckedChange={(checked) =>
+              setForm((current) => ({ ...current, isActive: checked }))
+            }
+          />
+        </div>
+      </div>
+    </section>
+  );
+
+  const contentSection = (
+    <section className="space-y-6">
+      <ContractContentEditor
+        value={form.contentHtml}
+        onChange={(value) =>
+          setForm((current) => ({ ...current, contentHtml: value }))
+        }
+        editorTitle={t('sections.editor')}
+        editorDescription={t('sections.editorDescription')}
+        previewTitle={t('sections.preview')}
+        previewDescription={t('sections.previewDescription')}
+        promptContext={{
+          name: form.name,
+          code: form.code,
+          description: form.description,
+          contract_type: form.contractType,
+          billing_model: form.billingModel,
+        }}
+        showPreview={false}
+        chrome="plain"
+      />
+    </section>
+  );
+
+  const formBody = isSheetMode ? (
+    <div className="space-y-6">
+      {sheetStep === 0 ? overviewSection : contentSection}
+      {templateId && isLoading ? (
+        <div className="text-sm text-muted-foreground">{t('loading')}</div>
+      ) : null}
+    </div>
+  ) : (
+    <div className="space-y-8">
+      {overviewSection}
+      {contentSection}
+      {templateId && isLoading ? (
+        <div className="text-sm text-muted-foreground">{t('loading')}</div>
+      ) : null}
+    </div>
+  );
+
+  if (isSheetMode) {
+    return (
+      <div className="mt-4 space-y-6 pb-6">
+        {formBody}
+
+        <FormActions
+          sheet
+          cancelLabel={
+            sheetStep === 0 ? commonT('actions.cancel') : commonT('actions.back')
+          }
+          onCancel={
+            sheetStep === 0 ? onCancel : () => setSheetStep((current) => current - 1)
+          }
+          onSubmit={() => {
+            if (sheetStep === 0) {
+              if (!validateOverviewStep()) return;
+              setSheetStep(1);
+              return;
+            }
+
+            void onSubmit();
+          }}
+          submitIcon={sheetStep === 0 ? undefined : <Save className="size-4" />}
+          submitLabel={sheetStep === 0 ? nextLabel : commonT('actions.save')}
+          submitSize="lg"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t(templateId ? 'editTitle' : 'newTitle')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <Button variant="outline" size="sm" asChild>
+            <Link href="/operations/contracts/templates">
+              <ArrowLeft className="size-4" />
+              {commonT('actions.back')}
+            </Link>
+          </Button>
+        }
+      />
+
+      {formBody}
+
+      <div className="pt-2">
+        <FormActions
+          cancelLabel={commonT('actions.back')}
+          onCancel={() => router.push('/operations/contracts/templates')}
+          onSubmit={() => void onSubmit()}
+          submitIcon={<Save className="size-4" />}
+          submitLabel={commonT('actions.save')}
+          submitSize="lg"
+        />
+      </div>
+    </Page>
+  );
+}