react-node-app 1.0.0

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

@@ -0,0 +1,320 @@
+import { useState } from 'react';
+import Swal from 'sweetalert2';
+import { getDailySalesReport, getStockStatusReport } from '../services/reportService';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+export default function Reports() {
+  const [activeTab, setActiveTab] = useState('sales');
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-slate-800">Reports</h1>
+        <p className="text-slate-500 text-sm mt-1">View sales and stock reports</p>
+      </div>
+
+      <div className="flex gap-1 bg-slate-100 p-1 rounded-lg w-fit">
+        <button
+          onClick={() => setActiveTab('sales')}
+          className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+            activeTab === 'sales' ? 'bg-white text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-700'
+          }`}
+        >
+          Daily Sales Report
+        </button>
+        <button
+          onClick={() => setActiveTab('stock')}
+          className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+            activeTab === 'stock' ? 'bg-white text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-700'
+          }`}
+        >
+          Stock Status Report
+        </button>
+      </div>
+
+      {activeTab === 'sales' ? <DailySalesReport /> : <StockStatusReport />}
+    </div>
+  );
+}
+
+function DailySalesReport() {
+  const [date, setDate] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [fetched, setFetched] = useState(false);
+
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setFetched(true);
+    try {
+      const params = {};
+      if (date) {
+        params.date = date;
+      } else if (startDate && endDate) {
+        params.startDate = startDate;
+        params.endDate = endDate;
+      }
+      const res = await getDailySalesReport(params);
+      setData(res.data);
+    } catch {
+      // handled by interceptor
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleExport = () => {
+    if (!data || data.sales.length === 0) {
+      Swal.fire({ icon: 'info', title: 'No data', text: 'Nothing to export', toast: true, position: 'top-end', timer: 2000, showConfirmButton: false });
+      return;
+    }
+    const headers = ['Product Name', 'Quantity Sold', 'Unit Price', 'Total Amount', 'Sales Date'];
+    const rows = data.sales.map((s) => [
+      s.productId?.productName || 'N/A',
+      s.soldQuantity,
+      s.soldUnitPrice,
+      s.soldTotalPrice,
+      new Date(s.salesDate).toLocaleDateString(),
+    ]);
+    const csv = [headers.join(','), ...rows.map((r) => r.join(','))].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `daily-sales-report-${date || 'all'}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const formatRwf = (amount) =>
+    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'RWF', minimumFractionDigits: 0 }).format(amount);
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
+        <form onSubmit={handleSearch} className="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Specific Date</label>
+            <input
+              type="date"
+              value={date}
+              onChange={(e) => { setDate(e.target.value); setStartDate(''); setEndDate(''); }}
+              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"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Start Date</label>
+            <input
+              type="date"
+              value={startDate}
+              onChange={(e) => { setStartDate(e.target.value); setDate(''); }}
+              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"
+              disabled={!!date}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">End Date</label>
+            <input
+              type="date"
+              value={endDate}
+              onChange={(e) => { setEndDate(e.target.value); setDate(''); }}
+              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"
+              disabled={!!date}
+            />
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="submit"
+              disabled={loading}
+              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"
+            >
+              {loading ? 'Searching...' : 'Search'}
+            </button>
+            {data && (
+              <button
+                type="button"
+                onClick={handleExport}
+                className="px-4 py-2.5 border border-gray-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
+              >
+                Export CSV
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+
+      {loading && <LoadingSpinner message="Generating report..." />}
+
+      {fetched && !loading && data && (
+        <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
+          <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+            <h3 className="text-sm font-semibold text-slate-700">
+              Sales Report {date ? `- ${new Date(date).toLocaleDateString()}` : startDate && endDate ? `- ${new Date(startDate).toLocaleDateString()} to ${new Date(endDate).toLocaleDateString()}` : ''}
+            </h3>
+            <p className="text-sm font-medium text-slate-800">
+              Total Revenue: {formatRwf(data.totalRevenue || 0)}
+            </p>
+          </div>
+          <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">Product</th>
+                  <th className="text-left p-4 text-slate-500 font-medium">Qty Sold</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 Amount</th>
+                  <th className="text-left p-4 text-slate-500 font-medium">Sale Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.sales.length > 0 ? (
+                  data.sales.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 found for this period</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StockStatusReport() {
+  const [date, setDate] = useState('');
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [fetched, setFetched] = useState(false);
+
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setFetched(true);
+    try {
+      const params = {};
+      if (date) params.date = date;
+      const res = await getStockStatusReport(params);
+      setData(res.data);
+    } catch {
+      // handled by interceptor
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleExport = () => {
+    if (!data || data.stockStatuses.length === 0) {
+      Swal.fire({ icon: 'info', title: 'No data', text: 'Nothing to export', toast: true, position: 'top-end', timer: 2000, showConfirmButton: false });
+      return;
+    }
+    const headers = ['Product Name', 'Stored Quantity', 'Sold Quantity', 'Remaining Quantity'];
+    const rows = data.stockStatuses.map((s) => [
+      s.productId?.productName || 'N/A',
+      s.availableQuantity,
+      s.soldQuantity,
+      s.remainingQuantity,
+    ]);
+    const csv = [headers.join(','), ...rows.map((r) => r.join(','))].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `stock-status-report-${date || 'all'}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
+        <form onSubmit={handleSearch} className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Filter by Date</label>
+            <input
+              type="date"
+              value={date}
+              onChange={(e) => setDate(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"
+            />
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="submit"
+              disabled={loading}
+              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"
+            >
+              {loading ? 'Searching...' : 'Search'}
+            </button>
+            {data && (
+              <button
+                type="button"
+                onClick={handleExport}
+                className="px-4 py-2.5 border border-gray-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
+              >
+                Export CSV
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+
+      {loading && <LoadingSpinner message="Generating report..." />}
+
+      {fetched && !loading && data && (
+        <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">
+              Stock Status Report {date ? `- ${new Date(date).toLocaleDateString()}` : ''}
+            </h3>
+          </div>
+          <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">Product</th>
+                  <th className="text-left p-4 text-slate-500 font-medium">Stored Qty</th>
+                  <th className="text-left p-4 text-slate-500 font-medium">Sold Qty</th>
+                  <th className="text-left p-4 text-slate-500 font-medium">Remaining</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.stockStatuses.length > 0 ? (
+                  data.stockStatuses.map((item) => (
+                    <tr key={item._id} className="border-b border-gray-100 hover:bg-slate-50">
+                      <td className="p-4 font-medium text-slate-700">{item.productId?.productName || 'N/A'}</td>
+                      <td className="p-4 text-slate-600">{item.availableQuantity}</td>
+                      <td className="p-4 text-slate-600">{item.soldQuantity}</td>
+                      <td className="p-4">
+                        <span className={`font-medium ${item.remainingQuantity <= 0 ? 'text-red-600' : item.remainingQuantity < 10 ? 'text-amber-600' : 'text-green-600'}`}>
+                          {item.remainingQuantity}
+                        </span>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={4} className="p-8 text-center text-slate-400">No stock status records found</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,150 @@
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import Swal from 'sweetalert2';
+import { getProducts } from '../services/productService';
+import { createSale } from '../services/saleService';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+export default function Sales() {
+  const [products, setProducts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  const productId = watch('productId');
+  const soldQuantity = watch('soldQuantity');
+  const soldUnitPrice = watch('soldUnitPrice');
+
+  const selectedProduct = products.find((p) => p._id === productId);
+  const soldTotalPrice = (parseFloat(soldQuantity || 0) * parseFloat(soldUnitPrice || 0)).toFixed(2);
+
+  const fetchProducts = async () => {
+    try {
+      const res = await getProducts({ limit: 100 });
+      setProducts(res.data.products);
+    } catch {
+    }
+  };
+
+  useEffect(() => {
+    const init = async () => {
+      setLoading(true);
+      await fetchProducts();
+      setLoading(false);
+    };
+    init();
+  }, []);
+
+  const onSubmit = async (data) => {
+    setSubmitting(true);
+    try {
+      await createSale({
+        ...data,
+        soldQuantity: parseFloat(data.soldQuantity),
+        soldUnitPrice: parseFloat(data.soldUnitPrice),
+      });
+      Swal.fire({ icon: 'success', title: 'Sale Recorded!', text: 'Sale created successfully', timer: 1500, showConfirmButton: false, toast: true, position: 'top-end' });
+      reset();
+      fetchProducts();
+    } catch {
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) return <LoadingSpinner message="Loading sales..." />;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-slate-800">Sales</h1>
+        <p className="text-slate-500 text-sm mt-1">Record sales transactions</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">Record New Sale</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</label>
+            <select
+              {...register('productId', { required: 'Product 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 bg-white"
+            >
+              <option value="">Select product</option>
+              {products.map((p) => (
+                <option key={p._id} value={p._id}>
+                  {p.productName} (Stock: {p.quantity})
+                </option>
+              ))}
+            </select>
+            {errors.productId && <p className="text-red-500 text-xs mt-1">{errors.productId.message}</p>}
+            {selectedProduct && !errors.productId && (
+              <p className="text-xs text-slate-400 mt-1">Available stock: {selectedProduct.quantity}</p>
+            )}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Sold Quantity</label>
+            <input
+              type="number"
+              step="1"
+              {...register('soldQuantity', {
+                required: 'Quantity is required',
+                min: { value: 1, message: 'Quantity must be at least 1' },
+                validate: (v) =>
+                  !selectedProduct || parseFloat(v) <= selectedProduct.quantity || 'Insufficient stock',
+              })}
+              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.soldQuantity && <p className="text-red-500 text-xs mt-1">{errors.soldQuantity.message}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Sold Unit Price (RWF)</label>
+            <input
+              type="number"
+              step="0.01"
+              {...register('soldUnitPrice', {
+                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.soldUnitPrice && <p className="text-red-500 text-xs mt-1">{errors.soldUnitPrice.message}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Sales Date</label>
+            <input
+              type="date"
+              {...register('salesDate', { required: 'Sales date 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.salesDate && <p className="text-red-500 text-xs mt-1">{errors.salesDate.message}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Sold Total Price</label>
+            <input
+              value={soldTotalPrice}
+              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">
+            <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 ? 'Recording...' : 'Record Sale'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}