@hed-hog/operations 0.0.304 → 0.0.306

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { EmptyState, Page } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import { FormActions } from '@/components/ui/form-actions';
+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 {
@@ -21,12 +21,12 @@ 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';
+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;
@@ -86,15 +86,15 @@ export function ContractTemplateFormScreen({
 }: 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 { 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: [
@@ -110,31 +110,31 @@ export function ContractTemplateFormScreen({
       ),
   });
 
-  useEffect(() => {
-    if (template) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setForm(toFormState(template));
-      return;
+  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;
-  };
+      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()) {
@@ -224,272 +224,272 @@ export function ContractTemplateFormScreen({
     );
   }
 
-  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>
+  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>
     );
   }