@hed-hog/operations 0.0.300 → 0.0.302

package/hedhog/frontend/app/contracts/templates/page.tsx.ejs

@@ -0,0 +1,384 @@
+'use client';
+
+import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { FileStack, Pencil, Sparkles } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { ContractTemplateFormScreen } from '../../_components/contract-template-form-screen';
+import { OperationsHeader } from '../../_components/operations-header';
+import { StatusBadge } from '../../_components/status-badge';
+import { fetchOperations, mutateOperations } from '../../_lib/api';
+import { useOperationsAccess } from '../../_lib/hooks/use-operations-access';
+import type { OperationsContractTemplate } from '../../_lib/types';
+import {
+  formatDate,
+  formatEnumLabel,
+  getStatusBadgeClass,
+} from '../../_lib/utils/format';
+
+export default function OperationsContractTemplatesPage() {
+  const t = useTranslations('operations.ContractTemplatesPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [typeFilter, setTypeFilter] = useState('all');
+  const [editingTemplate, setEditingTemplate] =
+    useState<OperationsContractTemplate | null>(null);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+
+  const {
+    data: templates = [],
+    isLoading,
+    refetch,
+  } = useQuery<OperationsContractTemplate[]>({
+    queryKey: ['operations-contract-templates-list', currentLocaleCode],
+    enabled: access.isDirector,
+    queryFn: () =>
+      fetchOperations<OperationsContractTemplate[]>(
+        request,
+        '/operations/contract-templates'
+      ),
+  });
+
+  const filteredTemplates = useMemo(
+    () =>
+      templates.filter((template) => {
+        const matchesSearch = !search.trim()
+          ? true
+          : [
+              template.name,
+              template.code,
+              template.description,
+              template.contractType,
+            ]
+              .filter(Boolean)
+              .some((value) =>
+                String(value)
+                  .toLowerCase()
+                  .includes(search.trim().toLowerCase())
+              );
+
+        const matchesStatus =
+          statusFilter === 'all' ? true : template.status === statusFilter;
+        const matchesType =
+          typeFilter === 'all' ? true : template.contractType === typeFilter;
+
+        return matchesSearch && matchesStatus && matchesType;
+      }),
+    [search, statusFilter, templates, typeFilter]
+  );
+
+  const statsCards = useMemo(
+    () => [
+      {
+        key: 'total',
+        title: t('cards.total'),
+        value: templates.length,
+        icon: FileStack,
+      },
+      {
+        key: 'active',
+        title: t('cards.active'),
+        value: templates.filter((item) => item.status === 'active').length,
+        icon: Sparkles,
+      },
+      {
+        key: 'draft',
+        title: t('cards.draft'),
+        value: templates.filter((item) => item.status === 'draft').length,
+        icon: FileStack,
+      },
+      {
+        key: 'archived',
+        title: t('cards.archived'),
+        value: templates.filter((item) => item.status === 'archived').length,
+        icon: FileStack,
+      },
+    ],
+    [t, templates]
+  );
+
+  const openCreateSheet = () => {
+    setEditingTemplate(null);
+    setIsSheetOpen(true);
+  };
+
+  const openEditSheet = (template: OperationsContractTemplate) => {
+    setEditingTemplate(template);
+    setIsSheetOpen(true);
+  };
+
+  const toggleTemplateStatus = async (template: OperationsContractTemplate) => {
+    const nextStatus =
+      template.status === 'active'
+        ? 'inactive'
+        : template.status === 'archived'
+          ? 'active'
+          : 'active';
+
+    try {
+      await mutateOperations(
+        request,
+        `/operations/contract-templates/${template.id}`,
+        'PATCH',
+        {
+          status: nextStatus,
+          isActive: nextStatus === 'active',
+        }
+      );
+      showToastHandler?.('success', t('messages.statusSuccess'));
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.statusError'));
+    }
+  };
+
+  if (!access.isLoading && !access.isDirector) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+          actions={
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/operations/contracts">
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+          }
+        />
+
+        <EmptyState
+          icon={<FileStack className="size-12" />}
+          title={commonT('states.noAccessTitle')}
+          description={t('noAccessDescription')}
+          actionLabel={commonT('actions.back')}
+          onAction={() => {
+            window.location.href = '/operations/contracts';
+          }}
+        />
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/operations/contracts">
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+            <Button
+              size="sm"
+              className="cursor-pointer"
+              onClick={openCreateSheet}
+            >
+              {commonT('actions.create')}
+            </Button>
+          </div>
+        }
+      />
+
+      <KpiCardsGrid items={statsCards} columns={4} />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={setSearch}
+        onSearch={() => undefined}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'type',
+            type: 'select',
+            value: typeFilter,
+            onChange: setTypeFilter,
+            placeholder: t('filters.type'),
+            options: [
+              { value: 'all', label: commonT('filters.allTypes') },
+              ...[
+                'clt',
+                'pj',
+                'freelancer_agreement',
+                'service_agreement',
+                'fixed_term',
+                'recurring_service',
+                'nda',
+                'amendment',
+                'addendum',
+                'other',
+              ].map((value) => ({ value, label: formatEnumLabel(value) })),
+            ],
+          },
+          {
+            id: 'status',
+            type: 'select',
+            value: statusFilter,
+            onChange: setStatusFilter,
+            placeholder: commonT('labels.status'),
+            options: [
+              { value: 'all', label: commonT('filters.allStatuses') },
+              ...['active', 'draft', 'inactive', 'archived'].map((value) => ({
+                value,
+                label: formatEnumLabel(value),
+              })),
+            ],
+          },
+        ]}
+      />
+
+      {isLoading ? (
+        <Card className="py-0">
+          <CardContent className="p-6 text-sm text-muted-foreground">
+            {commonT('actions.refresh')}...
+          </CardContent>
+        </Card>
+      ) : filteredTemplates.length ? (
+        <Card className="py-0">
+          <CardContent className="p-0">
+            <div className="overflow-x-auto rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('columns.name')}</TableHead>
+                    <TableHead>{t('columns.code')}</TableHead>
+                    <TableHead>{t('columns.type')}</TableHead>
+                    <TableHead>{t('columns.usageCount')}</TableHead>
+                    <TableHead>{commonT('labels.billingModel')}</TableHead>
+                    <TableHead>{t('columns.updatedAt')}</TableHead>
+                    <TableHead>{commonT('labels.status')}</TableHead>
+                    <TableHead className="text-right">
+                      {commonT('labels.actions')}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredTemplates.map((template) => (
+                    <TableRow key={template.id}>
+                      <TableCell>
+                        <div className="space-y-1">
+                          <div className="font-medium">{template.name}</div>
+                          <div className="max-w-md text-xs text-muted-foreground">
+                            {template.description ||
+                              commonT('labels.notAvailable')}
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell>{template.code || '—'}</TableCell>
+                      <TableCell>
+                        {formatEnumLabel(template.contractType)}
+                      </TableCell>
+                      <TableCell>{template.usageCount ?? 0}</TableCell>
+                      <TableCell>
+                        {formatEnumLabel(template.billingModel)}
+                      </TableCell>
+                      <TableCell>{formatDate(template.updatedAt)}</TableCell>
+                      <TableCell>
+                        <StatusBadge
+                          label={formatEnumLabel(template.status)}
+                          className={getStatusBadgeClass(template.status)}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="cursor-pointer"
+                            asChild
+                          >
+                            <Link href={`/operations/contracts?template=${template.id}`}>
+                              {commonT('actions.useTemplate')}
+                            </Link>
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="icon"
+                            className="cursor-pointer"
+                            onClick={() => openEditSheet(template)}
+                          >
+                            <Pencil className="size-4" />
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="cursor-pointer"
+                            onClick={() => void toggleTemplateStatus(template)}
+                          >
+                            {template.status === 'active'
+                              ? commonT('actions.deactivate')
+                              : commonT('actions.activate')}
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <EmptyState
+          icon={<FileStack className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={commonT('actions.create')}
+          onAction={openCreateSheet}
+        />
+      )}
+
+      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-6xl">
+          <SheetHeader>
+            <SheetTitle>
+              {editingTemplate ? t('sheet.editTitle') : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <ContractTemplateFormScreen
+            templateId={editingTemplate?.id}
+            onCancel={() => setIsSheetOpen(false)}
+            onSaved={async () => {
+              setIsSheetOpen(false);
+              setEditingTemplate(null);
+              await refetch();
+            }}
+          />
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}