@hed-hog/operations 0.0.3 → 0.0.285

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

@@ -1,147 +1,147 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-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 { getApprovalBadgeClasses, getApprovalLabel } from '../_lib/utils/status';
-
-export default function ApprovalsPage() {
-  const t = useTranslations('operations.ApprovalsPage');
-  const { timesheets, users, projects, approvalSummary } = useOperationsData();
-  const [search, setSearch] = useState('');
-  const [statuses, setStatuses] = useState<
-    Record<string, 'approved' | 'pending' | 'rejected'>
-  >(() =>
-    timesheets.reduce(
-      (acc, entry) => {
-        acc[entry.id] = entry.status;
-        return acc;
-      },
-      {} as Record<string, 'approved' | 'pending' | 'rejected'>
-    )
-  );
-
-  const approvalQueue = useMemo(
-    () =>
-      timesheets.filter((entry) => {
-        const user = users.find((item) => item.id === entry.userId);
-        const project = projects.find((item) => item.id === entry.projectId);
-
-        return `${user?.name} ${project?.name} ${entry.description}`
-          .toLowerCase()
-          .includes(search.toLowerCase());
-      }),
-    [timesheets, users, projects, search]
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <SectionCard title={t('cards.pending')}>
-          <p className="text-3xl font-semibold">{approvalSummary.pending}</p>
-        </SectionCard>
-        <SectionCard title={t('cards.approved')}>
-          <p className="text-3xl font-semibold">{approvalSummary.approved}</p>
-        </SectionCard>
-        <SectionCard title={t('cards.rejected')}>
-          <p className="text-3xl font-semibold">{approvalSummary.rejected}</p>
-        </SectionCard>
-      </div>
-
-      <SectionCard title={t('queueTitle')} description={t('queueDescription')}>
-        <div className="mb-4">
-          <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
-            placeholder={t('searchPlaceholder')}
-          />
-        </div>
-
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('columns.user')}</TableHead>
-              <TableHead>{t('columns.project')}</TableHead>
-              <TableHead>{t('columns.date')}</TableHead>
-              <TableHead>{t('columns.hours')}</TableHead>
-              <TableHead>{t('columns.description')}</TableHead>
-              <TableHead>{t('columns.status')}</TableHead>
-              <TableHead>{t('columns.actions')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {approvalQueue.map((entry) => {
-              const user = users.find((item) => item.id === entry.userId);
-              const project = projects.find((item) => item.id === entry.projectId);
-              const currentStatus = statuses[entry.id] ?? 'pending';
-
-              return (
-                <TableRow key={entry.id}>
-                  <TableCell>{user?.name}</TableCell>
-                  <TableCell>{project?.name}</TableCell>
-                  <TableCell>{formatDate(entry.date)}</TableCell>
-                  <TableCell>{formatHours(entry.hours)}</TableCell>
-                  <TableCell>{entry.description}</TableCell>
-                  <TableCell>
-                    <StatusBadge
-                      label={getApprovalLabel(currentStatus)}
-                      className={getApprovalBadgeClasses(currentStatus)}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex gap-2">
-                      <Button
-                        size="sm"
-                        onClick={() =>
-                          setStatuses((current) => ({
-                            ...current,
-                            [entry.id]: 'approved',
-                          }))
-                        }
-                      >
-                        Approve
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        onClick={() =>
-                          setStatuses((current) => ({
-                            ...current,
-                            [entry.id]: 'rejected',
-                          }))
-                        }
-                      >
-                        Reject
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </SectionCard>
-    </Page>
-  );
-}
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+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 { getApprovalBadgeClasses, getApprovalLabel } from '../_lib/utils/status';
+
+export default function ApprovalsPage() {
+  const t = useTranslations('operations.ApprovalsPage');
+  const { timesheets, users, projects, approvalSummary } = useOperationsData();
+  const [search, setSearch] = useState('');
+  const [statuses, setStatuses] = useState<
+    Record<string, 'approved' | 'pending' | 'rejected'>
+  >(() =>
+    timesheets.reduce(
+      (acc, entry) => {
+        acc[entry.id] = entry.status;
+        return acc;
+      },
+      {} as Record<string, 'approved' | 'pending' | 'rejected'>
+    )
+  );
+
+  const approvalQueue = useMemo(
+    () =>
+      timesheets.filter((entry) => {
+        const user = users.find((item) => item.id === entry.userId);
+        const project = projects.find((item) => item.id === entry.projectId);
+
+        return `${user?.name} ${project?.name} ${entry.description}`
+          .toLowerCase()
+          .includes(search.toLowerCase());
+      }),
+    [timesheets, users, projects, search]
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <SectionCard title={t('cards.pending')}>
+          <p className="text-3xl font-semibold">{approvalSummary.pending}</p>
+        </SectionCard>
+        <SectionCard title={t('cards.approved')}>
+          <p className="text-3xl font-semibold">{approvalSummary.approved}</p>
+        </SectionCard>
+        <SectionCard title={t('cards.rejected')}>
+          <p className="text-3xl font-semibold">{approvalSummary.rejected}</p>
+        </SectionCard>
+      </div>
+
+      <SectionCard title={t('queueTitle')} description={t('queueDescription')}>
+        <div className="mb-4">
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('searchPlaceholder')}
+          />
+        </div>
+
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('columns.user')}</TableHead>
+              <TableHead>{t('columns.project')}</TableHead>
+              <TableHead>{t('columns.date')}</TableHead>
+              <TableHead>{t('columns.hours')}</TableHead>
+              <TableHead>{t('columns.description')}</TableHead>
+              <TableHead>{t('columns.status')}</TableHead>
+              <TableHead>{t('columns.actions')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {approvalQueue.map((entry) => {
+              const user = users.find((item) => item.id === entry.userId);
+              const project = projects.find((item) => item.id === entry.projectId);
+              const currentStatus = statuses[entry.id] ?? 'pending';
+
+              return (
+                <TableRow key={entry.id}>
+                  <TableCell>{user?.name}</TableCell>
+                  <TableCell>{project?.name}</TableCell>
+                  <TableCell>{formatDate(entry.date)}</TableCell>
+                  <TableCell>{formatHours(entry.hours)}</TableCell>
+                  <TableCell>{entry.description}</TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={getApprovalLabel(currentStatus)}
+                      className={getApprovalBadgeClasses(currentStatus)}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        onClick={() =>
+                          setStatuses((current) => ({
+                            ...current,
+                            [entry.id]: 'approved',
+                          }))
+                        }
+                      >
+                        Approve
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() =>
+                          setStatuses((current) => ({
+                            ...current,
+                            [entry.id]: 'rejected',
+                          }))
+                        }
+                      >
+                        Reject
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </SectionCard>
+    </Page>
+  );
+}

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

@@ -0,0 +1,143 @@
+'use client';
+
+import { Page, SearchBar } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Route } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { useOperationsGrowthData } from '../_lib/hooks/use-operations-growth-data';
+import { formatCurrency } from '../_lib/utils/format';
+
+export default function OperationsCareerPage() {
+  const t = useTranslations('operations.CareerPage');
+  const { careerTracks, careerLevels, profiles, users } = useOperationsGrowthData();
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [trackFilter, setTrackFilter] = useState('track-delivery');
+
+  const filteredLevels = useMemo(
+    () =>
+      careerLevels
+        .filter((item) => {
+          const matchesTrack = item.trackId === trackFilter;
+          const matchesSearch = `${item.name} ${item.summaryCriteria.join(' ')}`
+            .toLowerCase()
+            .includes(search.toLowerCase());
+
+          return matchesTrack && matchesSearch;
+        })
+        .sort((left, right) => left.order - right.order),
+    [careerLevels, search, trackFilter]
+  );
+
+  const selectedTrack = careerTracks.find((item) => item.id === trackFilter);
+  const peopleOnTrack = profiles.filter((item) => item.trackId === trackFilter);
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SearchBar
+        className="mb-6"
+        searchQuery={searchInput}
+        onSearchChange={setSearchInput}
+        onSearch={() => setSearch(searchInput)}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'track-filter',
+            type: 'select',
+            value: trackFilter,
+            onChange: setTrackFilter,
+            placeholder: t('filters.track'),
+            options: careerTracks.map((item) => ({ value: item.id, label: item.name })),
+          },
+        ]}
+      />
+
+      <SectionCard title={selectedTrack?.name ?? t('title')} description={selectedTrack?.description}>
+        <div className="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
+          <div className="space-y-4">
+            {filteredLevels.map((level) => {
+              const members = peopleOnTrack.filter(
+                (profile) => profile.currentLevelId === level.id
+              );
+
+              return (
+                <div key={level.id} className="rounded-lg border p-4">
+                  <div className="mb-4 flex items-center justify-between gap-3">
+                    <div>
+                      <p className="font-medium">{level.name}</p>
+                      <p className="text-muted-foreground text-sm">{level.code}</p>
+                    </div>
+                    <Badge variant="secondary">
+                      {level.minScore} - {level.maxScore}
+                    </Badge>
+                  </div>
+                  <div className="mb-4 grid gap-4 md:grid-cols-2">
+                    <div>
+                      <p className="text-muted-foreground text-sm">{t('salaryBand')}</p>
+                      <p className="font-medium">
+                        {formatCurrency(level.salaryMin)} - {formatCurrency(level.salaryMax)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-muted-foreground text-sm">{t('peopleInLevel')}</p>
+                      <p className="font-medium">{members.length}</p>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    {level.summaryCriteria.map((criterion) => (
+                      <div key={criterion} className="flex items-center gap-2 text-sm">
+                        <Route className="h-4 w-4 text-blue-700" />
+                        <span>{criterion}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="space-y-4">
+            <SectionCard title={t('whereAmI')} description={t('whereAmIDescription')}>
+              <div className="space-y-4">
+                {peopleOnTrack.slice(0, 4).map((profile) => {
+                  const user = users.find((item) => item.id === profile.employeeId);
+                  const currentLevel = careerLevels.find(
+                    (item) => item.id === profile.currentLevelId
+                  );
+                  const nextLevel = careerLevels.find(
+                    (item) => item.id === profile.nextLevelId
+                  );
+
+                  return (
+                    <div key={profile.employeeId} className="rounded-lg border p-4">
+                      <div className="mb-2 flex items-center justify-between gap-3">
+                        <span className="font-medium">{user?.name}</span>
+                        <Badge variant="outline">{currentLevel?.name}</Badge>
+                      </div>
+                      <p className="text-muted-foreground mb-3 text-sm">
+                        {nextLevel
+                          ? t('nextStep', { level: nextLevel.name })
+                          : t('topTrack')}
+                      </p>
+                      <Progress value={profile.promotionProgress} />
+                    </div>
+                  );
+                })}
+              </div>
+            </SectionCard>
+          </div>
+        </div>
+      </SectionCard>
+    </Page>
+  );
+}

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

@@ -0,0 +1,201 @@
+'use client';
+
+import { Page, PaginationFooter, SearchBar } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { StatusBadge } from '../_components/status-badge';
+import { useOperationsGrowthData } from '../_lib/hooks/use-operations-growth-data';
+import { formatDate } from '../_lib/utils/format';
+import {
+  getGrowthCertificationBadgeClasses,
+  humanizeGrowthStatus,
+} from '../_lib/utils/growth';
+
+const PAGE_SIZE_OPTIONS = [4, 8, 12];
+
+export default function OperationsCertificationsPage() {
+  const t = useTranslations('operations.CertificationsPage');
+  const {
+    users,
+    careerLevels,
+    certificationCatalog,
+    employeeCertifications,
+  } = useOperationsGrowthData();
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [employeeFilter, setEmployeeFilter] = useState('all');
+  const [categoryFilter, setCategoryFilter] = useState('all');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(PAGE_SIZE_OPTIONS[0]);
+
+  const categories = Array.from(new Set(certificationCatalog.map((item) => item.category)));
+
+  const filteredEmployeeCertifications = useMemo(
+    () =>
+      employeeCertifications.filter((item) => {
+        const employee = users.find((user) => user.id === item.employeeId);
+        const certification = certificationCatalog.find(
+          (catalogItem) => catalogItem.id === item.certificationId
+        );
+        const haystack = `${employee?.name ?? ''} ${certification?.name ?? ''} ${certification?.provider ?? ''}`;
+        const matchesSearch = haystack.toLowerCase().includes(search.toLowerCase());
+        const matchesEmployee =
+          employeeFilter === 'all' || item.employeeId === employeeFilter;
+        const matchesCategory =
+          categoryFilter === 'all' || certification?.category === categoryFilter;
+
+        return matchesSearch && matchesEmployee && matchesCategory;
+      }),
+    [categoryFilter, certificationCatalog, employeeCertifications, employeeFilter, search, users]
+  );
+
+  const totalPages = Math.max(1, Math.ceil(filteredEmployeeCertifications.length / pageSize));
+  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
+  const paginatedEmployeeCertifications = filteredEmployeeCertifications.slice(
+    (safePage - 1) * pageSize,
+    safePage * pageSize
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SearchBar
+        className="mb-6"
+        searchQuery={searchInput}
+        onSearchChange={setSearchInput}
+        onSearch={() => {
+          setSearch(searchInput);
+          setCurrentPage(1);
+        }}
+        placeholder={t('searchPlaceholder')}
+        controls={[
+          {
+            id: 'employee-filter',
+            type: 'select',
+            value: employeeFilter,
+            onChange: (value) => {
+              setEmployeeFilter(value);
+              setCurrentPage(1);
+            },
+            placeholder: t('filters.allEmployees'),
+            options: [
+              { value: 'all', label: t('filters.allEmployees') },
+              ...users.map((item) => ({ value: item.id, label: item.name })),
+            ],
+          },
+          {
+            id: 'category-filter',
+            type: 'select',
+            value: categoryFilter,
+            onChange: (value) => {
+              setCategoryFilter(value);
+              setCurrentPage(1);
+            },
+            placeholder: t('filters.allCategories'),
+            options: [
+              { value: 'all', label: t('filters.allCategories') },
+              ...categories.map((item) => ({ value: item, label: item })),
+            ],
+          },
+        ]}
+      />
+
+      <SectionCard title={t('catalogTitle')} description={t('catalogDescription')}>
+        <div className="grid gap-4 lg:grid-cols-2">
+          {certificationCatalog.map((item) => {
+            const requiredLevel = careerLevels.find(
+              (level) => level.id === item.requiredLevelId
+            );
+
+            return (
+              <div key={item.id} className="rounded-lg border p-4">
+                <div className="mb-3 flex items-start justify-between gap-3">
+                  <div>
+                    <p className="font-medium">{item.name}</p>
+                    <p className="text-muted-foreground text-sm">{item.provider}</p>
+                  </div>
+                  <Badge variant="secondary">+{item.defaultScore}</Badge>
+                </div>
+                <div className="mb-3 flex flex-wrap gap-2">
+                  <Badge variant="outline">{item.category}</Badge>
+                  {requiredLevel ? <Badge variant="outline">{requiredLevel.name}</Badge> : null}
+                </div>
+                <p className="text-muted-foreground text-sm">{item.description}</p>
+              </div>
+            );
+          })}
+        </div>
+      </SectionCard>
+
+      <SectionCard title={t('employeeTitle')} description={t('employeeDescription')}>
+        <div className="space-y-4">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('columns.employee')}</TableHead>
+                <TableHead>{t('columns.certification')}</TableHead>
+                <TableHead>{t('columns.category')}</TableHead>
+                <TableHead>{t('columns.validity')}</TableHead>
+                <TableHead>{t('columns.score')}</TableHead>
+                <TableHead>{t('columns.status')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedEmployeeCertifications.map((item) => {
+                const employee = users.find((user) => user.id === item.employeeId);
+                const certification = certificationCatalog.find(
+                  (catalogItem) => catalogItem.id === item.certificationId
+                );
+
+                return (
+                  <TableRow key={item.id}>
+                    <TableCell className="font-medium">{employee?.name}</TableCell>
+                    <TableCell>{certification?.name}</TableCell>
+                    <TableCell>{certification?.category}</TableCell>
+                    <TableCell>
+                      {item.validUntil ? formatDate(item.validUntil) : t('notAvailable')}
+                    </TableCell>
+                    <TableCell>{item.grantedScore}</TableCell>
+                    <TableCell>
+                      <StatusBadge
+                        label={humanizeGrowthStatus(item.status)}
+                        className={getGrowthCertificationBadgeClasses(item.status)}
+                      />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+          <PaginationFooter
+            currentPage={safePage}
+            pageSize={pageSize}
+            totalItems={filteredEmployeeCertifications.length}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(value) => {
+              setPageSize(value);
+              setCurrentPage(1);
+            }}
+            pageSizeOptions={PAGE_SIZE_OPTIONS}
+          />
+        </div>
+      </SectionCard>
+    </Page>
+  );
+}