@20052507/dab-enterprise-bws 1.0.1

package/frontend-project/src/pages/Reports.js

@@ -0,0 +1,226 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const Reports = () => {
+  const [activeTab, setActiveTab] = useState('sales');
+  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const [salesReport, setSalesReport] = useState([]);
+  const [salesDetails, setSalesDetails] = useState([]);
+  const [stockReport, setStockReport] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (activeTab === 'sales') {
+      fetchSalesReport();
+    } else {
+      fetchStockReport();
+    }
+  }, [activeTab, selectedDate]);
+
+  const fetchSalesReport = async () => {
+    setLoading(true);
+    try {
+      const [reportRes, detailsRes] = await Promise.all([
+        axios.get(`http://localhost:5000/api/sales/report/daily?date=${selectedDate}`),
+        axios.get(`http://localhost:5000/api/sales/report/daily/details?date=${selectedDate}`)
+      ]);
+      setSalesReport(reportRes.data);
+      setSalesDetails(detailsRes.data);
+    } catch (error) {
+      console.error('Error fetching sales report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchStockReport = async () => {
+    setLoading(true);
+    try {
+      const response = await axios.get('http://localhost:5000/api/stock/report/status');
+      setStockReport(response.data);
+    } catch (error) {
+      console.error('Error fetching stock report:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDateChange = (e) => {
+    setSelectedDate(e.target.value);
+  };
+
+  const printReport = () => {
+    window.print();
+  };
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold text-gray-800 mb-8">Reports</h1>
+
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <div className="flex space-x-4 mb-6">
+          <button
+            onClick={() => setActiveTab('sales')}
+            className={`px-6 py-2 rounded-lg transition ${
+              activeTab === 'sales' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            Daily Sales Report
+          </button>
+          <button
+            onClick={() => setActiveTab('stock')}
+            className={`px-6 py-2 rounded-lg transition ${
+              activeTab === 'stock' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+            }`}
+          >
+            Stock Status Report
+          </button>
+        </div>
+
+        {activeTab === 'sales' && (
+          <div>
+            <div className="flex items-center space-x-4 mb-6">
+              <div>
+                <label className="block text-gray-700 font-medium mb-2">Select Date</label>
+                <input
+                  type="date"
+                  value={selectedDate}
+                  onChange={handleDateChange}
+                  className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+              <button
+                onClick={printReport}
+                className="mt-6 px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
+              >
+                Print Report
+              </button>
+            </div>
+
+            {loading ? (
+              <div className="text-center">Loading...</div>
+            ) : (
+              <div>
+                <h2 className="text-xl font-bold text-gray-800 mb-4">Daily Sales Summary - {selectedDate}</h2>
+                
+                {salesReport.length > 0 ? (
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                    <div className="bg-blue-50 rounded-lg p-4">
+                      <p className="text-gray-600">Total Sales</p>
+                      <p className="text-2xl font-bold text-blue-600">{salesReport[0].TotalSales}</p>
+                    </div>
+                    <div className="bg-green-50 rounded-lg p-4">
+                      <p className="text-gray-600">Total Quantity</p>
+                      <p className="text-2xl font-bold text-green-600">{salesReport[0].TotalQuantity}</p>
+                    </div>
+                    <div className="bg-purple-50 rounded-lg p-4">
+                      <p className="text-gray-600">Total Revenue</p>
+                      <p className="text-2xl font-bold text-purple-600">RWF {parseFloat(salesReport[0].TotalRevenue).toFixed(2)}</p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+                    <p className="text-yellow-800">No sales data available for the selected date.</p>
+                  </div>
+                )}
+
+                <h3 className="text-lg font-bold text-gray-800 mb-4">Sales Details</h3>
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="bg-gray-100">
+                        <th className="px-4 py-3 text-left">Product</th>
+                        <th className="px-4 py-3 text-left">Category</th>
+                        <th className="px-4 py-3 text-left">Qty Sold</th>
+                        <th className="px-4 py-3 text-left">Unit Price</th>
+                        <th className="px-4 py-3 text-left">Total</th>
+                        <th className="px-4 py-3 text-left">Date</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {salesDetails.map((sale) => (
+                        <tr key={sale.SalesID} className="border-b">
+                          <td className="px-4 py-3">{sale.ProductName}</td>
+                          <td className="px-4 py-3">{sale.Category}</td>
+                          <td className="px-4 py-3">{sale.SoldQuantity}</td>
+                          <td className="px-4 py-3">{parseFloat(sale.SoldUnitPrice).toFixed(2)}</td>
+                          <td className="px-4 py-3">{parseFloat(sale.SoldTotalPrice).toFixed(2)}</td>
+                          <td className="px-4 py-3">{sale.SalesDate}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+
+                {salesDetails.length === 0 && (
+                  <div className="text-center py-8 text-gray-500">
+                    No sales details available for the selected date.
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {activeTab === 'stock' && (
+          <div>
+            <div className="flex items-center space-x-4 mb-6">
+              <h2 className="text-xl font-bold text-gray-800">Daily Stock Status Report</h2>
+              <button
+                onClick={printReport}
+                className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
+              >
+                Print Report
+              </button>
+            </div>
+
+            {loading ? (
+              <div className="text-center">Loading...</div>
+            ) : (
+              <div>
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="bg-gray-100">
+                        <th className="px-4 py-3 text-left">Product Name</th>
+                        <th className="px-4 py-3 text-left">Category</th>
+                        <th className="px-4 py-3 text-left">Stored Quantity</th>
+                        <th className="px-4 py-3 text-left">Sold Quantity</th>
+                        <th className="px-4 py-3 text-left">Remaining Quantity</th>
+                        <th className="px-4 py-3 text-left">Unit Price</th>
+                        <th className="px-4 py-3 text-left">Total Value</th>
+                        <th className="px-4 py-3 text-left">Last Updated</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {stockReport.map((stock) => (
+                        <tr key={stock.StockID} className="border-b">
+                          <td className="px-4 py-3 font-medium">{stock.ProductName}</td>
+                          <td className="px-4 py-3">{stock.Category}</td>
+                          <td className="px-4 py-3">{stock.StoredQuantity}</td>
+                          <td className="px-4 py-3">{stock.SoldQuantity}</td>
+                          <td className="px-4 py-3 font-bold">{stock.RemainingQuantity}</td>
+                          <td className="px-4 py-3">{parseFloat(stock.UnitPrice).toFixed(2)}</td>
+                          <td className="px-4 py-3">{parseFloat(stock.TotalPrice).toFixed(2)}</td>
+                          <td className="px-4 py-3">{new Date(stock.LastUpdated).toLocaleString()}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+
+                {stockReport.length === 0 && (
+                  <div className="text-center py-8 text-gray-500">
+                    No stock data available. Add products to generate stock report.
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Reports;

package/frontend-project/src/pages/Sales.js

@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const Sales = () => {
+  const [sales, setSales] = useState([]);
+  const [products, setProducts] = useState([]);
+  const [formData, setFormData] = useState({
+    ProductID: '',
+    SoldQuantity: '',
+    SoldUnitPrice: '',
+    SalesDate: new Date().toISOString().split('T')[0]
+  });
+  const [editingSale, setEditingSale] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const [salesRes, productsRes] = await Promise.all([
+        axios.get('http://localhost:5000/api/sales'),
+        axios.get('http://localhost:5000/api/products')
+      ]);
+      setSales(salesRes.data);
+      setProducts(productsRes.data);
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (editingSale) {
+        await axios.put(`http://localhost:5000/api/sales/${editingSale.SalesID}`, formData);
+      } else {
+        await axios.post('http://localhost:5000/api/sales', formData);
+      }
+      setFormData({
+        ProductID: '',
+        SoldQuantity: '',
+        SoldUnitPrice: '',
+        SalesDate: new Date().toISOString().split('T')[0]
+      });
+      setEditingSale(null);
+      fetchData();
+    } catch (error) {
+      console.error('Error saving sale:', error);
+      alert(error.response?.data?.message || 'Error saving sale');
+    }
+  };
+
+  const handleEdit = (sale) => {
+    setEditingSale(sale);
+    setFormData({
+      ProductID: sale.ProductID,
+      SoldQuantity: sale.SoldQuantity,
+      SoldUnitPrice: sale.SoldUnitPrice,
+      SalesDate: sale.SalesDate
+    });
+  };
+
+  const handleDelete = async (id) => {
+    if (window.confirm('Are you sure you want to delete this sale?')) {
+      try {
+        await axios.delete(`http://localhost:5000/api/sales/${id}`);
+        fetchData();
+      } catch (error) {
+        console.error('Error deleting sale:', error);
+        alert('Error deleting sale');
+      }
+    }
+  };
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleProductChange = (e) => {
+    const productId = e.target.value;
+    const product = products.find(p => p.ProductID === parseInt(productId));
+    setFormData({
+      ...formData,
+      ProductID: productId,
+      SoldUnitPrice: product ? product.UnitPrice : ''
+    });
+  };
+
+  if (loading) {
+    return <div className="text-center">Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold text-gray-800 mb-8">Sales Management</h1>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h2 className="text-xl font-bold text-gray-800 mb-4">
+            {editingSale ? 'Edit Sale' : 'Record New Sale'}
+          </h2>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-gray-700 font-medium mb-2">Product</label>
+              <select
+                name="ProductID"
+                value={formData.ProductID}
+                onChange={handleProductChange}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                required
+              >
+                <option value="">Select a product</option>
+                {products.map((product) => (
+                  <option key={product.ProductID} value={product.ProductID}>
+                    {product.ProductName} - {product.Category} (Stock: {product.Quantity})
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-gray-700 font-medium mb-2">Sold Quantity</label>
+              <input
+                type="number"
+                name="SoldQuantity"
+                value={formData.SoldQuantity}
+                onChange={handleChange}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                required
+                min="1"
+              />
+            </div>
+
+            <div>
+              <label className="block text-gray-700 font-medium mb-2">Sold Unit Price (RWF)</label>
+              <input
+                type="number"
+                name="SoldUnitPrice"
+                value={formData.SoldUnitPrice}
+                onChange={handleChange}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                required
+                min="0"
+                step="0.01"
+              />
+            </div>
+
+            <div>
+              <label className="block text-gray-700 font-medium mb-2">Sales Date</label>
+              <input
+                type="date"
+                name="SalesDate"
+                value={formData.SalesDate}
+                onChange={handleChange}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+
+            <div className="flex space-x-4">
+              <button
+                type="submit"
+                className="flex-1 bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition"
+              >
+                {editingSale ? 'Update Sale' : 'Record Sale'}
+              </button>
+              {editingSale && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setEditingSale(null);
+                    setFormData({
+                      ProductID: '',
+                      SoldQuantity: '',
+                      SoldUnitPrice: '',
+                      SalesDate: new Date().toISOString().split('T')[0]
+                    });
+                  }}
+                  className="flex-1 bg-gray-400 text-white py-2 rounded-lg hover:bg-gray-500 transition"
+                >
+                  Cancel
+                </button>
+              )}
+            </div>
+          </form>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h2 className="text-xl font-bold text-gray-800 mb-4">Sales History</h2>
+          <div className="overflow-x-auto max-h-96 overflow-y-auto">
+            <table className="w-full">
+              <thead className="sticky top-0 bg-white">
+                <tr className="bg-gray-100">
+                  <th className="px-4 py-3 text-left">Product</th>
+                  <th className="px-4 py-3 text-left">Qty</th>
+                  <th className="px-4 py-3 text-left">Price</th>
+                  <th className="px-4 py-3 text-left">Total</th>
+                  <th className="px-4 py-3 text-left">Date</th>
+                  <th className="px-4 py-3 text-left">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sales.map((sale) => (
+                  <tr key={sale.SalesID} className="border-b">
+                    <td className="px-4 py-3">{sale.ProductName}</td>
+                    <td className="px-4 py-3">{sale.SoldQuantity}</td>
+                    <td className="px-4 py-3">{parseFloat(sale.SoldUnitPrice).toFixed(2)}</td>
+                    <td className="px-4 py-3">{parseFloat(sale.SoldTotalPrice).toFixed(2)}</td>
+                    <td className="px-4 py-3">{sale.SalesDate}</td>
+                    <td className="px-4 py-3">
+                      <button
+                        onClick={() => handleEdit(sale)}
+                        className="text-blue-600 hover:text-blue-800 mr-2"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => handleDelete(sale.SalesID)}
+                        className="text-red-600 hover:text-red-800"
+                      >
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sales;

package/frontend-project/src/pages/Stock.js

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const Stock = () => {
+  const [stockStatus, setStockStatus] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchStockStatus();
+  }, []);
+
+  const fetchStockStatus = async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/stock');
+      setStockStatus(response.data);
+    } catch (error) {
+      console.error('Error fetching stock status:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="text-center">Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold text-gray-800 mb-8">Stock Status</h1>
+
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <h2 className="text-xl font-bold text-gray-800 mb-4">Current Stock Overview</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="bg-gray-100">
+                <th className="px-4 py-3 text-left">Product Name</th>
+                <th className="px-4 py-3 text-left">Category</th>
+                <th className="px-4 py-3 text-left">Available Qty</th>
+                <th className="px-4 py-3 text-left">Sold Qty</th>
+                <th className="px-4 py-3 text-left">Remaining Qty</th>
+                <th className="px-4 py-3 text-left">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {stockStatus.map((stock) => (
+                <tr key={stock.StockID} className="border-b">
+                  <td className="px-4 py-3 font-medium">{stock.ProductName}</td>
+                  <td className="px-4 py-3">{stock.Category}</td>
+                  <td className="px-4 py-3">{stock.AvailableQuantity}</td>
+                  <td className="px-4 py-3">{stock.SoldQuantity}</td>
+                  <td className="px-4 py-3 font-bold">{stock.RemainingQuantity}</td>
+                  <td className="px-4 py-3">
+                    {stock.RemainingQuantity === 0 ? (
+                      <span className="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Out of Stock</span>
+                    ) : stock.RemainingQuantity < 10 ? (
+                      <span className="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Low Stock</span>
+                    ) : (
+                      <span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">In Stock</span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {stockStatus.length === 0 && (
+          <div className="text-center py-8 text-gray-500">
+            No stock data available. Add products to see stock status.
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h3 className="text-lg font-bold text-gray-800 mb-2">Total Products</h3>
+          <p className="text-3xl font-bold text-blue-600">{stockStatus.length}</p>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h3 className="text-lg font-bold text-gray-800 mb-2">Low Stock Items</h3>
+          <p className="text-3xl font-bold text-yellow-600">
+            {stockStatus.filter(s => s.RemainingQuantity < 10 && s.RemainingQuantity > 0).length}
+          </p>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h3 className="text-lg font-bold text-gray-800 mb-2">Out of Stock</h3>
+          <p className="text-3xl font-bold text-red-600">
+            {stockStatus.filter(s => s.RemainingQuantity === 0).length}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Stock;

package/frontend-project/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@20052507/dab-enterprise-bws",
+  "version": "1.0.1",
+  "description": "DAB Enterprise Ltd - Business Web Solution (BWS)",
+  "main": "backend-project/server.js",
+  "scripts": {
+    "start": "node backend-project/server.js",
+    "start-frontend": "cd frontend-project && npm start",
+    "install-all": "cd backend-project && npm install && cd ../frontend-project && npm install"
+  },
+  "keywords": [
+    "dab-enterprise",
+    "bws",
+    "sales-management"
+  ],
+  "license": "ISC"
+}