react-node-app 1.0.0

package/backend-project/routes/productRoutes.js

@@ -0,0 +1,9 @@
+const express = require('express');
+const router = express.Router();
+const { requireAuth } = require('../middleware/auth');
+const { createProduct, getProducts } = require('../controllers/productController');
+
+router.post('/', requireAuth, createProduct);
+router.get('/', requireAuth, getProducts);
+
+module.exports = router;

package/backend-project/routes/reportRoutes.js

@@ -0,0 +1,14 @@
+const express = require('express');
+const router = express.Router();
+const { requireAuth } = require('../middleware/auth');
+const {
+  getDailySalesReport,
+  getStockStatusReport,
+  getDashboardData,
+} = require('../controllers/reportController');
+
+router.get('/daily-sales', requireAuth, getDailySalesReport);
+router.get('/stock-status', requireAuth, getStockStatusReport);
+router.get('/dashboard', requireAuth, getDashboardData);
+
+module.exports = router;

package/backend-project/routes/saleRoutes.js

@@ -0,0 +1,8 @@
+const express = require('express');
+const router = express.Router();
+const { requireAuth } = require('../middleware/auth');
+const { createSale } = require('../controllers/saleController');
+
+router.post('/', requireAuth, createSale);
+
+module.exports = router;

package/backend-project/routes/stockRoutes.js

@@ -0,0 +1,18 @@
+const express = require('express');
+const router = express.Router();
+const { requireAuth } = require('../middleware/auth');
+const {
+  createStockStatus,
+  getStockStatuses,
+  getStockStatus,
+  updateStockStatus,
+  deleteStockStatus,
+} = require('../controllers/stockController');
+
+router.post('/', requireAuth, createStockStatus);
+router.get('/', requireAuth, getStockStatuses);
+router.get('/:id', requireAuth, getStockStatus);
+router.put('/:id', requireAuth, updateStockStatus);
+router.delete('/:id', requireAuth, deleteStockStatus);
+
+module.exports = router;

package/backend-project/server.js

@@ -0,0 +1,55 @@
+const express = require('express');
+const mongoose = require('mongoose');
+const session = require('express-session');
+const cors = require('cors');
+const dotenv = require('dotenv');
+const path = require('path');
+
+dotenv.config();
+
+const connectDB = require('./config/db');
+const authRoutes = require('./routes/authRoutes');
+const productRoutes = require('./routes/productRoutes');
+const saleRoutes = require('./routes/saleRoutes');
+const stockRoutes = require('./routes/stockRoutes');
+const reportRoutes = require('./routes/reportRoutes');
+
+const app = express();
+
+connectDB();
+
+app.use(cors({
+  origin: 'http://localhost:5173',
+  credentials: true,
+}));
+
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+app.use(
+  session({
+    secret: process.env.SESSION_SECRET || 'fallback_secret',
+    resave: false,
+    saveUninitialized: false,
+    cookie: {
+      secure: false,
+      httpOnly: true,
+      maxAge: 24 * 60 * 60 * 1000,
+    },
+  })
+);
+
+app.use('/api/auth', authRoutes);
+app.use('/api/products', productRoutes);
+app.use('/api/sales', saleRoutes);
+app.use('/api/stock', stockRoutes);
+app.use('/api/reports', reportRoutes);
+
+app.get('/api/health', (req, res) => {
+  res.json({ status: 'ok', message: 'BWS API is running' });
+});
+
+const PORT = process.env.PORT || 5000;
+app.listen(PORT, () => {
+  console.log(`BWS Server running on port ${PORT}`);
+});

package/backend-project/utils/seed.js

@@ -0,0 +1,44 @@
+const mongoose = require('mongoose');
+const bcrypt = require('bcryptjs');
+const dotenv = require('dotenv');
+const path = require('path');
+
+dotenv.config({ path: path.join(__dirname, '..', '.env') });
+
+const User = require('../models/User');
+
+const seedAdmin = async () => {
+  try {
+    await mongoose.connect(process.env.MONGO_URI);
+    console.log('MongoDB connected for seeding...');
+
+    const existing = await User.findOne({ username: 'admin' });
+    if (existing) {
+      console.log('Admin user already exists. Skipping seed.');
+      await mongoose.disconnect();
+      return;
+    }
+
+    const salt = await bcrypt.genSalt(10);
+    const hashedPassword = await bcrypt.hash('Admin@123', salt);
+
+    await User.create({
+      username: 'admin',
+      password: hashedPassword,
+      role: 'admin',
+    });
+
+    console.log('Admin user created successfully!');
+    console.log('Username: admin');
+    console.log('Password: Admin@123');
+
+    await mongoose.disconnect();
+    console.log('Seeding complete.');
+    process.exit(0);
+  } catch (error) {
+    console.error('Seeding error:', error);
+    process.exit(1);
+  }
+};
+
+seedAdmin();

