@hed-hog/operations 0.0.329 → 0.0.331

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

@@ -26,35 +26,173 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import {
+  closestCenter,
+  DndContext,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
+} from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   Archive,
   ArchiveRestore,
   CalendarDays,
+  CheckCircle2,
   Eye,
+  EyeOff,
   FileText,
   FolderKanban,
+  KanbanSquare,
   LayoutGrid,
   List,
   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 { useMemo, useState, type ReactNode } from 'react';
 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';
+import {
+  MASKED_VALUE,
+  useValuesVisibility,
+} from '../_lib/hooks/use-values-visibility';
 import type { OperationsProject, PaginatedResponse } from '../_lib/types';
-import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
+import {
+  formatCurrency,
+  formatDate,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
 
 const PROJECT_VIEW_STORAGE_KEY = 'operations-projects-view-mode';
 
-type ProjectViewMode = 'table' | 'cards';
+type ProjectViewMode = 'table' | 'cards' | 'board';
+
+type ProjectBoardStatus = 'planning' | 'active' | 'paused' | 'completed';
+
+type ProjectBoardColumns = Record<ProjectBoardStatus, OperationsProject[]>;
+
+const PROJECT_BOARD_COLUMNS: Array<{ id: ProjectBoardStatus; color: string }> =
+  [
+    { id: 'planning', color: 'bg-amber-500' },
+    { id: 'active', color: 'bg-emerald-500' },
+    { id: 'paused', color: 'bg-slate-500' },
+    { id: 'completed', color: 'bg-sky-500' },
+  ];
+
+function projectDragId(projectId: number) {
+  return `project-${projectId}`;
+}
+
+function columnDropId(columnId: ProjectBoardStatus) {
+  return `project-col-${columnId}`;
+}
+
+function parseProjectId(value: UniqueIdentifier | null | undefined) {
+  if (!value) return null;
+  const match = String(value).match(/^project-(\d+)$/);
+  return match ? Number(match[1]) : null;
+}
+
+function parseBoardColumnId(
+  value: UniqueIdentifier | null | undefined
+): ProjectBoardStatus | null {
+  if (!value) return null;
+  const match = String(value).match(/^project-col-(.+)$/);
+  const id = match?.[1];
+  return PROJECT_BOARD_COLUMNS.some((column) => column.id === id)
+    ? (id as ProjectBoardStatus)
+    : null;
+}
+
+function splitProjectsByStatus(
+  projects: OperationsProject[]
+): ProjectBoardColumns {
+  return {
+    planning: projects.filter((project) => project.status === 'planning'),
+    active: projects.filter((project) => project.status === 'active'),
+    paused: projects.filter((project) => project.status === 'paused'),
+    completed: projects.filter((project) => project.status === 'completed'),
+  };
+}
+
+function moveProjectToColumn(
+  columns: ProjectBoardColumns,
+  projectId: number,
+  target: ProjectBoardStatus
+): ProjectBoardColumns {
+  const sourceProject =
+    columns.planning.find((project) => project.id === projectId) ??
+    columns.active.find((project) => project.id === projectId) ??
+    columns.paused.find((project) => project.id === projectId) ??
+    columns.completed.find((project) => project.id === projectId);
+
+  if (!sourceProject) {
+    return columns;
+  }
+
+  const nextColumns: ProjectBoardColumns = {
+    planning: columns.planning.filter((project) => project.id !== projectId),
+    active: columns.active.filter((project) => project.id !== projectId),
+    paused: columns.paused.filter((project) => project.id !== projectId),
+    completed: columns.completed.filter((project) => project.id !== projectId),
+  };
+
+  return {
+    ...nextColumns,
+    [target]: [{ ...sourceProject, status: target }, ...nextColumns[target]],
+  };
+}
+
+function DraggableProjectCard({
+  project,
+  disabled,
+  children,
+}: {
+  project: OperationsProject;
+  disabled?: boolean;
+  children: (isDragging: boolean) => ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: projectDragId(project.id),
+      disabled,
+    });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Translate.toString(transform) }}
+      {...listeners}
+      {...attributes}
+      className={isDragging ? 'z-20 touch-none' : 'touch-none'}
+    >
+      {children(isDragging)}
+    </div>
+  );
+}
+
+function DroppableProjectColumn({
+  columnId,
+  children,
+}: {
+  columnId: ProjectBoardStatus;
+  children: (isOver: boolean) => ReactNode;
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: columnDropId(columnId) });
+  return <div ref={setNodeRef}>{children(isOver)}</div>;
+}
 
 function getPersonAvatarUrl(avatarId?: number | null): string {
   return typeof avatarId === 'number' && avatarId > 0
@@ -104,7 +242,11 @@ export default function OperationsProjectsPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-projects:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<ProjectViewMode>(() => {
     if (typeof window === 'undefined') {
       return 'table';
@@ -112,8 +254,20 @@ export default function OperationsProjectsPage() {
 
     const savedViewMode = window.localStorage.getItem(PROJECT_VIEW_STORAGE_KEY);
 
-    return savedViewMode === 'cards' ? 'cards' : 'table';
+    if (
+      savedViewMode === 'table' ||
+      savedViewMode === 'cards' ||
+      savedViewMode === 'board'
+    ) {
+      return savedViewMode;
+    }
+
+    return 'table';
   });
+  const [boardOverride, setBoardOverride] =
+    useState<ProjectBoardColumns | null>(null);
+  const activeViewMode: ProjectViewMode =
+    statusFilter === 'archived' && viewMode === 'board' ? 'table' : viewMode;
 
   const createParam = searchParams.get('create');
   const editProjectId = parseEditProjectId(searchParams.get('edit'));
@@ -154,6 +308,8 @@ export default function OperationsProjectsPage() {
     updateSheetQuery({ editId: projectId });
   };
 
+  const { valuesVisible, toggleValuesVisible } = useValuesVisibility();
+
   const { data: projectsResponse, refetch } = useQuery<
     PaginatedResponse<OperationsProject>
   >({
@@ -186,8 +342,57 @@ export default function OperationsProjectsPage() {
     },
     placeholderData: (previous) => previous,
   });
-  const projects = projectsResponse?.data ?? [];
+  const { data: boardProjectsResponse, refetch: refetchBoard } = useQuery<
+    PaginatedResponse<OperationsProject>
+  >({
+    queryKey: [
+      'operations-projects-board',
+      currentLocaleCode,
+      search,
+      statusFilter,
+    ],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: '1',
+        pageSize: '1000',
+      });
+
+      if (search.trim()) {
+        params.set('search', search.trim());
+      }
+
+      if (statusFilter !== 'all') {
+        params.set('status', statusFilter);
+      }
+
+      return fetchOperations<PaginatedResponse<OperationsProject>>(
+        request,
+        `/operations/projects?${params.toString()}`
+      );
+    },
+    enabled: activeViewMode === 'board',
+    placeholderData: (previous) => previous,
+  });
+  const projects = useMemo(
+    () => projectsResponse?.data ?? [],
+    [projectsResponse?.data]
+  );
+  const boardProjects = useMemo(
+    () => boardProjectsResponse?.data ?? [],
+    [boardProjectsResponse?.data]
+  );
+  const boardColumns = useMemo(() => {
+    if (boardOverride) {
+      return boardOverride;
+    }
+
+    return splitProjectsByStatus(boardProjects);
+  }, [boardOverride, boardProjects]);
   const filteredRows = projects;
