Merge pull request #60 from Mes-Open/react-poc

fix: missing OEE on dashboard

Author: jakub-przepiora

backend/lang/en.json

@@ -3030,4 +3030,78 @@
     "This is a draft — editable in place and not yet used for inspections.": "This is a draft — editable in place and not yet used for inspections.",
     "This version is published and immutable. Saving creates a new draft version — the published version stays unchanged so past inspections remain reproducible.": "This version is published and immutable. Saving creates a new draft version — the published version stays unchanged so past inspections remain reproducible.",
     "Version history": "Version history"
+    "CLOSED": "CLOSED",
+    "+ New Account": "+ New Account",
+    "+ New Area": "+ New Area",
+    "+ New Class": "+ New Class",
+    "+ New Company": "+ New Company",
+    "+ New Cost Source": "+ New Cost Source",
+    "+ New Crew": "+ New Crew",
+    "+ New Division": "+ New Division",
+    "+ New Event": "+ New Event",
+    "+ New Factory": "+ New Factory",
+    "+ New Integration": "+ New Integration",
+    "+ New Issue Type": "+ New Issue Type",
+    "+ New Line": "+ New Line",
+    "+ New Lot": "+ New Lot",
+    "+ New Material": "+ New Material",
+    "+ New Plan": "+ New Plan",
+    "+ New Reason": "+ New Reason",
+    "+ New Schedule": "+ New Schedule",
+    "+ New Segment": "+ New Segment",
+    "+ New Sequence": "+ New Sequence",
+    "+ New Site": "+ New Site",
+    "+ New Skill": "+ New Skill",
+    "+ New Subassembly": "+ New Subassembly",
+    "+ New Tool": "+ New Tool",
+    "+ New Wage Group": "+ New Wage Group",
+    "+ New Work Order": "+ New Work Order",
+    "+ New Worker": "+ New Worker",
+    "No LOT sequences yet.": "No LOT sequences yet.",
+    "No accounts yet.": "No accounts yet.",
+    "No anomaly reasons yet.": "No anomaly reasons yet.",
+    "No areas yet.": "No areas yet.",
+    "No companies yet.": "No companies yet.",
+    "No cost sources yet.": "No cost sources yet.",
+    "No crews yet.": "No crews yet.",
+    "No divisions yet.": "No divisions yet.",
+    "No factories yet.": "No factories yet.",
+    "No label templates yet.": "No label templates yet.",
+    "No materials yet.": "No materials yet.",
+    "No production lines yet.": "No production lines yet.",
+    "No shifts yet.": "No shifts yet.",
+    "No sites yet.": "No sites yet.",
+    "No skills yet.": "No skills yet.",
+    "No subassemblies yet.": "No subassemblies yet.",
+    "No tools yet.": "No tools yet.",
+    "No view templates yet.": "No view templates yet.",
+    "No wage groups yet.": "No wage groups yet.",
+    "No work orders yet.": "No work orders yet.",
+    "No workers yet.": "No workers yet.",
+    "No workstation types yet.": "No workstation types yet.",
+    "Area": "Area",
+    "Assigned": "Assigned",
+    "Avail / Recv": "Avail / Recv",
+    "Base Rate": "Base Rate",
+    "Cannot delete — has template steps": "Cannot delete — has template steps",
+    "Class": "Class",
+    "Configure": "Configure",
+    "End": "End",
+    "Every": "Every",
+    "In BOMs": "In BOMs",
+    "Last Login": "Last Login",
+    "Lines using": "Lines using",
+    "Lot Number": "Lot Number",
+    "Make default": "Make default",
+    "Next Due": "Next Due",
+    "Pad": "Pad",
+    "Prio": "Prio",
+    "Produced / Planned": "Produced / Planned",
+    "Req. Skills": "Req. Skills",
+    "Role / Station": "Role / Station",
+    "Stations": "Stations",
+    "UoM": "UoM",
+    "Used": "Used",
+    "Users & Accounts": "Users & Accounts",
+    "Logging in...": "Logging in..."
 }

backend/lang/pl.json

