@hed-hog/operations 0.0.2

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

@@ -0,0 +1,177 @@
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { KpiCard } from '@/components/ui/kpi-card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Activity, BadgeDollarSign, Clock3, FolderKanban, Users } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+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, formatHours } from './_lib/utils/format';
+import { getApprovalBadgeClasses, getApprovalLabel } from './_lib/utils/status';
+
+const chartColors = ['#0f766e', '#1d4ed8', '#f97316', '#be123c', '#7c3aed'];
+
+export default function OperationsDashboardPage() {
+  const t = useTranslations('operations.DashboardPage');
+  const {
+    dashboardMetrics,
+    hoursByProject,
+    hoursByUser,
+    approvalStatusData,
+    weeklyTrendData,
+    recentTimesheets,
+    users,
+    projects,
+    tasks,
+  } = useOperationsData();
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
+        <KpiCard
+          title={t('cards.activeProjects')}
+          value={dashboardMetrics.totalActiveProjects}
+          icon={FolderKanban}
+        />
+        <KpiCard
+          title={t('cards.loggedHours')}
+          value={formatHours(dashboardMetrics.hoursLoggedThisMonth)}
+          icon={Clock3}
+        />
+        <KpiCard
+          title={t('cards.pendingHours')}
+          value={formatHours(dashboardMetrics.hoursPendingApproval)}
+          icon={Activity}
+        />
+        <KpiCard
+          title={t('cards.revenue')}
+          value={formatCurrency(dashboardMetrics.revenue)}
+          icon={BadgeDollarSign}
+        />
+        <KpiCard
+          title={t('cards.utilization')}
+          value={`${dashboardMetrics.utilization.toFixed(0)}%`}
+          icon={Users}
+        />
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <SectionCard title={t('charts.hoursByProject')} description={t('charts.hoursByProjectDescription')}>
+          <ResponsiveContainer width="100%" height={280}>
+            <BarChart data={hoursByProject}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="name" tick={{ fontSize: 11 }} interval={0} angle={-15} textAnchor="end" height={55} />
+              <YAxis />
+              <Tooltip />
+              <Bar dataKey="hours" radius={[6, 6, 0, 0]}>
+                {hoursByProject.map((item, index) => (
+                  <Cell key={item.name} fill={chartColors[index % chartColors.length]} />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </SectionCard>
+
+        <SectionCard title={t('charts.hoursByUser')} description={t('charts.hoursByUserDescription')}>
+          <ResponsiveContainer width="100%" height={280}>
+            <BarChart data={hoursByUser}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="name" />
+              <YAxis />
+              <Tooltip />
+              <Bar dataKey="hours" radius={[6, 6, 0, 0]}>
+                {hoursByUser.map((item, index) => (
+                  <Cell key={item.name} fill={chartColors[index % chartColors.length]} />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </SectionCard>
+
+        <SectionCard title={t('charts.approvalStatus')} description={t('charts.approvalStatusDescription')}>
+          <ResponsiveContainer width="100%" height={280}>
+            <PieChart>
+              <Pie data={approvalStatusData} dataKey="value" nameKey="name" outerRadius={110}>
+                {approvalStatusData.map((item, index) => (
+                  <Cell key={item.name} fill={chartColors[index % chartColors.length]} />
+                ))}
+              </Pie>
+              <Tooltip />
+            </PieChart>
+          </ResponsiveContainer>
+        </SectionCard>
+
+        <SectionCard title={t('charts.weeklyTrend')} description={t('charts.weeklyTrendDescription')}>
+          <ResponsiveContainer width="100%" height={280}>
+            <LineChart data={weeklyTrendData}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="week" />
+              <YAxis />
+              <Tooltip />
+              <Line dataKey="hours" type="monotone" stroke="#1d4ed8" strokeWidth={3} />
+            </LineChart>
+          </ResponsiveContainer>
+        </SectionCard>
+      </div>
+
+      <SectionCard title={t('recentTable.title')} description={t('recentTable.description')}>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('recentTable.user')}</TableHead>
+              <TableHead>{t('recentTable.project')}</TableHead>
+              <TableHead>{t('recentTable.task')}</TableHead>
+              <TableHead>{t('recentTable.hours')}</TableHead>
+              <TableHead>{t('recentTable.status')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {recentTimesheets.map((entry) => {
+              const user = users.find((item) => item.id === entry.userId);
+              const project = projects.find((item) => item.id === entry.projectId);
+              const task = tasks.find((item) => item.id === entry.taskId);
+
+              return (
+                <TableRow key={entry.id}>
+                  <TableCell>{user?.name}</TableCell>
+                  <TableCell>{project?.name}</TableCell>
+                  <TableCell>{task?.title}</TableCell>
+                  <TableCell>{formatHours(entry.hours)}</TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={getApprovalLabel(entry.status)}
+                      className={getApprovalBadgeClasses(entry.status)}
+                    />
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </SectionCard>
+    </Page>
+  );
+}

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

@@ -0,0 +1,186 @@
+'use client';
+
+import { Page } from '@/components/entity-list';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useParams } from 'next/navigation';
+import { KanbanBoard } from '../../_components/kanban-board';
+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,
+  formatHours,
+} from '../../_lib/utils/format';
+import { getProjectTeam } from '../../_lib/utils/metrics';
+import {
+  getApprovalBadgeClasses,
+  getApprovalLabel,
+  getProjectBadgeClasses,
+  getProjectStatusLabel,
+} from '../../_lib/utils/status';
+
+export default function ProjectDetailsPage() {
+  const params = useParams<{ id: string }>();
+  const { projects, contracts, users, tasks, timesheets } = useOperationsData();
+  const project = projects.find((item) => item.id === params.id);
+
+  if (!project) {
+    return <Page>Project not found.</Page>;
+  }
+
+  const contract = contracts.find((item) => item.id === project.contractId);
+  const team = getProjectTeam(project.id);
+  const projectTasks = tasks.filter((task) => task.projectId === project.id);
+  const projectTimesheets = timesheets.filter(
+    (entry) => entry.projectId === project.id
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={project.name}
+        description={project.description}
+        current="Project Details"
+      />
+
+      <Tabs defaultValue="overview" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="team">Team</TabsTrigger>
+          <TabsTrigger value="tasks">Tasks</TabsTrigger>
+          <TabsTrigger value="timesheets">Timesheets</TabsTrigger>
+          <TabsTrigger value="costs">Costs</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview">
+          <SectionCard title="Project Overview">
+            <div className="grid gap-4 text-sm md:grid-cols-2">
+              <p>
+                <span className="font-medium">Status:</span>{' '}
+                <StatusBadge
+                  label={getProjectStatusLabel(project.status)}
+                  className={getProjectBadgeClasses(project.status)}
+                />
+              </p>
+              <p>
+                <span className="font-medium">Progress:</span> {project.progress}%
+              </p>
+              <p>
+                <span className="font-medium">Client:</span> {project.client}
+              </p>
+              <p>
+                <span className="font-medium">Contract:</span> {contract?.name}
+              </p>
+              <p className="md:col-span-2">
+                <span className="font-medium">Description:</span>{' '}
+                {project.description}
+              </p>
+            </div>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="team">
+          <SectionCard title="Team Allocation">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Member</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead>Hour Rate</TableHead>
+                  <TableHead>Allocation %</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {team.map((member) => (
+                  <TableRow key={member.id}>
+                    <TableCell>{member.name}</TableCell>
+                    <TableCell>{member.role}</TableCell>
+                    <TableCell>{formatCurrency(member.hourlyRate)}</TableCell>
+                    <TableCell>{member.utilizationTarget}%</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="tasks">
+          <SectionCard title="Kanban Preview">
+            <KanbanBoard tasks={projectTasks} users={users} />
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="timesheets">
+          <SectionCard title="Project Timesheets">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Date</TableHead>
+                  <TableHead>User</TableHead>
+                  <TableHead>Hours</TableHead>
+                  <TableHead>Description</TableHead>
+                  <TableHead>Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {projectTimesheets.map((entry) => {
+                  const user = users.find((item) => item.id === entry.userId);
+
+                  return (
+                    <TableRow key={entry.id}>
+                      <TableCell>{formatDate(entry.date)}</TableCell>
+                      <TableCell>{user?.name}</TableCell>
+                      <TableCell>{formatHours(entry.hours)}</TableCell>
+                      <TableCell>{entry.description}</TableCell>
+                      <TableCell>
+                        <StatusBadge
+                          label={getApprovalLabel(entry.status)}
+                          className={getApprovalBadgeClasses(entry.status)}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </SectionCard>
+        </TabsContent>
+
+        <TabsContent value="costs">
+          <SectionCard title="Costs (Mock)">
+            <div className="grid gap-3 md:grid-cols-3">
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">Budget</p>
+                <p className="text-xl font-semibold">
+                  {formatCurrency(project.budget)}
+                </p>
+              </div>
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">Logged Hours</p>
+                <p className="text-xl font-semibold">
+                  {formatHours(project.hoursLogged)}
+                </p>
+              </div>
+              <div className="rounded-lg border p-4">
+                <p className="text-sm text-muted-foreground">Projected End</p>
+                <p className="text-xl font-semibold">
+                  {formatDate(project.endDate)}
+                </p>
+              </div>
+            </div>
+          </SectionCard>
+        </TabsContent>
+      </Tabs>
+    </Page>
+  );
+}

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

@@ -0,0 +1,111 @@
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { Input } from '@/components/ui/input';
+import { Progress } from '@/components/ui/progress';
+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 { formatDate, formatHours } from '../_lib/utils/format';
+import {
+  getProjectBadgeClasses,
+  getProjectStatusLabel,
+} from '../_lib/utils/status';
+
+export default function ProjectsPage() {
+  const t = useTranslations('operations.ProjectsPage');
+  const { projects, users } = useOperationsData();
+  const [search, setSearch] = useState('');
+
+  const filteredProjects = useMemo(
+    () =>
+      projects.filter((project) =>
+        `${project.name} ${project.client}`
+          .toLowerCase()
+          .includes(search.toLowerCase())
+      ),
+    [projects, search]
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
+        <div className="mb-4">
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('searchPlaceholder')}
+          />
+        </div>
+        <div className="grid gap-4 xl:grid-cols-2">
+          {filteredProjects.map((project) => {
+            const memberNames = users
+              .filter((user) => project.teamMemberIds.includes(user.id))
+              .map((user) => user.name)
+              .join(', ');
+
+            return (
+              <Link
+                key={project.id}
+                href={`/operations/projects/${project.id}`}
+                className="rounded-xl border p-5 transition hover:border-primary/40 hover:shadow-md"
+              >
+                <div className="space-y-4">
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <p className="text-lg font-semibold">{project.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {project.client}
+                      </p>
+                    </div>
+                    <StatusBadge
+                      label={getProjectStatusLabel(project.status)}
+                      className={getProjectBadgeClasses(project.status)}
+                    />
+                  </div>
+
+                  <div>
+                    <div className="mb-2 flex items-center justify-between text-sm">
+                      <span>{t('progress')}</span>
+                      <span>{project.progress}%</span>
+                    </div>
+                    <Progress value={project.progress} />
+                  </div>
+
+                  <div className="grid gap-3 text-sm sm:grid-cols-2">
+                    <p>
+                      <span className="font-medium">{t('teamMembers')}:</span>{' '}
+                      {memberNames}
+                    </p>
+                    <p>
+                      <span className="font-medium">{t('hoursLogged')}:</span>{' '}
+                      {formatHours(project.hoursLogged)}
+                    </p>
+                    <p>
+                      <span className="font-medium">{t('startDate')}:</span>{' '}
+                      {formatDate(project.startDate)}
+                    </p>
+                    <p>
+                      <span className="font-medium">{t('endDate')}:</span>{' '}
+                      {formatDate(project.endDate)}
+                    </p>
+                  </div>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </SectionCard>
+    </Page>
+  );
+}

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

@@ -0,0 +1,47 @@
+'use client';
+
+import { Page } from '@/components/entity-list';
+import { Input } from '@/components/ui/input';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { KanbanBoard } from '../_components/kanban-board';
+import { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { useOperationsData } from '../_lib/hooks/use-operations-data';
+
+export default function TasksPage() {
+  const t = useTranslations('operations.TasksPage');
+  const { tasks, users } = useOperationsData();
+  const [search, setSearch] = useState('');
+
+  const filteredTasks = useMemo(
+    () =>
+      tasks.filter((task) =>
+        `${task.title} ${task.projectName} ${task.labels.join(' ')}`
+          .toLowerCase()
+          .includes(search.toLowerCase())
+      ),
+    [tasks, search]
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+      />
+
+      <SectionCard title={t('boardTitle')} description={t('boardDescription')}>
+        <div className="mb-4">
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('searchPlaceholder')}
+          />
+        </div>
+        <KanbanBoard tasks={filteredTasks} users={users} />
+      </SectionCard>
+    </Page>
+  );
+}

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

@@ -0,0 +1,126 @@
+'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 { OperationsHeader } from '../_components/operations-header';
+import { SectionCard } from '../_components/section-card';
+import { StatusBadge } from '../_components/status-badge';
+import { TimesheetEntryDialog } from '../_components/timesheet-entry-dialog';
+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 TimesheetsPage() {
+  const t = useTranslations('operations.TimesheetsPage');
+  const { timesheets, users, projects, tasks, dailyTotals } =
+    useOperationsData();
+  const [search, setSearch] = useState('');
+
+  const filteredTimesheets = useMemo(
+    () =>
+      timesheets.filter((entry) => {
+        const user = users.find((item) => item.id === entry.userId);
+        const project = projects.find((item) => item.id === entry.projectId);
+        const task = tasks.find((item) => item.id === entry.taskId);
+
+        return `${user?.name} ${project?.name} ${task?.title} ${entry.description}`
+          .toLowerCase()
+          .includes(search.toLowerCase());
+      }),
+    [timesheets, users, projects, tasks, search]
+  );
+
+  const weeklyTotal = filteredTimesheets.reduce(
+    (sum, entry) => sum + entry.hours,
+    0
+  );
+
+  return (
+    <Page>
+      <OperationsHeader
+        title={t('title')}
+        description={t('description')}
+        current={t('breadcrumb')}
+        actions={
+          <TimesheetEntryDialog users={users} projects={projects} tasks={tasks} />
+        }
+      />
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <SectionCard title={t('summary.totalHours')}>
+          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
+        </SectionCard>
+        <SectionCard title={t('summary.dailyTotals')}>
+          <div className="space-y-2 text-sm">
+            {Object.entries(dailyTotals).map(([date, total]) => (
+              <div key={date} className="flex items-center justify-between">
+                <span>{formatDate(date)}</span>
+                <span>{formatHours(total)}</span>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+        <SectionCard title={t('summary.weeklyTotal')}>
+          <p className="text-3xl font-semibold">{formatHours(weeklyTotal)}</p>
+        </SectionCard>
+      </div>
+
+      <SectionCard title={t('gridTitle')} description={t('gridDescription')}>
+        <div className="mb-4">
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('searchPlaceholder')}
+          />
+        </div>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('columns.date')}</TableHead>
+              <TableHead>{t('columns.user')}</TableHead>
+              <TableHead>{t('columns.project')}</TableHead>
+              <TableHead>{t('columns.task')}</TableHead>
+              <TableHead>{t('columns.hours')}</TableHead>
+              <TableHead>{t('columns.description')}</TableHead>
+              <TableHead>{t('columns.status')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredTimesheets.map((entry) => {
+              const user = users.find((item) => item.id === entry.userId);
+              const project = projects.find((item) => item.id === entry.projectId);
+              const task = tasks.find((item) => item.id === entry.taskId);
+
+              return (
+                <TableRow key={entry.id}>
+                  <TableCell>{formatDate(entry.date)}</TableCell>
+                  <TableCell>{user?.name}</TableCell>
+                  <TableCell>{project?.name}</TableCell>
+                  <TableCell>{task?.title}</TableCell>
+                  <TableCell>{formatHours(entry.hours)}</TableCell>
+                  <TableCell>{entry.description}</TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      label={getApprovalLabel(entry.status)}
+                      className={getApprovalBadgeClasses(entry.status)}
+                    />
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </SectionCard>
+    </Page>
+  );
+}