@hed-hog/operations 0.0.2 → 0.0.285

package/hedhog/frontend/app/_lib/utils/metrics.ts.ejs

@@ -1,103 +1,103 @@
-import { allocationsMock } from '../mocks/allocations.mock';
-import { contractsMock } from '../mocks/contracts.mock';
-import { projectsMock } from '../mocks/projects.mock';
-import { tasksMock } from '../mocks/tasks.mock';
-import { timesheetsMock } from '../mocks/timesheets.mock';
-import { operationsUsersMock } from '../mocks/users.mock';
-import { getApprovalLabel } from './status';
-
-export function getDashboardMetrics() {
-  const totalActiveProjects = projectsMock.filter(
-    (project) => project.status === 'active'
-  ).length;
-  const hoursLoggedThisMonth = timesheetsMock.reduce(
-    (total, entry) => total + entry.hours,
-    0
-  );
-  const hoursPendingApproval = timesheetsMock
-    .filter((entry) => entry.status === 'pending')
-    .reduce((total, entry) => total + entry.hours, 0);
-  const revenue = contractsMock
-    .filter((contract) => contract.status === 'active')
-    .reduce((total, contract) => total + contract.hourlyRate * 160, 0);
-  const utilization =
-    allocationsMock.reduce(
-      (total, allocation) => total + allocation.allocationPercent,
-      0
-    ) / allocationsMock.length;
-
-  return {
-    totalActiveProjects,
-    hoursLoggedThisMonth,
-    hoursPendingApproval,
-    revenue,
-    utilization,
-  };
-}
-
-export function getHoursByProject() {
-  return projectsMock.map((project) => ({
-    name: project.name,
-    hours: timesheetsMock
-      .filter((entry) => entry.projectId === project.id)
-      .reduce((total, entry) => total + entry.hours, 0),
-  }));
-}
-
-export function getHoursByUser() {
-  return operationsUsersMock.map((user) => ({
-    name: user.name.split(' ')[0],
-    hours: timesheetsMock
-      .filter((entry) => entry.userId === user.id)
-      .reduce((total, entry) => total + entry.hours, 0),
-  }));
-}
-
-export function getApprovalStatusData() {
-  return ['approved', 'pending', 'rejected'].map((status) => ({
-    name: getApprovalLabel(status as 'approved' | 'pending' | 'rejected'),
-    value: timesheetsMock.filter((entry) => entry.status === status).length,
-  }));
-}
-
-export function getWeeklyTrend() {
-  return [
-    { week: 'W1', hours: 32 },
-    { week: 'W2', hours: 36 },
-    { week: 'W3', hours: 29 },
-    { week: 'W4', hours: 41 },
-  ];
-}
-
-export function getRecentTimesheetEntries() {
-  return [...timesheetsMock]
-    .sort((a, b) => b.date.localeCompare(a.date))
-    .slice(0, 6);
-}
-
-export function getDailyTotals() {
-  return timesheetsMock.reduce<Record<string, number>>((acc, entry) => {
-    acc[entry.date] = (acc[entry.date] || 0) + entry.hours;
-    return acc;
-  }, {});
-}
-
-export function getPendingApprovalsSummary() {
-  return {
-    pending: timesheetsMock.filter((entry) => entry.status === 'pending').length,
-    approved: timesheetsMock.filter((entry) => entry.status === 'approved').length,
-    rejected: timesheetsMock.filter((entry) => entry.status === 'rejected').length,
-  };
-}
-
-export function getProjectTeam(projectId: string) {
-  const project = projectsMock.find((item) => item.id === projectId);
-
-  return operationsUsersMock.filter((user) =>
-    project?.teamMemberIds.includes(user.id)
-  );
-}
-
-export function getProjectTasks(projectId: string) {
-  return tasksMock.filter((task) => task.projectId === projectId);
-}
+import { allocationsMock } from '../mocks/allocations.mock';
+import { contractsMock } from '../mocks/contracts.mock';
+import { projectsMock } from '../mocks/projects.mock';
+import { tasksMock } from '../mocks/tasks.mock';
+import { timesheetsMock } from '../mocks/timesheets.mock';
+import { operationsUsersMock } from '../mocks/users.mock';
+import { getApprovalLabel } from './status';
+
+export function getDashboardMetrics() {
+  const totalActiveProjects = projectsMock.filter(
+    (project) => project.status === 'active'
+  ).length;
+  const hoursLoggedThisMonth = timesheetsMock.reduce(
+    (total, entry) => total + entry.hours,
+    0
+  );
+  const hoursPendingApproval = timesheetsMock
+    .filter((entry) => entry.status === 'pending')
+    .reduce((total, entry) => total + entry.hours, 0);
+  const revenue = contractsMock
+    .filter((contract) => contract.status === 'active')
+    .reduce((total, contract) => total + contract.hourlyRate * 160, 0);
+  const utilization =
+    allocationsMock.reduce(
+      (total, allocation) => total + allocation.allocationPercent,
+      0
+    ) / allocationsMock.length;
+
+  return {
+    totalActiveProjects,
+    hoursLoggedThisMonth,
+    hoursPendingApproval,
+    revenue,
+    utilization,
+  };
+}
+
+export function getHoursByProject() {
+  return projectsMock.map((project) => ({
+    name: project.name,
+    hours: timesheetsMock
+      .filter((entry) => entry.projectId === project.id)
+      .reduce((total, entry) => total + entry.hours, 0),
+  }));
+}
+
+export function getHoursByUser() {
+  return operationsUsersMock.map((user) => ({
+    name: user.name.split(' ')[0],
+    hours: timesheetsMock
+      .filter((entry) => entry.userId === user.id)
+      .reduce((total, entry) => total + entry.hours, 0),
+  }));
+}
+
+export function getApprovalStatusData() {
+  return ['approved', 'pending', 'rejected'].map((status) => ({
+    name: getApprovalLabel(status as 'approved' | 'pending' | 'rejected'),
+    value: timesheetsMock.filter((entry) => entry.status === status).length,
+  }));
+}
+
+export function getWeeklyTrend() {
+  return [
+    { week: 'W1', hours: 32 },
+    { week: 'W2', hours: 36 },
+    { week: 'W3', hours: 29 },
+    { week: 'W4', hours: 41 },
+  ];
+}
+
+export function getRecentTimesheetEntries() {
+  return [...timesheetsMock]
+    .sort((a, b) => b.date.localeCompare(a.date))
+    .slice(0, 6);
+}
+
+export function getDailyTotals() {
+  return timesheetsMock.reduce<Record<string, number>>((acc, entry) => {
+    acc[entry.date] = (acc[entry.date] || 0) + entry.hours;
+    return acc;
+  }, {});
+}
+
+export function getPendingApprovalsSummary() {
+  return {
+    pending: timesheetsMock.filter((entry) => entry.status === 'pending').length,
+    approved: timesheetsMock.filter((entry) => entry.status === 'approved').length,
+    rejected: timesheetsMock.filter((entry) => entry.status === 'rejected').length,
+  };
+}
+
+export function getProjectTeam(projectId: string) {
+  const project = projectsMock.find((item) => item.id === projectId);
+
+  return operationsUsersMock.filter((user) =>
+    project?.teamMemberIds.includes(user.id)
+  );
+}
+
+export function getProjectTasks(projectId: string) {
+  return tasksMock.filter((task) => task.projectId === projectId);
+}

