Auto commit: 2026-03-13T01:55:33.624Z

frontend/src/AdminRoute.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from './AuthContext';
+
+const AdminRoute: React.FC = () => {
+  const { isAuthenticated } = useAuth();
+
+  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
+};
+
+export default AdminRoute;

frontend/src/App.tsx

@@ -5,6 +5,8 @@ import ProductList from './ProductList';
 import ProductDetail from './ProductDetail';
 import CartPage from './CartPage';
 import AdminLayout from './AdminLayout';
+import AdminRoute from './AdminRoute';
+import ProductManagement from './ProductManagement';
 import { CartProvider } from './CartContext';
 import { AuthProvider } from './AuthContext';
 
@@ -27,10 +29,12 @@ function App() {
                 </main>
               </>
             } />
-            <Route path="/admin/*" element={<AdminLayout />}>
-              <Route path="products" element={<div>Product Management (To be implemented)</div>} />
-              <Route path="categories" element={<div>Category Management (To be implemented)</div>} />
-              <Route path="sellers" element={<div>Seller Management (To be implemented)</div>} />
+            <Route path="/admin/*" element={<AdminRoute />}>
+              <Route element={<AdminLayout />}>
+                <Route path="products" element={<ProductManagement />} />
+                <Route path="categories" element={<div>Category Management (To be implemented)</div>} />
+                <Route path="sellers" element={<div>Seller Management (To be implemented)</div>} />
+              </Route>
             </Route>
           </Routes>
         </CartProvider>

frontend/src/ProductManagement.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+interface Product {
+  id: number;
+  name: string;
+  price: string;
+  description: string;
+  category: string;
+}
+
+const ProductManagement: React.FC = () => {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  const fetchProducts = () => {
+    axios.get('http://127.0.0.1:8000/products/')
+      .then(response => {
+        setProducts(response.data);
+        setLoading(false);
+      })
+      .catch(error => {
+        console.error('Error fetching products:', error);
+        setLoading(false);
+      });
+  };
+
+  const deleteProduct = (id: number) => {
+    if (window.confirm('Are you sure you want to delete this product?')) {
+        axios.delete(`http://127.0.0.1:8000/products/${id}/`)
+            .then(() => fetchProducts())
+            .catch(error => console.error('Error deleting product:', error));
+    }
+  };
+
+  if (loading) return <div className="text-center p-4">Loading...</div>;
+
+  return (
+    <div className="p-4">
+      <h2 className="text-xl font-bold mb-4">Product Management</h2>
+      <table className="min-w-full bg-white border border-gray-200">
+        <thead>
+          <tr>
+            <th className="py-2 px-4 border-b">ID</th>
+            <th className="py-2 px-4 border-b">Name</th>
+            <th className="py-2 px-4 border-b">Price</th>
+            <th className="py-2 px-4 border-b">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {products.map(product => (
+            <tr key={product.id}>
+              <td className="py-2 px-4 border-b">{product.id}</td>
+              <td className="py-2 px-4 border-b">{product.name}</td>
+              <td className="py-2 px-4 border-b">{product.price}</td>
+              <td className="py-2 px-4 border-b">
+                <button 
+                  onClick={() => deleteProduct(product.id)}
+                  className="bg-red-500 text-white px-2 py-1 rounded"
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ProductManagement;