@hed-hog/operations 0.0.294 → 0.0.296

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

@@ -1,1074 +1,236 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PaginationFooter,
-  SearchBar,
-  StatsCards,
-  type StatCardConfig,
-} from '@/components/entity-list';
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  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 } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  BarChart3,
-  CalendarDays,
-  ChevronRight,
-  Clock3,
-  FolderKanban,
-  Grid3X3,
-  List,
-  Plus,
-  SearchX,
-  SquarePen,
-  Users,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { OperationsHeader } from '../_components/operations-header';
-import { StatusBadge } from '../_components/status-badge';
-import { useOperationsData } from '../_lib/hooks/use-operations-data';
-import type { Project, ProjectStatus } from '../_lib/types/operations';
-import { formatCurrency, formatDate, formatHours } from '../_lib/utils/format';
-import { getProjectBadgeClasses } from '../_lib/utils/status';
-
-type ProjectViewMode = 'table' | 'grid';
-
-const PAGE_SIZE_OPTIONS = [8, 12, 24, 48];
-const DEFAULT_PAGE_SIZE = PAGE_SIZE_OPTIONS[0] ?? 8;
-
-const PROJECT_STATUS_KEYS: Record<ProjectStatus, string> = {
-  planning: 'planning',
-  active: 'active',
-  'at-risk': 'atRisk',
-  paused: 'paused',
-  completed: 'completed',
-};
-
-const PROJECT_STATUS_ACCENTS: Record<ProjectStatus, string> = {
-  planning: 'from-slate-500 via-slate-400 to-slate-300',
-  active: 'from-blue-600 via-cyan-500 to-sky-400',
-  'at-risk': 'from-orange-600 via-amber-500 to-yellow-400',
-  paused: 'from-zinc-500 via-neutral-400 to-stone-300',
-  completed: 'from-emerald-600 via-green-500 to-lime-400',
-};
-
-const progressRanges = [
-  { value: 'all', min: 0, max: 100 },
-  { value: '0-25', min: 0, max: 25 },
-  { value: '26-50', min: 26, max: 50 },
-  { value: '51-75', min: 51, max: 75 },
-  { value: '76-100', min: 76, max: 100 },
-] as const;
-
-const projectFormSchema = z
-  .object({
-    name: z.string().trim().min(2),
-    client: z.string().trim().min(2),
-    status: z.enum(['planning', 'active', 'at-risk', 'paused', 'completed']),
-    progress: z.coerce.number().min(0).max(100),
-    hoursLogged: z.coerce.number().min(0),
-    budget: z.coerce.number().min(0),
-    contractId: z.string().trim().min(1),
-    startDate: z.string().min(1),
-    endDate: z.string().min(1),
-    teamMemberIds: z.array(z.string()).min(1),
-    description: z.string().trim().min(10),
-  })
-  .refine((value) => value.endDate >= value.startDate, {
-    message: 'invalidDateRange',
-    path: ['endDate'],
-  });
-
-type ProjectFormValues = z.infer<typeof projectFormSchema>;
-
-function stripHtml(value: string) {
-  return value
-    .replace(/<[^>]*>/g, ' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-}
-
-function getPreviewText(value: string, maxLength = 120) {
-  const sanitized = stripHtml(value);
-
-  if (sanitized.length <= maxLength) {
-    return sanitized;
-  }
-
-  return `${sanitized.slice(0, maxLength).trimEnd()}...`;
-}
-
-function getInitials(value: string) {
-  return value
-    .split(' ')
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((part) => part[0]?.toUpperCase())
-    .join('');
-}
-
-export default function ProjectsPage() {
-  const t = useTranslations('operations.ProjectsPage');
-  const { showToastHandler } = useApp();
-  const { projects, users, contracts } = useOperationsData();
-
-  const [projectsList, setProjectsList] = useState<Project[]>(projects);
-  const [viewMode, setViewMode] = useState<ProjectViewMode>('table');
-  const [searchInput, setSearchInput] = useState('');
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [progressFilter, setProgressFilter] = useState('all');
-  const [startDateFrom, setStartDateFrom] = useState('');
-  const [endDateTo, setEndDateTo] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const [editingProject, setEditingProject] = useState<Project | null>(null);
-  const [nextProjectId, setNextProjectId] = useState(projects.length + 1);
-
-  const form = useForm<ProjectFormValues>({
-    resolver: zodResolver(projectFormSchema),
-    defaultValues: {
-      name: '',
-      client: '',
-      status: 'planning',
-      progress: 0,
-      hoursLogged: 0,
-      budget: 0,
-      contractId: contracts[0]?.id ?? '',
-      startDate: new Date().toISOString().slice(0, 10),
-      endDate: new Date().toISOString().slice(0, 10),
-      teamMemberIds: [],
-      description: '',
-    },
-  });
-
-  useEffect(() => {
-    setProjectsList(projects);
-  }, [projects]);
-
-  useEffect(() => {
-    setNextProjectId(projects.length + 1);
-  }, [projects]);
-
-  useEffect(() => {
-    if (!sheetOpen) {
-      return;
-    }
-
-    if (editingProject) {
-      form.reset({
-        name: editingProject.name,
-        client: editingProject.client,
-        status: editingProject.status,
-        progress: editingProject.progress,
-        hoursLogged: editingProject.hoursLogged,
-        budget: editingProject.budget,
-        contractId: editingProject.contractId,
-        startDate: editingProject.startDate,
-        endDate: editingProject.endDate,
-        teamMemberIds: editingProject.teamMemberIds,
-        description: editingProject.description,
-      });
-      return;
-    }
-
-    form.reset({
-      name: '',
-      client: '',
-      status: 'planning',
-      progress: 0,
-      hoursLogged: 0,
-      budget: 0,
-      contractId: contracts[0]?.id ?? '',
-      startDate: new Date().toISOString().slice(0, 10),
-      endDate: new Date().toISOString().slice(0, 10),
-      teamMemberIds: [],
-      description: '',
-    });
-  }, [contracts, editingProject, form, sheetOpen]);
-
-  const getStatusLabel = (status: ProjectStatus) =>
-    t(`statusOptions.${PROJECT_STATUS_KEYS[status]}`);
-
-  const filteredProjects = useMemo(() => {
-    const selectedRange = progressRanges.find(
-      (range) => range.value === progressFilter
-    );
-
-    return projectsList
-      .filter((project) => {
-        const matchesSearch = `${project.name} ${project.client}`
-          .toLowerCase()
-          .includes(search.toLowerCase());
-        const matchesStatus =
-          statusFilter === 'all' || project.status === statusFilter;
-        const matchesProgress = selectedRange
-          ? project.progress >= selectedRange.min &&
-            project.progress <= selectedRange.max
-          : true;
-        const matchesStart =
-          !startDateFrom || project.startDate >= startDateFrom;
-        const matchesEnd = !endDateTo || project.endDate <= endDateTo;
-
-        return (
-          matchesSearch &&
-          matchesStatus &&
-          matchesProgress &&
-          matchesStart &&
-          matchesEnd
-        );
-      })
-      .sort((a, b) => a.name.localeCompare(b.name));
-  }, [
-    endDateTo,
-    progressFilter,
-    projectsList,
-    search,
-    startDateFrom,
-    statusFilter,
-  ]);
-
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [search, statusFilter, progressFilter, startDateFrom, endDateTo]);
-
-  const totalPages = Math.max(1, Math.ceil(filteredProjects.length / pageSize));
-  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
-
-  const paginatedProjects = useMemo(() => {
-    const start = (safePage - 1) * pageSize;
-    return filteredProjects.slice(start, start + pageSize);
-  }, [filteredProjects, pageSize, safePage]);
-
-  const stats = useMemo<StatCardConfig[]>(() => {
-    const totalProjects = filteredProjects.length;
-    const activeProjects = filteredProjects.filter(
-      (project) => project.status === 'active'
-    ).length;
-    const totalHours = filteredProjects.reduce(
-      (sum, project) => sum + project.hoursLogged,
-      0
-    );
-    const avgProgress =
-      totalProjects > 0
-        ? Math.round(
-            filteredProjects.reduce(
-              (sum, project) => sum + project.progress,
-              0
-            ) / totalProjects
-          )
-        : 0;
-
-    return [
-      {
-        title: t('stats.totalProjects'),
-        value: totalProjects,
-        icon: <FolderKanban className="size-5" />,
-        iconBgColor: 'bg-blue-50',
-        iconColor: 'text-blue-600',
-      },
-      {
-        title: t('stats.activeProjects'),
-        value: activeProjects,
-        icon: <Users className="size-5" />,
-        iconBgColor: 'bg-emerald-50',
-        iconColor: 'text-emerald-600',
-      },
-      {
-        title: t('stats.avgProgress'),
-        value: `${avgProgress}%`,
-        icon: <BarChart3 className="size-5" />,
-        iconBgColor: 'bg-amber-50',
-        iconColor: 'text-amber-600',
-      },
-      {
-        title: t('stats.totalHours'),
-        value: formatHours(totalHours),
-        icon: <List className="size-5" />,
-        iconBgColor: 'bg-violet-50',
-        iconColor: 'text-violet-600',
-      },
-    ];
-  }, [filteredProjects, t]);
-
-  const contractNameById = useMemo(
-    () => new Map(contracts.map((contract) => [contract.id, contract.name])),
-    [contracts]
-  );
-
-  const userNameById = useMemo(
-    () => new Map(users.map((user) => [user.id, user.name])),
-    [users]
-  );
-
-  const clearFilters = () => {
-    setSearch('');
-    setSearchInput('');
-    setStatusFilter('all');
-    setProgressFilter('all');
-    setStartDateFrom('');
-    setEndDateTo('');
-    setCurrentPage(1);
-  };
-
-  const openCreateSheet = () => {
-    setEditingProject(null);
-    setSheetOpen(true);
-  };
-
-  const openEditSheet = (project: Project) => {
-    setEditingProject(project);
-    setSheetOpen(true);
-  };
-
-  const onSubmit = (values: ProjectFormValues) => {
-    const payload: Project = {
-      id: editingProject ? editingProject.id : `prj-custom-${nextProjectId}`,
-      name: values.name.trim(),
-      client: values.client.trim(),
-      status: values.status,
-      progress: Number(values.progress),
-      hoursLogged: Number(values.hoursLogged),
-      budget: Number(values.budget),
-      startDate: values.startDate,
-      endDate: values.endDate,
-      contractId: values.contractId,
-      teamMemberIds: values.teamMemberIds,
-      description: values.description,
-    };
-
-    if (editingProject) {
-      setProjectsList((current) =>
-        current.map((project) =>
-          project.id === editingProject.id ? payload : project
-        )
-      );
-      showToastHandler('success', t('toasts.updated'));
-    } else {
-      setProjectsList((current) => [payload, ...current]);
-      setNextProjectId((current) => current + 1);
-      showToastHandler('success', t('toasts.created'));
-    }
-
-    setSheetOpen(false);
-    setEditingProject(null);
-  };
-
-  const headerActions = (
-    <div className="flex items-center gap-2">
-      <ToggleGroup
-        type="single"
-        value={viewMode}
-        onValueChange={(value) => {
-          if (value === 'table' || value === 'grid') {
-            setViewMode(value);
-          }
-        }}
-        variant="outline"
-      >
-        <ToggleGroupItem value="table" aria-label={t('view.table')}>
-          <List className="h-4 w-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="grid" aria-label={t('view.grid')}>
-          <Grid3X3 className="h-4 w-4" />
-        </ToggleGroupItem>
-      </ToggleGroup>
-      <Button size="sm" onClick={openCreateSheet}>
-        <Plus className="mr-2 h-4 w-4" />
-        {t('actions.create')}
-      </Button>
-    </div>
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-        actions={headerActions}
-      />
-
-      <StatsCards stats={stats} />
-
-      <SearchBar
-        searchQuery={searchInput}
-        onSearchChange={setSearchInput}
-        onSearch={() => {
-          setSearch(searchInput);
-          setCurrentPage(1);
-        }}
-        placeholder={t('searchPlaceholder')}
-        controls={[
-          {
-            id: 'status-filter',
-            type: 'select',
-            value: statusFilter,
-            onChange: (value) => {
-              setStatusFilter(value);
-            },
-            placeholder: t('filters.statusAll'),
-            options: [
-              { value: 'all', label: t('filters.statusAll') },
-              { value: 'planning', label: t('statusOptions.planning') },
-              { value: 'active', label: t('statusOptions.active') },
-              { value: 'at-risk', label: t('statusOptions.atRisk') },
-              { value: 'paused', label: t('statusOptions.paused') },
-              { value: 'completed', label: t('statusOptions.completed') },
-            ],
-          },
-          {
-            id: 'progress-filter',
-            type: 'select',
-            value: progressFilter,
-            onChange: (value) => {
-              setProgressFilter(value);
-            },
-            placeholder: t('filters.progressAll'),
-            options: [
-              { value: 'all', label: t('filters.progressAll') },
-              { value: '0-25', label: t('filters.progress0To25') },
-              { value: '26-50', label: t('filters.progress26To50') },
-              { value: '51-75', label: t('filters.progress51To75') },
-              { value: '76-100', label: t('filters.progress76To100') },
-            ],
-          },
-          {
-            id: 'start-date-from',
-            type: 'date',
-            value: startDateFrom,
-            onChange: (value) => {
-              setStartDateFrom(value);
-            },
-          },
-          {
-            id: 'end-date-to',
-            type: 'date',
-            value: endDateTo,
-            onChange: (value) => {
-              setEndDateTo(value);
-            },
-          },
-        ]}
-      />
-
-      {filteredProjects.length === 0 ? (
-        <EmptyState
-          icon={<SearchX className="h-12 w-12" />}
-          title={t('emptyState.title')}
-          description={t('emptyState.description')}
-          actionLabel={t('emptyState.action')}
-          onAction={clearFilters}
-        />
-      ) : (
-        <div className="space-y-4">
-          {viewMode === 'table' ? (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t('columns.project')}</TableHead>
-                  <TableHead>{t('columns.client')}</TableHead>
-                  <TableHead>{t('columns.status')}</TableHead>
-                  <TableHead>{t('columns.progress')}</TableHead>
-                  <TableHead>{t('columns.team')}</TableHead>
-                  <TableHead>{t('columns.hours')}</TableHead>
-                  <TableHead>{t('columns.dates')}</TableHead>
-                  <TableHead>{t('columns.budget')}</TableHead>
-                  <TableHead className="text-right">
-                    {t('columns.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {paginatedProjects.map((project) => {
-                  const teamSize = project.teamMemberIds.length;
-                  const previewText = getPreviewText(project.description, 84);
-                  const contractName = contractNameById.get(project.contractId);
-
-                  return (
-                    <TableRow key={project.id} className="hover:bg-muted/30">
-                      <TableCell>
-                        <div className="flex items-start gap-3">
-                          <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-sm font-semibold text-primary">
-                            {getInitials(project.name)}
-                          </div>
-                          <div className="space-y-1.5">
-                            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-                              <Link
-                                href={`/operations/projects/${project.id}`}
-                                className="font-medium text-foreground transition hover:text-primary"
-                              >
-                                {project.name}
-                              </Link>
-                              {contractName ? (
-                                <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">
-                                  {contractName}
-                                </span>
-                              ) : null}
-                            </div>
-                            <p className="text-xs font-medium text-muted-foreground">
-                              {project.client}
-                            </p>
-                            <p className="max-w-[320px] text-xs leading-relaxed text-muted-foreground">
-                              {previewText}
-                            </p>
-                          </div>
-                        </div>
-                      </TableCell>
-                      <TableCell>{project.client}</TableCell>
-                      <TableCell>
-                        <StatusBadge
-                          label={getStatusLabel(project.status)}
-                          className={getProjectBadgeClasses(project.status)}
-                        />
-                      </TableCell>
-                      <TableCell className="min-w-[180px]">
-                        <div className="space-y-2">
-                          <div className="flex items-center justify-between text-xs text-muted-foreground">
-                            <span>{project.progress}%</span>
-                          </div>
-                          <Progress value={project.progress} />
-                        </div>
-                      </TableCell>
-                      <TableCell>{teamSize}</TableCell>
-                      <TableCell>{formatHours(project.hoursLogged)}</TableCell>
-                      <TableCell>
-                        <div className="text-xs text-muted-foreground">
-                          <p>{formatDate(project.startDate)}</p>
-                          <p>{formatDate(project.endDate)}</p>
-                        </div>
-                      </TableCell>
-                      <TableCell>{formatCurrency(project.budget)}</TableCell>
-                      <TableCell>
-                        <div className="flex justify-end gap-2">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => openEditSheet(project)}
-                          >
-                            <SquarePen className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          ) : (
-            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
-              {paginatedProjects.map((project) => {
-                const memberNames = project.teamMemberIds
-                  .map((id) => userNameById.get(id))
-                  .filter((value): value is string => Boolean(value));
-                const previewText = getPreviewText(project.description, 150);
-                const contractName = contractNameById.get(project.contractId);
-
-                return (
-                  <Card
-                    key={project.id}
-                    className="group overflow-hidden border-border/70 bg-background shadow-none transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5"
-                  >
-                    <div
-                      className={`h-1.5 w-full bg-linear-to-r ${PROJECT_STATUS_ACCENTS[project.status]}`}
-                    />
-                    <CardContent className="space-y-5 p-5">
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex items-start gap-3">
-                          <div className="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-sm font-semibold text-primary shadow-sm">
-                            {getInitials(project.name)}
-                          </div>
-                          <div className="space-y-1">
-                            <div className="flex items-center gap-2">
-                              <Link
-                                href={`/operations/projects/${project.id}`}
-                                className="text-base font-semibold leading-tight transition group-hover:text-primary"
-                              >
-                                {project.name}
-                              </Link>
-                              <ChevronRight className="h-4 w-4 text-muted-foreground transition group-hover:translate-x-0.5 group-hover:text-primary" />
-                            </div>
-                            <p className="text-sm font-medium text-muted-foreground">
-                              {project.client}
-                            </p>
-                            {contractName ? (
-                              <p className="text-xs text-muted-foreground/90">
-                                {contractName}
-                              </p>
-                            ) : null}
-                          </div>
-                        </div>
-                        <StatusBadge
-                          label={getStatusLabel(project.status)}
-                          className={getProjectBadgeClasses(project.status)}
-                        />
-                      </div>
-
-                      <p className="min-h-10 text-sm leading-relaxed text-muted-foreground">
-                        {previewText}
-                      </p>
-
-                      <div className="rounded-2xl border bg-muted/20 p-4">
-                        <div className="mb-2 flex items-center justify-between text-sm">
-                          <span className="font-medium text-foreground">
-                            {t('progress')}
-                          </span>
-                          <span className="text-sm font-semibold text-foreground">
-                            {project.progress}%
-                          </span>
-                        </div>
-                        <Progress value={project.progress} />
-                      </div>
-
-                      <div className="grid gap-3 sm:grid-cols-2">
-                        <div className="rounded-xl border bg-background px-3 py-3">
-                          <p className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
-                            {t('hoursLogged')}
-                          </p>
-                          <p className="mt-1 text-sm font-semibold text-foreground">
-                            {formatHours(project.hoursLogged)}
-                          </p>
-                        </div>
-                        <div className="rounded-xl border bg-background px-3 py-3">
-                          <p className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
-                            {t('budget')}
-                          </p>
-                          <p className="mt-1 text-sm font-semibold text-foreground">
-                            {formatCurrency(project.budget)}
-                          </p>
-                        </div>
-                        <div className="rounded-xl border bg-background px-3 py-3">
-                          <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
-                            <Users className="h-3.5 w-3.5" />
-                            <span>{t('teamMembers')}</span>
-                          </div>
-                          <p className="mt-1 text-sm font-semibold text-foreground">
-                            {memberNames.length}
-                          </p>
-                        </div>
-                        <div className="rounded-xl border bg-background px-3 py-3">
-                          <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
-                            <CalendarDays className="h-3.5 w-3.5" />
-                            <span>{t('dateRange')}</span>
-                          </div>
-                          <p className="mt-1 text-sm font-semibold text-foreground">
-                            {formatDate(project.endDate)}
-                          </p>
-                        </div>
-                      </div>
-
-                      <div className="flex items-center justify-between gap-3 border-t pt-4">
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-center -space-x-2">
-                            {memberNames.slice(0, 3).map((name) => (
-                              <div
-                                key={name}
-                                className="flex size-8 items-center justify-center rounded-full border-2 border-background bg-primary/10 text-[11px] font-semibold text-primary"
-                                title={name}
-                              >
-                                {getInitials(name)}
-                              </div>
-                            ))}
-                            {memberNames.length > 3 ? (
-                              <div className="flex size-8 items-center justify-center rounded-full border-2 border-background bg-muted text-[11px] font-semibold text-muted-foreground">
-                                +{memberNames.length - 3}
-                              </div>
-                            ) : null}
-                          </div>
-                          <p className="mt-2 truncate text-xs text-muted-foreground">
-                            {memberNames.join(', ') || '-'}
-                          </p>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <div className="hidden items-center gap-1 rounded-full bg-muted px-2.5 py-1 text-[11px] text-muted-foreground md:flex">
-                            <Clock3 className="h-3 w-3" />
-                            {formatDate(project.startDate)}
-                          </div>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => openEditSheet(project)}
-                          >
-                            <SquarePen className="mr-2 h-4 w-4" />
-                            {t('actions.edit')}
-                          </Button>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                );
-              })}
-            </div>
-          )}
-
-          <PaginationFooter
-            currentPage={safePage}
-            pageSize={pageSize}
-            totalItems={filteredProjects.length}
-            onPageChange={setCurrentPage}
-            onPageSizeChange={(nextSize) => {
-              setPageSize(nextSize);
-              setCurrentPage(1);
-            }}
-            pageSizeOptions={PAGE_SIZE_OPTIONS}
-          />
-        </div>
-      )}
-
-      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
-          <SheetHeader>
-            <SheetTitle>
-              {editingProject ? t('sheet.editTitle') : t('sheet.createTitle')}
-            </SheetTitle>
-            <SheetDescription>
-              {editingProject
-                ? t('sheet.editDescription')
-                : t('sheet.createDescription')}
-            </SheetDescription>
-          </SheetHeader>
-
-          <Form {...form}>
-            <form
-              className="space-y-4 px-4"
-              onSubmit={form.handleSubmit(onSubmit)}
-            >
-              <div className="grid gap-4 md:grid-cols-2">
-                <FormField
-                  control={form.control}
-                  name="name"
-                  render={({ field }) => (
-                    <FormItem className="md:col-span-2">
-                      <FormLabel>{t('form.nameLabel')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          {...field}
-                          placeholder={t('form.namePlaceholder')}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="client"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.clientLabel')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          {...field}
-                          placeholder={t('form.clientPlaceholder')}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="contractId"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.contractLabel')}</FormLabel>
-                      <Select
-                        value={field.value}
-                        onValueChange={(value) => field.onChange(value)}
-                      >
-                        <FormControl>
-                          <SelectTrigger className="w-full">
-                            <SelectValue
-                              placeholder={t('form.contractPlaceholder')}
-                            />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          {contracts.map((contract) => (
-                            <SelectItem key={contract.id} value={contract.id}>
-                              {contract.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="status"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.statusLabel')}</FormLabel>
-                      <Select
-                        value={field.value}
-                        onValueChange={(value) => field.onChange(value)}
-                      >
-                        <FormControl>
-                          <SelectTrigger className="w-full">
-                            <SelectValue
-                              placeholder={t('form.statusPlaceholder')}
-                            />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          <SelectItem value="planning">
-                            {t('statusOptions.planning')}
-                          </SelectItem>
-                          <SelectItem value="active">
-                            {t('statusOptions.active')}
-                          </SelectItem>
-                          <SelectItem value="at-risk">
-                            {t('statusOptions.atRisk')}
-                          </SelectItem>
-                          <SelectItem value="paused">
-                            {t('statusOptions.paused')}
-                          </SelectItem>
-                          <SelectItem value="completed">
-                            {t('statusOptions.completed')}
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="progress"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.progressLabel')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          {...field}
-                          type="number"
-                          min={0}
-                          max={100}
-                          placeholder={t('form.progressPlaceholder')}
-                          value={field.value}
-                          onChange={(event) =>
-                            field.onChange(Number(event.target.value))
-                          }
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="hoursLogged"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.hoursLabel')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          {...field}
-                          type="number"
-                          min={0}
-                          step={1}
-                          placeholder={t('form.hoursPlaceholder')}
-                          value={field.value}
-                          onChange={(event) =>
-                            field.onChange(Number(event.target.value))
-                          }
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="budget"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.budgetLabel')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          {...field}
-                          type="number"
-                          min={0}
-                          step={500}
-                          placeholder={t('form.budgetPlaceholder')}
-                          value={field.value}
-                          onChange={(event) =>
-                            field.onChange(Number(event.target.value))
-                          }
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="startDate"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.startDateLabel')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          {...field}
-                          type="date"
-                          placeholder={t('form.startDatePlaceholder')}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="endDate"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('form.endDateLabel')}</FormLabel>
-                      <FormControl>
-                        <Input
-                          {...field}
-                          type="date"
-                          placeholder={t('form.endDatePlaceholder')}
-                        />
-                      </FormControl>
-                      <FormMessage>
-                        {form.formState.errors.endDate?.message ===
-                        'invalidDateRange'
-                          ? t('form.invalidDateRange')
-                          : undefined}
-                      </FormMessage>
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="teamMemberIds"
-                  render={({ field }) => (
-                    <FormItem className="md:col-span-2">
-                      <FormLabel>{t('form.teamMembersLabel')}</FormLabel>
-                      <div className="grid gap-2 rounded-md border p-3 sm:grid-cols-2">
-                        {users.map((user) => {
-                          const checked = field.value.includes(user.id);
-
-                          return (
-                            <label
-                              key={user.id}
-                              className="flex cursor-pointer items-center gap-2 rounded-sm p-1 hover:bg-muted/40"
-                            >
-                              <Checkbox
-                                checked={checked}
-                                onCheckedChange={(nextState) => {
-                                  if (nextState === true) {
-                                    field.onChange([...field.value, user.id]);
-                                    return;
-                                  }
-
-                                  field.onChange(
-                                    field.value.filter((id) => id !== user.id)
-                                  );
-                                }}
-                              />
-                              <span className="text-sm">{user.name}</span>
-                            </label>
-                          );
-                        })}
-                      </div>
-                      <FormDescription>
-                        {t('form.teamMembersDescription')}
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name="description"
-                  render={({ field }) => (
-                    <FormItem className="md:col-span-2">
-                      <FormLabel>{t('form.descriptionLabel')}</FormLabel>
-                      <FormControl>
-                        <div className="w-full max-w-full overflow-hidden rounded-md border">
-                          <RichTextEditor
-                            value={field.value}
-                            onChange={field.onChange}
-                            className="w-full"
-                          />
-                        </div>
-                      </FormControl>
-                      <FormDescription>
-                        {t('form.descriptionHint')}
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <SheetFooter className="px-0 pb-0">
-                <Button type="submit" className="w-full">
-                  {editingProject ? t('actions.save') : t('actions.create')}
-                </Button>
-              </SheetFooter>
-            </form>
-          </Form>
-        </SheetContent>
-      </Sheet>
-    </Page>
-  );
-}
+'use client';
+
+import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Eye, FileText, FolderKanban, Pencil } from 'lucide-react';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
+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 { OperationsProject } from '../_lib/types';
+import {
+  formatDate,
+  formatEnumLabel,
+  getStatusBadgeClass,
+} from '../_lib/utils/format';
+
+export default function OperationsProjectsPage() {
+  const t = useTranslations('operations.ProjectsPage');
+  const commonT = useTranslations('operations.Common');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const access = useOperationsAccess();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  const { data: projects = [], refetch } = useQuery<OperationsProject[]>({
+    queryKey: ['operations-projects-list', currentLocaleCode],
+    queryFn: () => fetchOperations<OperationsProject[]>(request, '/operations/projects'),
+  });
+
+  const filteredRows = useMemo(
+    () =>
+      projects.filter((item) => {
+        const matchesSearch = !search.trim()
+          ? true
+          : [
+              item.name,
+              item.code,
+              item.clientName,
+              item.managerName,
+              item.contractName,
+            ]
+              .filter(Boolean)
+              .some((value) =>
+                String(value).toLowerCase().includes(search.trim().toLowerCase())
+              );
+
+        const matchesStatus =
+          statusFilter === 'all' ? true : item.status === statusFilter;
+
+        return matchesSearch && matchesStatus;
+      }),
+    [projects, search, statusFilter]
+  );
+
+  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" asChild>
+              <Link href="/operations/projects/new">
+                {commonT('actions.create')}
+              </Link>
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={setSearch}
+        onSearch={() => undefined}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'status',
+            type: 'select',
+            value: statusFilter,
+            onChange: setStatusFilter,
+            placeholder: commonT('labels.status'),
+            options: [
+              { value: 'all', label: commonT('filters.allStatuses') },
+              { value: 'planning', label: formatEnumLabel('planning') },
+              { value: 'active', label: formatEnumLabel('active') },
+              { value: 'at_risk', label: formatEnumLabel('at_risk') },
+              { value: 'paused', label: formatEnumLabel('paused') },
+              { value: 'completed', label: formatEnumLabel('completed') },
+              { value: 'archived', label: formatEnumLabel('archived') },
+            ],
+          },
+        ]}
+      />
+
+      {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 ? (
+                      <StatusBadge
+                        label={formatEnumLabel(project.contractStatus)}
+                        className={getStatusBadgeClass(project.contractStatus)}
+                      />
+                    ) : (
+                      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 ? (
+                        <Button variant="outline" size="icon" asChild>
+                          <Link href={`/operations/projects/${project.id}/edit`}>
+                            <Pencil 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 ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => void toggleArchived(project)}
+                        >
+                          {project.status === 'archived'
+                            ? commonT('actions.activate')
+                            : t('actions.archive')}
+                        </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
+              ? () => {
+                  window.location.href = '/operations/projects/new';
+                }
+              : () => void refetch()
+          }
+        />
+      )}
+    </Page>
+  );
+}