@hed-hog/operations 0.0.306 → 0.0.310

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

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