@20052507/dab-enterprise-bws 1.0.1

package/frontend-project/src/App.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import Products from './pages/Products';
+import Sales from './pages/Sales';
+import Stock from './pages/Stock';
+import Reports from './pages/Reports';
+import Navbar from './components/Navbar';
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+
+function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  const checkAuth = async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/auth/check');
+      setIsAuthenticated(response.data.authenticated);
+    } catch (error) {
+      setIsAuthenticated(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLogin = () => {
+    setIsAuthenticated(true);
+  };
+
+  const handleLogout = async () => {
+    try {
+      await axios.post('http://localhost:5000/api/auth/logout');
+      setIsAuthenticated(false);
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-100">
+        <div className="text-xl">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <Router>
+      {!isAuthenticated ? (
+        <Login onLogin={handleLogin} />
+      ) : (
+        <div className="min-h-screen bg-gray-100">
+          <Navbar onLogout={handleLogout} />
+          <div className="container mx-auto px-4 py-8">
+            <Routes>
+              <Route path="/" element={<Navigate to="/dashboard" />} />
+              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/products" element={<Products />} />
+              <Route path="/sales" element={<Sales />} />
+              <Route path="/stock" element={<Stock />} />
+              <Route path="/reports" element={<Reports />} />
+            </Routes>
+          </div>
+        </div>
+      )}
+    </Router>
+  );
+}
+
+export default App;

package/frontend-project/src/components/Navbar.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+const Navbar = ({ onLogout }) => {
+  const location = useLocation();
+
+  const isActive = (path) => {
+    return location.pathname === path ? 'bg-blue-700' : 'bg-blue-600 hover:bg-blue-700';
+  };
+
+  return (
+    <nav className="bg-blue-600 text-white shadow-lg">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center space-x-2">
+            <span className="text-2xl font-bold">DAB Enterprise</span>
+          </div>
+          <div className="flex items-center space-x-1">
+            <Link to="/dashboard" className={`px-4 py-2 rounded transition ${isActive('/dashboard')}`}>
+              Dashboard
+            </Link>
+            <Link to="/products" className={`px-4 py-2 rounded transition ${isActive('/products')}`}>
+              Products
+            </Link>
+            <Link to="/sales" className={`px-4 py-2 rounded transition ${isActive('/sales')}`}>
+              Sales
+            </Link>
+            <Link to="/stock" className={`px-4 py-2 rounded transition ${isActive('/stock')}`}>
+              Stock Status
+            </Link>
+            <Link to="/reports" className={`px-4 py-2 rounded transition ${isActive('/reports')}`}>
+              Reports
+            </Link>
+            <button
+              onClick={onLogout}
+              className="ml-4 px-4 py-2 bg-red-500 hover:bg-red-600 rounded transition"
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

package/frontend-project/src/index.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/frontend-project/src/index.js

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

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

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const Dashboard = () => {
+  const [stats, setStats] = useState({
+    totalProducts: 0,
+    totalSales: 0,
+    totalRevenue: 0,
+    lowStock: 0
+  });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
+
+  const fetchStats = async () => {
+    try {
+      const [productsRes, salesRes, stockRes] = await Promise.all([
+        axios.get('http://localhost:5000/api/products'),
+        axios.get('http://localhost:5000/api/sales'),
+        axios.get('http://localhost:5000/api/stock')
+      ]);
+
+      const products = productsRes.data;
+      const sales = salesRes.data;
+      const stock = stockRes.data;
+
+      const totalRevenue = sales.reduce((sum, sale) => sum + parseFloat(sale.SoldTotalPrice), 0);
+      const lowStock = stock.filter(item => item.RemainingQuantity < 10).length;
+
+      setStats({
+        totalProducts: products.length,
+        totalSales: sales.length,
+        totalRevenue: totalRevenue.toFixed(2),
+        lowStock
+      });
+    } catch (error) {
+      console.error('Error fetching stats:', 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">Dashboard</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm">Total Products</p>
+              <p className="text-3xl font-bold text-blue-600">{stats.totalProducts}</p>
+            </div>
+            <div className="bg-blue-100 p-3 rounded-full">
+              <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm">Total Sales</p>
+              <p className="text-3xl font-bold text-green-600">{stats.totalSales}</p>
+            </div>
+            <div className="bg-green-100 p-3 rounded-full">
+              <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm">Total Revenue</p>
+              <p className="text-3xl font-bold text-purple-600">RWF {stats.totalRevenue}</p>
+            </div>
+            <div className="bg-purple-100 p-3 rounded-full">
+              <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm">Low Stock Items</p>
+              <p className="text-3xl font-bold text-red-600">{stats.lowStock}</p>
+            </div>
+            <div className="bg-red-100 p-3 rounded-full">
+              <svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <h2 className="text-xl font-bold text-gray-800 mb-4">Welcome to DAB Enterprise Ltd</h2>
+        <p className="text-gray-600">
+          This Business Web Solution helps manage your products, sales, and inventory efficiently.
+          Use the navigation menu to access different features of the system.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

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

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const Login = ({ onLogin }) => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const response = await axios.post('http://localhost:5000/api/auth/login', {
+        username,
+        password
+      });
+
+      if (response.data.message === 'Login successful') {
+        onLogin();
+      }
+    } catch (error) {
+      setError(error.response?.data?.message || 'Login failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center px-4">
+      <div className="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-800 mb-2">DAB Enterprise Ltd</h1>
+          <p className="text-gray-600">Business Web Solution</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label className="block text-gray-700 font-medium mb-2">Username</label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Enter your username"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-gray-700 font-medium mb-2">Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Enter your password"
+              required
+            />
+          </div>
+
+          {error && (
+            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:bg-gray-400"
+          >
+            {loading ? 'Logging in...' : 'Login'}
+          </button>
+        </form>
+
+        <div className="mt-6 text-center text-sm text-gray-600">
+          <p>Default credentials:</p>
+          <p className="font-medium">Username: admin | Password: Admin@123</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

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

@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const Products = () => {
+  const [products, setProducts] = useState([]);
+  const [formData, setFormData] = useState({
+    ProductName: '',
+    Category: '',
+    Quantity: '',
+    UnitPrice: ''
+  });
+  const [editingProduct, setEditingProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  const fetchProducts = async () => {
+    try {
+      const response = await axios.get('http://localhost:5000/api/products');
+      setProducts(response.data);
+    } catch (error) {
+      console.error('Error fetching products:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (editingProduct) {
+        await axios.put(`http://localhost:5000/api/products/${editingProduct.ProductID}`, formData);
+      } else {
+        await axios.post('http://localhost:5000/api/products', formData);
+      }
+      setFormData({ ProductName: '', Category: '', Quantity: '', UnitPrice: '' });
+      setEditingProduct(null);
+      fetchProducts();
+    } catch (error) {
+      console.error('Error saving product:', error);
+      alert('Error saving product');
+    }
+  };
+
+  const handleEdit = (product) => {
+    setEditingProduct(product);
+    setFormData({
+      ProductName: product.ProductName,
+      Category: product.Category,
+      Quantity: product.Quantity,
+      UnitPrice: product.UnitPrice
+    });
+  };
+
+  const handleDelete = async (id) => {
+    if (window.confirm('Are you sure you want to delete this product?')) {
+      try {
+        await axios.delete(`http://localhost:5000/api/products/${id}`);
+        fetchProducts();
+      } catch (error) {
+        console.error('Error deleting product:', error);
+        alert('Error deleting product');
+      }
+    }
+  };
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  if (loading) {
+    return <div className="text-center">Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold text-gray-800 mb-8">Products 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">
+            {editingProduct ? 'Edit Product' : 'Add New Product'}
+          </h2>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-gray-700 font-medium mb-2">Product Name</label>
+              <input
+                type="text"
+                name="ProductName"
+                value={formData.ProductName}
+                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>
+              <label className="block text-gray-700 font-medium mb-2">Category</label>
+              <input
+                type="text"
+                name="Category"
+                value={formData.Category}
+                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>
+              <label className="block text-gray-700 font-medium mb-2">Quantity</label>
+              <input
+                type="number"
+                name="Quantity"
+                value={formData.Quantity}
+                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"
+              />
+            </div>
+
+            <div>
+              <label className="block text-gray-700 font-medium mb-2">Unit Price (RWF)</label>
+              <input
+                type="number"
+                name="UnitPrice"
+                value={formData.UnitPrice}
+                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 className="flex space-x-4">
+              <button
+                type="submit"
+                className="flex-1 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition"
+              >
+                {editingProduct ? 'Update Product' : 'Add Product'}
+              </button>
+              {editingProduct && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setEditingProduct(null);
+                    setFormData({ ProductName: '', Category: '', Quantity: '', UnitPrice: '' });
+                  }}
+                  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">Product List</h2>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-100">
+                  <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-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">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {products.map((product) => (
+                  <tr key={product.ProductID} className="border-b">
+                    <td className="px-4 py-3">{product.ProductName}</td>
+                    <td className="px-4 py-3">{product.Category}</td>
+                    <td className="px-4 py-3">{product.Quantity}</td>
+                    <td className="px-4 py-3">{parseFloat(product.UnitPrice).toFixed(2)}</td>
+                    <td className="px-4 py-3">{parseFloat(product.TotalPrice).toFixed(2)}</td>
+                    <td className="px-4 py-3">
+                      <button
+                        onClick={() => handleEdit(product)}
+                        className="text-blue-600 hover:text-blue-800 mr-2"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => handleDelete(product.ProductID)}
+                        className="text-red-600 hover:text-red-800"
+                      >
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Products;