npms-exam-kit 1.0.0

package/projects/SIMS-master/frontend-project/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "frontend-project",
+  "version": "1.0.0",
+  "description": "SmartPark SIMS Frontend",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.16.1",
+    "html2pdf.js": "^0.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1",
+    "sucrase": "^3.34.0"
+  },
+  "devDependencies": {
+    "@babel/traverse": "^7.25.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "vite": "^5.0.8"
+  }
+}

package/projects/SIMS-master/frontend-project/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/projects/SIMS-master/frontend-project/src/App.jsx

@@ -0,0 +1,53 @@
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import Login from './pages/Login';
+import SparePart from './pages/SparePart';
+import StockIn from './pages/StockIn';
+import StockOut from './pages/StockOut';
+import Reports from './pages/Reports';
+import Navbar from './components/Navbar';
+
+axios.defaults.baseURL = 'http://localhost:5000';
+axios.defaults.withCredentials = true;
+
+function PrivateRoute({ children, isAuthenticated }) {
+  return isAuthenticated ? children : <Navigate to="/login" replace />;
+}
+
+function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    axios.get('/api/auth/check')
+      .then(res => setIsAuthenticated(res.data.authenticated))
+      .catch(() => setIsAuthenticated(false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-screen bg-gray-100">
+        <div className="text-blue-800 text-xl font-semibold">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <Router>
+      {isAuthenticated && <Navbar setIsAuthenticated={setIsAuthenticated} />}
+      <Routes>
+        <Route path="/login" element={<Login setIsAuthenticated={setIsAuthenticated} />} />
+        <Route path="/" element={<PrivateRoute isAuthenticated={isAuthenticated}><SparePart /></PrivateRoute>} />
+        <Route path="/spare-parts" element={<PrivateRoute isAuthenticated={isAuthenticated}><SparePart /></PrivateRoute>} />
+        <Route path="/stock-in" element={<PrivateRoute isAuthenticated={isAuthenticated}><StockIn /></PrivateRoute>} />
+        <Route path="/stock-out" element={<PrivateRoute isAuthenticated={isAuthenticated}><StockOut /></PrivateRoute>} />
+        <Route path="/reports" element={<PrivateRoute isAuthenticated={isAuthenticated}><Reports /></PrivateRoute>} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

package/projects/SIMS-master/frontend-project/src/components/Navbar.jsx

@@ -0,0 +1,103 @@
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import axios from 'axios';
+
+function Navbar({ setIsAuthenticated }) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const handleLogout = async () => {
+    try {
+      await axios.post('/api/auth/logout');
+    } catch (_) {}
+    setIsAuthenticated(false);
+    navigate('/login');
+  };
+
+  const links = [
+    { to: '/spare-parts', label: 'Spare Parts' },
+    { to: '/stock-in', label: 'Stock In' },
+    { to: '/stock-out', label: 'Stock Out' },
+    { to: '/reports', label: 'Reports' },
+  ];
+
+  const isActive = (path) =>
+    location.pathname === path
+      ? 'bg-blue-900 text-white'
+      : 'text-blue-100 hover:bg-blue-700 hover:text-white';
+
+  return (
+    <nav className="bg-blue-800 shadow-lg">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          {/* Brand */}
+          <div className="flex items-center space-x-2">
+            <div className="bg-white rounded p-1">
+              <svg className="w-6 h-6 text-blue-800" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
+              </svg>
+            </div>
+            <span className="text-white font-bold text-lg">SmartPark SIMS</span>
+          </div>
+
+          {/* Desktop links */}
+          <div className="hidden md:flex items-center space-x-1">
+            {links.map(link => (
+              <Link
+                key={link.to}
+                to={link.to}
+                className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${isActive(link.to)}`}
+              >
+                {link.label}
+              </Link>
+            ))}
+            <button
+              onClick={handleLogout}
+              className="ml-2 px-4 py-2 rounded-md text-sm font-medium bg-red-600 text-white hover:bg-red-700 transition-colors"
+            >
+              Logout
+            </button>
+          </div>
+
+          {/* Mobile menu button */}
+          <button
+            className="md:hidden text-white p-2 rounded"
+            onClick={() => setMenuOpen(!menuOpen)}
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {menuOpen
+                ? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              }
+            </svg>
+          </button>
+        </div>
+
+        {/* Mobile menu */}
+        {menuOpen && (
+          <div className="md:hidden pb-3 space-y-1">
+            {links.map(link => (
+              <Link
+                key={link.to}
+                to={link.to}
+                onClick={() => setMenuOpen(false)}
+                className={`block px-4 py-2 rounded-md text-sm font-medium ${isActive(link.to)}`}
+              >
+                {link.label}
+              </Link>
+            ))}
+            <button
+              onClick={handleLogout}
+              className="w-full text-left px-4 py-2 rounded-md text-sm font-medium bg-red-600 text-white hover:bg-red-700"
+            >
+              Logout
+            </button>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;

package/projects/SIMS-master/frontend-project/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/projects/SIMS-master/frontend-project/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/projects/SIMS-master/frontend-project/src/pages/Login.jsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+function Login({ setIsAuthenticated }) {
+  const [form, setForm] = useState({ username: '', password: '' });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      await axios.post('/api/auth/login', form);
+      setIsAuthenticated(true);
+      navigate('/spare-parts');
+    } catch (err) {
+      setError(err.response?.data?.message || 'Login failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-900 via-blue-800 to-blue-600 flex items-center justify-center px-4">
+      <div className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-800 rounded-full mb-4">
+            <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
+            </svg>
+          </div>
+          <h1 className="text-3xl font-bold text-blue-900">SmartPark</h1>
+          <p className="text-gray-500 mt-1 text-sm">Stock Inventory Management System</p>
+        </div>
+
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-5 text-sm flex items-center gap-2">
+            <svg className="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" />
+            </svg>
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-1">Username</label>
+            <input
+              type="text"
+              value={form.username}
+              onChange={e => setForm({ ...form, username: e.target.value })}
+              required
+              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+              placeholder="Enter your username"
+              autoComplete="username"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-semibold text-gray-700 mb-1">Password</label>
+            <input
+              type="password"
+              value={form.password}
+              onChange={e => setForm({ ...form, password: e.target.value })}
+              required
+              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+              placeholder="Enter your password"
+              autoComplete="current-password"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-800 text-white py-2.5 rounded-lg font-semibold hover:bg-blue-900 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+
+        <div className="mt-6 p-3 bg-gray-50 rounded-lg border border-gray-200">
+          <p className="text-xs text-gray-500 text-center">
+            Default credentials: <span className="font-semibold text-gray-700">admin</span> / <span className="font-semibold text-gray-700">Admin@123</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

package/projects/SIMS-master/frontend-project/src/pages/Reports.jsx

@@ -0,0 +1,279 @@
+import { useState, useEffect, useRef } from 'react';
+import axios from 'axios';
+
+function Reports() {
+  const today = new Date().toISOString().split('T')[0];
+  const [selectedDate, setSelectedDate] = useState(today);
+  const [stockOutReport, setStockOutReport] = useState([]);
+  const [stockStatus, setStockStatus] = useState([]);
+  const [activeTab, setActiveTab] = useState('stockout');
+  const [loading, setLoading] = useState(false);
+  const reportRef = useRef();
+
+  const fetchReports = async (date) => {
+    setLoading(true);
+    try {
+      const [soRes, ssRes] = await Promise.all([
+        axios.get(`/api/reports/daily-stockout?date=${date}`),
+        axios.get(`/api/reports/stock-status?date=${date}`),
+      ]);
+      setStockOutReport(soRes.data);
+      setStockStatus(ssRes.data);
+    } catch (_) {}
+    setLoading(false);
+  };
+
+  useEffect(() => { fetchReports(selectedDate); }, [selectedDate]);
+
+  const stockOutTotal = stockOutReport.reduce((sum, r) => sum + parseFloat(r.StockOutTotalPrice || 0), 0);
+  const stockOutQty = stockOutReport.reduce((sum, r) => sum + r.StockOutQuantity, 0);
+
+  const handlePrint = () => window.print();
+
+  const [exporting, setExporting] = useState(false);
+
+  const handleExportPDF = async () => {
+    if (exporting) return;
+    setExporting(true);
+    try {
+      const { jsPDF } = await import('jspdf');
+      const doc = new jsPDF({ unit: 'mm', format: 'a4', orientation: 'portrait' });
+      let y = 20;
+      const c = (t, s = 14, b = 'bold') => { doc.setFontSize(s); doc.setFont('helvetica', b); doc.text(t, (210 - doc.getTextWidth(t)) / 2, y); y += s * 0.45; };
+      const l = (t, s = 10, b = 'normal', x = 15) => { doc.setFontSize(s); doc.setFont('helvetica', b); doc.text(t, x, y); y += s * 0.45; };
+      const hdr = (cols) => { doc.setFontSize(9); doc.setFont('helvetica', 'bold'); const xs = [15, 65, 105, 140, 170]; cols.forEach((c, i) => doc.text(c, xs[i], y)); y += 5; doc.line(15, y, 195, y); y += 3; };
+      const row = (cols) => { doc.setFontSize(9); doc.setFont('helvetica', 'normal'); const xs = [15, 65, 105, 140, 170]; cols.forEach((c, i) => doc.text(String(c), xs[i], y)); y += 4.5; };
+
+      c('SmartPark - SIMS', 16);
+      c(`Date: ${new Date(selectedDate + 'T00:00:00').toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}`, 10, 'normal');
+      y += 4;
+
+      if (activeTab === 'stockout') {
+        c('DAILY STOCK OUT REPORT', 12);
+        y += 2;
+        hdr(['#', 'Spare Part', 'Category', 'Qty Out', 'Total (RWF)']);
+        stockOutReport.forEach((r, i) => row([i + 1, r.SparepartName, r.Category, r.StockOutQuantity, Number(r.StockOutTotalPrice).toLocaleString()]));
+        if (stockOutReport.length > 0) { doc.line(15, y, 195, y); y += 3; doc.setFont('helvetica', 'bold'); row(['', 'TOTAL', '', stockOutQty, stockOutTotal.toLocaleString()]); }
+      } else {
+        c('DAILY STOCK STATUS REPORT', 12);
+        y += 2;
+        hdr(['#', 'Spare Part', 'Category', 'Stored', 'Remaining']);
+        stockStatus.forEach((r, i) => row([i + 1, r.SparepartName, r.Category, r.StoredQuantity, r.RemainingQuantity]));
+      }
+
+      doc.save(`SmartPark_SIMS_Report_${selectedDate}.pdf`);
+    } catch (err) {
+      console.error('PDF export failed:', err);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">Reports</h2>
+          <p className="text-gray-500 text-sm mt-1">Daily stock reports for SmartPark</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <div>
+            <label className="block text-xs text-gray-500 mb-1">Select Date</label>
+            <input
+              type="date"
+              value={selectedDate}
+              onChange={e => setSelectedDate(e.target.value)}
+              className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
+            />
+          </div>
+          <button
+            onClick={handlePrint}
+            className="mt-5 bg-blue-800 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-900 transition-colors flex items-center gap-2"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+            </svg>
+            Print
+          </button>
+          <button
+            onClick={handleExportPDF}
+            disabled={exporting}
+            className="mt-5 bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-800 transition-colors flex items-center gap-2 disabled:opacity-60"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            {exporting ? 'Exporting...' : 'Export PDF'}
+          </button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex border-b mb-6">
+        <button
+          onClick={() => setActiveTab('stockout')}
+          className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'stockout' ? 'border-blue-800 text-blue-800' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
+        >
+          Daily Stock Out Report
+        </button>
+        <button
+          onClick={() => setActiveTab('status')}
+          className={`px-6 py-3 text-sm font-medium border-b-2 transition-colors ${activeTab === 'status' ? 'border-blue-800 text-blue-800' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
+        >
+          Stock Status Report
+        </button>
+      </div>
+
+          {loading ? (
+        <div className="text-center py-12 text-gray-400">Loading reports...</div>
+      ) : (
+        <div ref={reportRef}>
+          {/* Daily Stock Out Report */}
+          {activeTab === 'stockout' && (
+            <div>
+              <div className="mb-4 p-4 bg-blue-50 rounded-lg border border-blue-100 flex flex-wrap gap-6">
+                <div>
+                  <span className="text-xs text-blue-600 font-medium uppercase">Report Date</span>
+                  <p className="text-base font-bold text-blue-900">
+                    {new Date(selectedDate + 'T00:00:00').toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                  </p>
+                </div>
+                <div>
+                  <span className="text-xs text-blue-600 font-medium uppercase">Total Records</span>
+                  <p className="text-base font-bold text-blue-900">{stockOutReport.length}</p>
+                </div>
+                <div>
+                  <span className="text-xs text-blue-600 font-medium uppercase">Total Qty Out</span>
+                  <p className="text-base font-bold text-blue-900">{stockOutQty}</p>
+                </div>
+                <div>
+                  <span className="text-xs text-blue-600 font-medium uppercase">Total Value (RWF)</span>
+                  <p className="text-base font-bold text-blue-900">{stockOutTotal.toLocaleString()}</p>
+                </div>
+              </div>
+
+              <div className="bg-white rounded-xl shadow overflow-hidden">
+                <div className="px-6 py-4 border-b bg-gray-50">
+                  <h3 className="font-semibold text-gray-700">SmartPark — Daily Stock Out Report</h3>
+                  <p className="text-xs text-gray-500 mt-0.5">Date: {new Date(selectedDate + 'T00:00:00').toLocaleDateString('en-GB')}</p>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead className="bg-blue-800 text-white">
+                      <tr>
+                        <th className="px-4 py-3 text-left">#</th>
+                        <th className="px-4 py-3 text-left">Spare Part</th>
+                        <th className="px-4 py-3 text-left">Category</th>
+                        <th className="px-4 py-3 text-right">Qty Out</th>
+                        <th className="px-4 py-3 text-right">Unit Price (RWF)</th>
+                        <th className="px-4 py-3 text-right">Total Price (RWF)</th>
+                        <th className="px-4 py-3 text-left">Date</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100">
+                      {stockOutReport.length === 0 ? (
+                        <tr>
+                          <td colSpan="7" className="text-center py-10 text-gray-400">
+                            No stock out records for {new Date(selectedDate + 'T00:00:00').toLocaleDateString('en-GB')}.
+                          </td>
+                        </tr>
+                      ) : stockOutReport.map((r, i) => (
+                        <tr key={r.StockOutID} className="hover:bg-gray-50">
+                          <td className="px-4 py-3 text-gray-500">{i + 1}</td>
+                          <td className="px-4 py-3 font-semibold">{r.SparepartName}</td>
+                          <td className="px-4 py-3">
+                            <span className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs">{r.Category}</span>
+                          </td>
+                          <td className="px-4 py-3 text-right font-semibold text-red-600">{r.StockOutQuantity}</td>
+                          <td className="px-4 py-3 text-right">{Number(r.StockOutUnitPrice).toLocaleString()}</td>
+                          <td className="px-4 py-3 text-right font-semibold">{Number(r.StockOutTotalPrice).toLocaleString()}</td>
+                          <td className="px-4 py-3">{new Date(r.StockOutDate).toLocaleDateString('en-GB')}</td>
+                        </tr>
+                      ))}
+                      {stockOutReport.length > 0 && (
+                        <tr className="bg-blue-50 font-bold">
+                          <td colSpan="3" className="px-4 py-3 text-right text-gray-700">TOTALS</td>
+                          <td className="px-4 py-3 text-right text-red-700">{stockOutQty}</td>
+                          <td className="px-4 py-3"></td>
+                          <td className="px-4 py-3 text-right text-gray-800">{stockOutTotal.toLocaleString()}</td>
+                          <td className="px-4 py-3"></td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Stock Status Report */}
+          {activeTab === 'status' && (
+            <div>
+              <div className="mb-4 p-4 bg-blue-50 rounded-lg border border-blue-100">
+                <span className="text-xs text-blue-600 font-medium uppercase">Report Date</span>
+                <p className="text-base font-bold text-blue-900">
+                  {new Date(selectedDate + 'T00:00:00').toLocaleDateString('en-GB', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                </p>
+              </div>
+
+              <div className="bg-white rounded-xl shadow overflow-hidden">
+                <div className="px-6 py-4 border-b bg-gray-50">
+                  <h3 className="font-semibold text-gray-700">SmartPark Daily Stock Status Report</h3>
+                  <p className="text-xs text-gray-500 mt-0.5">Date: {new Date(selectedDate + 'T00:00:00').toLocaleDateString('en-GB')}</p>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead className="bg-blue-800 text-white">
+                      <tr>
+                        <th className="px-4 py-3 text-left">#</th>
+                        <th className="px-4 py-3 text-left">Spare Part</th>
+                        <th className="px-4 py-3 text-left">Category</th>
+                        <th className="px-4 py-3 text-right">Stored Qty</th>
+                        <th className="px-4 py-3 text-right">Stock Out</th>
+                        <th className="px-4 py-3 text-right">Remaining Qty</th>
+                        <th className="px-4 py-3 text-center">Status</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-100">
+                      {stockStatus.length === 0 ? (
+                        <tr>
+                          <td colSpan="7" className="text-center py-10 text-gray-400">No spare parts found.</td>
+                        </tr>
+                      ) : stockStatus.map((r, i) => {
+                        const isLow = r.RemainingQuantity <= 5;
+                        const isEmpty = r.RemainingQuantity === 0;
+                        return (
+                          <tr key={r.SparePartID} className="hover:bg-gray-50">
+                            <td className="px-4 py-3 text-gray-500">{i + 1}</td>
+                            <td className="px-4 py-3 font-semibold">{r.SparepartName}</td>
+                            <td className="px-4 py-3">
+                              <span className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs">{r.Category}</span>
+                            </td>
+                            <td className="px-4 py-3 text-right">{r.StoredQuantity}</td>
+                            <td className="px-4 py-3 text-right font-semibold text-red-600">{r.DailyStockOut}</td>
+                            <td className="px-4 py-3 text-right font-bold text-gray-800">{r.RemainingQuantity}</td>
+                            <td className="px-4 py-3 text-center">
+                              {isEmpty ? (
+                                <span className="bg-red-100 text-red-700 px-2 py-0.5 rounded-full text-xs font-medium">Out of Stock</span>
+                              ) : isLow ? (
+                                <span className="bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs font-medium">Low Stock</span>
+                              ) : (
+                                <span className="bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs font-medium">In Stock</span>
+                              )}
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Reports;