@hed-hog/operations 0.0.2

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

@@ -0,0 +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);
+}

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

@@ -0,0 +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];
+}

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

@@ -0,0 +1,99 @@
+'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>
+  );
+}

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { useParams } from 'next/navigation';
+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 { formatCurrency, formatDate } from '../../_lib/utils/format';
+import {
+  getContractBadgeClasses,
+  getContractTypeLabel,
+} from '../../_lib/utils/status';
+
+export default function ContractDetailsPage() {
+  const params = useParams<{ id: string }>();
+  const { contracts, projects } = useOperationsData();
+  const contract = contracts.find((item) => item.id === params.id);
+
+  if (!contract) {
+    return <Page>Contract not found.</Page>;
+  }
+
+  const linkedProjects = projects.filter((project) =>
+    contract.linkedProjectIds.includes(project.id)
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={contract.name}
+        description="Static mock detail page with production-ready structure."
+        current="Contract Details"
+      />
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <SectionCard title="Contract Info">
+          <div className="grid gap-3 text-sm sm:grid-cols-2">
+            <p>
+              <span className="font-medium">Client:</span> {contract.client}
+            </p>
+            <p>
+              <span className="font-medium">Type:</span>{' '}
+              {getContractTypeLabel(contract.type)}
+            </p>
+            <p>
+              <span className="font-medium">Start:</span>{' '}
+              {formatDate(contract.startDate)}
+            </p>
+            <p>
+              <span className="font-medium">End:</span>{' '}
+              {formatDate(contract.endDate)}
+            </p>
+            <p>
+              <span className="font-medium">Hour Rate:</span>{' '}
+              {formatCurrency(contract.hourlyRate)}
+            </p>
+            <p>
+              <span className="font-medium">Hour Limit:</span>{' '}
+              {contract.hourLimit}h
+            </p>
+            <div className="sm:col-span-2">
+              <StatusBadge
+                label={contract.status}
+                className={getContractBadgeClasses(contract.status)}
+              />
+            </div>
+          </div>
+        </SectionCard>
+
+        <SectionCard title="Linked Projects">
+          <div className="space-y-3">
+            {linkedProjects.map((project) => (
+              <div key={project.id} className="rounded-lg border p-3">
+                <p className="font-medium">{project.name}</p>
+                <p className="text-sm text-muted-foreground">{project.client}</p>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+
+        <SectionCard title="Billing Rules">
+          <ul className="space-y-2 text-sm">
+            {contract.billingRules.map((rule) => (
+              <li key={rule} className="rounded-md bg-muted/40 p-3">
+                {rule}
+              </li>
+            ))}
+          </ul>
+        </SectionCard>
+
+        <SectionCard title="SLA">
+          <p className="text-sm text-muted-foreground">{contract.sla}</p>
+        </SectionCard>
+
+        <SectionCard title="Adjustments / Revisions" className="xl:col-span-2">
+          <ul className="space-y-2 text-sm">
+            {contract.revisions.map((revision) => (
+              <li key={revision} className="rounded-md border p-3">
+                {revision}
+              </li>
+            ))}
+          </ul>
+        </SectionCard>
+      </div>
+    </Page>
+  );
+}

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+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 { formatCurrency, formatDate } from '../_lib/utils/format';
+import {
+  getContractBadgeClasses,
+  getContractTypeLabel,
+} from '../_lib/utils/status';
+
+export default function ContractsPage() {
+  const t = useTranslations('operations.ContractsPage');
+  const { contracts } = useOperationsData();
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('all');
+
+  const filteredContracts = useMemo(
+    () =>
+      contracts.filter((contract) => {
+        const matchesSearch =
+          `${contract.name} ${contract.client}`
+            .toLowerCase()
+            .includes(search.toLowerCase());
+        const matchesStatus = status === 'all' || contract.status === status;
+        return matchesSearch && matchesStatus;
+      }),
+    [contracts, search, status]
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SectionCard title={t('tableTitle')} description={t('tableDescription')}>
+        <div className="mb-4 flex flex-col gap-3 lg:flex-row">
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('searchPlaceholder')}
+          />
+          <Select value={status} onValueChange={setStatus}>
+            <SelectTrigger className="w-full lg:w-[220px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('filters.all')}</SelectItem>
+              <SelectItem value="active">{t('filters.active')}</SelectItem>
+              <SelectItem value="renewal">{t('filters.renewal')}</SelectItem>
+              <SelectItem value="expired">{t('filters.expired')}</SelectItem>
+              <SelectItem value="draft">{t('filters.draft')}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('columns.name')}</TableHead>
+              <TableHead>{t('columns.client')}</TableHead>
+              <TableHead>{t('columns.type')}</TableHead>
+              <TableHead>{t('columns.startDate')}</TableHead>
+              <TableHead>{t('columns.endDate')}</TableHead>
+              <TableHead>{t('columns.hourRate')}</TableHead>
+              <TableHead>{t('columns.hourLimit')}</TableHead>
+              <TableHead>{t('columns.status')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredContracts.map((contract) => (
+              <TableRow key={contract.id}>
+                <TableCell>
+                  <Link
+                    className="font-medium text-primary hover:underline"
+                    href={`/operations/contracts/${contract.id}`}
+                  >
+                    {contract.name}
+                  </Link>
+                </TableCell>
+                <TableCell>{contract.client}</TableCell>
+                <TableCell>{getContractTypeLabel(contract.type)}</TableCell>
+                <TableCell>{formatDate(contract.startDate)}</TableCell>
+                <TableCell>{formatDate(contract.endDate)}</TableCell>
+                <TableCell>{formatCurrency(contract.hourlyRate)}</TableCell>
+                <TableCell>{contract.hourLimit}h</TableCell>
+                <TableCell>
+                  <StatusBadge
+                    label={contract.status}
+                    className={getContractBadgeClasses(contract.status)}
+                  />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </SectionCard>
+    </Page>
+  );
+}

package/hedhog/frontend/app/layout.tsx.ejs

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