react-node-app 1.0.0

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

@@ -0,0 +1,184 @@
+import { useState, useEffect } from 'react';
+import {
+  HiOutlineCube,
+  HiOutlineShoppingCart,
+  HiOutlineBanknotes,
+  HiOutlineArchiveBox,
+} from 'react-icons/hi2';
+import {
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend,
+} from 'recharts';
+import StatCard from '../components/StatCard';
+import LoadingSpinner from '../components/LoadingSpinner';
+import { getDashboardData } from '../services/reportService';
+
+const COLORS = ['#475569', '#94a3b8', '#64748b', '#cbd5e1', '#334155'];
+
+export default function Dashboard() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const res = await getDashboardData();
+        setData(res.data);
+      } catch {
+        // Error handled by interceptor
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  if (loading) return <LoadingSpinner message="Loading dashboard..." />;
+
+  const salesChartData = (data?.dailySales || []).map((sale) => ({
+    name: sale.productId?.productName || 'Unknown',
+    amount: sale.soldTotalPrice,
+  }));
+
+  const categoryChartData = (data?.categoryData || []).map((cat) => ({
+    name: cat._id,
+    value: cat.count,
+  }));
+
+  const formatRwf = (amount) =>
+    new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'RWF',
+      minimumFractionDigits: 0,
+    }).format(amount);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-slate-800">Dashboard</h1>
+        <p className="text-slate-500 text-sm mt-1">Overview of your business</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          title="Total Products"
+          value={data?.totalProducts || 0}
+          icon={HiOutlineCube}
+        />
+        <StatCard
+          title="Total Sales"
+          value={data?.totalSales || 0}
+          icon={HiOutlineShoppingCart}
+        />
+        <StatCard
+          title="Total Revenue"
+          value={formatRwf(data?.totalRevenue || 0)}
+          icon={HiOutlineBanknotes}
+        />
+        <StatCard
+          title="Available Stock"
+          value={data?.availableStock || 0}
+          icon={HiOutlineArchiveBox}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
+          <h3 className="text-sm font-semibold text-slate-700 mb-4">Daily Sales</h3>
+          {salesChartData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={salesChartData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                <XAxis dataKey="name" tick={{ fontSize: 12 }} stroke="#94a3b8" />
+                <YAxis tick={{ fontSize: 12 }} stroke="#94a3b8" />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: '#fff',
+                    border: '1px solid #e2e8f0',
+                    borderRadius: '8px',
+                  }}
+                />
+                <Bar dataKey="amount" fill="#475569" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          ) : (
+            <p className="text-slate-400 text-sm text-center py-12">No sales data for today</p>
+          )}
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
+          <h3 className="text-sm font-semibold text-slate-700 mb-4">Product Categories</h3>
+          {categoryChartData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={300}>
+              <PieChart>
+                <Pie
+                  data={categoryChartData}
+                  cx="50%"
+                  cy="50%"
+                  outerRadius={100}
+                  dataKey="value"
+                  label={({ name, percent }) =>
+                    `${name} ${(percent * 100).toFixed(0)}%`
+                  }
+                >
+                  {categoryChartData.map((_, index) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  ))}
+                </Pie>
+                <Tooltip />
+                <Legend />
+              </PieChart>
+            </ResponsiveContainer>
+          ) : (
+            <p className="text-slate-400 text-sm text-center py-12">No categories found</p>
+          )}
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
+        <div className="p-6 border-b border-gray-200">
+          <h3 className="text-sm font-semibold text-slate-700">Recent Sales</h3>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-gray-200">
+                <th className="text-left p-4 text-slate-500 font-medium">Product</th>
+                <th className="text-left p-4 text-slate-500 font-medium">Qty</th>
+                <th className="text-left p-4 text-slate-500 font-medium">Price</th>
+                <th className="text-left p-4 text-slate-500 font-medium">Total</th>
+                <th className="text-left p-4 text-slate-500 font-medium">Date</th>
+              </tr>
+            </thead>
+            <tbody>
+              {(data?.dailySales || []).length > 0 ? (
+                data.dailySales.map((sale) => (
+                  <tr key={sale._id} className="border-b border-gray-100 hover:bg-slate-50">
+                    <td className="p-4 font-medium text-slate-700">
+                      {sale.productId?.productName || 'N/A'}
+                    </td>
+                    <td className="p-4 text-slate-600">{sale.soldQuantity}</td>
+                    <td className="p-4 text-slate-600">
+                      {formatRwf(sale.soldUnitPrice)}
+                    </td>
+                    <td className="p-4 text-slate-600">
+                      {formatRwf(sale.soldTotalPrice)}
+                    </td>
+                    <td className="p-4 text-slate-500">
+                      {new Date(sale.salesDate).toLocaleDateString()}
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={5} className="p-8 text-center text-slate-400">
+                    No sales recorded today
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,111 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { HiOutlineEye, HiOutlineEyeSlash } from 'react-icons/hi2';
+
+export default function Login() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const { login, user } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (user) {
+      navigate('/dashboard', { replace: true });
+    }
+  }, [user, navigate]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+
+    if (!username || !password) {
+      setError('Please enter both username and password');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await login(username, password);
+      navigate('/dashboard', { replace: true });
+    } catch (err) {
+      setError(err.response?.data?.message || 'Login failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold text-slate-800">DAB Enterprise Ltd</h1>
+          <p className="text-slate-500 mt-1">Business Web Solution</p>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-8">
+          <h2 className="text-lg font-semibold text-slate-800 mb-6">Sign In</h2>
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">
+                Username
+              </label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent bg-white"
+                placeholder="Enter your username"
+                autoFocus
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">
+                Password
+              </label>
+              <div className="relative">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-4 py-2.5 pr-10 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent bg-white"
+                  placeholder="Enter your password"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
+                >
+                  {showPassword ? (
+                    <HiOutlineEyeSlash className="w-5 h-5" />
+                  ) : (
+                    <HiOutlineEye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-2.5 bg-slate-800 text-white rounded-lg text-sm font-medium hover:bg-slate-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {loading ? 'Signing in...' : 'Sign In'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,192 @@
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import Swal from 'sweetalert2';
+import { createProduct, getProducts } from '../services/productService';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+export default function Products() {
+  const [products, setProducts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [showForm, setShowForm] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  const quantity = watch('quantity');
+  const unitPrice = watch('unitPrice');
+  const totalPrice = (parseFloat(quantity || 0) * parseFloat(unitPrice || 0)).toFixed(2);
+
+  const fetchProducts = async () => {
+    setLoading(true);
+    try {
+      const res = await getProducts({ limit: 100 });
+      setProducts(res.data.products);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  const onSubmit = async (data) => {
+    setSubmitting(true);
+    try {
+      await createProduct(data);
+      Swal.fire({ icon: 'success', title: 'Created!', text: 'Product created successfully', timer: 1500, showConfirmButton: false, toast: true, position: 'top-end' });
+      reset();
+      setShowForm(false);
+      fetchProducts();
+    } catch {
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-800">Products</h1>
+          <p className="text-slate-500 text-sm mt-1">Register new products</p>
+        </div>
+        {!showForm && (
+          <button
+            onClick={() => setShowForm(true)}
+            className="flex items-center gap-2 px-4 py-2.5 bg-slate-800 text-white rounded-lg text-sm font-medium hover:bg-slate-700 transition-colors"
+          >
+            Add Product
+          </button>
+        )}
+      </div>
+
+      {showForm && (
+        <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
+          <h3 className="text-sm font-semibold text-slate-700 mb-4">New Product</h3>
+          <form onSubmit={handleSubmit(onSubmit)} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Product Name</label>
+              <input
+                {...register('productName', { required: 'Product name is required' })}
+                className="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
+              />
+              {errors.productName && <p className="text-red-500 text-xs mt-1">{errors.productName.message}</p>}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Category</label>
+              <input
+                {...register('category', { required: 'Category is required' })}
+                className="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
+              />
+              {errors.category && <p className="text-red-500 text-xs mt-1">{errors.category.message}</p>}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Quantity</label>
+              <input
+                type="number"
+                step="1"
+                {...register('quantity', {
+                  required: 'Quantity is required',
+                  min: { value: 0, message: 'Quantity cannot be negative' },
+                })}
+                className="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
+              />
+              {errors.quantity && <p className="text-red-500 text-xs mt-1">{errors.quantity.message}</p>}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Unit Price (RWF)</label>
+              <input
+                type="number"
+                step="0.01"
+                {...register('unitPrice', {
+                  required: 'Unit price is required',
+                  min: { value: 0.01, message: 'Price must be > 0' },
+                })}
+                className="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-800 focus:border-transparent"
+              />
+              {errors.unitPrice && <p className="text-red-500 text-xs mt-1">{errors.unitPrice.message}</p>}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Total Price</label>
+              <input
+                value={totalPrice}
+                readOnly
+                className="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm bg-slate-50 text-slate-500"
+              />
+            </div>
+            <div className="flex items-end gap-2">
+              <button
+                type="submit"
+                disabled={submitting}
+                className="px-6 py-2.5 bg-slate-800 text-white rounded-lg text-sm font-medium hover:bg-slate-700 transition-colors disabled:opacity-50"
+              >
+                {submitting ? 'Saving...' : 'Save'}
+              </button>
+              <button
+                type="button"
+                onClick={() => { reset(); setShowForm(false); }}
+                className="px-6 py-2.5 border border-gray-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="text-sm font-semibold text-slate-700">Registered Products</h3>
+        </div>
+        {loading ? (
+          <LoadingSpinner message="Loading products..." />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-gray-200 bg-slate-50">
+                  <th className="text-left p-4 text-slate-500 font-medium">Name</th>
+                  <th className="text-left p-4 text-slate-500 font-medium">Category</th>
+                  <th className="text-left p-4 text-slate-500 font-medium">Qty</th>
+                  <th className="text-left p-4 text-slate-500 font-medium">Unit Price</th>
+                  <th className="text-left p-4 text-slate-500 font-medium">Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {products.length > 0 ? (
+                  products.map((product) => (
+                    <tr key={product._id} className="border-b border-gray-100 hover:bg-slate-50">
+                      <td className="p-4 font-medium text-slate-700">{product.productName}</td>
+                      <td className="p-4 text-slate-600">{product.category}</td>
+                      <td className="p-4 text-slate-600">{product.quantity}</td>
+                      <td className="p-4 text-slate-600">
+                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'RWF', minimumFractionDigits: 0 }).format(product.unitPrice)}
+                      </td>
+                      <td className="p-4 text-slate-600">
+                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'RWF', minimumFractionDigits: 0 }).format(product.totalPrice)}
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={5} className="p-8 text-center text-slate-400">
+                      No products found
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}