@hed-hog/operations 0.0.305 → 0.0.309

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

@@ -1,380 +0,0 @@
-'use client';
-
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-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 ? (
-        <div className="rounded-md border px-4 py-6 text-sm text-muted-foreground">
-          {commonT('actions.refresh')}...
-        </div>
-      ) : filteredTemplates.length ? (
-        <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>
-      ) : (
-        <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>
-
-          <div className="px-4">
-            <ContractTemplateFormScreen
-              templateId={editingTemplate?.id}
-              onCancel={() => setIsSheetOpen(false)}
-              onSaved={async () => {
-                setIsSheetOpen(false);
-                setEditingTemplate(null);
-                await refetch();
-              }}
-            />
-          </div>
-        </SheetContent>
-      </Sheet>
-    </Page>
-  );
-}