package/frontend-project/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BWS - Business Web Solution</title>
+  </head>
+  <body class="bg-slate-50">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/frontend-project/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "bws-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Business Web Solution - React Frontend (Vite + Tailwind CSS)",
+  "keywords": ["bws", "react", "vite", "tailwind", "dashboard"],
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.48.2",
+    "react-icons": "^4.12.0",
+    "react-router-dom": "^6.21.1",
+    "recharts": "^2.10.3",
+    "sweetalert2": "^11.10.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.0.8"
+  }
+}

package/frontend-project/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/frontend-project/src/App.jsx

@@ -0,0 +1,7 @@
+import AppRoutes from './routes/AppRoutes';
+
+function App() {
+  return <AppRoutes />;
+}
+
+export default App;

package/frontend-project/src/components/LoadingSpinner.jsx

@@ -0,0 +1,8 @@
+export default function LoadingSpinner({ message = 'Loading...' }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12">
+      <div className="w-10 h-10 border-4 border-slate-200 border-t-slate-800 rounded-full animate-spin" />
+      <p className="mt-4 text-slate-500 text-sm">{message}</p>
+    </div>
+  );
+}

package/frontend-project/src/components/Pagination.jsx

@@ -0,0 +1,74 @@
+import { HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi2';
+
+export default function Pagination({ page, pages, onPageChange }) {
+  if (pages <= 1) return null;
+
+  const getPages = () => {
+    const items = [];
+    const maxVisible = 3;
+    let start = Math.max(1, page - Math.floor(maxVisible / 2));
+    let end = Math.min(pages, start + maxVisible - 1);
+
+    if (end - start + 1 < maxVisible) {
+      start = Math.max(1, end - maxVisible + 1);
+    }
+
+    if (start > 1) {
+      items.push(
+        <button key={1} onClick={() => onPageChange(1)} className="px-3 py-1.5 text-sm rounded-lg text-slate-600 hover:bg-slate-200">
+          1
+        </button>
+      );
+      if (start > 2) {
+        items.push(<span key="dots1" className="px-2 text-slate-400">...</span>);
+      }
+    }
+
+    for (let i = start; i <= end; i++) {
+      items.push(
+        <button
+          key={i}
+          onClick={() => onPageChange(i)}
+          className={`px-3 py-1.5 text-sm rounded-lg ${
+            i === page ? 'bg-slate-800 text-white' : 'text-slate-600 hover:bg-slate-200'
+          }`}
+        >
+          {i}
+        </button>
+      );
+    }
+
+    if (end < pages) {
+      if (end < pages - 1) {
+        items.push(<span key="dots2" className="px-2 text-slate-400">...</span>);
+      }
+      items.push(
+        <button key={pages} onClick={() => onPageChange(pages)} className="px-3 py-1.5 text-sm rounded-lg text-slate-600 hover:bg-slate-200">
+          {pages}
+        </button>
+      );
+    }
+
+    return items;
+  };
+
+  return (
+    <div className="flex items-center justify-center gap-1 mt-6">
+      <button
+        onClick={() => onPageChange(page - 1)}
+        disabled={page === 1}
+        className="px-3 py-1.5 text-sm rounded-lg text-slate-600 hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        <HiOutlineChevronLeft className="w-4 h-4" />
+      </button>
+      {getPages()}
+      <button
+        onClick={() => onPageChange(page + 1)}
+        disabled={page === pages}
+        className="px-3 py-1.5 text-sm rounded-lg text-slate-600 hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        <HiOutlineChevronRight className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}

package/frontend-project/src/components/ProtectedRoute.jsx

@@ -0,0 +1,22 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import LoadingSpinner from './LoadingSpinner';
+import MainLayout from '../layouts/MainLayout';
+
+export default function ProtectedRoute({ children }) {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
+        <LoadingSpinner message="Checking authentication..." />
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <MainLayout>{children}</MainLayout>;
+}

package/frontend-project/src/components/SearchBar.jsx

@@ -0,0 +1,16 @@
+import { HiOutlineMagnifyingGlass } from 'react-icons/hi2';
+
+export default function SearchBar({ value, onChange, placeholder = 'Search...' }) {
+  return (
+    <div className="relative">
+      <HiOutlineMagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="w-full pl-10 pr-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"
+      />
+    </div>
+  );
+}

package/frontend-project/src/components/StatCard.jsx

@@ -0,0 +1,20 @@
+export default function StatCard({ title, value, icon: Icon, subtitle }) {
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm text-slate-500 font-medium">{title}</p>
+          <p className="text-2xl font-bold text-slate-800 mt-1">{value}</p>
+          {subtitle && (
+            <p className="text-xs text-slate-400 mt-1">{subtitle}</p>
+          )}
+        </div>
+        {Icon && (
+          <div className="w-12 h-12 bg-slate-100 rounded-lg flex items-center justify-center">
+            <Icon className="w-6 h-6 text-slate-700" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/frontend-project/src/context/AuthContext.jsx

@@ -0,0 +1,60 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import { checkSession, loginUser, logoutUser } from '../services/authService';
+import Swal from 'sweetalert2';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const initAuth = async () => {
+      try {
+        const res = await checkSession();
+        if (res.data.authenticated) {
+          setUser(res.data.user);
+        }
+      } catch {
+        setUser(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    initAuth();
+  }, []);
+
+  const login = async (username, password) => {
+    const res = await loginUser({ username, password });
+    setUser(res.data.user);
+    Swal.fire({
+      icon: 'success',
+      title: 'Welcome back!',
+      text: 'Login successful',
+      timer: 1500,
+      showConfirmButton: false,
+      toast: true,
+      position: 'top-end',
+    });
+    return res.data;
+  };
+
+  const logout = async () => {
+    await logoutUser();
+    setUser(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, loading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider');
+  }
+  return context;
+};

package/frontend-project/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/frontend-project/src/layouts/MainLayout.jsx

@@ -0,0 +1,12 @@
+import Sidebar from './Sidebar';
+
+export default function MainLayout({ children }) {
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <Sidebar />
+      <main className="lg:ml-64 min-h-screen p-4 md:p-6 lg:p-8 pt-16 lg:pt-8">
+        {children}
+      </main>
+    </div>
+  );
+}

package/frontend-project/src/layouts/Sidebar.jsx

@@ -0,0 +1,96 @@
+import { NavLink } from 'react-router-dom';
+import {
+  HiOutlineSquares2X2,
+  HiOutlineCube,
+  HiOutlineShoppingCart,
+  HiOutlineClipboardDocumentList,
+  HiOutlineDocumentChartBar,
+  HiOutlineArrowRightOnRectangle,
+} from 'react-icons/hi2';
+import { useAuth } from '../context/AuthContext';
+import { useState } from 'react';
+
+const menuItems = [
+  { path: '/dashboard', label: 'Dashboard', icon: HiOutlineSquares2X2 },
+  { path: '/products', label: 'Products', icon: HiOutlineCube },
+  { path: '/sales', label: 'Sales', icon: HiOutlineShoppingCart },
+  { path: '/stock-status', label: 'Stock Status', icon: HiOutlineClipboardDocumentList },
+  { path: '/reports', label: 'Reports', icon: HiOutlineDocumentChartBar },
+];
+
+export default function Sidebar() {
+  const { logout } = useAuth();
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const handleLogout = async () => {
+    await logout();
+  };
+
+  const linkClass = ({ isActive }) =>
+    `flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+      isActive
+        ? 'bg-slate-700 text-white'
+        : 'text-slate-300 hover:bg-slate-800 hover:text-white'
+    }`;
+
+  return (
+    <>
+      <button
+        onClick={() => setMobileOpen(!mobileOpen)}
+        className="lg:hidden fixed top-4 left-4 z-50 p-2 bg-slate-900 text-white rounded-lg"
+      >
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          {mobileOpen ? (
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          ) : (
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+          )}
+        </svg>
+      </button>
+
+      {mobileOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-30 lg:hidden"
+          onClick={() => setMobileOpen(false)}
+        />
+      )}
+
+      <aside
+        className={`fixed top-0 left-0 z-40 h-full w-64 bg-slate-900 transform transition-transform duration-200 ease-in-out lg:translate-x-0 ${
+          mobileOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <div className="flex flex-col h-full">
+          <div className="p-6 border-b border-slate-700">
+            <h1 className="text-xl font-bold text-white">DAB Enterprise</h1>
+            <p className="text-xs text-slate-400 mt-1">Business Web Solution</p>
+          </div>
+
+          <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
+            {menuItems.map((item) => (
+              <NavLink
+                key={item.path}
+                to={item.path}
+                className={linkClass}
+                onClick={() => setMobileOpen(false)}
+              >
+                <item.icon className="w-5 h-5" />
+                {item.label}
+              </NavLink>
+            ))}
+          </nav>
+
+          <div className="p-4 border-t border-slate-700">
+            <button
+              onClick={handleLogout}
+              className="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white w-full transition-colors"
+            >
+              <HiOutlineArrowRightOnRectangle className="w-5 h-5" />
+              Logout
+            </button>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}

package/frontend-project/src/main.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import { AuthProvider } from './context/AuthContext';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);