react-node-app 1.0.0

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

@@ -0,0 +1,306 @@
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import Swal from 'sweetalert2';
+import {
+  HiOutlinePlus,
+  HiOutlinePencil,
+  HiOutlineTrash,
+} from 'react-icons/hi2';
+import { getProducts } from '../services/productService';
+import {
+  createStockStatus,
+  getStockStatuses,
+  updateStockStatus,
+  deleteStockStatus,
+} from '../services/stockService';
+import SearchBar from '../components/SearchBar';
+import Pagination from '../components/Pagination';
+import LoadingSpinner from '../components/LoadingSpinner';
+
+export default function StockStatus() {
+  const [stockStatuses, setStockStatuses] = useState([]);
+  const [products, setProducts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [pages, setPages] = useState(1);
+  const [showForm, setShowForm] = useState(false);
+  const [editing, setEditing] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  const availableQuantity = watch('availableQuantity');
+  const soldQuantity = watch('soldQuantity');
+  const remainingQuantity =
+    parseInt(availableQuantity || 0) - parseInt(soldQuantity || 0);
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const [stockRes, prodRes] = await Promise.all([
+        getStockStatuses({ search, page, limit: 10 }),
+        getProducts({ limit: 100 }),
+      ]);
+      setStockStatuses(stockRes.data.stockStatuses);
+      setPages(stockRes.data.pages);
+      setProducts(prodRes.data.products);
+    } catch {
+      // handled by interceptor
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [page, search]);
+
+  const onSubmit = async (data) => {
+    setSubmitting(true);
+    try {
+      if (editing) {
+        await updateStockStatus(editing._id, data);
+        Swal.fire({ icon: 'success', title: 'Updated!', timer: 1500, showConfirmButton: false, toast: true, position: 'top-end' });
+      } else {
+        await createStockStatus(data);
+        Swal.fire({ icon: 'success', title: 'Created!', timer: 1500, showConfirmButton: false, toast: true, position: 'top-end' });
+      }
+      reset();
+      setShowForm(false);
+      setEditing(null);
+      fetchData();
+    } catch {
+      // handled by interceptor
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleEdit = (item) => {
+    setEditing(item);
+    setValue('productId', item.productId?._id || item.productId);
+    setValue('availableQuantity', item.availableQuantity);
+    setValue('soldQuantity', item.soldQuantity);
+    setValue('generatedAt', item.generatedAt ? item.generatedAt.split('T')[0] : '');
+    setShowForm(true);
+  };
+
+  const handleDelete = async (id) => {
+    const result = await Swal.fire({
+      title: 'Are you sure?',
+      text: "You won't be able to revert this!",
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#1e293b',
+      cancelButtonColor: '#dc2626',
+      confirmButtonText: 'Yes, delete it!',
+    });
+
+    if (result.isConfirmed) {
+      try {
+        await deleteStockStatus(id);
+        Swal.fire({ icon: 'success', title: 'Deleted!', timer: 1500, showConfirmButton: false, toast: true, position: 'top-end' });
+        fetchData();
+      } catch {
+        // handled by interceptor
+      }
+    }
+  };
+
+  const cancelForm = () => {
+    reset();
+    setShowForm(false);
+    setEditing(null);
+  };
+
+  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">Stock Status</h1>
+          <p className="text-slate-500 text-sm mt-1">Monitor stock levels and inventory</p>
+        </div>
+        <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"
+        >
+          <HiOutlinePlus className="w-5 h-5" />
+          Add Stock Status
+        </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">
+            {editing ? 'Edit Stock Status' : 'New Stock Status'}
+          </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"
+                disabled={!!editing}
+              >
+                <option value="">Select product</option>
+                {products.map((p) => (
+                  <option key={p._id} value={p._id}>
+                    {p.productName}
+                  </option>
+                ))}
+              </select>
+              {errors.productId && <p className="text-red-500 text-xs mt-1">{errors.productId.message}</p>}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Available Quantity</label>
+              <input
+                type="number"
+                step="1"
+                {...register('availableQuantity', {
+                  required: 'Required',
+                  min: { value: 0, message: '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.availableQuantity && <p className="text-red-500 text-xs mt-1">{errors.availableQuantity.message}</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: 'Required',
+                  min: { value: 0, message: '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.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">Remaining Quantity</label>
+              <input
+                value={remainingQuantity}
+                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>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Date</label>
+              <input
+                type="date"
+                {...register('generatedAt')}
+                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 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...' : editing ? 'Update' : 'Save'}
+              </button>
+              <button
+                type="button"
+                onClick={cancelForm}
+                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">
+          <SearchBar value={search} onChange={(v) => { setSearch(v); setPage(1); }} placeholder="Search by product name..." />
+        </div>
+
+        {loading ? (
+          <LoadingSpinner message="Loading stock status..." />
+        ) : (
+          <>
+            <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>
+                    <th className="text-left p-4 text-slate-500 font-medium">Date</th>
+                    <th className="text-left p-4 text-slate-500 font-medium">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {stockStatuses.length > 0 ? (
+                    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>
+                        <td className="p-4 text-slate-500">
+                          {new Date(item.generatedAt).toLocaleDateString()}
+                        </td>
+                        <td className="p-4">
+                          <div className="flex items-center gap-2">
+                            <button
+                              onClick={() => handleEdit(item)}
+                              className="p-1.5 text-slate-500 hover:text-slate-800 hover:bg-slate-100 rounded-lg transition-colors"
+                            >
+                              <HiOutlinePencil className="w-4 h-4" />
+                            </button>
+                            <button
+                              onClick={() => handleDelete(item._id)}
+                              className="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors"
+                            >
+                              <HiOutlineTrash className="w-4 h-4" />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td colSpan={6} className="p-8 text-center text-slate-400">
+                        No stock status records found
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+            <div className="p-4">
+              <Pagination page={page} pages={pages} onPageChange={setPage} />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/frontend-project/src/routes/AppRoutes.jsx

@@ -0,0 +1,66 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import ProtectedRoute from '../components/ProtectedRoute';
+import Login from '../pages/Login';
+import Dashboard from '../pages/Dashboard';
+import Products from '../pages/Products';
+import Sales from '../pages/Sales';
+import StockStatus from '../pages/StockStatus';
+import Reports from '../pages/Reports';
+
+export default function AppRoutes() {
+  const { user, loading } = useAuth();
+
+  if (loading) return null;
+
+  return (
+    <Routes>
+      <Route
+        path="/login"
+        element={user ? <Navigate to="/dashboard" replace /> : <Login />}
+      />
+      <Route
+        path="/dashboard"
+        element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/products"
+        element={
+          <ProtectedRoute>
+            <Products />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/sales"
+        element={
+          <ProtectedRoute>
+            <Sales />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/stock-status"
+        element={
+          <ProtectedRoute>
+            <StockStatus />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/reports"
+        element={
+          <ProtectedRoute>
+            <Reports />
+          </ProtectedRoute>
+        }
+      />
+      <Route path="/" element={<Navigate to="/dashboard" replace />} />
+      <Route path="*" element={<Navigate to="/dashboard" replace />} />
+    </Routes>
+  );
+}

package/frontend-project/src/services/api.js

@@ -0,0 +1,52 @@
+import axios from 'axios';
+import Swal from 'sweetalert2';
+
+const api = axios.create({
+  baseURL: 'http://localhost:5000/api',
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response) {
+      if (error.response.status === 401) {
+        const isAuthPage = window.location.pathname === '/login';
+        if (!isAuthPage) {
+          window.location.href = '/login';
+        }
+      }
+
+      const message =
+        error.response.data?.message || 'An unexpected error occurred';
+
+      if (error.response.status !== 401) {
+        Swal.fire({
+          icon: 'error',
+          title: 'Error',
+          text: message,
+          toast: true,
+          position: 'top-end',
+          timer: 3000,
+          showConfirmButton: false,
+        });
+      }
+    } else if (error.request) {
+      Swal.fire({
+        icon: 'error',
+        title: 'Connection Error',
+        text: 'Unable to connect to the server. Please check your connection.',
+        toast: true,
+        position: 'top-end',
+        timer: 3000,
+        showConfirmButton: false,
+      });
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;

package/frontend-project/src/services/authService.js

@@ -0,0 +1,5 @@
+import api from './api';
+
+export const loginUser = (data) => api.post('/auth/login', data);
+export const logoutUser = () => api.post('/auth/logout');
+export const checkSession = () => api.get('/auth/session');

package/frontend-project/src/services/productService.js

@@ -0,0 +1,4 @@
+import api from './api';
+
+export const createProduct = (data) => api.post('/products', data);
+export const getProducts = (params) => api.get('/products', { params });

package/frontend-project/src/services/reportService.js

@@ -0,0 +1,5 @@
+import api from './api';
+
+export const getDashboardData = () => api.get('/reports/dashboard');
+export const getDailySalesReport = (params) => api.get('/reports/daily-sales', { params });
+export const getStockStatusReport = (params) => api.get('/reports/stock-status', { params });

package/frontend-project/src/services/saleService.js

@@ -0,0 +1,3 @@
+import api from './api';
+
+export const createSale = (data) => api.post('/sales', data);

package/frontend-project/src/services/stockService.js

@@ -0,0 +1,7 @@
+import api from './api';
+
+export const createStockStatus = (data) => api.post('/stock', data);
+export const getStockStatuses = (params) => api.get('/stock', { params });
+export const getStockStatus = (id) => api.get(`/stock/${id}`);
+export const updateStockStatus = (id, data) => api.put(`/stock/${id}`, data);
+export const deleteStockStatus = (id) => api.delete(`/stock/${id}`);

package/frontend-project/tailwind.config.js

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

package/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,
+  },
+});

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "react-node-app",
+  "version": "1.0.0",
+  "description": "Business Web Solution (BWS) for DAB Enterprise Ltd - Full-stack inventory, sales, and stock management system with React frontend and Express/MongoDB backend",
+  "keywords": [
+    "bws",
+    "dab-enterprise",
+    "inventory",
+    "sales",
+    "stock-management",
+    "business-solution",
+    "react",
+    "express",
+    "mongodb"
+  ],
+  "license": "MIT",
+  "author": "DAB Enterprise Ltd",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ishconnlab/DABEnterprise.git"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "backend-project/server.js",
+    "backend-project/package.json",
+    "backend-project/config/",
+    "backend-project/controllers/",
+    "backend-project/middleware/",
+    "backend-project/models/",
+    "backend-project/routes/",
+    "backend-project/utils/",
+    "frontend-project/src/",
+    "frontend-project/public/",
+    "frontend-project/index.html",
+    "frontend-project/package.json",
+    "frontend-project/vite.config.js",
+    "frontend-project/postcss.config.js",
+    "frontend-project/tailwind.config.js",
+    "README.md",
+    ".gitignore"
+  ],
+  "scripts": {
+    "install:backend": "cd backend-project && npm install",
+    "install:frontend": "cd frontend-project && npm install",
+    "postinstall": "",
+    "dev:backend": "cd backend-project && npm run dev",
+    "dev:frontend": "cd frontend-project && npm run dev",
+    "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
+    "build": "cd frontend-project && npm run build",
+    "start:backend": "cd backend-project && npm start",
+    "seed": "cd backend-project && npm run seed",
+    "start": "npm run seed && npm run start:backend"
+  },
+  "devDependencies": {
+    "concurrently": "^8.2.2"
+  }
+}