@hed-hog/operations 0.0.322 → 0.0.326

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/projects/page.tsx

@@ -0,0 +1,757 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+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 { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Archive,
+  ArchiveRestore,
+  CalendarDays,
+  Eye,
+  FileText,
+  FolderKanban,
+  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 { 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 type { OperationsProject, PaginatedResponse } from '../_lib/types';
+import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
+
+const PROJECT_VIEW_STORAGE_KEY = 'operations-projects-view-mode';
+
+type ProjectViewMode = 'table' | 'cards';
+
+function getPersonAvatarUrl(avatarId?: number | null): string {
+  return typeof avatarId === 'number' && avatarId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+    : '/placeholder.png';
+}
+
+function getInitials(value?: string | null): string {
+  if (!value) return '?';
+  return value
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0]!.toUpperCase())
+    .join('');
+}
+
+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 projectFormT = useTranslations('operations.ProjectFormPage');
+  const contractFormT = useTranslations('operations.ContractFormPage');
+
+  const tProjectStatus = (status: string | null | undefined) =>
+    status
+      ? (projectFormT as unknown as (k: string) => string)(
+          `options.statuses.${status}`
+        )
+      : '-';
+  const tContractStatus = (status: string | null | undefined) =>
+    status
+      ? (contractFormT as unknown as (k: string) => string)(
+          `options.statuses.${status}`
+        )
+      : '-';
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
+  const access = useOperationsAccess();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [viewMode, setViewMode] = useState<ProjectViewMode>(() => {
+    if (typeof window === 'undefined') {
+      return 'table';
+    }
+
+    const savedViewMode = window.localStorage.getItem(PROJECT_VIEW_STORAGE_KEY);
+
+    return savedViewMode === 'cards' ? 'cards' : 'table';
+  });
+
+  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: projectsResponse, refetch } = useQuery<
+    PaginatedResponse<OperationsProject>
+  >({
+    queryKey: [
+      'operations-projects-list',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      page,
+      pageSize,
+    ],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+
+      if (search.trim()) {
+        params.set('search', search.trim());
+      }
+
+      if (statusFilter !== 'all') {
+        params.set('status', statusFilter);
+      }
+
+      return fetchOperations<PaginatedResponse<OperationsProject>>(
+        request,
+        `/operations/projects?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
+  });
+  const projects = projectsResponse?.data ?? [];
+  const filteredRows = projects;
+
+  const statsCards = useMemo(
+    () => [
+      {
+        key: 'total',
+        title: t('cards.total'),
+        description: t('cards.totalDescription'),
+        value: projects.length,
+        icon: FolderKanban,
+        accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+        iconContainerClassName: 'bg-slate-100 text-slate-700',
+      },
+      {
+        key: 'active',
+        title: t('cards.active'),
+        description: t('cards.activeDescription'),
+        value: projects.filter((item) => item.status === 'active').length,
+        icon: PlayCircle,
+        accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
+        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: 'upcomingDeliveries',
+        title: t('cards.upcomingDeliveries'),
+        description: t('cards.upcomingDeliveriesDescription'),
+        value: projects.filter((item) => Boolean(item.endDate)).length,
+        icon: CalendarDays,
+        accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
+        iconContainerClassName: 'bg-blue-50 text-blue-600',
+      },
+    ],
+    [projects, t]
+  );
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') {
+      return;
+    }
+
+    setViewMode(value);
+
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(PROJECT_VIEW_STORAGE_KEY, value);
+    }
+  };
+
+  const toggleArchived = async (project: OperationsProject) => {
+    const nextStatus = project.status === 'archived' ? 'active' : 'archived';
+
+    try {
+      await mutateOperations(
+        request,
+        `/operations/projects/${project.id}`,
+        'PATCH',
+        {
+          status: nextStatus,
+        }
+      );
+      showToastHandler?.('success', t('messages.statusSuccess'));
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.statusError'));
+    }
+  };
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          access.isDirector ? (
+            <Button size="sm" onClick={openCreateSheet}>
+              {commonT('actions.create')}
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <KpiCardsGrid items={statsCards} columns={4} />
+
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            className="w-full"
+            searchQuery={search}
+            onSearchChange={(value) => {
+              setSearch(value);
+              setPage(1);
+            }}
+            showSearchButton={false}
+            debounceMs={500}
+            placeholder={t('searchPlaceholder')}
+            controls={[
+              {
+                id: 'status',
+                type: 'select',
+                value: statusFilter,
+                onChange: (value) => {
+                  setStatusFilter(value);
+                  setPage(1);
+                },
+                placeholder: commonT('labels.status'),
+                options: [
+                  { 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') },
+                ],
+              },
+            ]}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3 xl:justify-end">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('viewMode')}
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+            aria-label={t('viewMode')}
+          >
+            <ToggleGroupItem
+              value="table"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeTable')}
+            >
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="cards"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeCards')}
+            >
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
+
+      {filteredRows.length > 0 ? (
+        viewMode === 'cards' ? (
+          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
+            {filteredRows.map((project) => (
+              <Card
+                key={project.id}
+                className="cursor-pointer overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
+                onDoubleClick={() =>
+                  router.push(`/operations/projects/${project.id}`)
+                }
+              >
+                <CardContent className="space-y-4 p-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div className="min-w-0">
+                      <div className="truncate font-semibold">
+                        {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>
+                    <StatusBadge
+                      label={tProjectStatus(project.status)}
+                      className={getStatusBadgeClass(project.status)}
+                    />
+                  </div>
+
+                  <div className="grid gap-2 text-sm text-muted-foreground lg:grid-cols-2">
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      <span className="shrink-0 font-medium text-foreground">
+                        {commonT('labels.client')}:
+                      </span>
+                      <Avatar className="h-5 w-5 shrink-0">
+                        <AvatarImage
+                          src={getPersonAvatarUrl(project.clientAvatarId)}
+                          alt={project.clientName ?? ''}
+                        />
+                        <AvatarFallback className="text-[9px] font-medium">
+                          {getInitials(project.clientName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="truncate">
+                        {project.clientName || commonT('labels.notAvailable')}
+                      </span>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      <span className="shrink-0 font-medium text-foreground">
+                        {commonT('labels.manager')}:
+                      </span>
+                      <Avatar className="h-5 w-5 shrink-0">
+                        <AvatarImage
+                          src={getPersonAvatarUrl(project.managerAvatarId)}
+                          alt={project.managerName ?? ''}
+                        />
+                        <AvatarFallback className="text-[9px] font-medium">
+                          {getInitials(project.managerName)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="truncate">
+                        {project.managerName || commonT('labels.notAssigned')}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.teamSize')}:
+                      </span>{' '}
+                      {project.teamSize ?? 0}
+                    </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.startDate')}:
+                      </span>{' '}
+                      {formatDate(
+                        project.startDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.endDate')}:
+                      </span>{' '}
+                      {formatDate(
+                        project.endDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.contractStatus')}:
+                      </span>
+                      {project.contractStatus ? (
+                        <StatusBadge
+                          label={tContractStatus(project.contractStatus)}
+                          className={getStatusBadgeClass(
+                            project.contractStatus
+                          )}
+                        />
+                      ) : (
+                        <span>{commonT('labels.notAssigned')}</span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center justify-end gap-2 border-t border-border/60 pt-3">
+                    <Button variant="outline" size="icon" asChild>
+                      <Link href={`/operations/projects/${project.id}`}>
+                        <Eye className="size-4" />
+                      </Link>
+                    </Button>
+                    {access.isDirector ? (
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="cursor-pointer"
+                        onClick={() => openEditSheet(project.id)}
+                      >
+                        <Pencil className="size-4" />
+                      </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 ? (
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="cursor-pointer"
+                        title={
+                          project.status === 'archived'
+                            ? commonT('actions.activate')
+                            : t('actions.archive')
+                        }
+                        onClick={() => void toggleArchived(project)}
+                      >
+                        {project.status === 'archived' ? (
+                          <ArchiveRestore className="size-4" />
+                        ) : (
+                          <Archive className="size-4" />
+                        )}
+                      </Button>
+                    ) : null}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded-md border">
+            <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="cursor-pointer hover:bg-muted/30"
+                    onDoubleClick={() =>
+                      router.push(`/operations/projects/${project.id}`)
+                    }
+                  >
+                    <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="flex min-w-0 items-center gap-1.5">
+                        <Avatar className="h-6 w-6 shrink-0">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            alt={project.clientName ?? ''}
+                          />
+                          <AvatarFallback className="text-[9px] font-medium">
+                            {getInitials(project.clientName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="truncate">
+                          {project.clientName || commonT('labels.notAvailable')}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={tProjectStatus(project.status)}
+                        className={getStatusBadgeClass(project.status)}
+                      />
+                    </TableCell>
+                    <TableCell className="hidden lg:table-cell">
+                      <div className="flex min-w-0 items-center gap-1.5">
+                        <Avatar className="h-6 w-6 shrink-0">
+                          <AvatarImage
+                            src={getPersonAvatarUrl(project.managerAvatarId)}
+                            alt={project.managerName ?? ''}
+                          />
+                          <AvatarFallback className="text-[9px] font-medium">
+                            {getInitials(project.managerName)}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="truncate">
+                          {project.managerName || commonT('labels.notAssigned')}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell className="hidden md:table-cell">
+                      {project.teamSize ?? 0}
+                    </TableCell>
+                    <TableCell className="hidden xl:table-cell">
+                      {formatDate(
+                        project.startDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell className="hidden xl:table-cell">
+                      {formatDate(
+                        project.endDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell className="hidden 2xl:table-cell">
+                      {project.contractStatus ? (
+                        <StatusBadge
+                          label={tContractStatus(project.contractStatus)}
+                          className={getStatusBadgeClass(
+                            project.contractStatus
+                          )}
+                        />
+                      ) : (
+                        commonT('labels.notAssigned')
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-end gap-1.5">
+                        <Button variant="outline" size="icon" asChild>
+                          <Link href={`/operations/projects/${project.id}`}>
+                            <Eye className="size-4" />
+                          </Link>
+                        </Button>
+                        {access.isDirector ? (
+                          <Button
+                            variant="outline"
+                            size="icon"
+                            className="cursor-pointer"
+                            onClick={() => openEditSheet(project.id)}
+                          >
+                            <Pencil className="size-4" />
+                          </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 ? (
+                          <Button
+                            variant="outline"
+                            size="icon"
+                            className="cursor-pointer"
+                            title={
+                              project.status === 'archived'
+                                ? commonT('actions.activate')
+                                : t('actions.archive')
+                            }
+                            onClick={() => void toggleArchived(project)}
+                          >
+                            {project.status === 'archived' ? (
+                              <ArchiveRestore className="size-4" />
+                            ) : (
+                              <Archive className="size-4" />
+                            )}
+                          </Button>
+                        ) : null}
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )
+      ) : (
+        <EmptyState
+          icon={<FolderKanban className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={
+            access.isDirector
+              ? commonT('actions.create')
+              : commonT('actions.refresh')
+          }
+          onAction={access.isDirector ? openCreateSheet : () => void refetch()}
+        />
+      )}
+
+      <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]}
+      />
+
+      <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>
+  );
+}