@@ -3030,4 +3030,77 @@
     "This is a draft — editable in place and not yet used for inspections.": "To szkic — edytowalny w miejscu i jeszcze nieużywany do inspekcji.",
     "This version is published and immutable. Saving creates a new draft version — the published version stays unchanged so past inspections remain reproducible.": "Ta wersja jest opublikowana i niezmienna. Zapis utworzy nową wersję-szkic — opublikowana wersja pozostaje bez zmian, aby przeszłe inspekcje były odtwarzalne.",
     "Version history": "Historia wersji"
+    "CLOSED": "ZAMKNIĘTE",
+    "+ New Account": "+ Nowe konto",
+    "+ New Area": "+ Nowy obszar",
+    "+ New Class": "+ Nowa klasa",
+    "+ New Company": "+ Nowa firma",
+    "+ New Cost Source": "+ Nowe źródło kosztów",
+    "+ New Crew": "+ Nowa brygada",
+    "+ New Division": "+ Nowy wydział",
+    "+ New Event": "+ Nowe zdarzenie",
+    "+ New Factory": "+ Nowy zakład",
+    "+ New Integration": "+ Nowa integracja",
+    "+ New Issue Type": "+ Nowy typ problemu",
+    "+ New Line": "+ Nowa linia",
+    "+ New Lot": "+ Nowa partia",
+    "+ New Material": "+ Nowy materiał",
+    "+ New Plan": "+ Nowy plan",
+    "+ New Reason": "+ Nowa przyczyna",
+    "+ New Schedule": "+ Nowy harmonogram",
+    "+ New Segment": "+ Nowy segment",
+    "+ New Sequence": "+ Nowa sekwencja",
+    "+ New Site": "+ Nowy zakład",
+    "+ New Skill": "+ Nowa umiejętność",
+    "+ New Subassembly": "+ Nowy podzespół",
+    "+ New Tool": "+ Nowe narzędzie",
+    "+ New Wage Group": "+ Nowa grupa płacowa",
+    "+ New Work Order": "+ Nowe zlecenie",
+    "+ New Worker": "+ Nowy pracownik",
+    "No LOT sequences yet.": "Brak sekwencji LOT.",
+    "No accounts yet.": "Brak kont.",
+    "No anomaly reasons yet.": "Brak przyczyn anomalii.",
+    "No areas yet.": "Brak obszarów.",
+    "No companies yet.": "Brak firm.",
+    "No cost sources yet.": "Brak źródeł kosztów.",
+    "No crews yet.": "Brak brygad.",
+    "No divisions yet.": "Brak wydziałów.",
+    "No factories yet.": "Brak zakładów.",
+    "No label templates yet.": "Brak szablonów etykiet.",
+    "No materials yet.": "Brak materiałów.",
+    "No production lines yet.": "Brak linii produkcyjnych.",
+    "No shifts yet.": "Brak zmian.",
+    "No sites yet.": "Brak zakładów.",
+    "No skills yet.": "Brak umiejętności.",
+    "No subassemblies yet.": "Brak podzespołów.",
+    "No tools yet.": "Brak narzędzi.",
+    "No view templates yet.": "Brak szablonów widoków.",
+    "No wage groups yet.": "Brak grup płacowych.",
+    "No work orders yet.": "Brak zleceń.",
+    "No workers yet.": "Brak pracowników.",
+    "No workstation types yet.": "Brak typów stanowisk.",
+    "Area": "Obszar",
+    "Assigned": "Przypisane",
+    "Avail / Recv": "Dost. / Przyj.",
+    "Base Rate": "Stawka podstawowa",
+    "Cannot delete — has template steps": "Nie można usunąć — ma kroki szablonu",
+    "Class": "Klasa",
+    "Configure": "Konfiguruj",
+    "End": "Koniec",
+    "Every": "Co",
+    "In BOMs": "W BOM",
+    "Last Login": "Ostatnie logowanie",
+    "Lines using": "Linie używające",
+    "Lot Number": "Numer partii",
+    "Make default": "Ustaw domyślny",
+    "Next Due": "Następny termin",
+    "Pad": "Dopełnienie",
+    "Prio": "Prio",
+    "Produced / Planned": "Wyprodukowano / Plan",
+    "Req. Skills": "Wym. umiejętności",
+    "Role / Station": "Rola / Stanowisko",
+    "Stations": "Stanowiska",
+    "UoM": "JM",
+    "Used": "Użyte",
+    "Users & Accounts": "Użytkownicy i konta"
 }

