create-jinmankn-app 1.0.11 → 1.0.13

package/templates/SIMS(Stock Inventory Managment System)/frontend/src/App.jsx

@@ -5,6 +5,7 @@ import Profile from './pages/Profile';
 import Product from './pages/Product';
 import Stock from './pages/Stock';
 import Reports from './pages/Reports';
+import ProtectedRoute from './components/ProtectedRoute';
 
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Supplier from './pages/Supplier';
@@ -17,15 +18,64 @@ function App() {
     <div>
       <BrowserRouter>
         <Routes>
-          <Route path='/' element={<Dashboard />} />
-          <Route path='/dashboard' element={<Dashboard />} />
+          <Route
+            path='/'
+            element={
+              <ProtectedRoute>
+                <Dashboard />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path='/dashboard'
+            element={
+              <ProtectedRoute>
+                <Dashboard />
+              </ProtectedRoute>
+            }
+          />
           <Route path='/login' element={<Login />} />
           <Route path='/register' element={<Register />} />
-          <Route path='/dashboard/spareparts' element={<Product />} />
-          <Route path='/dashboard/profile' element={<Profile />} />
-          <Route path='/dashboard/stock' element={<Stock />} />
-          <Route path='/dashboard/suppliers' element={<Supplier />} />
-          <Route path='/dashboard/reports' element={<Reports />} />
+          <Route
+            path='/dashboard/spareparts'
+            element={
+              <ProtectedRoute>
+                <Product />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path='/dashboard/profile'
+            element={
+              <ProtectedRoute>
+                <Profile />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path='/dashboard/stock'
+            element={
+              <ProtectedRoute>
+                <Stock />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path='/dashboard/suppliers'
+            element={
+              <ProtectedRoute>
+                <Supplier />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path='/dashboard/reports'
+            element={
+              <ProtectedRoute>
+                <Reports />
+              </ProtectedRoute>
+            }
+          />
         </Routes>
       </BrowserRouter>
     </div>

package/templates/SIMS(Stock Inventory Managment System)/frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,8 @@
+import { Navigate } from 'react-router-dom';
+
+function ProtectedRoute({ children }) {
+  const token = localStorage.getItem('token');
+  return token ? children : <Navigate to="/login" replace />;
+}
+
+export default ProtectedRoute;

package/templates/SMS(Stock Managment System)/backend-project/routes/protectedRoutes.js

@@ -0,0 +1,18 @@
+const express = require('express');
+const { protect } = require('../middleware/auth');
+
+const router = express.Router();
+
+// Example protected route: only accessible with a valid token
+router.get('/secret', protect, (req, res) => {
+  res.json({
+    message: 'This is a protected route. You are authenticated!',
+    user: {
+      id: req.user._id,
+      name: req.user.name,
+      email: req.user.email,
+    },
+  });
+});
+
+module.exports = router;

package/templates/SMS(Stock Managment System)/backend-project/server.js

@@ -9,6 +9,7 @@ const productRoutes = require('./routes/productRoutes');
 const SupplierRoutes = require('./routes/SupplierRoutes');
 const warehouseRoutes = require('./routes/warehouseRoutes');
 const reportRoutes = require('./routes/reportRoutes');
+const protectedRoutes = require('./routes/protectedRoutes');
 
 const app = express();
 
@@ -19,11 +20,12 @@ connectDB();
 app.use('/api/product', productRoutes);
 app.use('/api/supplier', SupplierRoutes);
 app.use('/api/auth/', authRoutes);
+app.use('/api/protected', protectedRoutes);
 app.use('/api/sales', salesRoutes);
 app.use('/api/warehouse', warehouseRoutes);
 app.use('/api/reports', reportRoutes);
 
-const PORT = 5001;
+const PORT = 1000;
 app.listen(PORT, () => {
   console.log(`Server running on http://localhost:${PORT}`);
 });

package/templates/SMS(Stock Managment System)/frontend-project/src/App.jsx

@@ -6,6 +6,7 @@ import Product from './pages/Product';
 import Warehouse from './pages/Warehouse';
 import Sales from './pages/Sales';
 import Reports from './pages/Reports';
+import ProtectedRoute from './components/ProtectedRoute';
 
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
@@ -14,15 +15,43 @@ function App() {
     <div>
       <BrowserRouter>
         <Routes>
-          <Route path='/' element={<Dashboard />} />
-          <Route path='/dashboard' element={<Dashboard />} />
+          <Route path='/' element={
+            <ProtectedRoute>
+              <Dashboard />
+            </ProtectedRoute>
+          } />
+          <Route path='/dashboard' element={
+            <ProtectedRoute>
+              <Dashboard />
+            </ProtectedRoute>
+          } />
           <Route path='/login' element={<Login />} />
           <Route path='/register' element={<Register />} />
-          <Route path='/dashboard/products' element={<Product />} />
-          <Route path='/dashboard/warehouse' element={<Warehouse />} />
-          <Route path='/dashboard/transactions' element={<Sales />} />
-          <Route path='/dashboard/reports' element={<Reports />} />
-          <Route path='/dashboard/profile' element={<Profile />} />
+          <Route path='/dashboard/products' element={
+            <ProtectedRoute>
+              <Product />
+            </ProtectedRoute>
+          } />
+          <Route path='/dashboard/warehouse' element={
+            <ProtectedRoute>
+              <Warehouse />
+            </ProtectedRoute>
+          } />
+          <Route path='/dashboard/transactions' element={
+            <ProtectedRoute>
+              <Sales />
+            </ProtectedRoute>
+          } />
+          <Route path='/dashboard/reports' element={
+            <ProtectedRoute>
+              <Reports />
+            </ProtectedRoute>
+          } />
+          <Route path='/dashboard/profile' element={
+            <ProtectedRoute>
+              <Profile />
+            </ProtectedRoute>
+          } />
         </Routes>
       </BrowserRouter>
     </div>

package/templates/SMS(Stock Managment System)/frontend-project/src/components/AppLayout.jsx

@@ -23,7 +23,7 @@ function AppLayout({ title, subtitle, children }) {
     }
 
     axios
-      .get('http://localhost:5001/api/auth/me', {
+      .get('http://localhost:1000/api/auth/me', {
         headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
       })
       .then((response) => {

package/templates/SMS(Stock Managment System)/frontend-project/src/components/ProtectedRoute.jsx

@@ -0,0 +1,13 @@
+import { Navigate } from 'react-router-dom';
+
+function ProtectedRoute({ children }) {
+  const token = localStorage.getItem('token');
+
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+}
+
+export default ProtectedRoute;

package/templates/SMS(Stock Managment System)/frontend-project/src/pages/Login.jsx

@@ -17,7 +17,7 @@ function Login() {
     setLoading(true);
 
     try {
-      const response = await axios.post('http://localhost:5001/api/auth/login', { email, password });
+      const response = await axios.post('http://localhost:1000/api/auth/login', { email, password });
       localStorage.setItem('token', response.data.token);
       localStorage.setItem('user', JSON.stringify(response.data.user));
       setMessage('Login successful');

package/templates/SMS(Stock Managment System)/frontend-project/src/pages/Product.jsx

@@ -1,8 +1,11 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import axios from 'axios';
 import AppLayout from '../components/AppLayout';
 
+const API_BASE = 'http://localhost:1000/api/product';
+
 function Product() {
+  const [products, setProducts] = useState([]);
   const [productCode, setProductCode] = useState('');
   const [productName, setProductName] = useState('');
   const [category, setCategory] = useState('');
@@ -11,6 +14,8 @@ function Product() {
   const [supplierName, setSupplierName] = useState('');
   const [dateReceived, setDateReceived] = useState('');
   const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+  const [editingId, setEditingId] = useState(null);
 
   const headers = {
     Authorization: `Bearer ${localStorage.getItem('token')}`,
@@ -24,96 +29,224 @@ function Product() {
     setQuantityInStock('');
     setSupplierName('');
     setDateReceived('');
+    setEditingId(null);
+  };
+
+  const fetchProducts = async () => {
+    try {
+      const response = await axios.get(`${API_BASE}/getproduct`, { headers });
+      setProducts(response.data);
+    } catch (err) {
+      setError('Failed to load products');
+      console.error(err);
+    }
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    setError('');
+    setMessage('');
+
     try {
-      await axios.post(
-        'http://localhost:5001/api/product/addproduct',
-        {
-          productCode,
-          productName,
-          category,
-          unitPrice,
-          quantityInStock,
-          supplierName,
-          dateReceived,
-        },
-        { headers }
-      );
-      setMessage('Product added');
+      if (editingId) {
+        await axios.put(
+          `${API_BASE}/updateproduct/${editingId}`,
+          {
+            productCode,
+            productName,
+            category,
+            unitPrice,
+            quantityInStock,
+            supplierName,
+            dateReceived,
+          },
+          { headers }
+        );
+        setMessage('Product updated successfully');
+      } else {
+        await axios.post(
+          `${API_BASE}/addproduct`,
+          {
+            productCode,
+            productName,
+            category,
+            unitPrice,
+            quantityInStock,
+            supplierName,
+            dateReceived,
+          },
+          { headers }
+        );
+        setMessage('Product added successfully');
+      }
       clearForm();
+      fetchProducts();
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to save product');
+      console.error(err);
+    }
+  };
+
+  const handleEdit = (product) => {
+    setEditingId(product._id);
+    setProductCode(product.productCode || '');
+    setProductName(product.productName || '');
+    setCategory(product.category || '');
+    setUnitPrice(product.unitPrice || '');
+    setQuantityInStock(product.quantityInStock || '');
+    setSupplierName(product.supplierName || '');
+    setDateReceived(product.dateReceived ? product.dateReceived.split('T')[0] : '');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await axios.delete(`${API_BASE}/deleteproduct/${id}`, { headers });
+      setMessage('Product deleted successfully');
+      fetchProducts();
     } catch (err) {
-      console.log(err);
+      setError('Failed to delete product');
+      console.error(err);
     }
   };
 
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
   return (
     <AppLayout title="Product management" subtitle="Inventory">
-      <div className="mx-auto max-w-xl">
-        {message && <p className="alert-success mb-4">{message}</p>}
+      <div className="mx-auto max-w-6xl space-y-6">
+        <div className="card space-y-4 p-5">
+          {message && <p className="alert-success">{message}</p>}
+          {error && <p className="alert-error">{error}</p>}
+
+          <form onSubmit={handleSubmit} className="space-y-3">
+            <h2 className="text-lg font-semibold text-slate-800">
+              {editingId ? 'Edit product' : 'Add new product'}
+            </h2>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <input
+                type="text"
+                placeholder="Product code"
+                value={productCode}
+                onChange={(e) => setProductCode(e.target.value)}
+                className="input-field"
+                required
+              />
+              <input
+                type="text"
+                placeholder="Product name"
+                value={productName}
+                onChange={(e) => setProductName(e.target.value)}
+                className="input-field"
+                required
+              />
+              <input
+                type="text"
+                placeholder="Category"
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+                className="input-field"
+                required
+              />
+              <input
+                type="number"
+                placeholder="Unit price"
+                value={unitPrice}
+                onChange={(e) => setUnitPrice(e.target.value)}
+                className="input-field"
+                required
+              />
+              <input
+                type="number"
+                placeholder="Quantity in stock"
+                value={quantityInStock}
+                onChange={(e) => setQuantityInStock(e.target.value)}
+                className="input-field"
+                required
+              />
+              <input
+                type="text"
+                placeholder="Supplier name"
+                value={supplierName}
+                onChange={(e) => setSupplierName(e.target.value)}
+                className="input-field"
+                required
+              />
+              <input
+                type="date"
+                value={dateReceived}
+                onChange={(e) => setDateReceived(e.target.value)}
+                className="input-field"
+                required
+              />
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <button type="submit" className="btn-primary">
+                {editingId ? 'Save changes' : 'Add product'}
+              </button>
+              {editingId && (
+                <button type="button" onClick={clearForm} className="btn-secondary">
+                  Cancel
+                </button>
+              )}
+            </div>
+          </form>
+        </div>
 
-        <form onSubmit={handleSubmit} className="card space-y-3 p-5">
-          <input
-            type="text"
-            placeholder="Product code"
-            value={productCode}
-            onChange={(e) => setProductCode(e.target.value)}
-            className="input-field"
-            required
-          />
-          <input
-            type="text"
-            placeholder="Product name"
-            value={productName}
-            onChange={(e) => setProductName(e.target.value)}
-            className="input-field"
-            required
-          />
-          <input
-            type="text"
-            placeholder="Category"
-            value={category}
-            onChange={(e) => setCategory(e.target.value)}
-            className="input-field"
-            required
-          />
-          <input
-            type="number"
-            placeholder="Unit price"
-            value={unitPrice}
-            onChange={(e) => setUnitPrice(e.target.value)}
-            className="input-field"
-            required
-          />
-          <input
-            type="number"
-            placeholder="Quantity in stock"
-            value={quantityInStock}
-            onChange={(e) => setQuantityInStock(e.target.value)}
-            className="input-field"
-            required
-          />
-          <input
-            type="text"
-            placeholder="Supplier name"
-            value={supplierName}
-            onChange={(e) => setSupplierName(e.target.value)}
-            className="input-field"
-            required
-          />
-          <input
-            type="date"
-            value={dateReceived}
-            onChange={(e) => setDateReceived(e.target.value)}
-            className="input-field"
-            required
-          />
-          <button type="submit" className="btn-primary">
-            Add product
-          </button>
-        </form>
+        <div className="card p-5">
+          <h2 className="text-lg font-semibold text-slate-800">Products</h2>
+          {products.length === 0 ? (
+            <p className="mt-4 text-sm text-slate-500">No products available yet.</p>
+          ) : (
+            <div className="mt-4 overflow-x-auto">
+              <table className="min-w-full divide-y divide-slate-200 text-sm">
+                <thead>
+                  <tr className="bg-slate-50 text-left text-slate-600">
+                    <th className="px-4 py-3">Code</th>
+                    <th className="px-4 py-3">Name</th>
+                    <th className="px-4 py-3">Category</th>
+                    <th className="px-4 py-3">Price</th>
+                    <th className="px-4 py-3">Stock</th>
+                    <th className="px-4 py-3">Supplier</th>
+                    <th className="px-4 py-3">Received</th>
+                    <th className="px-4 py-3">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-200">
+                  {products.map((product) => (
+                    <tr key={product._id} className="hover:bg-slate-50">
+                      <td className="px-4 py-3">{product.productCode}</td>
+                      <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.unitPrice}</td>
+                      <td className="px-4 py-3">{product.quantityInStock}</td>
+                      <td className="px-4 py-3">{product.supplierName}</td>
+                      <td className="px-4 py-3">{product.dateReceived?.split('T')[0] || '-'}</td>
+                      <td className="px-4 py-3 space-x-2">
+                        <button
+                          type="button"
+                          onClick={() => handleEdit(product)}
+                          className="btn-secondary"
+                        >
+                          Edit
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => handleDelete(product._id)}
+                          className="btn-danger"
+                        >
+                          Delete
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
       </div>
     </AppLayout>
   );

package/templates/SMS(Stock Managment System)/frontend-project/src/pages/Profile.jsx

@@ -8,7 +8,7 @@ function Profile() {
 
   const handleRetrieve = async () => {
     try {
-      const response = await axios.get('http://localhost:5001/api/auth/me', {
+      const response = await axios.get('http://localhost:1000/api/auth/me', {
         headers: {
           Authorization: `Bearer ${localStorage.getItem('token')}`,
         },

package/templates/SMS(Stock Managment System)/frontend-project/src/pages/Register.jsx

@@ -18,7 +18,7 @@ function Register() {
     setLoading(true);
 
     try {
-      const response = await axios.post('http://localhost:5001/api/auth/register', {
+      const response = await axios.post('http://localhost:1000/api/auth/register', {
         name,
         email,
         password,

package/templates/SMS(Stock Managment System)/frontend-project/src/pages/Reports.jsx

@@ -12,7 +12,7 @@ function Reports() {
 
   const fetchReports = async () => {
     try {
-      const res = await axios.get('http://localhost:5001/api/reports/summary', { headers });
+      const res = await axios.get('http://localhost:1000/api/reports/summary', { headers });
       setReports(res.data);
     } catch (err) {
       setError('Could not load reports');

package/templates/SMS(Stock Managment System)/frontend-project/src/pages/Sales.jsx

@@ -29,7 +29,7 @@ function Sales() {
 
   const fetchProducts = async () => {
     try {
-      const res = await axios.get('http://localhost:5001/api/product/getproduct', { headers });
+      const res = await axios.get('http://localhost:1000/api/product/getproduct', { headers });
       setProducts(res.data);
     } catch (error) {
       console.log(error);
@@ -38,7 +38,7 @@ function Sales() {
 
   const fetchWarehouses = async () => {
     try {
-      const res = await axios.get('http://localhost:5001/api/warehouse/getwarehouse', { headers });
+      const res = await axios.get('http://localhost:1000/api/warehouse/getwarehouse', { headers });
       setWarehouses(res.data);
     } catch (error) {
       console.log(error);
@@ -47,7 +47,7 @@ function Sales() {
 
   const handleGet = async () => {
     try {
-      const res = await axios.get('http://localhost:5001/api/sales/getsales', { headers });
+      const res = await axios.get('http://localhost:1000/api/sales/getsales', { headers });
       setTransactions(res.data);
     } catch (error) {
       console.log(error);
@@ -65,14 +65,14 @@ function Sales() {
     try {
       if (editId) {
         await axios.put(
-          `http://localhost:5001/api/sales/updatesales/${editId}`,
+          `http://localhost:1000/api/sales/updatesales/${editId}`,
           { transactionDate, quantityMoved, transactionType, productId, warehouseId },
           { headers }
         );
         setMessage('Transaction updated successfully');
       } else {
         await axios.post(
-          'http://localhost:5001/api/sales/addsales',
+          'http://localhost:1000/api/sales/addsales',
           { transactionDate, quantityMoved, transactionType, productId, warehouseId },
           { headers }
         );
@@ -87,7 +87,7 @@ function Sales() {
 
   const handledelete = async (id) => {
     try {
-      await axios.delete(`http://localhost:5001/api/sales/deletesales/${id}`, { headers });
+      await axios.delete(`http://localhost:1000/api/sales/deletesales/${id}`, { headers });
       handleGet();
     } catch (error) {
       console.log(error);