npms-exam-kit 1.0.0

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

@@ -0,0 +1,185 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function Alert({ message, type, onClose }) {
+  if (!message) return null;
+  return (
+    <div className={`px-4 py-3 rounded-lg mb-4 text-sm flex justify-between items-center ${type === 'success' ? 'bg-green-50 border border-green-200 text-green-700' : 'bg-red-50 border border-red-200 text-red-700'}`}>
+      <span>{message}</span>
+      <button onClick={onClose} className="ml-4 font-bold text-lg leading-none">&times;</button>
+    </div>
+  );
+}
+
+function SparePart() {
+  const [spareParts, setSpareParts] = useState([]);
+  const [form, setForm] = useState({ Name: '', Category: '', Quantity: '', UnitPrice: '' });
+  const [loading, setLoading] = useState(false);
+  const [alert, setAlert] = useState({ message: '', type: '' });
+
+  const fetchSpareParts = async () => {
+    try {
+      const res = await axios.get('/api/spare-parts');
+      setSpareParts(res.data);
+    } catch (_) {}
+  };
+
+  useEffect(() => { fetchSpareParts(); }, []);
+
+  const showAlert = (message, type) => {
+    setAlert({ message, type });
+    setTimeout(() => setAlert({ message: '', type: '' }), 4000);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await axios.post('/api/spare-parts', form);
+      showAlert('Spare part added successfully!', 'success');
+      setForm({ Name: '', Category: '', Quantity: '', UnitPrice: '' });
+      fetchSpareParts();
+    } catch (err) {
+      showAlert(err.response?.data?.message || 'Failed to add spare part.', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const totalValue = spareParts.reduce((sum, sp) => sum + parseFloat(sp.TotalPrice || 0), 0);
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold text-gray-800">Spare Parts</h2>
+        <p className="text-gray-500 text-sm mt-1">Manage your spare parts inventory</p>
+      </div>
+
+      {/* Summary cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
+        <div className="bg-blue-800 text-white rounded-xl p-5 shadow">
+          <p className="text-blue-200 text-sm">Total Parts</p>
+          <p className="text-3xl font-bold mt-1">{spareParts.length}</p>
+        </div>
+        <div className="bg-green-700 text-white rounded-xl p-5 shadow">
+          <p className="text-green-200 text-sm">Total Stock Value (RWF)</p>
+          <p className="text-3xl font-bold mt-1">{totalValue.toLocaleString()}</p>
+        </div>
+      </div>
+
+      {/* Add form */}
+      <div className="bg-white rounded-xl shadow p-6 mb-8">
+        <h3 className="text-lg font-semibold text-gray-700 mb-4 border-b pb-2">Add New Spare Part</h3>
+        <Alert message={alert.message} type={alert.type} onClose={() => setAlert({ message: '', type: '' })} />
+        <form onSubmit={handleSubmit} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Name *</label>
+            <input
+              type="text"
+              value={form.Name}
+              onChange={e => setForm({ ...form, Name: e.target.value })}
+              required
+              placeholder="e.g. Brake Pad"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Category *</label>
+            <input
+              type="text"
+              value={form.Category}
+              onChange={e => setForm({ ...form, Category: e.target.value })}
+              required
+              placeholder="e.g. Braking System"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Quantity *</label>
+            <input
+              type="number"
+              min="1"
+              value={form.Quantity}
+              onChange={e => setForm({ ...form, Quantity: e.target.value })}
+              required
+              placeholder="0"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Unit Price (RWF) *</label>
+            <input
+              type="number"
+              min="0"
+              step="0.01"
+              value={form.UnitPrice}
+              onChange={e => setForm({ ...form, UnitPrice: e.target.value })}
+              required
+              placeholder="0.00"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
+            />
+          </div>
+          {form.Quantity && form.UnitPrice && (
+            <div className="sm:col-span-2 lg:col-span-4">
+              <p className="text-sm text-blue-700 font-medium">
+                Total Price: RWF {(parseFloat(form.Quantity) * parseFloat(form.UnitPrice)).toLocaleString()}
+              </p>
+            </div>
+          )}
+          <div className="sm:col-span-2 lg:col-span-4">
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-blue-800 text-white px-6 py-2 rounded-lg hover:bg-blue-900 font-medium transition-colors disabled:opacity-60 text-sm"
+            >
+              {loading ? 'Adding...' : 'Add Spare Part'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-xl shadow overflow-hidden">
+        <div className="px-6 py-4 border-b">
+          <h3 className="text-lg font-semibold text-gray-700">Spare Parts List</h3>
+        </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">Name</th>
+                <th className="px-4 py-3 text-left">Category</th>
+                <th className="px-4 py-3 text-right">Quantity</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>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {spareParts.length === 0 ? (
+                <tr>
+                  <td colSpan="6" className="text-center py-10 text-gray-400">
+                    No spare parts recorded yet.
+                  </td>
+                </tr>
+              ) : spareParts.map((sp, i) => (
+                <tr key={sp.SparePartID} className="hover:bg-gray-50 transition-colors">
+                  <td className="px-4 py-3 text-gray-500">{i + 1}</td>
+                  <td className="px-4 py-3 font-semibold text-gray-800">{sp.Name}</td>
+                  <td className="px-4 py-3">
+                    <span className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full text-xs font-medium">{sp.Category}</span>
+                  </td>
+                  <td className="px-4 py-3 text-right font-medium">{sp.Quantity}</td>
+                  <td className="px-4 py-3 text-right">{Number(sp.UnitPrice).toLocaleString()}</td>
+                  <td className="px-4 py-3 text-right font-semibold text-green-700">{Number(sp.TotalPrice).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SparePart;

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

@@ -0,0 +1,170 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function Alert({ message, type, onClose }) {
+  if (!message) return null;
+  return (
+    <div className={`px-4 py-3 rounded-lg mb-4 text-sm flex justify-between items-center ${type === 'success' ? 'bg-green-50 border border-green-200 text-green-700' : 'bg-red-50 border border-red-200 text-red-700'}`}>
+      <span>{message}</span>
+      <button onClick={onClose} className="ml-4 font-bold text-lg leading-none">&times;</button>
+    </div>
+  );
+}
+
+function StockIn() {
+  const [stockIns, setStockIns] = useState([]);
+  const [spareParts, setSpareParts] = useState([]);
+  const [form, setForm] = useState({ SparePartID: '', StockInQuantity: '', StockInDate: '' });
+  const [loading, setLoading] = useState(false);
+  const [alert, setAlert] = useState({ message: '', type: '' });
+
+  const fetchData = async () => {
+    try {
+      const [siRes, spRes] = await Promise.all([
+        axios.get('/api/stock-in'),
+        axios.get('/api/spare-parts'),
+      ]);
+      setStockIns(siRes.data);
+      setSpareParts(spRes.data);
+    } catch (_) {}
+  };
+
+  useEffect(() => { fetchData(); }, []);
+
+  const showAlert = (message, type) => {
+    setAlert({ message, type });
+    setTimeout(() => setAlert({ message: '', type: '' }), 4000);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await axios.post('/api/stock-in', form);
+      showAlert('Stock in recorded successfully!', 'success');
+      setForm({ SparePartID: '', StockInQuantity: '', StockInDate: '' });
+      fetchData();
+    } catch (err) {
+      showAlert(err.response?.data?.message || 'Failed to record stock in.', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const totalIn = stockIns.reduce((sum, si) => sum + si.StockInQuantity, 0);
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold text-gray-800">Stock In</h2>
+        <p className="text-gray-500 text-sm mt-1">Record spare parts received into stock</p>
+      </div>
+
+      {/* Summary */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
+        <div className="bg-blue-800 text-white rounded-xl p-5 shadow">
+          <p className="text-blue-200 text-sm">Total Records</p>
+          <p className="text-3xl font-bold mt-1">{stockIns.length}</p>
+        </div>
+        <div className="bg-teal-600 text-white rounded-xl p-5 shadow">
+          <p className="text-teal-100 text-sm">Total Units Received</p>
+          <p className="text-3xl font-bold mt-1">{totalIn.toLocaleString()}</p>
+        </div>
+      </div>
+
+      {/* Form */}
+      <div className="bg-white rounded-xl shadow p-6 mb-8">
+        <h3 className="text-lg font-semibold text-gray-700 mb-4 border-b pb-2">Record Stock In</h3>
+        <Alert message={alert.message} type={alert.type} onClose={() => setAlert({ message: '', type: '' })} />
+        <form onSubmit={handleSubmit} className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Spare Part </label>
+            <select
+              value={form.SparePartID}
+              onChange={e => setForm({ ...form, SparePartID: e.target.value })}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm bg-white"
+            >
+              <option value=""> Select Spare Part </option>
+              {spareParts.map(sp => (
+                <option key={sp.SparePartID} value={sp.SparePartID}>
+                  {sp.Name} ({sp.Category})
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Quantity </label>
+            <input
+              type="number"
+              min="1"
+              value={form.StockInQuantity}
+              onChange={e => setForm({ ...form, StockInQuantity: e.target.value })}
+              required
+              placeholder="Enter quantity"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Date </label>
+            <input
+              type="date"
+              value={form.StockInDate}
+              onChange={e => setForm({ ...form, StockInDate: e.target.value })}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
+            />
+          </div>
+          <div className="sm:col-span-3">
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-blue-800 text-white px-6 py-2 rounded-lg hover:bg-blue-900 font-medium transition-colors disabled:opacity-60 text-sm"
+            >
+              {loading ? 'Recording...' : 'Record Stock In'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-xl shadow overflow-hidden">
+        <div className="px-6 py-4 border-b">
+          <h3 className="text-lg font-semibold text-gray-700">Stock In History</h3>
+        </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">Quantity In</th>
+                <th className="px-4 py-3 text-left">Date</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {stockIns.length === 0 ? (
+                <tr>
+                  <td colSpan="5" className="text-center py-10 text-gray-400">No stock in records yet.</td>
+                </tr>
+              ) : stockIns.map((si, i) => (
+                <tr key={si.StockInID} className="hover:bg-gray-50 transition-colors">
+                  <td className="px-4 py-3 text-gray-500">{i + 1}</td>
+                  <td className="px-4 py-3 font-semibold text-gray-800">{si.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 font-medium">{si.Category}</span>
+                  </td>
+                  <td className="px-4 py-3 text-right font-semibold text-teal-700">+{si.StockInQuantity}</td>
+                  <td className="px-4 py-3 text-gray-600">{new Date(si.StockInDate).toLocaleDateString('en-GB')}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default StockIn;

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

@@ -0,0 +1,288 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+function Alert({ message, type, onClose }) {
+  if (!message) return null;
+  return (
+    <div className={`px-4 py-3 rounded-lg mb-4 text-sm flex justify-between items-center ${type === 'success' ? 'bg-green-50 border border-green-200 text-green-700' : 'bg-red-50 border border-red-200 text-red-700'}`}>
+      <span>{message}</span>
+      <button onClick={onClose} className="ml-4 font-bold text-lg leading-none">&times;</button>
+    </div>
+  );
+}
+
+const emptyForm = { SparePartID: '', StockOutQuantity: '', StockOutUnitPrice: '', StockOutDate: '' };
+
+function StockOut() {
+  const [stockOuts, setStockOuts] = useState([]);
+  const [spareParts, setSpareParts] = useState([]);
+  const [form, setForm] = useState(emptyForm);
+  const [editId, setEditId] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [deleteId, setDeleteId] = useState(null);
+  const [alert, setAlert] = useState({ message: '', type: '' });
+
+  const fetchData = async () => {
+    try {
+      const [soRes, spRes] = await Promise.all([
+        axios.get('/api/stock-out'),
+        axios.get('/api/spare-parts'),
+      ]);
+      setStockOuts(soRes.data);
+      setSpareParts(spRes.data);
+    } catch (_) {}
+  };
+
+  useEffect(() => { fetchData(); }, []);
+
+  const showAlert = (message, type) => {
+    setAlert({ message, type });
+    setTimeout(() => setAlert({ message: '', type: '' }), 4000);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      if (editId) {
+        await axios.put(`/api/stock-out/${editId}`, form);
+        showAlert('Stock out updated successfully!', 'success');
+        setEditId(null);
+      } else {
+        await axios.post('/api/stock-out', form);
+        showAlert('Stock out recorded successfully!', 'success');
+      }
+      setForm(emptyForm);
+      fetchData();
+    } catch (err) {
+      showAlert(err.response?.data?.message || 'Operation failed.', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEdit = (record) => {
+    setEditId(record.StockOutID);
+    setForm({
+      SparePartID: record.SparePartID,
+      StockOutQuantity: record.StockOutQuantity,
+      StockOutUnitPrice: record.StockOutUnitPrice,
+      StockOutDate: record.StockOutDate?.split('T')[0] || record.StockOutDate,
+    });
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleCancelEdit = () => {
+    setEditId(null);
+    setForm(emptyForm);
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await axios.delete(`/api/stock-out/${id}`);
+      showAlert('Stock out deleted successfully!', 'success');
+      setDeleteId(null);
+      fetchData();
+    } catch (err) {
+      showAlert(err.response?.data?.message || 'Delete failed.', 'error');
+      setDeleteId(null);
+    }
+  };
+
+  const computedTotal = form.StockOutQuantity && form.StockOutUnitPrice
+    ? parseFloat(form.StockOutQuantity) * parseFloat(form.StockOutUnitPrice)
+    : 0;
+
+  const totalOut = stockOuts.reduce((sum, so) => sum + parseFloat(so.StockOutTotalPrice || 0), 0);
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold text-gray-800">Stock Out</h2>
+        <p className="text-gray-500 text-sm mt-1">Record and manage spare parts taken out of stock</p>
+      </div>
+
+      {/* Summary */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
+        <div className="bg-blue-800 text-white rounded-xl p-5 shadow">
+          <p className="text-blue-200 text-sm">Total Records</p>
+          <p className="text-3xl font-bold mt-1">{stockOuts.length}</p>
+        </div>
+        <div className="bg-red-600 text-white rounded-xl p-5 shadow">
+          <p className="text-red-100 text-sm">Total Value Out (RWF)</p>
+          <p className="text-3xl font-bold mt-1">{totalOut.toLocaleString()}</p>
+        </div>
+      </div>
+
+      {/* Form */}
+      <div className="bg-white rounded-xl shadow p-6 mb-8">
+        <h3 className="text-lg font-semibold text-gray-700 mb-4 border-b pb-2">
+          {editId ? 'Edit Stock Out Record' : 'Record Stock Out'}
+        </h3>
+        <Alert message={alert.message} type={alert.type} onClose={() => setAlert({ message: '', type: '' })} />
+        <form onSubmit={handleSubmit} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Spare Part *</label>
+            <select
+              value={form.SparePartID}
+              onChange={e => setForm({ ...form, SparePartID: e.target.value })}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm bg-white"
+            >
+              <option value=""> Select Spare Part </option>
+              {spareParts.map(sp => (
+                <option key={sp.SparePartID} value={sp.SparePartID}>
+                  {sp.Name} (Stock: {sp.Quantity})
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Quantity </label>
+            <input
+              type="number"
+              min="1"
+              value={form.StockOutQuantity}
+              onChange={e => setForm({ ...form, StockOutQuantity: e.target.value })}
+              required
+              placeholder="Enter quantity"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Unit Price (RWF) </label>
+            <input
+              type="number"
+              min="0"
+              step="0.01"
+              value={form.StockOutUnitPrice}
+              onChange={e => setForm({ ...form, StockOutUnitPrice: e.target.value })}
+              required
+              placeholder="0.00"
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-1">Date </label>
+            <input
+              type="date"
+              value={form.StockOutDate}
+              onChange={e => setForm({ ...form, StockOutDate: e.target.value })}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
+            />
+          </div>
+          {computedTotal > 0 && (
+            <div className="sm:col-span-2 lg:col-span-4">
+              <p className="text-sm text-red-700 font-medium">
+                Total Price: RWF {computedTotal.toLocaleString()}
+              </p>
+            </div>
+          )}
+          <div className="sm:col-span-2 lg:col-span-4 flex gap-3">
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-blue-800 text-white px-6 py-2 rounded-lg hover:bg-blue-900 font-medium transition-colors disabled:opacity-60 text-sm"
+            >
+              {loading ? 'Saving...' : editId ? 'Update Record' : 'Record Stock Out'}
+            </button>
+            {editId && (
+              <button
+                type="button"
+                onClick={handleCancelEdit}
+                className="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 font-medium transition-colors text-sm"
+              >
+                Cancel
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-xl shadow overflow-hidden">
+        <div className="px-6 py-4 border-b">
+          <h3 className="text-lg font-semibold text-gray-700">Stock Out Records</h3>
+        </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>
+                <th className="px-4 py-3 text-center">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {stockOuts.length === 0 ? (
+                <tr>
+                  <td colSpan="8" className="text-center py-10 text-gray-400">No stock out records yet.</td>
+                </tr>
+              ) : stockOuts.map((so, i) => (
+                <tr key={so.StockOutID} className="hover:bg-gray-50 transition-colors">
+                  <td className="px-4 py-3 text-gray-500">{i + 1}</td>
+                  <td className="px-4 py-3 font-semibold text-gray-800">{so.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 font-medium">{so.Category}</span>
+                  </td>
+                  <td className="px-4 py-3 text-right font-semibold text-red-600">-{so.StockOutQuantity}</td>
+                  <td className="px-4 py-3 text-right">{Number(so.StockOutUnitPrice).toLocaleString()}</td>
+                  <td className="px-4 py-3 text-right font-semibold">{Number(so.StockOutTotalPrice).toLocaleString()}</td>
+                  <td className="px-4 py-3 text-gray-600">{new Date(so.StockOutDate).toLocaleDateString('en-GB')}</td>
+                  <td className="px-4 py-3 text-center">
+                    <div className="flex justify-center gap-2">
+                      <button
+                        onClick={() => handleEdit(so)}
+                        className="bg-yellow-500 text-white px-3 py-1 rounded text-xs font-medium hover:bg-yellow-600 transition-colors"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => setDeleteId(so.StockOutID)}
+                        className="bg-red-500 text-white px-3 py-1 rounded text-xs font-medium hover:bg-red-600 transition-colors"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Delete Confirmation Modal */}
+      {deleteId && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4">
+          <div className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm">
+            <h4 className="text-lg font-semibold text-gray-800 mb-2">Confirm Delete</h4>
+            <p className="text-gray-600 text-sm mb-6">Are you sure you want to delete this stock out record? The quantity will be restored to the spare part.</p>
+            <div className="flex gap-3 justify-end">
+              <button
+                onClick={() => setDeleteId(null)}
+                className="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 text-sm hover:bg-gray-50"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => handleDelete(deleteId)}
+                className="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default StockOut;

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

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

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

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173
+  }
+})