backend/resources/css/app.css

@@ -73,6 +73,27 @@
     }
 }
 
+/* ── Sidebar nav scrollbar ──────────────────────────────────────────────── */
+/* Slim, theme-matched scrollbar for the dark slate sidebar — overlays the    */
+/* track so it doesn't reserve a chunky gutter, and only shows the thumb.      */
+.sidebar-scroll {
+    scrollbar-width: thin;                       /* Firefox */
+    scrollbar-color: rgb(71 85 105) transparent; /* thumb / track (slate-600) */
+}
+.sidebar-scroll::-webkit-scrollbar {
+    width: 6px;
+}
+.sidebar-scroll::-webkit-scrollbar-track {
+    background: transparent;
+}
+.sidebar-scroll::-webkit-scrollbar-thumb {
+    background-color: rgb(71 85 105);            /* slate-600 */
+    border-radius: 9999px;
+}
+.sidebar-scroll:hover::-webkit-scrollbar-thumb {
+    background-color: rgb(100 116 139);          /* slate-500 on hover */
+}
+
 /* ── Global dark mode overrides for inline Tailwind classes ─────────────── */
 /* Cover hardcoded classes in blade templates without modifying each file    */
 

backend/resources/js/Pages/admin/Dashboard.jsx

@@ -261,62 +261,128 @@ function KpiCard({ href, label, value, accent, hint }) {
 }
 
 function OeeOverview({ records, lines }) {
-    const lineById = useMemo(() => new Map(lines.map((l) => [String(l.id), l])), [lines]);
+    // Today's OEE per line. Mirrors the old Blade widget: one gauge card per
+    // line, N/A where there's no record for today.
     const todayStr = new Date().toISOString().slice(0, 10);
-    const today = records.filter((r) => r.record_date === todayStr);
-    const yesterday = records.filter((r) => r.record_date !== todayStr);
-    const byLineToday = new Map(today.map((r) => [String(r.line_id), r]));
-    const byLineYesterday = new Map(yesterday.map((r) => [String(r.line_id), r]));
-    const lineIds = Array.from(
-        new Set([...byLineToday.keys(), ...byLineYesterday.keys()]),
-    ).sort();
+    const byLineToday = useMemo(
+        () => new Map(records.filter((r) => r.record_date === todayStr).map((r) => [String(r.line_id), r])),
+        [records, todayStr],
+    );
+    const sortedLines = useMemo(
+        () => [...lines].sort((a, b) => String(a.name ?? '').localeCompare(String(b.name ?? ''))),
+        [lines],
+    );
 
     return (
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-5">
-            <h2 className="text-lg font-bold text-gray-800 dark:text-gray-100 mb-3">{__('OEE Overview')}</h2>
-            <table className="w-full text-sm">
-                <thead>
-                    <tr className="text-left text-gray-500 dark:text-gray-400 border-b">
-                        <th className="py-2">{__('Line')}</th>
-                        <th className="py-2">{__('Today OEE')}</th>
-                        <th className="py-2">{__('Today A × P × Q')}</th>
-                        <th className="py-2">{__('Yesterday OEE')}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {lineIds.map((id) => {
-                        const t = byLineToday.get(id);
-                        const y = byLineYesterday.get(id);
-                        const line = lineById.get(id);
-                        return (
-                            <tr key={id} className="border-b last:border-0">
-                                <td className="py-2 font-medium">
-                                    {line?.name ?? __('Line :id', { id })}
-                                </td>
-                                <td className="py-2">
-                                    <OeeBadge value={t?.oee_pct} />
-                                </td>
-                                <td className="py-2 text-gray-600 dark:text-gray-300">
-                                    {t ? `${pct(t.availability_pct)} · ${pct(t.performance_pct)} · ${pct(t.quality_pct)}` : '—'}
-                                </td>
-                                <td className="py-2">
-                                    <OeeBadge value={y?.oee_pct} muted />
-                                </td>
-                            </tr>
-                        );
-                    })}
-                </tbody>
-            </table>
+            <div className="flex items-center justify-between mb-3">
+                <h2 className="text-lg font-bold text-gray-800 dark:text-gray-100">{__('OEE Overview')}</h2>
+                <a href="/admin/oee" className="text-sm text-blue-600 dark:text-blue-300 hover:underline">
+                    {__('Full report')} →
+                </a>
+            </div>
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
+                {sortedLines.map((line) => {
+                    const r = byLineToday.get(String(line.id));
+                    const value = r?.oee_pct != null ? Number(r.oee_pct) : null;
+                    return (
+                        <div
+                            key={line.id}
+                            className={`p-3 rounded-lg border flex flex-col items-center ${oeeCardClass(value)}`}
+                        >
+                            <p className="text-sm font-medium text-gray-700 dark:text-gray-200 text-center mb-2 truncate w-full">
+                                {line.name ?? __('Line :id', { id: line.id })}
+                            </p>
+                            <OeeGauge value={value} />
+                            {r ? (
+                                <div className="flex gap-2 text-xs text-gray-500 dark:text-gray-400 mt-2">
+                                    <span>A: {pct(r.availability_pct)}</span>
+                                    <span>P: {r.performance_pct != null ? pct(r.performance_pct) : '-'}</span>
+                                    <span>Q: {pct(r.quality_pct)}</span>
+                                </div>
+                            ) : (
+                                <div className="text-xs text-gray-400 dark:text-gray-500 mt-2">&nbsp;</div>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
         </div>
     );
 }
 
-function OeeBadge({ value, muted }) {
-    if (value == null) return <span className="text-gray-400 dark:text-gray-500">—</span>;
-    const n = Number(value);
-    const color =
-        n >= 85 ? 'text-green-600 dark:text-green-300' : n >= 60 ? 'text-yellow-600' : 'text-red-600 dark:text-red-300';
-    return <span className={`font-bold ${muted ? 'text-gray-500 dark:text-gray-400' : color}`}>{n.toFixed(1)}%</span>;
+// OEE banding — mirrors backend/app/Support/OeeBand.php (red < 65 ≤ yellow < 85 ≤ green).
+const OEE_RED_BELOW = 65;
+const OEE_GREEN_AT_LEAST = 85;
+
+function oeeColor(value) {
+    if (value == null) return 'gray';
+    if (value >= OEE_GREEN_AT_LEAST) return 'green';
+    if (value >= OEE_RED_BELOW) return 'yellow';
+    return 'red';
+}
+
+function oeeCardClass(value) {
+    return {
+        green: 'border-green-200 bg-green-50 dark:bg-green-900/20 dark:border-green-800',
+        yellow: 'border-yellow-200 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-800',
+        red: 'border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800',
+        gray: 'border-gray-200 bg-gray-50 dark:bg-slate-700 dark:border-slate-600',
+    }[oeeColor(value)];
+}
+
+function oeeTextClass(value) {
+    return {
+        green: 'text-green-600 dark:text-green-400',
+        yellow: 'text-yellow-600 dark:text-yellow-400',
+        red: 'text-red-600 dark:text-red-400',
+        gray: 'text-gray-500 dark:text-gray-400',
+    }[oeeColor(value)];
+}
+
+/**
+ * Semicircle OEE gauge with red/yellow/green zones and a needle — React port of
+ * the `<x-oee-gauge>` Blade component. Points lie on a unit semicircle centered
+ * at (50,50), r=40: p=0 → (10,50), p=50 → (50,10), p=100 → (90,50).
+ */
+function OeeGauge({ value, size = 104 }) {
+    const hasValue = value != null;
+    const p = hasValue ? Math.max(0, Math.min(100, Number(value))) : 0;
+    const pointAt = (q, r = 40) => {
+        const a = (q / 100) * Math.PI;
+        return [50 - r * Math.cos(a), 50 - r * Math.sin(a)];
+    };
+    const [rEndX, rEndY] = pointAt(OEE_RED_BELOW);
+    const [yEndX, yEndY] = pointAt(OEE_GREEN_AT_LEAST);
+    const [gEndX, gEndY] = pointAt(100);
+    const [needleX, needleY] = pointAt(p, 35);
+
+    return (
+        <div className="inline-flex flex-col items-center" style={{ width: size }}>
+            <svg viewBox="0 0 100 60" className="w-full h-auto" aria-hidden="true">
+                <path d="M 10 50 A 40 40 0 0 1 90 50" fill="none" stroke="currentColor" strokeWidth="10" className="text-gray-200 dark:text-slate-600" />
+                <path d={`M 10 50 A 40 40 0 0 1 ${rEndX} ${rEndY}`} fill="none" stroke="#ef4444" strokeWidth="10" />
+                <path d={`M ${rEndX} ${rEndY} A 40 40 0 0 1 ${yEndX} ${yEndY}`} fill="none" stroke="#eab308" strokeWidth="10" />
+                <path d={`M ${yEndX} ${yEndY} A 40 40 0 0 1 ${gEndX} ${gEndY}`} fill="none" stroke="#22c55e" strokeWidth="10" />
+                {hasValue ? (
+                    <>
+                        <line x1="50" y1="50" x2={needleX} y2={needleY} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" className="text-gray-800 dark:text-gray-100" />
+                        <circle cx="50" cy="50" r="2.2" fill="currentColor" className="text-gray-800 dark:text-gray-100" />
+                    </>
+                ) : (
+                    <circle cx="50" cy="50" r="2.2" fill="currentColor" className="text-gray-400" />
+                )}
+            </svg>
+            <div className="-mt-2 text-center leading-tight">
+                <div className={`font-bold ${oeeTextClass(hasValue ? p : null)}`} style={{ fontSize: size * 0.18 }}>
+                    {hasValue ? `${p.toFixed(1)}%` : 'N/A'}
+                </div>
+                <div className="text-gray-500 dark:text-gray-400 uppercase tracking-wide" style={{ fontSize: size * 0.085 }}>
+                    OEE
+                </div>
+            </div>
+        </div>
+    );
 }
 
 function InboundQcOverview({ stats }) {

backend/resources/js/Pages/admin/anomaly-reasons/Index.jsx

@@ -14,14 +14,16 @@ export default function AnomalyReasonsIndex() {
     ];
 
     const actions = (r) => [
-        { label: 'Edit', href: `/admin/anomaly-reasons/${r.id}/edit` },
+        { label: 'Edit', icon: 'edit', href: `/admin/anomaly-reasons/${r.id}/edit` },
         {
             label: r.is_active ? 'Deactivate' : 'Activate',
+            icon: r.is_active ? 'deactivate' : 'activate',
             onClick: () => router.post(`/admin/anomaly-reasons/${r.id}/toggle-active`, {}, { preserveScroll: true }),
         },
         {
             label: 'Delete',
-            className: 'text-red-600 hover:underline',
+            icon: 'delete',
+            variant: 'danger',
             onClick: () => {
                 if (confirm(`Delete anomaly reason "${r.name}"?`)) {
                     router.delete(`/admin/anomaly-reasons/${r.id}`, { preserveScroll: true });

backend/resources/js/Pages/admin/areas/Index.jsx

@@ -14,14 +14,16 @@ export default function AreasIndex() {
     ];
 
     const actions = (r) => [
-        { label: 'Edit', href: `/admin/areas/${r.id}/edit` },
+        { label: 'Edit', icon: 'edit', href: `/admin/areas/${r.id}/edit` },
         {
             label: r.is_active ? 'Deactivate' : 'Activate',
+            icon: r.is_active ? 'deactivate' : 'activate',
             onClick: () => router.post(`/admin/areas/${r.id}/toggle-active`, {}, { preserveScroll: true }),
         },
         {
             label: 'Delete',
-            className: 'text-red-600 hover:underline',
+            icon: 'delete',
+            variant: 'danger',
             onClick: () => {
                 if (confirm(`Delete area "${r.name}"?`)) {
                     router.delete(`/admin/areas/${r.id}`, { preserveScroll: true });