Skip to content

Commit e7b4a29

Browse files
SheetMetalConnectSheetMetalConnect
authored
Merge pull request #197 from SheetMetalConnect/claude/fix-qrm-dashboard-syntax-01Ap2mTm5oRB3SPA6MTDkK5p
Fix syntax error in QRMDashboardCharts component
2 parents 95eeb81 + 678325b commit e7b4a29

File tree

16 files changed

+1677
-2
lines changed

16 files changed

+1677
-2
lines changed

‎src/App.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ import { Settings } from "./pages/admin/Settings";
3939
import IntegrationsMarketplace from "./pages/admin/IntegrationsMarketplace";
4040
import Shipments from "./pages/admin/Shipments";
4141
import StepsTemplatesView from "./pages/admin/StepsTemplatesView";
42+
import AnalyticsDashboard from "./pages/admin/Analytics";
43+
import OEEAnalytics from "./pages/admin/analytics/OEEAnalytics";
44+
import ReliabilityAnalytics from "./pages/admin/analytics/ReliabilityAnalytics";
45+
import QRMAnalytics from "./pages/admin/analytics/QRMAnalytics";
46+
import QRMDashboard from "./pages/admin/analytics/QRMDashboard";
4247
import ApiDocs from "./pages/ApiDocs";
4348
import Pricing from "./pages/Pricing";
4449
import { MyPlan } from "./pages/MyPlan";
@@ -449,6 +454,62 @@ function AppRoutes() {
449454
}
450455
/>
451456

457+
{/* Analytics Routes */}
458+
<Route
459+
path="/admin/analytics"
460+
element={
461+
<ProtectedRoute adminOnly>
462+
<Layout>
463+
<AnalyticsDashboard />
464+
</Layout>
465+
</ProtectedRoute>
466+
}
467+
/>
468+
469+
<Route
470+
path="/admin/analytics/oee"
471+
element={
472+
<ProtectedRoute adminOnly>
473+
<Layout>
474+
<OEEAnalytics />
475+
</Layout>
476+
</ProtectedRoute>
477+
}
478+
/>
479+
480+
<Route
481+
path="/admin/analytics/reliability"
482+
element={
483+
<ProtectedRoute adminOnly>
484+
<Layout>
485+
<ReliabilityAnalytics />
486+
</Layout>
487+
</ProtectedRoute>
488+
}
489+
/>
490+
491+
<Route
492+
path="/admin/analytics/qrm"
493+
element={
494+
<ProtectedRoute adminOnly>
495+
<Layout>
496+
<QRMAnalytics />
497+
</Layout>
498+
</ProtectedRoute>
499+
}
500+
/>
501+
502+
<Route
503+
path="/admin/analytics/qrm-dashboard"
504+
element={
505+
<ProtectedRoute adminOnly>
506+
<Layout>
507+
<QRMDashboard />
508+
</Layout>
509+
</ProtectedRoute>
510+
}
511+
/>
512+
452513
<Route
453514
path="/admin/config/steps-templates"
454515
element={

‎src/components/AdminLayout.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,12 @@ export default function AdminLayout({ children }: AdminLayoutProps) {
122122
icon: CalendarClock,
123123
exact: true,
124124
},
125+
{
126+
path: "/admin/analytics/qrm-dashboard",
127+
label: "QRM Analytics",
128+
icon: Activity,
129+
exact: true,
130+
},
125131
];
126132

127133
// Operator views - Admin can see what operators see

