@hed-hog/operations 0.0.2 → 0.0.285

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

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