+  const hasRowsForCurrentView =
+    activeViewMode === 'board'
+      ? boardProjects.length > 0
+      : filteredRows.length > 0;
 
   const statsCards = useMemo(
     () => [
@@ -210,13 +415,13 @@ export default function OperationsProjectsPage() {
         iconContainerClassName: 'bg-green-50 text-green-600',
       },
       {
-        key: 'atRisk',
-        title: t('cards.atRisk'),
-        description: t('cards.atRiskDescription'),
-        value: projects.filter((item) => item.status === 'at_risk').length,
-        icon: ShieldAlert,
-        accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
-        iconContainerClassName: 'bg-amber-50 text-amber-600',
+        key: 'completed',
+        title: t('cards.completed'),
+        description: t('cards.completedDescription'),
+        value: projects.filter((item) => item.status === 'completed').length,
+        icon: CheckCircle2,
+        accentClassName: 'from-sky-500/20 via-cyan-500/10 to-transparent',
+        iconContainerClassName: 'bg-sky-50 text-sky-600',
       },
       {
         key: 'upcomingDeliveries',
@@ -232,7 +437,7 @@ export default function OperationsProjectsPage() {
   );
 
   const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'cards') {
+    if (value !== 'table' && value !== 'cards' && value !== 'board') {
       return;
     }
 
@@ -243,6 +448,83 @@ export default function OperationsProjectsPage() {
     }
   };
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
+  );
+
+  const handleBoardDragEnd = async (event: DragEndEvent) => {
+    if (!access.isDirector) {
+      return;
+    }
+
+    const projectId = parseProjectId(event.active.id);
+    const targetColumn = parseBoardColumnId(event.over?.id);
+
+    if (!projectId || !targetColumn) {
+      return;
+    }
+
+    const sourceColumn = PROJECT_BOARD_COLUMNS.find((column) =>
+      boardColumns[column.id].some((project) => project.id === projectId)
+    )?.id;
+
+    if (!sourceColumn || sourceColumn === targetColumn) {
+      return;
+    }
+
+    setBoardOverride(
+      moveProjectToColumn(boardColumns, projectId, targetColumn)
+    );
+
+    try {
+      await mutateOperations(
+        request,
+        `/operations/projects/${projectId}`,
+        'PATCH',
+        {
+          status: targetColumn,
+        }
+      );
+      showToastHandler?.('success', t('messages.statusSuccess'));
+      await Promise.all([refetch(), refetchBoard()]);
+      setBoardOverride(null);
+    } catch {
+      setBoardOverride(null);
+      showToastHandler?.('error', t('messages.statusError'));
+      await Promise.all([refetch(), refetchBoard()]);
+    }
+  };
+
+  const renderBoardCard = (project: OperationsProject, isDragging = false) => (
+    <Card
+      className={`cursor-pointer border-border/60 py-0 shadow-sm transition ${
+        isDragging
+          ? 'opacity-70 shadow-lg'
+          : 'hover:-translate-y-0.5 hover:shadow-md'
+      }`}
+      onDoubleClick={() => router.push(`/operations/projects/${project.id}`)}
+    >
+      <CardContent className="space-y-2 p-3">
+        <div className="truncate text-sm font-semibold">{project.name}</div>
+        <div className="truncate text-xs text-muted-foreground">
+          {[project.code, project.clientName].filter(Boolean).join(' • ') ||
+            commonT('labels.notAvailable')}
+        </div>
+        <div className="flex items-center justify-between gap-2 pt-1">
+          <StatusBadge
+            label={tProjectStatus(project.status)}
+            className={getStatusBadgeClass(project.status)}
+          />
+          <Button variant="outline" size="icon" asChild>
+            <Link href={`/operations/projects/${project.id}`}>
+              <Eye className="size-4" />
+            </Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+
   const toggleArchived = async (project: OperationsProject) => {
     const nextStatus = project.status === 'archived' ? 'active' : 'archived';
 
@@ -256,7 +538,7 @@ export default function OperationsProjectsPage() {
         }
       );
       showToastHandler?.('success', t('messages.statusSuccess'));
-      await refetch();
+      await Promise.all([refetch(), refetchBoard()]);
     } catch {
       showToastHandler?.('error', t('messages.statusError'));
     }
@@ -269,11 +551,27 @@ export default function OperationsProjectsPage() {
         description={t('description')}
         current={t('breadcrumb')}
         actions={
-          access.isDirector ? (
-            <Button size="sm" onClick={openCreateSheet}>
-              {commonT('actions.create')}
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={toggleValuesVisible}
+              title={commonT(
+                valuesVisible ? 'actions.hideValues' : 'actions.showValues'
+              )}
+            >
+              {valuesVisible ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
             </Button>
-          ) : undefined
+            {access.isDirector ? (
+              <Button size="sm" onClick={openCreateSheet}>
+                {commonT('actions.create')}
+              </Button>
+            ) : null}
+          </div>
         }
       />
 
@@ -305,7 +603,6 @@ export default function OperationsProjectsPage() {
                   { value: 'all', label: commonT('filters.allStatuses') },
                   { value: 'planning', label: tProjectStatus('planning') },
                   { value: 'active', label: tProjectStatus('active') },
-                  { value: 'at_risk', label: tProjectStatus('at_risk') },
                   { value: 'paused', label: tProjectStatus('paused') },
                   { value: 'completed', label: tProjectStatus('completed') },
                   { value: 'archived', label: tProjectStatus('archived') },
@@ -321,7 +618,7 @@ export default function OperationsProjectsPage() {
           </span>
           <ToggleGroup
             type="single"
-            value={viewMode}
+            value={activeViewMode}
             onValueChange={handleViewModeChange}
             variant="outline"
             size="sm"
@@ -343,12 +640,86 @@ export default function OperationsProjectsPage() {
               <LayoutGrid className="h-4 w-4" />
               <span className="hidden sm:inline">{t('viewModeCards')}</span>
             </ToggleGroupItem>
+            <ToggleGroupItem
+              value="board"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeBoard')}
+            >
+              <KanbanSquare className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeBoard')}</span>
+            </ToggleGroupItem>
           </ToggleGroup>
         </div>
       </div>
 
-      {filteredRows.length > 0 ? (
-        viewMode === 'cards' ? (
+      {hasRowsForCurrentView ? (
+        activeViewMode === 'board' ? (
+          <>
+            {!access.isDirector ? (
+              <p className="text-sm text-muted-foreground">
+                {t('board.directorOnly')}
+              </p>
+            ) : null}
+            <DndContext
+              sensors={access.isDirector ? sensors : undefined}
+              collisionDetection={closestCenter}
+              onDragEnd={(event) => void handleBoardDragEnd(event)}
+            >
+              <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-4">
+                {PROJECT_BOARD_COLUMNS.map((column) => (
+                  <DroppableProjectColumn key={column.id} columnId={column.id}>
+                    {(isOver) => (
+                      <div
+                        className={`flex min-h-72 flex-col gap-3 rounded-md border bg-muted/20 p-3 ${
+                          isOver && access.isDirector
+                            ? 'border-primary/60 bg-primary/5'
+                            : 'border-border/60'
+                        }`}
+                      >
+                        <div className="flex items-center gap-2">
+                          <span
+                            className={`size-2.5 rounded-full ${column.color}`}
+                          />
+                          <span className="text-sm font-semibold">
+                            {t(`board.columns.${column.id}`)}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            ({boardColumns[column.id].length})
+                          </span>
+                        </div>
+
+                        <div className="space-y-2">
+                          {boardColumns[column.id].length ? (
+                            boardColumns[column.id].map((project) =>
+                              access.isDirector ? (
+                                <DraggableProjectCard
+                                  key={project.id}
+                                  project={project}
+                                >
+                                  {(isDragging) =>
+                                    renderBoardCard(project, isDragging)
+                                  }
+                                </DraggableProjectCard>
+                              ) : (
+                                <div key={project.id}>
+                                  {renderBoardCard(project)}
+                                </div>
+                              )
+                            )
+                          ) : (
+                            <div className="rounded-md border border-dashed border-border/70 px-3 py-5 text-center text-xs text-muted-foreground">
+                              {t('board.emptyColumn')}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </DroppableProjectColumn>
+                ))}
+              </div>
+            </DndContext>
+          </>
+        ) : activeViewMode === 'cards' ? (
           <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
             {filteredRows.map((project) => (
               <Card
@@ -441,6 +812,20 @@ export default function OperationsProjectsPage() {
                         currentLocaleCode
                       )}
                     </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.budget')}:
+                      </span>{' '}
+                      {project.budgetAmount != null
+                        ? valuesVisible
+                          ? formatCurrency(
+                              project.budgetAmount,
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : MASKED_VALUE
+                        : commonT('labels.notAvailable')}
+                    </div>
                     <div className="flex items-center gap-2">
                       <span className="font-medium text-foreground">
                         {commonT('labels.contractStatus')}:
@@ -538,6 +923,9 @@ export default function OperationsProjectsPage() {
                   <TableHead className="hidden xl:table-cell">
                     {commonT('labels.endDate')}
                   </TableHead>
+                  <TableHead className="hidden xl:table-cell">
+                    {commonT('labels.budget')}
+                  </TableHead>
                   <TableHead className="hidden 2xl:table-cell">
                     {commonT('labels.contractStatus')}
                   </TableHead>
@@ -626,6 +1014,17 @@ export default function OperationsProjectsPage() {
                         currentLocaleCode
                       )}
                     </TableCell>
+                    <TableCell className="hidden xl:table-cell">
+                      {project.budgetAmount != null
+                        ? valuesVisible
+                          ? formatCurrency(
+                              project.budgetAmount,
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : MASKED_VALUE
+                        : commonT('labels.notAvailable')}
+                    </TableCell>
                     <TableCell className="hidden 2xl:table-cell">
                       {project.contractStatus ? (
                         <StatusBadge
@@ -714,17 +1113,19 @@ export default function OperationsProjectsPage() {
         />
       )}
 
-      <PaginationFooter
-        currentPage={projectsResponse?.page ?? page}
-        pageSize={projectsResponse?.pageSize ?? pageSize}
-        totalItems={projectsResponse?.total ?? 0}
-        onPageChange={setPage}
-        onPageSizeChange={(value) => {
-          setPageSize(value);
-          setPage(1);
-        }}
-        pageSizeOptions={[12, 24, 48]}
-      />
+      {activeViewMode !== 'board' ? (
+        <PaginationFooter
+          currentPage={projectsResponse?.page ?? page}
+          pageSize={projectsResponse?.pageSize ?? pageSize}
+          totalItems={projectsResponse?.total ?? 0}
+          onPageChange={setPage}
+          onPageSizeChange={(value) => {
+            setPageSize(value);
+            setPage(1);
+          }}
+          pageSizeOptions={[12, 24, 48]}
+        />
+      ) : null}
 
       <Sheet
         open={isSheetOpen}