‎src/components/analytics/OEECharts.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React from "react";
2+
import {
3+
BarChart,
4+
Bar,
5+
XAxis,
6+
YAxis,
7+
CartesianGrid,
8+
Tooltip,
9+
Legend,
10+
ResponsiveContainer,
11+
PieChart,
12+
Pie,
13+
Cell,
14+
} from "recharts";
15+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
16+
17+
const OEECharts = () => {
18+
// Mock Data
19+
const oeeData = [
20+
{ name: "Availability", value: 85, fill: "hsl(var(--brand-primary))" },
21+
{ name: "Performance", value: 92, fill: "hsl(var(--brand-accent))" },
22+
{ name: "Quality", value: 98, fill: "hsl(var(--color-success))" },
23+
];
24+
25+
const machineStateData = [
26+
{ name: "Running", value: 65, color: "hsl(var(--color-success))" },
27+
{ name: "Idle", value: 20, color: "hsl(var(--color-warning))" },
28+
{ name: "Down", value: 10, color: "hsl(var(--color-error))" },
29+
{ name: "Maintenance", value: 5, color: "hsl(var(--neutral-400))" },
30+
];
31+
32+
const trendData = [
33+
{ name: "Mon", oee: 82 },
34+
{ name: "Tue", oee: 84 },
35+
{ name: "Wed", oee: 88 },
36+
{ name: "Thu", oee: 85 },
37+
{ name: "Fri", oee: 90 },
38+
{ name: "Sat", oee: 87 },
39+
{ name: "Sun", oee: 89 },
40+
];
41+
42+
return (
43+
<div className="grid gap-6 md:grid-cols-2">
44+
{/* OEE Breakdown */}
45+
<Card className="glass-card">
46+
<CardHeader>
47+
<CardTitle>OEE Breakdown</CardTitle>
48+
</CardHeader>
49+
<CardContent>
50+
<div className="h-[300px] w-full">
51+
<ResponsiveContainer width="100%" height="100%">
52+
<BarChart data={oeeData} layout="vertical" margin={{ left: 20 }}>
53+
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-subtle))" horizontal={false} />
54+
<XAxis type="number" domain={[0, 100]} stroke="hsl(var(--muted-foreground))" />
55+
<YAxis dataKey="name" type="category" stroke="hsl(var(--muted-foreground))" width={100} />
56+
<Tooltip
57+
contentStyle={{
58+
backgroundColor: "hsl(var(--popover))",
59+
borderColor: "hsl(var(--border))",
60+
color: "hsl(var(--popover-foreground))"
61+
}}
62+
cursor={{ fill: "hsl(var(--muted)/0.2)" }}
63+
/>
64+
<Bar dataKey="value" radius={[0, 4, 4, 0]} barSize={32} />
65+
</BarChart>
66+
</ResponsiveContainer>
67+
</div>
68+
</CardContent>
69+
</Card>
70+
71+
{/* Machine States */}
72+
<Card className="glass-card">
73+
<CardHeader>
74+
<CardTitle>Machine States</CardTitle>
75+
</CardHeader>
76+
<CardContent>
77+
<div className="h-[300px] w-full flex items-center justify-center">
78+
<ResponsiveContainer width="100%" height="100%">
79+
<PieChart>
80+
<Pie
81+
data={machineStateData}
82+
cx="50%"
83+
cy="50%"
84+
innerRadius={60}
85+
outerRadius={100}
86+
paddingAngle={5}
87+
dataKey="value"
88+
>
89+
{machineStateData.map((entry, index) => (
90+
<Cell key={`cell-${index}`} fill={entry.color} stroke="none" />
91+
))}
92+
</Pie>
93+
<Tooltip
94+
contentStyle={{
95+
backgroundColor: "hsl(var(--popover))",
96+
borderColor: "hsl(var(--border))",
97+
color: "hsl(var(--popover-foreground))"
98+
}}
99+
/>
100+
<Legend />
101+
</PieChart>
102+
</ResponsiveContainer>
103+
</div>
104+
</CardContent>
105+
</Card>
106+
107+
{/* OEE Trend */}
108+
<Card className="glass-card md:col-span-2">
109+
<CardHeader>
110+
<CardTitle>OEE Trend (Last 7 Days)</CardTitle>
111+
</CardHeader>
112+
<CardContent>
113+
<div className="h-[300px] w-full">
114+
<ResponsiveContainer width="100%" height="100%">
115+
<BarChart data={trendData}>
116+
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-subtle))" vertical={false} />
117+
<XAxis dataKey="name" stroke="hsl(var(--muted-foreground))" />
118+
<YAxis domain={[0, 100]} stroke="hsl(var(--muted-foreground))" />
119+
<Tooltip
120+
contentStyle={{
121+
backgroundColor: "hsl(var(--popover))",
122+
borderColor: "hsl(var(--border))",
123+
color: "hsl(var(--popover-foreground))"
124+
}}
125+
cursor={{ fill: "hsl(var(--muted)/0.2)" }}
126+
/>
127+
<Bar dataKey="oee" fill="hsl(var(--brand-primary))" radius={[4, 4, 0, 0]} />
128+
</BarChart>
129+
</ResponsiveContainer>
130+
</div>
131+
</CardContent>
132+
</Card>
133+
</div>
134+
);
135+
};
136+
137+
export { OEECharts };

