RTDC Dashboard v3

app/Http/Controllers/DashboardController.php

@@ -7,16 +7,16 @@
 
 class DashboardController extends Controller
 {
-public function index(Request $request)
-{
-    $request->session()->put('workflow', 'or');
-    return Inertia::render('Dashboard/OR');
-}
+    public function index(Request $request)
+    {
+        $request->session()->put('workflow', 'perioperative');
+        return Inertia::render('Dashboard/Perioperative');
+    }
 
     public function changeWorkflow(Request $request)
     {
         $request->validate([
-            'workflow' => 'required|in:rtdc,or,ed',
+            'workflow' => 'required|in:rtdc,perioperative,emergency,improvement',
         ]);
 
         // Update the workflow in the session
@@ -29,4 +29,25 @@ public function changeWorkflow(Request $request)
             'workflow' => $workflow,
         ]);
     }
+
+    public function improvement(Request $request)
+    {
+        $request->session()->put('workflow', 'improvement');
+        return Inertia::render('Dashboard/Improvement');
+    }
+
+    public function opportunities(Request $request)
+    {
+        return Inertia::render('Improvement/Opportunities');
+    }
+
+    public function library(Request $request)
+    {
+        return Inertia::render('Improvement/Library');
+    }
+
+    public function active(Request $request)
+    {
+        return Inertia::render('Improvement/Active');
+    }
 }

package.json

@@ -26,6 +26,8 @@
     "dependencies": {
         "@heroui/react": "^2.6.14",
         "@iconify/icons-solar": "^1.2.3",
-        "framer-motion": "^12.0.6"
+        "chart.js": "^4.4.7",
+        "framer-motion": "^12.0.6",
+        "react-chartjs-2": "^5.3.0"
     }
 }

resources/js/Components/Dashboard/Charts/BarChart.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend
+} from 'chart.js';
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend
+);
+
+const defaultOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            display: false
+        },
+        tooltip: {
+            mode: 'index',
+            intersect: false,
+            backgroundColor: 'rgb(var(--color-healthcare-background))',
+            titleColor: 'rgb(var(--color-healthcare-text-primary))',
+            bodyColor: 'rgb(var(--color-healthcare-text-secondary))',
+            borderColor: 'rgb(var(--color-healthcare-border))',
+            borderWidth: 1,
+            padding: 12,
+            bodySpacing: 8,
+            titleSpacing: 8,
+            cornerRadius: 8,
+            displayColors: true,
+            boxWidth: 8,
+            boxHeight: 8,
+            boxPadding: 4,
+            usePointStyle: true,
+            callbacks: {
+                label: function(context) {
+                    const value = context.parsed.x || context.parsed.y;
+                    return `${context.dataset.label || ''}: ${value}`;
+                }
+            }
+        }
+    },
+    scales: {
+        x: {
+            grid: {
+                display: false,
+                drawBorder: false
+            },
+            ticks: {
+                color: 'rgb(var(--color-healthcare-text-secondary))',
+                font: {
+                    size: 12
+                }
+            }
+        },
+        y: {
+            grid: {
+                color: 'rgba(var(--color-healthcare-border), 0.1)',
+                drawBorder: false
+            },
+            ticks: {
+                color: 'rgb(var(--color-healthcare-text-secondary))',
+                font: {
+                    size: 12
+                },
+                padding: 8
+            },
+            beginAtZero: true
+        }
+    }
+};
+
+export const BarChart = ({ data, options = {} }) => {
+    const chartOptions = {
+        ...defaultOptions,
+        ...options,
+        plugins: {
+            ...defaultOptions.plugins,
+            ...options.plugins
+        },
+        scales: {
+            ...defaultOptions.scales,
+            ...options.scales
+        }
+    };
+
+    return <Bar data={data} options={chartOptions} />;
+};
+
+export default BarChart;