package/hedhog/frontend/app/_lib/utils/status.ts.ejs

@@ -1,80 +1,80 @@
-import type {
-  ApprovalStatus,
-  ContractStatus,
-  ContractType,
-  ProjectStatus,
-  TaskStatus,
-} from '../types/operations';
-
-export function getApprovalBadgeClasses(status: ApprovalStatus) {
-  return {
-    approved: 'bg-emerald-100 text-emerald-700',
-    pending: 'bg-amber-100 text-amber-700',
-    rejected: 'bg-rose-100 text-rose-700',
-  }[status];
-}
-
-export function getProjectBadgeClasses(status: ProjectStatus) {
-  return {
-    planning: 'bg-slate-100 text-slate-700',
-    active: 'bg-blue-100 text-blue-700',
-    'at-risk': 'bg-orange-100 text-orange-700',
-    paused: 'bg-zinc-100 text-zinc-700',
-    completed: 'bg-emerald-100 text-emerald-700',
-  }[status];
-}
-
-export function getTaskBadgeClasses(status: TaskStatus) {
-  return {
-    backlog: 'bg-slate-100 text-slate-700',
-    todo: 'bg-cyan-100 text-cyan-700',
-    'in-progress': 'bg-blue-100 text-blue-700',
-    review: 'bg-violet-100 text-violet-700',
-    done: 'bg-emerald-100 text-emerald-700',
-  }[status];
-}
-
-export function getContractBadgeClasses(status: ContractStatus) {
-  return {
-    active: 'bg-emerald-100 text-emerald-700',
-    draft: 'bg-slate-100 text-slate-700',
-    expired: 'bg-zinc-200 text-zinc-700',
-    renewal: 'bg-orange-100 text-orange-700',
-  }[status];
-}
-
-export function getContractTypeLabel(type: ContractType) {
-  return {
-    tm: 'T&M',
-    monthly: 'Monthly',
-    fixed: 'Fixed',
-  }[type];
-}
-
-export function getApprovalLabel(status: ApprovalStatus) {
-  return {
-    approved: 'Approved',
-    pending: 'Pending',
-    rejected: 'Rejected',
-  }[status];
-}
-
-export function getProjectStatusLabel(status: ProjectStatus) {
-  return {
-    planning: 'Planning',
-    active: 'Active',
-    'at-risk': 'At Risk',
-    paused: 'Paused',
-    completed: 'Completed',
-  }[status];
-}
-
-export function getTaskStatusLabel(status: TaskStatus) {
-  return {
-    backlog: 'Backlog',
-    todo: 'Todo',
-    'in-progress': 'In Progress',
-    review: 'Review',
-    done: 'Done',
-  }[status];
-}
+import type {
+  ApprovalStatus,
+  ContractStatus,
+  ContractType,
+  ProjectStatus,
+  TaskStatus,
+} from '../types/operations';
+
+export function getApprovalBadgeClasses(status: ApprovalStatus) {
+  return {
+    approved: 'bg-emerald-100 text-emerald-700',
+    pending: 'bg-amber-100 text-amber-700',
+    rejected: 'bg-rose-100 text-rose-700',
+  }[status];
+}
+
+export function getProjectBadgeClasses(status: ProjectStatus) {
+  return {
+    planning: 'bg-slate-100 text-slate-700',
+    active: 'bg-blue-100 text-blue-700',
+    'at-risk': 'bg-orange-100 text-orange-700',
+    paused: 'bg-zinc-100 text-zinc-700',
+    completed: 'bg-emerald-100 text-emerald-700',
+  }[status];
+}
+
+export function getTaskBadgeClasses(status: TaskStatus) {
+  return {
+    backlog: 'bg-slate-100 text-slate-700',
+    todo: 'bg-cyan-100 text-cyan-700',
+    'in-progress': 'bg-blue-100 text-blue-700',
+    review: 'bg-violet-100 text-violet-700',
+    done: 'bg-emerald-100 text-emerald-700',
+  }[status];
+}
+
+export function getContractBadgeClasses(status: ContractStatus) {
+  return {
+    active: 'bg-emerald-100 text-emerald-700',
+    draft: 'bg-slate-100 text-slate-700',
+    expired: 'bg-zinc-200 text-zinc-700',
+    renewal: 'bg-orange-100 text-orange-700',
+  }[status];
+}
+
+export function getContractTypeLabel(type: ContractType) {
+  return {
+    tm: 'T&M',
+    monthly: 'Monthly',
+    fixed: 'Fixed',
+  }[type];
+}
+
+export function getApprovalLabel(status: ApprovalStatus) {
+  return {
+    approved: 'Approved',
+    pending: 'Pending',
+    rejected: 'Rejected',
+  }[status];
+}
+
+export function getProjectStatusLabel(status: ProjectStatus) {
+  return {
+    planning: 'Planning',
+    active: 'Active',
+    'at-risk': 'At Risk',
+    paused: 'Paused',
+    completed: 'Completed',
+  }[status];
+}
+
+export function getTaskStatusLabel(status: TaskStatus) {
+  return {
+    backlog: 'Backlog',
+    todo: 'Todo',
+    'in-progress': 'In Progress',
+    review: 'Review',
+    done: 'Done',
+  }[status];
+}

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

