@hed-hog/operations 0.0.304 → 0.0.305

package/hedhog/frontend/app/projects/[id]/edit/page.tsx.ejs

@@ -7,5 +7,5 @@ export default async function OperationsProjectEditPage({
 }) {
   const { id } = await params;
 
-  redirect(`/operations/projects?edit=${id}`);
+  redirect(`/operations/projects/${id}?edit=1`);
 }

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

@@ -2,6 +2,7 @@
 
 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,
@@ -18,12 +19,15 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   CalendarDays,
   Eye,
   FileText,
   FolderKanban,
+  LayoutGrid,
+  List,
   Pencil,
   PlayCircle,
   ShieldAlert,
@@ -44,6 +48,10 @@ import {
   getStatusBadgeClass,
 } from '../_lib/utils/format';
 
+const PROJECT_VIEW_STORAGE_KEY = 'operations-projects-view-mode';
+
+type ProjectViewMode = 'table' | 'cards';
+
 function parseEditProjectId(value: string | null) {
   const parsed = Number(value);
   return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
@@ -52,13 +60,23 @@ function parseEditProjectId(value: string | null) {
 export default function OperationsProjectsPage() {
   const t = useTranslations('operations.ProjectsPage');
   const commonT = useTranslations('operations.Common');
-  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const access = useOperationsAccess();
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
+  const [viewMode, setViewMode] = useState<ProjectViewMode>(() => {
+    if (typeof window === 'undefined') {
+      return 'table';
+    }
+
+    const savedViewMode = window.localStorage.getItem(PROJECT_VIEW_STORAGE_KEY);
+
+    return savedViewMode === 'cards' ? 'cards' : 'table';
+  });
 
   const createParam = searchParams.get('create');
   const editProjectId = parseEditProjectId(searchParams.get('edit'));
@@ -140,6 +158,8 @@ export default function OperationsProjectsPage() {
         description: t('cards.totalDescription'),
         value: projects.length,
         icon: FolderKanban,
+        accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+        iconContainerClassName: 'bg-slate-100 text-slate-700',
       },
       {
         key: 'active',
@@ -147,6 +167,8 @@ export default function OperationsProjectsPage() {
         description: t('cards.activeDescription'),
         value: projects.filter((item) => item.status === 'active').length,
         icon: PlayCircle,
+        accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
+        iconContainerClassName: 'bg-green-50 text-green-600',
       },
       {
         key: 'atRisk',
@@ -154,6 +176,8 @@ export default function OperationsProjectsPage() {
         description: t('cards.atRiskDescription'),
         value: projects.filter((item) => item.status === 'at_risk').length,
         icon: ShieldAlert,
+        accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
+        iconContainerClassName: 'bg-amber-50 text-amber-600',
       },
       {
         key: 'upcomingDeliveries',
@@ -161,11 +185,25 @@ export default function OperationsProjectsPage() {
         description: t('cards.upcomingDeliveriesDescription'),
         value: projects.filter((item) => Boolean(item.endDate)).length,
         icon: CalendarDays,
+        accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
+        iconContainerClassName: 'bg-blue-50 text-blue-600',
       },
     ],
     [projects, t]
   );
 
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') {
+      return;
+    }
+
+    setViewMode(value);
+
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(PROJECT_VIEW_STORAGE_KEY, value);
+    }
+  };
+
   const toggleArchived = async (project: OperationsProject) => {
     const nextStatus = project.status === 'archived' ? 'active' : 'archived';
 
@@ -202,67 +240,81 @@ export default function OperationsProjectsPage() {
 
       <KpiCardsGrid items={statsCards} columns={4} />
 
-      <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') },
-            ],
-          },
-        ]}
-      />
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            className="w-full"
+            searchQuery={search}
+            onSearchChange={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') },
+                ],
+              },
+            ]}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3 xl:justify-end">
+          <span className="text-xs font-medium text-muted-foreground">
+            {t('viewMode')}
+          </span>
+          <ToggleGroup
+            type="single"
+            value={viewMode}
+            onValueChange={handleViewModeChange}
+            variant="outline"
+            size="sm"
+            aria-label={t('viewMode')}
+          >
+            <ToggleGroupItem
+              value="table"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeTable')}
+            >
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="cards"
+              className="gap-1.5 px-2.5"
+              aria-label={t('viewModeCards')}
+            >
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeCards')}</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+      </div>
 
       {filteredRows.length > 0 ? (
-        <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>
+        viewMode === 'cards' ? (
+          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
+            {filteredRows.map((project) => (
+              <Card
+                key={project.id}
+                className="cursor-pointer overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
+              >
+                <CardContent className="space-y-4 p-4">
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                     <div className="min-w-0">
-                      <div className="truncate font-medium">{project.name}</div>
+                      <div className="truncate font-semibold">
+                        {project.name}
+                      </div>
                       <div className="truncate text-xs text-muted-foreground">
                         {[
                           project.code,
@@ -273,96 +325,271 @@ export default function OperationsProjectsPage() {
                           .join(' • ') || commonT('labels.notAvailable')}
                       </div>
                     </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">
+                  </div>
+
+                  <div className="grid gap-2 text-sm text-muted-foreground lg:grid-cols-2">
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.client')}:
+                      </span>{' '}
+                      {project.clientName || commonT('labels.notAvailable')}
+                    </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.manager')}:
+                      </span>{' '}
                       {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>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.teamSize')}:
+                      </span>{' '}
+                      {project.teamSize ?? 0}
+                    </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.startDate')}:
+                      </span>{' '}
+                      {formatDate(
+                        project.startDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </div>
+                    <div>
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.endDate')}:
+                      </span>{' '}
+                      {formatDate(
+                        project.endDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium text-foreground">
+                        {commonT('labels.contractStatus')}:
+                      </span>
+                      {project.contractStatus ? (
+                        <StatusBadge
+                          label={formatEnumLabel(project.contractStatus)}
+                          className={getStatusBadgeClass(
+                            project.contractStatus
+                          )}
+                        />
+                      ) : (
+                        <span>{commonT('labels.notAssigned')}</span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex flex-wrap justify-end gap-2 border-t border-border/60 pt-3">
+                    <Button variant="outline" size="icon" asChild>
+                      <Link href={`/operations/projects/${project.id}`}>
+                        <Eye className="size-4" />
+                      </Link>
+                    </Button>
+                    {access.isDirector ? (
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="cursor-pointer"
+                        onClick={() => openEditSheet(project.id)}
+                      >
+                        <Pencil className="size-4" />
                       </Button>
-                      {access.isDirector ? (
-                        <Button
-                          variant="outline"
-                          size="icon"
-                          className="cursor-pointer"
-                          onClick={() => openEditSheet(project.id)}
+                    ) : null}
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      asChild={Boolean(project.contractId)}
+                      disabled={!project.contractId}
+                    >
+                      {project.contractId ? (
+                        <Link
+                          href={`/operations/contracts?edit=${project.contractId}`}
                         >
-                          <Pencil className="size-4" />
-                        </Button>
-                      ) : null}
+                          <FileText className="size-4" />
+                        </Link>
+                      ) : (
+                        <span>
+                          <FileText className="size-4" />
+                        </span>
+                      )}
+                    </Button>
+                    {access.isDirector ? (
                       <Button
                         variant="outline"
-                        size="icon"
-                        asChild={Boolean(project.contractId)}
-                        disabled={!project.contractId}
+                        size="sm"
+                        className="cursor-pointer"
+                        onClick={() => void toggleArchived(project)}
                       >
-                        {project.contractId ? (
-                          <Link
-                            href={`/operations/contracts?edit=${project.contractId}`}
-                          >
-                            <FileText className="size-4" />
-                          </Link>
-                        ) : (
-                          <span>
-                            <FileText className="size-4" />
-                          </span>
-                        )}
+                        {project.status === 'archived'
+                          ? commonT('actions.activate')
+                          : t('actions.archive')}
                       </Button>
-                      {access.isDirector ? (
+                    ) : null}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded-md border">
+            <Table className="table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[30%]">
+                    {commonT('labels.project')}
+                  </TableHead>
+                  <TableHead>{commonT('labels.client')}</TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead className="hidden lg:table-cell">
+                    {commonT('labels.manager')}
+                  </TableHead>
+                  <TableHead className="hidden md:table-cell">
+                    {commonT('labels.teamSize')}
+                  </TableHead>
+                  <TableHead className="hidden xl:table-cell">
+                    {commonT('labels.startDate')}
+                  </TableHead>
+                  <TableHead className="hidden xl:table-cell">
+                    {commonT('labels.endDate')}
+                  </TableHead>
+                  <TableHead className="hidden 2xl:table-cell">
+                    {commonT('labels.contractStatus')}
+                  </TableHead>
+                  <TableHead className="w-30 text-right sm:w-42.5">
+                    {commonT('labels.actions')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredRows.map((project) => (
+                  <TableRow
+                    key={project.id}
+                    className="cursor-pointer hover:bg-muted/30"
+                  >
+                    <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>
+                    </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,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell className="hidden xl:table-cell">
+                      {formatDate(
+                        project.endDate,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell className="hidden 2xl:table-cell">
+                      {project.contractStatus ? (
+                        <StatusBadge
+                          label={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}
                         <Button
                           variant="outline"
-                          size="sm"
-                          className="cursor-pointer"
-                          onClick={() => void toggleArchived(project)}
+                          size="icon"
+                          asChild={Boolean(project.contractId)}
+                          disabled={!project.contractId}
                         >
-                          {project.status === 'archived'
-                            ? commonT('actions.activate')
-                            : t('actions.archive')}
+                          {project.contractId ? (
+                            <Link
+                              href={`/operations/contracts?edit=${project.contractId}`}
+                            >
+                              <FileText className="size-4" />
+                            </Link>
+                          ) : (
+                            <span>
+                              <FileText className="size-4" />
+                            </span>
+                          )}
                         </Button>
-                      ) : null}
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+                        {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" />}