‎src/components/analytics/QRMCharts.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React from "react";
2+
import {
3+
BarChart,
4+
Bar,
5+
XAxis,
6+
YAxis,
7+
CartesianGrid,
8+
Tooltip,
9+
Legend,
10+
ResponsiveContainer,
11+
ComposedChart,
12+
Line,
13+
} from "recharts";
14+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
15+
16+
const QRMCharts = () => {
17+
// Mock Data
18+
const leadTimeData = [
19+
{ product: "Prod A", mct: 12, touchTime: 4 },
20+
{ product: "Prod B", mct: 18, touchTime: 6 },
21+
{ product: "Prod C", mct: 8, touchTime: 3 },
22+
{ product: "Prod D", mct: 24, touchTime: 8 },
23+
];
24+
25+
const authBacklogData = [
26+
{ day: "Mon", pending: 5, approved: 12 },
27+
{ day: "Tue", pending: 8, approved: 10 },
28+
{ day: "Wed", pending: 4, approved: 15 },
29+
{ day: "Thu", pending: 6, approved: 14 },
30+
{ day: "Fri", pending: 3, approved: 18 },
31+
];
32+
33+
return (
34+
<div className="grid gap-6 md:grid-cols-2">
35+
{/* MCT Analysis */}
36+
<Card className="glass-card">
37+
<CardHeader>
38+
<CardTitle>MCT vs Touch Time (Hours)</CardTitle>
39+
</CardHeader>
40+
<CardContent>
41+
<div className="h-[300px] w-full">
42+
<ResponsiveContainer width="100%" height="100%">
43+
<BarChart data={leadTimeData} layout="vertical" margin={{ left: 20 }}>
44+
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-subtle))" horizontal={false} />
45+
<XAxis type="number" stroke="hsl(var(--muted-foreground))" />
46+
<YAxis dataKey="product" type="category" stroke="hsl(var(--muted-foreground))" width={60} />
47+
<Tooltip
48+
contentStyle={{
49+
backgroundColor: "hsl(var(--popover))",
50+
borderColor: "hsl(var(--border))",
51+
color: "hsl(var(--popover-foreground))"
52+
}}
53+
cursor={{ fill: "hsl(var(--muted)/0.2)" }}
54+
/>
55+
<Legend />
56+
<Bar dataKey="mct" name="MCT (Total Lead Time)" fill="hsl(var(--brand-primary))" radius={[0, 4, 4, 0]} barSize={20} />
57+
<Bar dataKey="touchTime" name="Touch Time (Value Add)" fill="hsl(var(--color-success))" radius={[0, 4, 4, 0]} barSize={20} />
58+
</BarChart>
59+
</ResponsiveContainer>
60+
</div>
61+
</CardContent>
62+
</Card>
63+
64+
{/* Authorization Backlog */}
65+
<Card className="glass-card">
66+
<CardHeader>
67+
<CardTitle>Authorization Backlog Trend</CardTitle>
68+
</CardHeader>
69+
<CardContent>
70+
<div className="h-[300px] w-full">
71+
<ResponsiveContainer width="100%" height="100%">
72+
<ComposedChart data={authBacklogData}>
73+
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-subtle))" vertical={false} />
74+
<XAxis dataKey="day" stroke="hsl(var(--muted-foreground))" />
75+
<YAxis stroke="hsl(var(--muted-foreground))" />
76+
<Tooltip
77+
contentStyle={{
78+
backgroundColor: "hsl(var(--popover))",
79+
borderColor: "hsl(var(--border))",
80+
color: "hsl(var(--popover-foreground))"
81+
}}
82+
/>
83+
<Legend />
84+
<Bar dataKey="pending" name="Pending Auth" fill="hsl(var(--color-warning))" barSize={30} radius={[4, 4, 0, 0]} />
85+
<Line type="monotone" dataKey="approved" name="Approved" stroke="hsl(var(--color-success))" strokeWidth={2} />
86+
</ComposedChart>
87+
</ResponsiveContainer>
88+
</div>
89+
</CardContent>
90+
</Card>
91+
</div>
92+
);
93+
};
94+
95+
export { QRMCharts };

0 commit comments

Comments
 (0)