@hed-hog/operations 0.0.285 → 0.0.291

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

@@ -1,34 +1,427 @@
 'use client';
 
-import { Page } from '@/components/entity-list';
+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 { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 import { OperationsHeader } from '../_components/operations-header';
-import { SectionCard } from '../_components/section-card';
 import { StatusBadge } from '../_components/status-badge';
 import { useOperationsData } from '../_lib/hooks/use-operations-data';
-import { formatDate, formatHours } from '../_lib/utils/format';
-import {
-  getProjectBadgeClasses,
-  getProjectStatusLabel,
-} from '../_lib/utils/status';
+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 { projects, users } = useOperationsData();
+  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(
-    () =>
-      projects.filter((project) =>
-        `${project.name} ${project.client}`
+  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())
-      ),
-    [projects, search]
+          .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 (
@@ -37,75 +430,645 @@ export default function ProjectsPage() {
         title={t('title')}
         description={t('description')}
         current={t('breadcrumb')}
+        actions={headerActions}
       />
 
-      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
-        <div className="mb-4">
-          <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={t('searchPlaceholder')}
-          />
-        </div>
-        <div className="grid gap-4 xl:grid-cols-2">
-          {filteredProjects.map((project) => {
-            const memberNames = users
-              .filter((user) => project.teamMemberIds.includes(user.id))
-              .map((user) => user.name)
-              .join(', ');
-
-            return (
-              <Link
-                key={project.id}
-                href={`/operations/projects/${project.id}`}
-                className="rounded-xl border p-5 transition hover:border-primary/40 hover:shadow-md"
-              >
-                <div className="space-y-4">
-                  <div className="flex items-start justify-between gap-4">
-                    <div>
-                      <p className="text-lg font-semibold">{project.name}</p>
-                      <p className="text-sm text-muted-foreground">
-                        {project.client}
-                      </p>
-                    </div>
-                    <StatusBadge
-                      label={getProjectStatusLabel(project.status)}
-                      className={getProjectBadgeClasses(project.status)}
+      <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]}`}
                     />
-                  </div>
-
-                  <div>
-                    <div className="mb-2 flex items-center justify-between text-sm">
-                      <span>{t('progress')}</span>
-                      <span>{project.progress}%</span>
-                    </div>
-                    <Progress value={project.progress} />
-                  </div>
-
-                  <div className="grid gap-3 text-sm sm:grid-cols-2">
-                    <p>
-                      <span className="font-medium">{t('teamMembers')}:</span>{' '}
-                      {memberNames}
-                    </p>
-                    <p>
-                      <span className="font-medium">{t('hoursLogged')}:</span>{' '}
-                      {formatHours(project.hoursLogged)}
-                    </p>
-                    <p>
-                      <span className="font-medium">{t('startDate')}:</span>{' '}
-                      {formatDate(project.startDate)}
-                    </p>
-                    <p>
-                      <span className="font-medium">{t('endDate')}:</span>{' '}
-                      {formatDate(project.endDate)}
-                    </p>
-                  </div>
-                </div>
-              </Link>
-            );
-          })}
+                    <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>
-      </SectionCard>
+      )}
+
+      <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>
   );
 }