@hed-hog/operations 0.0.322 → 0.0.326

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

@@ -0,0 +1,607 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PaginationFooter,
+  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,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Building2, LayoutGrid, List, Pencil, Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+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 { OperationsDepartment, PaginatedResponse } from '../_lib/types';
+import { formatEnumLabel, getStatusBadgeClass } from '../_lib/utils/format';
+
+type DepartmentFormState = {
+  name: string;
+  code: string;
+  description: string;
+  status: 'active' | 'inactive';
+};
+
+const EMPTY_FORM_STATE: DepartmentFormState = {
+  name: '',
+  code: '',
+  description: '',
+  status: 'active',
+};
+
+export default function OperationsDepartmentsPage() {
+  const t = useTranslations('operations.DepartmentsPage');
+  const commonT = useTranslations('operations.Common');
+  const collaboratorFormT = useTranslations('operations.CollaboratorFormPage');
+  const { request, showToastHandler, currentLocaleCode } = useApp();
+  const getStatusLabel = (value?: string | null) =>
+    value
+      ? collaboratorFormT.has(`options.statuses.${value}`)
+        ? collaboratorFormT(`options.statuses.${value}`)
+        : formatEnumLabel(value)
+      : '-';
+  const access = useOperationsAccess();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<
+    'all' | 'active' | 'inactive'
+  >('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
+    if (typeof window === 'undefined') return 'table';
+    const saved = window.localStorage.getItem(
+      'operations-departments-view-mode'
+    );
+    return saved === 'cards' ? 'cards' : 'table';
+  });
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [editingDepartment, setEditingDepartment] =
+    useState<OperationsDepartment | null>(null);
+  const [form, setForm] = useState<DepartmentFormState>(EMPTY_FORM_STATE);
+
+  const {
+    data: departmentsResponse,
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResponse<OperationsDepartment>>({
+    queryKey: [
+      'operations-departments-list',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      page,
+      pageSize,
+    ],
+    enabled: access.isDirector,
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+      if (search.trim()) params.set('search', search.trim());
+      if (statusFilter !== 'all') params.set('status', statusFilter);
+      return fetchOperations<PaginatedResponse<OperationsDepartment>>(
+        request,
+        `/operations/departments?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
+  });
+
+  const departments = departmentsResponse?.data ?? [];
+
+  const statsCards = useMemo(
+    () => [
+      {
+        key: 'total',
+        title: t('cards.total'),
+        value: departments.length,
+        icon: Building2,
+      },
+      {
+        key: 'active',
+        title: t('cards.active'),
+        value: departments.filter((item) => item.status === 'active').length,
+        icon: Building2,
+      },
+      {
+        key: 'linkedCollaborators',
+        title: t('cards.linkedCollaborators'),
+        value: departments.reduce(
+          (total, item) => total + Number(item.collaboratorCount ?? 0),
+          0
+        ),
+        icon: Users,
+      },
+      {
+        key: 'inactive',
+        title: t('cards.inactive'),
+        value: departments.filter((item) => item.status === 'inactive').length,
+        icon: Building2,
+      },
+    ],
+    [departments, t]
+  );
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') return;
+    setViewMode(value as 'table' | 'cards');
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('operations-departments-view-mode', value);
+    }
+  };
+
+  const updateForm = <K extends keyof DepartmentFormState>(
+    field: K,
+    value: DepartmentFormState[K]
+  ) => {
+    setForm((current) => ({
+      ...current,
+      [field]: value,
+    }));
+  };
+
+  const openCreateSheet = () => {
+    setEditingDepartment(null);
+    setForm(EMPTY_FORM_STATE);
+    setIsSheetOpen(true);
+  };
+
+  const openEditSheet = (department: OperationsDepartment) => {
+    setEditingDepartment(department);
+    setForm({
+      name: department.name ?? '',
+      code: department.code ?? '',
+      description: department.description ?? '',
+      status: department.status ?? 'active',
+    });
+    setIsSheetOpen(true);
+  };
+
+  const saveDepartment = async () => {
+    if (!form.name.trim()) {
+      showToastHandler?.('error', t('messages.requiredFields'));
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      await mutateOperations(
+        request,
+        editingDepartment
+          ? `/operations/departments/${editingDepartment.id}`
+          : '/operations/departments',
+        editingDepartment ? 'PATCH' : 'POST',
+        {
+          name: form.name.trim(),
+          code: form.code.trim() || null,
+          description: form.description.trim() || null,
+          status: form.status,
+        }
+      );
+
+      showToastHandler?.('success', t('messages.saveSuccess'));
+      setIsSheetOpen(false);
+      setEditingDepartment(null);
+      setForm(EMPTY_FORM_STATE);
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.saveError'));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const toggleStatus = async (department: OperationsDepartment) => {
+    const nextStatus = department.status === 'inactive' ? 'active' : 'inactive';
+
+    try {
+      await mutateOperations(
+        request,
+        `/operations/departments/${department.id}`,
+        'PATCH',
+        { status: nextStatus }
+      );
+      showToastHandler?.('success', t('messages.statusSuccess'));
+      await refetch();
+    } catch {
+      showToastHandler?.('error', t('messages.statusError'));
+    }
+  };
+
+  if (!access.isLoading && !access.isDirector) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+          actions={
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/operations/collaborators">
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+          }
+        />
+
+        <EmptyState
+          icon={<Building2 className="size-12" />}
+          title={commonT('states.noAccessTitle')}
+          description={t('noAccessDescription')}
+          actionLabel={commonT('actions.back')}
+          onAction={() => {
+            window.location.href = '/operations';
+          }}
+        />
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link href="/operations/collaborators">
+                {commonT('actions.back')}
+              </Link>
+            </Button>
+            <Button size="sm" onClick={openCreateSheet}>
+              {commonT('actions.create')}
+            </Button>
+          </div>
+        }
+      />
+
+      <KpiCardsGrid items={statsCards} columns={4} />
+
+      <div className="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-center">
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={(value) => {
+              setSearch(value);
+              setPage(1);
+            }}
+            showSearchButton={false}
+            debounceMs={500}
+            placeholder={t('searchPlaceholder')}
+            controls={[
+              {
+                id: 'status',
+                type: 'select',
+                value: statusFilter,
+                onChange: (value) => {
+                  setStatusFilter(
+                    (value as 'all' | 'active' | 'inactive') ?? 'all'
+                  );
+                  setPage(1);
+                },
+                placeholder: commonT('labels.status'),
+                options: [
+                  { value: 'all', label: commonT('filters.allStatuses') },
+                  { value: 'active', label: getStatusLabel('active') },
+                  { value: 'inactive', label: getStatusLabel('inactive') },
+                ],
+              },
+            ]}
+          />
+        </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>
+
+      {isLoading ? (
+        <div className="rounded-md border px-4 py-6 text-sm text-muted-foreground">
+          {commonT('actions.refresh')}...
+        </div>
+      ) : departments.length > 0 ? (
+        viewMode === 'cards' ? (
+          <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
+            {departments.map((department) => (
+              <Card
+                key={department.id}
+                className="cursor-pointer overflow-hidden border-border/60 py-0 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
+                onClick={() => openEditSheet(department)}
+              >
+                <CardContent className="space-y-3 p-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="truncate font-semibold">
+                        {department.name}
+                      </div>
+                      {department.code ? (
+                        <div className="truncate text-xs text-muted-foreground">
+                          {department.code}
+                        </div>
+                      ) : null}
+                    </div>
+                    <StatusBadge
+                      label={getStatusLabel(department.status)}
+                      className={getStatusBadgeClass(department.status)}
+                    />
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    <span className="inline-flex items-center rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
+                      {Number(department.collaboratorCount ?? 0)}{' '}
+                      {commonT('labels.collaborators')}
+                    </span>
+                  </div>
+                  {department.description ? (
+                    <p className="line-clamp-2 text-sm text-muted-foreground">
+                      {department.description}
+                    </p>
+                  ) : null}
+                  <div className="flex justify-end gap-2 border-t border-border/60 pt-3">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEditSheet(department);
+                      }}
+                    >
+                      <Pencil className="size-4" />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        void toggleStatus(department);
+                      }}
+                    >
+                      {department.status === 'inactive'
+                        ? commonT('actions.activate')
+                        : commonT('actions.deactivate')}
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="overflow-x-auto rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('columns.name')}</TableHead>
+                  <TableHead>{t('columns.code')}</TableHead>
+                  <TableHead>{t('columns.description')}</TableHead>
+                  <TableHead>{t('columns.collaborators')}</TableHead>
+                  <TableHead>{commonT('labels.status')}</TableHead>
+                  <TableHead className="text-right">
+                    {commonT('labels.actions')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {departments.map((department) => (
+                  <TableRow key={department.id}>
+                    <TableCell className="font-medium">
+                      {department.name}
+                    </TableCell>
+                    <TableCell>{department.code || '—'}</TableCell>
+                    <TableCell className="max-w-md text-sm text-muted-foreground">
+                      {department.description || commonT('labels.notAvailable')}
+                    </TableCell>
+                    <TableCell>
+                      {Number(department.collaboratorCount ?? 0)}
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={getStatusLabel(department.status)}
+                        className={getStatusBadgeClass(department.status)}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="cursor-pointer"
+                          onClick={() => openEditSheet(department)}
+                        >
+                          <Pencil className="size-4" />
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="cursor-pointer"
+                          onClick={() => void toggleStatus(department)}
+                        >
+                          {department.status === 'inactive'
+                            ? commonT('actions.activate')
+                            : commonT('actions.deactivate')}
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )
+      ) : (
+        <EmptyState
+          icon={<Building2 className="size-12" />}
+          title={commonT('states.emptyTitle')}
+          description={t('emptyDescription')}
+          actionLabel={commonT('actions.create')}
+          onAction={openCreateSheet}
+        />
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={departmentsResponse?.total ?? 0}
+        pageSizeOptions={[12, 24, 48]}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(1);
+        }}
+      />
+
+      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>
+              {editingDepartment
+                ? t('sheet.editTitle')
+                : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <form
+            className="mt-6 space-y-4 px-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void saveDepartment();
+            }}
+          >
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="department-name">
+                {t('form.name')}
+              </label>
+              <input
+                id="department-name"
+                value={form.name}
+                onChange={(event) => updateForm('name', event.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                placeholder={t('form.name')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="department-code">
+                {t('form.code')}
+              </label>
+              <input
+                id="department-code"
+                value={form.code}
+                onChange={(event) => updateForm('code', event.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                placeholder={t('form.code')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label
+                className="text-sm font-medium"
+                htmlFor="department-description"
+              >
+                {t('form.description')}
+              </label>
+              <textarea
+                id="department-description"
+                value={form.description}
+                onChange={(event) =>
+                  updateForm('description', event.target.value)
+                }
+                className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                placeholder={t('form.description')}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label
+                className="text-sm font-medium"
+                htmlFor="department-status"
+              >
+                {t('form.status')}
+              </label>
+              <select
+                id="department-status"
+                value={form.status}
+                onChange={(event) =>
+                  updateForm(
+                    'status',
+                    event.target.value === 'inactive' ? 'inactive' : 'active'
+                  )
+                }
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+              >
+                <option value="active">{getStatusLabel('active')}</option>
+                <option value="inactive">{getStatusLabel('inactive')}</option>
+              </select>
+            </div>
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setIsSheetOpen(false)}
+              >
+                {commonT('actions.cancel')}
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {commonT('actions.save')}
+              </Button>
+            </div>
+          </form>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/layout.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export default function OperationsLayout({ children, }: {
+    children: ReactNode;
+}): ReactNode;
+//# sourceMappingURL=layout.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,aAEA"}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/layout.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = OperationsLayout;
+function OperationsLayout({ children, }) {
+    return children;
+}
+//# sourceMappingURL=layout.js.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["layout.tsx"],"names":[],"mappings":";;AAEA,mCAMC;AAND,SAAwB,gBAAgB,CAAC,EACvC,QAAQ,GAGT;IACC,OAAO,QAAQ,CAAC;AAClB,CAAC"}

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+
+export default function OperationsLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return children;
+}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/my-projects/[id]/page.d.ts

@@ -0,0 +1,6 @@
+export default function MyProjectSummaryPage({ params, }: {
+    params: Promise<{
+        id: string;
+    }>;
+}): Promise<import("react").JSX.Element>;
+//# sourceMappingURL=page.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/my-projects/[id]/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["page.tsx"],"names":[],"mappings":"AAEA,wBAA8B,oBAAoB,CAAC,EACjD,MAAM,GACP,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACjC,wCAIA"}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/my-projects/[id]/page.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MyProjectSummaryPage;
+const my_project_summary_screen_1 = require("../../_components/my-project-summary-screen");
+async function MyProjectSummaryPage({ params, }) {
+    const { id } = await params;
+    return <my_project_summary_screen_1.MyProjectSummaryScreen projectId={Number(id)}/>;
+}
+//# sourceMappingURL=page.js.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/my-projects/[id]/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["page.tsx"],"names":[],"mappings":";;AAEA,uCAQC;AAVD,2FAAqF;AAEtE,KAAK,UAAU,oBAAoB,CAAC,EACjD,MAAM,GAGP;IACC,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,MAAM,CAAC;IAE5B,OAAO,CAAC,kDAAsB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAG,CAAC;AAC3D,CAAC"}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/my-projects/[id]/page.tsx

@@ -0,0 +1,11 @@
+import { MyProjectSummaryScreen } from '../../_components/my-project-summary-screen';
+
+export default async function MyProjectSummaryPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return <MyProjectSummaryScreen projectId={Number(id)} />;
+}

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/my-projects/page.d.ts

@@ -0,0 +1,2 @@
+export default function OperationsMyProjectsPage(): import("react").JSX.Element;
+//# sourceMappingURL=page.d.ts.map

package/hedhog/frontend/src/app/(app)/(libraries)/operations/operations/my-projects/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["page.tsx"],"names":[],"mappings":"AA2CA,MAAM,CAAC,OAAO,UAAU,wBAAwB,gCA4Y/C"}