@@ -1,99 +1,154 @@
-'use client';
-
-import { Page } from '@/components/entity-list';
-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 { AllocationCalendar } from '../_components/allocation-calendar';
-import { OperationsHeader } from '../_components/operations-header';
-import { SectionCard } from '../_components/section-card';
-import { useOperationsData } from '../_lib/hooks/use-operations-data';
-import { formatDate } from '../_lib/utils/format';
-
-export default function AllocationsPage() {
-  const t = useTranslations('operations.AllocationsPage');
-  const { allocations, users, projects } = useOperationsData();
-  const [search, setSearch] = useState('');
-
-  const filteredAllocations = useMemo(
-    () =>
-      allocations.filter((allocation) => {
-        const user = users.find((item) => item.id === allocation.userId);
-        const project = projects.find((item) => item.id === allocation.projectId);
-        return `${user?.name} ${project?.name}`
-          .toLowerCase()
-          .includes(search.toLowerCase());
-      }),
-    [allocations, users, projects, search]
-  );
-
-  return (
-    <Page>
-      <OperationsHeader
-        title={t('title')}
-        description={t('description')}
-        current={t('breadcrumb')}
-      />
-
-      <SectionCard title={t('tableTitle')} description={t('tableDescription')}>
-        <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.role')}</TableHead>
-              <TableHead>{t('columns.project')}</TableHead>
-              <TableHead>{t('columns.weeklyHours')}</TableHead>
-              <TableHead>{t('columns.allocation')}</TableHead>
-              <TableHead>{t('columns.startDate')}</TableHead>
-              <TableHead>{t('columns.endDate')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredAllocations.map((allocation) => {
-              const user = users.find((item) => item.id === allocation.userId);
-              const project = projects.find((item) => item.id === allocation.projectId);
-
-              return (
-                <TableRow key={allocation.id}>
-                  <TableCell>{user?.name}</TableCell>
-                  <TableCell>{allocation.role}</TableCell>
-                  <TableCell>{project?.name}</TableCell>
-                  <TableCell>{allocation.weeklyHours}h</TableCell>
-                  <TableCell>{allocation.allocationPercent}%</TableCell>
-                  <TableCell>{formatDate(allocation.startDate)}</TableCell>
-                  <TableCell>{formatDate(allocation.endDate)}</TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </SectionCard>
-
-      <SectionCard
-        title={t('calendarTitle')}
-        description={t('calendarDescription')}
-      >
-        <AllocationCalendar
-          allocations={filteredAllocations}
-          users={users}
-          projects={projects}
-        />
-      </SectionCard>
-    </Page>
-  );
-}
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { Layers } from 'lucide-react';
+import { AllocationCalendar } from '../_components/allocation-calendar';
+import { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { useOperationsData } from '../_lib/hooks/use-operations-data';
+import { formatDate } from '../_lib/utils/format';
+
+const PAGE_SIZE_OPTIONS = [10, 20, 30, 50];
+
+export default function AllocationsPage() {
+  const t = useTranslations('operations.AllocationsPage');
+  const { allocations, users, projects } = useOperationsData();
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(PAGE_SIZE_OPTIONS[0]);
+
+  const filteredAllocations = useMemo(
+    () =>
+      allocations.filter((allocation) => {
+        const user = users.find((item) => item.id === allocation.userId);
+        const project = projects.find((item) => item.id === allocation.projectId);
+        return `${user?.name} ${project?.name}`
+          .toLowerCase()
+          .includes(search.toLowerCase());
+      }),
+    [allocations, users, projects, search]
+  );
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredAllocations.length / pageSize)
+  );
+  const safePage = Math.min(Math.max(currentPage, 1), totalPages);
+  const paginatedAllocations = useMemo(() => {
+    const start = (safePage - 1) * pageSize;
+    return filteredAllocations.slice(start, start + pageSize);
+  }, [filteredAllocations, safePage, pageSize]);
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SearchBar
+        className="mb-6"
+        searchQuery={searchInput}
+        onSearchChange={setSearchInput}
+        placeholder={t('searchPlaceholder')}
+        onSearch={() => {
+          setSearch(searchInput);
+          setCurrentPage(1);
+        }}
+      />
+
+      <SectionCard title={t('tableTitle')} description={t('tableDescription')}>
+        {filteredAllocations.length === 0 ? (
+          <EmptyState
+            icon={<Layers className="h-12 w-12" />}
+            title={t('emptyState.title')}
+            description={t('emptyState.description')}
+            actionLabel={t('emptyState.action')}
+            onAction={() => {
+              setSearch('');
+              setSearchInput('');
+              setCurrentPage(1);
+            }}
+          />
+        ) : (
+          <div className="space-y-4">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('columns.user')}</TableHead>
+                  <TableHead>{t('columns.role')}</TableHead>
+                  <TableHead>{t('columns.project')}</TableHead>
+                  <TableHead>{t('columns.weeklyHours')}</TableHead>
+                  <TableHead>{t('columns.allocation')}</TableHead>
+                  <TableHead>{t('columns.startDate')}</TableHead>
+                  <TableHead>{t('columns.endDate')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedAllocations.map((allocation) => {
+                  const user = users.find(
+                    (item) => item.id === allocation.userId
+                  );
+                  const project = projects.find(
+                    (item) => item.id === allocation.projectId
+                  );
+
+                  return (
+                    <TableRow key={allocation.id}>
+                      <TableCell>{user?.name}</TableCell>
+                      <TableCell>{allocation.role}</TableCell>
+                      <TableCell>{project?.name}</TableCell>
+                      <TableCell>{allocation.weeklyHours}h</TableCell>
+                      <TableCell>{allocation.allocationPercent}%</TableCell>
+                      <TableCell>{formatDate(allocation.startDate)}</TableCell>
+                      <TableCell>{formatDate(allocation.endDate)}</TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            <PaginationFooter
+              currentPage={safePage}
+              pageSize={pageSize}
+              totalItems={filteredAllocations.length}
+              onPageChange={setCurrentPage}
+              onPageSizeChange={(nextSize) => {
+                setPageSize(nextSize);
+                setCurrentPage(1);
+              }}
+              pageSizeOptions={PAGE_SIZE_OPTIONS}
+            />
+          </div>
+        )}
+      </SectionCard>
+
+      <SectionCard
+        title={t('calendarTitle')}
+        description={t('calendarDescription')}
+      >
+        <AllocationCalendar
+          allocations={filteredAllocations}
+          users={users}
+          projects={projects}
+        />
+      </SectionCard>
+    </Page>
+  );
+}