@hed-hog/operations 0.0.302 → 0.0.304

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

@@ -2,7 +2,6 @@
 
 import { EmptyState, Page, SearchBar } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Sheet,
@@ -65,7 +64,10 @@ export default function OperationsProjectsPage() {
   const editProjectId = parseEditProjectId(searchParams.get('edit'));
   const isSheetOpen = createParam === '1' || editProjectId !== null;
 
-  const updateSheetQuery = (next: { create?: boolean; editId?: number | null }) => {
+  const updateSheetQuery = (next: {
+    create?: boolean;
+    editId?: number | null;
+  }) => {
     const params = new URLSearchParams(searchParams.toString());
 
     params.delete('create');
@@ -117,7 +119,9 @@ export default function OperationsProjectsPage() {
             ]
               .filter(Boolean)
               .some((value) =>
-                String(value).toLowerCase().includes(search.trim().toLowerCase())
+                String(value)
+                  .toLowerCase()
+                  .includes(search.trim().toLowerCase())
               );
 
         const matchesStatus =
@@ -133,24 +137,28 @@ export default function OperationsProjectsPage() {
       {
         key: 'total',
         title: t('cards.total'),
+        description: t('cards.totalDescription'),
         value: projects.length,
         icon: FolderKanban,
       },
       {
         key: 'active',
         title: t('cards.active'),
+        description: t('cards.activeDescription'),
         value: projects.filter((item) => item.status === 'active').length,
         icon: PlayCircle,
       },
       {
         key: 'atRisk',
         title: t('cards.atRisk'),
+        description: t('cards.atRiskDescription'),
         value: projects.filter((item) => item.status === 'at_risk').length,
         icon: ShieldAlert,
       },
       {
         key: 'upcomingDeliveries',
         title: t('cards.upcomingDeliveries'),
+        description: t('cards.upcomingDeliveriesDescription'),
         value: projects.filter((item) => Boolean(item.endDate)).length,
         icon: CalendarDays,
       },
@@ -220,139 +228,141 @@ export default function OperationsProjectsPage() {
       />
 
       {filteredRows.length > 0 ? (
-        <Card className="overflow-hidden border-border/60 py-0 shadow-sm">
-          <CardContent className="p-0">
-            <Table className="table-fixed">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[30%]">
-                    {commonT('labels.project')}
-                  </TableHead>
-                  <TableHead>{commonT('labels.client')}</TableHead>
-                  <TableHead>{commonT('labels.status')}</TableHead>
-                  <TableHead className="hidden lg:table-cell">
-                    {commonT('labels.manager')}
-                  </TableHead>
-                  <TableHead className="hidden md:table-cell">
-                    {commonT('labels.teamSize')}
-                  </TableHead>
-                  <TableHead className="hidden xl:table-cell">
-                    {commonT('labels.startDate')}
-                  </TableHead>
-                  <TableHead className="hidden xl:table-cell">
-                    {commonT('labels.endDate')}
-                  </TableHead>
-                  <TableHead className="hidden 2xl:table-cell">
-                    {commonT('labels.contractStatus')}
-                  </TableHead>
-                  <TableHead className="w-30 text-right sm:w-42.5">
-                    {commonT('labels.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredRows.map((project) => (
-                  <TableRow key={project.id} className="hover:bg-muted/30">
-                    <TableCell>
-                      <div className="min-w-0">
-                        <div className="truncate font-medium">{project.name}</div>
-                        <div className="truncate text-xs text-muted-foreground">
-                          {[project.code, project.myRoleLabel, project.contractName]
-                            .filter(Boolean)
-                            .join(' • ') || commonT('labels.notAvailable')}
-                        </div>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="truncate">
-                        {project.clientName || commonT('labels.notAvailable')}
+        <div className="overflow-x-auto rounded-md border">
+          <Table className="table-fixed">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[30%]">
+                  {commonT('labels.project')}
+                </TableHead>
+                <TableHead>{commonT('labels.client')}</TableHead>
+                <TableHead>{commonT('labels.status')}</TableHead>
+                <TableHead className="hidden lg:table-cell">
+                  {commonT('labels.manager')}
+                </TableHead>
+                <TableHead className="hidden md:table-cell">
+                  {commonT('labels.teamSize')}
+                </TableHead>
+                <TableHead className="hidden xl:table-cell">
+                  {commonT('labels.startDate')}
+                </TableHead>
+                <TableHead className="hidden xl:table-cell">
+                  {commonT('labels.endDate')}
+                </TableHead>
+                <TableHead className="hidden 2xl:table-cell">
+                  {commonT('labels.contractStatus')}
+                </TableHead>
+                <TableHead className="w-30 text-right sm:w-42.5">
+                  {commonT('labels.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredRows.map((project) => (
+                <TableRow key={project.id} className="cursor-pointer hover:bg-muted/30">
+                  <TableCell>
+                    <div className="min-w-0">
+                      <div className="truncate font-medium">{project.name}</div>
+                      <div className="truncate text-xs text-muted-foreground">
+                        {[
+                          project.code,
+                          project.myRoleLabel,
+                          project.contractName,
+                        ]
+                          .filter(Boolean)
+                          .join(' • ') || commonT('labels.notAvailable')}
                       </div>
-                    </TableCell>
-                    <TableCell>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="truncate">
+                      {project.clientName || commonT('labels.notAvailable')}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={formatEnumLabel(project.status)}
+                      className={getStatusBadgeClass(project.status)}
+                    />
+                  </TableCell>
+                  <TableCell className="hidden lg:table-cell">
+                    <div className="truncate">
+                      {project.managerName || commonT('labels.notAssigned')}
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden md:table-cell">
+                    {project.teamSize ?? 0}
+                  </TableCell>
+                  <TableCell className="hidden xl:table-cell">
+                    {formatDate(project.startDate)}
+                  </TableCell>
+                  <TableCell className="hidden xl:table-cell">
+                    {formatDate(project.endDate)}
+                  </TableCell>
+                  <TableCell className="hidden 2xl:table-cell">
+                    {project.contractStatus ? (
                       <StatusBadge
-                        label={formatEnumLabel(project.status)}
-                        className={getStatusBadgeClass(project.status)}
+                        label={formatEnumLabel(project.contractStatus)}
+                        className={getStatusBadgeClass(project.contractStatus)}
                       />
-                    </TableCell>
-                    <TableCell className="hidden lg:table-cell">
-                      <div className="truncate">
-                        {project.managerName || commonT('labels.notAssigned')}
-                      </div>
-                    </TableCell>
-                    <TableCell className="hidden md:table-cell">
-                      {project.teamSize ?? 0}
-                    </TableCell>
-                    <TableCell className="hidden xl:table-cell">
-                      {formatDate(project.startDate)}
-                    </TableCell>
-                    <TableCell className="hidden xl:table-cell">
-                      {formatDate(project.endDate)}
-                    </TableCell>
-                    <TableCell className="hidden 2xl:table-cell">
-                      {project.contractStatus ? (
-                        <StatusBadge
-                          label={formatEnumLabel(project.contractStatus)}
-                          className={getStatusBadgeClass(project.contractStatus)}
-                        />
-                      ) : (
-                        commonT('labels.notAssigned')
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex flex-wrap justify-end gap-1.5 sm:gap-2">
-                        <Button variant="outline" size="icon" asChild>
-                          <Link href={`/operations/projects/${project.id}`}>
-                            <Eye className="size-4" />
-                          </Link>
-                        </Button>
-                        {access.isDirector ? (
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            className="cursor-pointer"
-                            onClick={() => openEditSheet(project.id)}
-                          >
-                            <Pencil className="size-4" />
-                          </Button>
-                        ) : null}
+                    ) : (
+                      commonT('labels.notAssigned')
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-wrap justify-end gap-1.5 sm:gap-2">
+                      <Button variant="outline" size="icon" asChild>
+                        <Link href={`/operations/projects/${project.id}`}>
+                          <Eye className="size-4" />
+                        </Link>
+                      </Button>
+                      {access.isDirector ? (
                         <Button
                           variant="outline"
                           size="icon"
-                          asChild={Boolean(project.contractId)}
-                          disabled={!project.contractId}
+                          className="cursor-pointer"
+                          onClick={() => openEditSheet(project.id)}
                         >
-                          {project.contractId ? (
-                            <Link
-                              href={`/operations/contracts?edit=${project.contractId}`}
-                            >
-                              <FileText className="size-4" />
-                            </Link>
-                          ) : (
-                            <span>
-                              <FileText className="size-4" />
-                            </span>
-                          )}
+                          <Pencil className="size-4" />
                         </Button>
-                        {access.isDirector ? (
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="cursor-pointer"
-                            onClick={() => void toggleArchived(project)}
+                      ) : null}
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        asChild={Boolean(project.contractId)}
+                        disabled={!project.contractId}
+                      >
+                        {project.contractId ? (
+                          <Link
+                            href={`/operations/contracts?edit=${project.contractId}`}
                           >
-                            {project.status === 'archived'
-                              ? commonT('actions.activate')
-                              : t('actions.archive')}
-                          </Button>
-                        ) : null}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
+                            <FileText className="size-4" />
+                          </Link>
+                        ) : (
+                          <span>
+                            <FileText className="size-4" />
+                          </span>
+                        )}
+                      </Button>
+                      {access.isDirector ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="cursor-pointer"
+                          onClick={() => void toggleArchived(project)}
+                        >
+                          {project.status === 'archived'
+                            ? commonT('actions.activate')
+                            : t('actions.archive')}
+                        </Button>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
       ) : (
         <EmptyState
           icon={<FolderKanban className="size-12" />}