@hed-hog/operations 0.0.300 → 0.0.302

package/hedhog/frontend/app/projects/page.tsx.ejs

@@ -2,6 +2,15 @@
 
 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,
@@ -11,11 +20,21 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Eye, FileText, FolderKanban, Pencil } from 'lucide-react';
+import {
+  CalendarDays,
+  Eye,
+  FileText,
+  FolderKanban,
+  Pencil,
+  PlayCircle,
+  ShieldAlert,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useMemo, useState } from 'react';
-import { useTranslations } from 'next-intl';
 import { OperationsHeader } from '../_components/operations-header';
+import { ProjectFormScreen } from '../_components/project-form-screen';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
@@ -26,17 +45,62 @@ import {
   getStatusBadgeClass,
 } from '../_lib/utils/format';
 
+function parseEditProjectId(value: string | null) {
+  const parsed = Number(value);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}
+
 export default function OperationsProjectsPage() {
   const t = useTranslations('operations.ProjectsPage');
   const commonT = useTranslations('operations.Common');
   const { request, showToastHandler, currentLocaleCode } = useApp();
   const access = useOperationsAccess();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
 
+  const createParam = searchParams.get('create');
+  const editProjectId = parseEditProjectId(searchParams.get('edit'));
+  const isSheetOpen = createParam === '1' || editProjectId !== null;
+
+  const updateSheetQuery = (next: { create?: boolean; editId?: number | null }) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    params.delete('create');
+    params.delete('edit');
+
+    if (next.create) {
+      params.set('create', '1');
+    }
+
+    if (next.editId) {
+      params.set('edit', String(next.editId));
+    }
+
+    const query = params.toString();
+    router.replace(query ? `${pathname}?${query}` : pathname, {
+      scroll: false,
+    });
+  };
+
+  const closeSheet = () => {
+    updateSheetQuery({});
+  };
+
+  const openCreateSheet = () => {
+    updateSheetQuery({ create: true });
+  };
+
+  const openEditSheet = (projectId: number) => {
+    updateSheetQuery({ editId: projectId });
+  };
+
   const { data: projects = [], refetch } = useQuery<OperationsProject[]>({
     queryKey: ['operations-projects-list', currentLocaleCode],
-    queryFn: () => fetchOperations<OperationsProject[]>(request, '/operations/projects'),
+    queryFn: () =>
+      fetchOperations<OperationsProject[]>(request, '/operations/projects'),
   });
 
   const filteredRows = useMemo(
@@ -64,13 +128,48 @@ export default function OperationsProjectsPage() {
     [projects, search, statusFilter]
   );
 
+  const statsCards = useMemo(
+    () => [
+      {
+        key: 'total',
+        title: t('cards.total'),
+        value: projects.length,
+        icon: FolderKanban,
+      },
+      {
+        key: 'active',
+        title: t('cards.active'),
+        value: projects.filter((item) => item.status === 'active').length,
+        icon: PlayCircle,
+      },
+      {
+        key: 'atRisk',
+        title: t('cards.atRisk'),
+        value: projects.filter((item) => item.status === 'at_risk').length,
+        icon: ShieldAlert,
+      },
+      {
+        key: 'upcomingDeliveries',
+        title: t('cards.upcomingDeliveries'),
+        value: projects.filter((item) => Boolean(item.endDate)).length,
+        icon: CalendarDays,
+      },
+    ],
+    [projects, t]
+  );
+
   const toggleArchived = async (project: OperationsProject) => {
     const nextStatus = project.status === 'archived' ? 'active' : 'archived';
 
     try {
-      await mutateOperations(request, `/operations/projects/${project.id}`, 'PATCH', {
-        status: nextStatus,
-      });
+      await mutateOperations(
+        request,
+        `/operations/projects/${project.id}`,
+        'PATCH',
+        {
+          status: nextStatus,
+        }
+      );
       showToastHandler?.('success', t('messages.statusSuccess'));
       await refetch();
     } catch {
@@ -86,15 +185,15 @@ export default function OperationsProjectsPage() {
         current={t('breadcrumb')}
         actions={
           access.isDirector ? (
-            <Button size="sm" asChild>
-              <Link href="/operations/projects/new">
-                {commonT('actions.create')}
-              </Link>
+            <Button size="sm" onClick={openCreateSheet}>
+              {commonT('actions.create')}
             </Button>
           ) : undefined
         }
       />
 
+      <KpiCardsGrid items={statsCards} columns={4} />
+
       <SearchBar
         searchQuery={search}
         onSearchChange={setSearch}
@@ -121,116 +220,179 @@ export default function OperationsProjectsPage() {
       />
 
       {filteredRows.length > 0 ? (
-        <div className="overflow-x-auto rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{commonT('labels.project')}</TableHead>
-                <TableHead>{commonT('labels.client')}</TableHead>
-                <TableHead>{commonT('labels.status')}</TableHead>
-                <TableHead>{commonT('labels.manager')}</TableHead>
-                <TableHead>{commonT('labels.teamSize')}</TableHead>
-                <TableHead>{commonT('labels.startDate')}</TableHead>
-                <TableHead>{commonT('labels.endDate')}</TableHead>
-                <TableHead>{commonT('labels.contractStatus')}</TableHead>
-                <TableHead className="w-[260px] text-right">
-                  {commonT('labels.actions')}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filteredRows.map((project) => (
-                <TableRow key={project.id}>
-                  <TableCell>
-                    <div className="font-medium">{project.name}</div>
-                    <div className="text-xs text-muted-foreground">
-                      {[project.code, project.myRoleLabel].filter(Boolean).join(' • ')}
-                    </div>
-                  </TableCell>
-                  <TableCell>{project.clientName || commonT('labels.notAvailable')}</TableCell>
-                  <TableCell>
-                    <StatusBadge
-                      label={formatEnumLabel(project.status)}
-                      className={getStatusBadgeClass(project.status)}
-                    />
-                  </TableCell>
-                  <TableCell>{project.managerName || commonT('labels.notAssigned')}</TableCell>
-                  <TableCell>{project.teamSize ?? 0}</TableCell>
-                  <TableCell>{formatDate(project.startDate)}</TableCell>
-                  <TableCell>{formatDate(project.endDate)}</TableCell>
-                  <TableCell>
-                    {project.contractStatus ? (
+        <Card className="overflow-hidden border-border/60 py-0 shadow-sm">
+          <CardContent className="p-0">
+            <Table className="table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[30%]">
+                    {commonT('labels.project')}
+                  </TableHead>
+                  <TableHead>{commonT('labels.client')}</TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead className="hidden lg:table-cell">
+                    {commonT('labels.manager')}
+                  </TableHead>
+                  <TableHead className="hidden md:table-cell">
+                    {commonT('labels.teamSize')}
+                  </TableHead>
+                  <TableHead className="hidden xl:table-cell">
+                    {commonT('labels.startDate')}
+                  </TableHead>
+                  <TableHead className="hidden xl:table-cell">
+                    {commonT('labels.endDate')}
+                  </TableHead>
+                  <TableHead className="hidden 2xl:table-cell">
+                    {commonT('labels.contractStatus')}
+                  </TableHead>
+                  <TableHead className="w-30 text-right sm:w-42.5">
+                    {commonT('labels.actions')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredRows.map((project) => (
+                  <TableRow key={project.id} className="hover:bg-muted/30">
+                    <TableCell>
+                      <div className="min-w-0">
+                        <div className="truncate font-medium">{project.name}</div>
+                        <div className="truncate text-xs text-muted-foreground">
+                          {[project.code, project.myRoleLabel, project.contractName]
+                            .filter(Boolean)
+                            .join(' • ') || commonT('labels.notAvailable')}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="truncate">
+                        {project.clientName || commonT('labels.notAvailable')}
+                      </div>
+                    </TableCell>
+                    <TableCell>
                       <StatusBadge
-                        label={formatEnumLabel(project.contractStatus)}
-                        className={getStatusBadgeClass(project.contractStatus)}
+                        label={formatEnumLabel(project.status)}
+                        className={getStatusBadgeClass(project.status)}
                       />
-                    ) : (
-                      commonT('labels.notAssigned')
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex justify-end gap-2">
-                      <Button variant="outline" size="icon" asChild>
-                        <Link href={`/operations/projects/${project.id}`}>
-                          <Eye className="size-4" />
-                        </Link>
-                      </Button>
-                      {access.isDirector ? (
+                    </TableCell>
+                    <TableCell className="hidden lg:table-cell">
+                      <div className="truncate">
+                        {project.managerName || commonT('labels.notAssigned')}
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell">
+                      {project.teamSize ?? 0}
+                    </TableCell>
+                    <TableCell className="hidden xl:table-cell">
+                      {formatDate(project.startDate)}
+                    </TableCell>
+                    <TableCell className="hidden xl:table-cell">
+                      {formatDate(project.endDate)}
+                    </TableCell>
+                    <TableCell className="hidden 2xl:table-cell">
+                      {project.contractStatus ? (
+                        <StatusBadge
+                          label={formatEnumLabel(project.contractStatus)}
+                          className={getStatusBadgeClass(project.contractStatus)}
+                        />
+                      ) : (
+                        commonT('labels.notAssigned')
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap justify-end gap-1.5 sm:gap-2">
                         <Button variant="outline" size="icon" asChild>
-                          <Link href={`/operations/projects/${project.id}/edit`}>
-                            <Pencil className="size-4" />
+                          <Link href={`/operations/projects/${project.id}`}>
+                            <Eye className="size-4" />
                           </Link>
                         </Button>
-                      ) : null}
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        asChild={Boolean(project.contractId)}
-                        disabled={!project.contractId}
-                      >
-                        {project.contractId ? (
-                          <Link href={`/operations/contracts?edit=${project.contractId}`}>
-                            <FileText className="size-4" />
-                          </Link>
-                        ) : (
-                          <span>
-                            <FileText className="size-4" />
-                          </span>
-                        )}
-                      </Button>
-                      {access.isDirector ? (
+                        {access.isDirector ? (
+                          <Button
+                            variant="outline"
+                            size="icon"
+                            className="cursor-pointer"
+                            onClick={() => openEditSheet(project.id)}
+                          >
+                            <Pencil className="size-4" />
+                          </Button>
+                        ) : null}
                         <Button
                           variant="outline"
-                          size="sm"
-                          onClick={() => void toggleArchived(project)}
+                          size="icon"
+                          asChild={Boolean(project.contractId)}
+                          disabled={!project.contractId}
                         >
-                          {project.status === 'archived'
-                            ? commonT('actions.activate')
-                            : t('actions.archive')}
+                          {project.contractId ? (
+                            <Link
+                              href={`/operations/contracts?edit=${project.contractId}`}
+                            >
+                              <FileText className="size-4" />
+                            </Link>
+                          ) : (
+                            <span>
+                              <FileText className="size-4" />
+                            </span>
+                          )}
                         </Button>
-                      ) : null}
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+                        {access.isDirector ? (
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="cursor-pointer"
+                            onClick={() => void toggleArchived(project)}
+                          >
+                            {project.status === 'archived'
+                              ? commonT('actions.activate')
+                              : t('actions.archive')}
+                          </Button>
+                        ) : null}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
       ) : (
         <EmptyState
           icon={<FolderKanban className="size-12" />}
           title={commonT('states.emptyTitle')}
           description={t('emptyDescription')}
-          actionLabel={access.isDirector ? commonT('actions.create') : commonT('actions.refresh')}
-          onAction={
+          actionLabel={
             access.isDirector
-              ? () => {
-                  window.location.href = '/operations/projects/new';
-                }
-              : () => void refetch()
+              ? commonT('actions.create')
+              : commonT('actions.refresh')
           }
+          onAction={access.isDirector ? openCreateSheet : () => void refetch()}
         />
       )}
+
+      <Sheet
+        open={isSheetOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            closeSheet();
+          }
+        }}
+      >
+        <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-[min(92vw,64rem)]">
+          <SheetHeader>
+            <SheetTitle>
+              {editProjectId ? t('sheet.editTitle') : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <ProjectFormScreen
+            projectId={editProjectId ?? undefined}
+            onCancel={closeSheet}
+            onSaved={async () => {
+              closeSheet();
+              await refetch();
+            }}
+          />
+        </SheetContent>
+      </Sheet>
     </Page>
   );
 }

package/hedhog/frontend/app/schedule-adjustments/page.tsx.ejs

@@ -86,15 +86,33 @@ const emptyForm: ScheduleFormState = {
   })),
 };
 
-export default function OperationsScheduleAdjustmentsPage() {
-  const t = useTranslations('operations.ScheduleAdjustmentsPage');
-  const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
-  const access = useOperationsAccess();
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [form, setForm] = useState<ScheduleFormState>(emptyForm);
+export default function OperationsScheduleAdjustmentsPage() {
+  const t = useTranslations('operations.ScheduleAdjustmentsPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [form, setForm] = useState<ScheduleFormState>(emptyForm);
+
+  const getRequestScopeLabel = (value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.requestScopes.${value}`;
+    return t.has(key) ? t(key) : formatEnumLabel(value);
+  };
+
+  const getStatusLabel = (value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.statuses.${value}`;
+    return t.has(key) ? t(key) : formatEnumLabel(value);
+  };
 
   const { data: requests = [], refetch } = useQuery<
     OperationsScheduleAdjustmentRequest[]
@@ -218,12 +236,12 @@ export default function OperationsScheduleAdjustmentsPage() {
             value: statusFilter,
             onChange: setStatusFilter,
             placeholder: commonT('labels.status'),
-            options: [
-              { value: 'all', label: commonT('filters.allStatuses') },
-              { value: 'submitted', label: formatEnumLabel('submitted') },
-              { value: 'approved', label: formatEnumLabel('approved') },
-              { value: 'rejected', label: formatEnumLabel('rejected') },
-            ],
+            options: [
+              { value: 'all', label: commonT('filters.allStatuses') },
+              { value: 'submitted', label: getStatusLabel('submitted') },
+              { value: 'approved', label: getStatusLabel('approved') },
+              { value: 'rejected', label: getStatusLabel('rejected') },
+            ],
           },
         ]}
       />
@@ -249,7 +267,7 @@ export default function OperationsScheduleAdjustmentsPage() {
               {filteredRows.map((requestItem) => (
                 <TableRow key={requestItem.id}>
                   <TableCell>{requestItem.collaboratorName}</TableCell>
-                  <TableCell>{formatEnumLabel(requestItem.requestScope)}</TableCell>
+                  <TableCell>{getRequestScopeLabel(requestItem.requestScope)}</TableCell>
                   <TableCell>
                     {formatDateRange(
                       requestItem.effectiveStartDate,
@@ -268,10 +286,10 @@ export default function OperationsScheduleAdjustmentsPage() {
                     {requestItem.approverName || commonT('labels.notAssigned')}
                   </TableCell>
                   <TableCell>
-                    <StatusBadge
-                      label={formatEnumLabel(requestItem.status)}
-                      className={getStatusBadgeClass(requestItem.status)}
-                    />
+                    <StatusBadge
+                      label={getStatusLabel(requestItem.status)}
+                      className={getStatusBadgeClass(requestItem.status)}
+                    />
                   </TableCell>
                   <TableCell>
                     {requestItem.approverNote || commonT('labels.noNotes')}
@@ -308,14 +326,18 @@ export default function OperationsScheduleAdjustmentsPage() {
                     setForm((current) => ({ ...current, requestScope: value }))
                   }
                 >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="temporary">Temporary</SelectItem>
-                    <SelectItem value="permanent">Permanent</SelectItem>
-                  </SelectContent>
-                </Select>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="temporary">
+                      {getRequestScopeLabel('temporary')}
+                    </SelectItem>
+                    <SelectItem value="permanent">
+                      {getRequestScopeLabel('permanent')}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
               <div className="space-y-2">
                 <label className="text-sm font-medium">{commonT('labels.startDate')}</label>