From e40c457179ad8e03225aad37402e26b6d7ceb465 Mon Sep 17 00:00:00 2001
From: Jake Kasper <jake.kasper@hpe.com>
Date: Fri, 29 Aug 2025 08:11:51 -0400
Subject: [PATCH] admin stuff

---
 frontend/src/App.js                        |  11 +
 frontend/src/pages/Admin/AdminDashboard.js |   7 +
 frontend/src/pages/Admin/AdminEquipment.js | 472 ++++++++++++++++++
 frontend/src/pages/Admin/AdminProducts.js  | 552 ++++++++++++++++++++-
 frontend/src/pages/Admin/AdminUsers.js     | 354 ++++++++++++-
 5 files changed, 1388 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/pages/Admin/AdminEquipment.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 8355a8c..262391d 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -32,6 +32,7 @@ import Profile from './pages/Profile/Profile';
 import AdminDashboard from './pages/Admin/AdminDashboard';
 import AdminUsers from './pages/Admin/AdminUsers';
 import AdminProducts from './pages/Admin/AdminProducts';
+import AdminEquipment from './pages/Admin/AdminEquipment';
 
 // Error pages
 import NotFound from './pages/Error/NotFound';
@@ -281,6 +282,16 @@ function App() {
                   </ProtectedRoute>
                 }
               />
+              <Route
+                path="/admin/equipment"
+                element={
+                  <ProtectedRoute adminOnly>
+                    <Layout>
+                      <AdminEquipment />
+                    </Layout>
+                  </ProtectedRoute>
+                }
+              />
 
               {/* Error Routes */}
               <Route path="/unauthorized" element={<Unauthorized />} />
diff --git a/frontend/src/pages/Admin/AdminDashboard.js b/frontend/src/pages/Admin/AdminDashboard.js
index f516726..5ccce94 100644
--- a/frontend/src/pages/Admin/AdminDashboard.js
+++ b/frontend/src/pages/Admin/AdminDashboard.js
@@ -132,6 +132,13 @@ const AdminDashboard = () => {
               <div className="font-medium text-gray-900">Manage Products</div>
               <div className="text-sm text-gray-500">Add and manage lawn care products</div>
             </Link>
+            <Link 
+              to="/admin/equipment" 
+              className="block w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
+            >
+              <div className="font-medium text-gray-900">Manage Equipment</div>
+              <div className="text-sm text-gray-500">Add and manage lawn care equipment</div>
+            </Link>
             <button 
               onClick={() => window.open(`${process.env.REACT_APP_API_URL}/admin/system/health`, '_blank')}
               className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
diff --git a/frontend/src/pages/Admin/AdminEquipment.js b/frontend/src/pages/Admin/AdminEquipment.js
new file mode 100644
index 0000000..8f07775
--- /dev/null
+++ b/frontend/src/pages/Admin/AdminEquipment.js
@@ -0,0 +1,472 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  WrenchScrewdriverIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  PencilIcon,
+  TrashIcon,
+  ExclamationTriangleIcon
+} from '@heroicons/react/24/outline';
+import { adminAPI, equipmentAPI } from '../../services/api';
+import LoadingSpinner from '../../components/UI/LoadingSpinner';
+import toast from 'react-hot-toast';
+
+const AdminEquipment = () => {
+  const [equipment, setEquipment] = useState([]);
+  const [equipmentTypes, setEquipmentTypes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [typeFilter, setTypeFilter] = useState('all');
+  const [categoryFilter, setCategoryFilter] = useState('all');
+  const [selectedEquipment, setSelectedEquipment] = useState(null);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [formData, setFormData] = useState({
+    customName: '',
+    manufacturer: '',
+    model: '',
+    equipmentTypeId: '',
+    width: '',
+    capacity: '',
+    notes: ''
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const [equipmentResponse, typesResponse] = await Promise.all([
+        equipmentAPI.getEquipment(),
+        equipmentAPI.getEquipmentTypes()
+      ]);
+
+      setEquipment(equipmentResponse.data.data.equipment || []);
+      setEquipmentTypes(typesResponse.data.data.types || []);
+    } catch (error) {
+      console.error('Failed to fetch equipment:', error);
+      toast.error('Failed to load equipment');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreate = async (e) => {
+    e.preventDefault();
+    try {
+      await equipmentAPI.createEquipment(formData);
+      toast.success('Equipment created successfully');
+      setShowCreateModal(false);
+      resetForm();
+      fetchData();
+    } catch (error) {
+      console.error('Failed to create equipment:', error);
+      toast.error('Failed to create equipment');
+    }
+  };
+
+  const handleUpdate = async (e) => {
+    e.preventDefault();
+    try {
+      await equipmentAPI.updateEquipment(selectedEquipment.id, formData);
+      toast.success('Equipment updated successfully');
+      setShowEditModal(false);
+      resetForm();
+      fetchData();
+    } catch (error) {
+      console.error('Failed to update equipment:', error);
+      toast.error('Failed to update equipment');
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      await equipmentAPI.deleteEquipment(selectedEquipment.id);
+      toast.success('Equipment deleted successfully');
+      setShowDeleteModal(false);
+      setSelectedEquipment(null);
+      fetchData();
+    } catch (error) {
+      console.error('Failed to delete equipment:', error);
+      toast.error('Failed to delete equipment');
+    }
+  };
+
+  const resetForm = () => {
+    setFormData({
+      customName: '',
+      manufacturer: '',
+      model: '',
+      equipmentTypeId: '',
+      width: '',
+      capacity: '',
+      notes: ''
+    });
+    setSelectedEquipment(null);
+  };
+
+  const openEditModal = (equip) => {
+    setSelectedEquipment(equip);
+    setFormData({
+      customName: equip.customName || '',
+      manufacturer: equip.manufacturer || '',
+      model: equip.model || '',
+      equipmentTypeId: equip.equipmentTypeId || '',
+      width: equip.width || '',
+      capacity: equip.capacity || '',
+      notes: equip.notes || ''
+    });
+    setShowEditModal(true);
+  };
+
+  // Filter equipment based on filters
+  const filteredEquipment = equipment.filter(equip => {
+    const matchesSearch = !searchTerm || 
+      (equip.customName && equip.customName.toLowerCase().includes(searchTerm.toLowerCase())) ||
+      (equip.manufacturer && equip.manufacturer.toLowerCase().includes(searchTerm.toLowerCase())) ||
+      (equip.model && equip.model.toLowerCase().includes(searchTerm.toLowerCase()));
+    
+    const matchesType = typeFilter === 'all' || 
+      (equip.equipmentTypeId && equip.equipmentTypeId.toString() === typeFilter);
+    
+    const matchesCategory = categoryFilter === 'all' || 
+      (equip.categoryName && equip.categoryName.toLowerCase() === categoryFilter.toLowerCase());
+
+    return matchesSearch && matchesType && matchesCategory;
+  });
+
+  const EquipmentForm = ({ onSubmit, submitText }) => (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Equipment Name *
+          </label>
+          <input
+            type="text"
+            required
+            value={formData.customName}
+            onChange={(e) => setFormData({ ...formData, customName: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="My Spreader, Front Sprayer, etc."
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Equipment Type *
+          </label>
+          <select
+            required
+            value={formData.equipmentTypeId}
+            onChange={(e) => setFormData({ ...formData, equipmentTypeId: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Select Type</option>
+            {equipmentTypes.map(type => (
+              <option key={type.id} value={type.id}>{type.name} ({type.category})</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Manufacturer
+          </label>
+          <input
+            type="text"
+            value={formData.manufacturer}
+            onChange={(e) => setFormData({ ...formData, manufacturer: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="John Deere, Toro, etc."
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Model
+          </label>
+          <input
+            type="text"
+            value={formData.model}
+            onChange={(e) => setFormData({ ...formData, model: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="Model number or name"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Width (feet)
+          </label>
+          <input
+            type="number"
+            step="0.1"
+            value={formData.width}
+            onChange={(e) => setFormData({ ...formData, width: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="12.5"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Capacity
+          </label>
+          <input
+            type="text"
+            value={formData.capacity}
+            onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder="25 gallons, 50 lbs, etc."
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Notes
+        </label>
+        <textarea
+          value={formData.notes}
+          onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+          rows="3"
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="Additional details, maintenance notes, etc."
+        />
+      </div>
+
+      <div className="flex justify-end space-x-3 pt-4">
+        <button
+          type="button"
+          onClick={() => {
+            setShowCreateModal(false);
+            setShowEditModal(false);
+            resetForm();
+          }}
+          className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
+        >
+          {submitText}
+        </button>
+      </div>
+    </form>
+  );
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <div className="flex justify-between items-center mb-4">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">Manage Equipment</h1>
+            <p className="text-gray-600">Add, edit, and manage all equipment</p>
+          </div>
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="btn-primary flex items-center"
+          >
+            <PlusIcon className="h-5 w-5 mr-2" />
+            Add Equipment
+          </button>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+          <div className="relative">
+            <MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search equipment..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
+            />
+          </div>
+          <select
+            value={typeFilter}
+            onChange={(e) => setTypeFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">All Types</option>
+            {equipmentTypes.map(type => (
+              <option key={type.id} value={type.id}>{type.name}</option>
+            ))}
+          </select>
+          <select
+            value={categoryFilter}
+            onChange={(e) => setCategoryFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">All Categories</option>
+            <option value="spreader">Spreaders</option>
+            <option value="sprayer">Sprayers</option>
+            <option value="mower">Mowers</option>
+            <option value="aerator">Aerators</option>
+            <option value="seeder">Seeders</option>
+          </select>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center items-center h-64">
+          <LoadingSpinner size="lg" />
+        </div>
+      ) : (
+        <div className="card overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Equipment
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Type
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Specifications
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Owner
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {filteredEquipment.map((equip) => (
+                  <tr key={equip.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <div className="h-10 w-10 rounded-full bg-orange-100 flex items-center justify-center">
+                          <WrenchScrewdriverIcon className="h-6 w-6 text-orange-600" />
+                        </div>
+                        <div className="ml-4">
+                          <div className="text-sm font-medium text-gray-900">
+                            {equip.customName}
+                          </div>
+                          <div className="text-sm text-gray-500">
+                            {equip.manufacturer} {equip.model}
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900">{equip.typeName}</div>
+                      <div className="text-sm text-gray-500">{equip.categoryName}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                      <div>
+                        {equip.width && <div>Width: {equip.width} ft</div>}
+                        {equip.capacity && <div>Capacity: {equip.capacity}</div>}
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-gray-900">{equip.userFirstName} {equip.userLastName}</div>
+                      <div className="text-sm text-gray-500">{equip.userEmail}</div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex items-center space-x-2">
+                        <button
+                          onClick={() => openEditModal(equip)}
+                          className="text-indigo-600 hover:text-indigo-900"
+                          title="Edit Equipment"
+                        >
+                          <PencilIcon className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={() => {
+                            setSelectedEquipment(equip);
+                            setShowDeleteModal(true);
+                          }}
+                          className="text-red-600 hover:text-red-900"
+                          title="Delete Equipment"
+                        >
+                          <TrashIcon className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Create Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
+            <div className="mt-3">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">
+                Add New Equipment
+              </h3>
+              <EquipmentForm onSubmit={handleCreate} submitText="Create Equipment" />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Modal */}
+      {showEditModal && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
+            <div className="mt-3">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">
+                Edit Equipment
+              </h3>
+              <EquipmentForm onSubmit={handleUpdate} submitText="Update Equipment" />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Modal */}
+      {showDeleteModal && selectedEquipment && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div className="mt-3">
+              <div className="flex items-center mb-4">
+                <ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-2" />
+                <h3 className="text-lg font-medium text-gray-900">
+                  Delete Equipment
+                </h3>
+              </div>
+              <p className="text-sm text-gray-600 mb-6">
+                Are you sure you want to delete "{selectedEquipment.customName}"? 
+                This action cannot be undone.
+              </p>
+              <div className="flex justify-end space-x-3">
+                <button
+                  onClick={() => setShowDeleteModal(false)}
+                  className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDelete}
+                  className="px-4 py-2 text-sm text-white bg-red-600 rounded hover:bg-red-700"
+                >
+                  Delete Equipment
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdminEquipment;
\ No newline at end of file
diff --git a/frontend/src/pages/Admin/AdminProducts.js b/frontend/src/pages/Admin/AdminProducts.js
index fe77cef..b9018ea 100644
--- a/frontend/src/pages/Admin/AdminProducts.js
+++ b/frontend/src/pages/Admin/AdminProducts.js
@@ -1,12 +1,556 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { 
+  BeakerIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  PencilIcon,
+  TrashIcon,
+  ExclamationTriangleIcon,
+  TagIcon
+} from '@heroicons/react/24/outline';
+import { adminAPI, productsAPI } from '../../services/api';
+import LoadingSpinner from '../../components/UI/LoadingSpinner';
+import toast from 'react-hot-toast';
 
 const AdminProducts = () => {
+  const [products, setProducts] = useState([]);
+  const [userProducts, setUserProducts] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState('all');
+  const [typeFilter, setTypeFilter] = useState('all');
+  const [productTypeFilter, setProductTypeFilter] = useState('all'); // shared vs custom
+  const [selectedProduct, setSelectedProduct] = useState(null);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    brand: '',
+    categoryId: '',
+    productType: 'granular',
+    activeIngredients: '',
+    description: '',
+    rates: [{ applicationType: 'granular', rateAmount: '', rateUnit: 'lbs/1000 sq ft', notes: '' }]
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, [searchTerm, categoryFilter, typeFilter]);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const [productsResponse, categoriesResponse] = await Promise.all([
+        productsAPI.getProducts({ 
+          search: searchTerm,
+          category: categoryFilter !== 'all' ? categoryFilter : '',
+          type: typeFilter !== 'all' ? typeFilter : ''
+        }),
+        productsAPI.getCategories()
+      ]);
+
+      setProducts(productsResponse.data.data.sharedProducts || []);
+      setUserProducts(productsResponse.data.data.userProducts || []);
+      setCategories(categoriesResponse.data.data.categories || []);
+    } catch (error) {
+      console.error('Failed to fetch products:', error);
+      toast.error('Failed to load products');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreate = async (e) => {
+    e.preventDefault();
+    try {
+      await adminAPI.createProduct(formData);
+      toast.success('Product created successfully');
+      setShowCreateModal(false);
+      resetForm();
+      fetchData();
+    } catch (error) {
+      console.error('Failed to create product:', error);
+      toast.error('Failed to create product');
+    }
+  };
+
+  const handleUpdate = async (e) => {
+    e.preventDefault();
+    try {
+      await adminAPI.updateProduct(selectedProduct.id, formData);
+      toast.success('Product updated successfully');
+      setShowEditModal(false);
+      resetForm();
+      fetchData();
+    } catch (error) {
+      console.error('Failed to update product:', error);
+      toast.error('Failed to update product');
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      if (selectedProduct.isShared) {
+        await adminAPI.deleteProduct(selectedProduct.id);
+      } else {
+        await productsAPI.deleteUserProduct(selectedProduct.id);
+      }
+      toast.success('Product deleted successfully');
+      setShowDeleteModal(false);
+      setSelectedProduct(null);
+      fetchData();
+    } catch (error) {
+      console.error('Failed to delete product:', error);
+      toast.error('Failed to delete product');
+    }
+  };
+
+  const resetForm = () => {
+    setFormData({
+      name: '',
+      brand: '',
+      categoryId: '',
+      productType: 'granular',
+      activeIngredients: '',
+      description: '',
+      rates: [{ applicationType: 'granular', rateAmount: '', rateUnit: 'lbs/1000 sq ft', notes: '' }]
+    });
+    setSelectedProduct(null);
+  };
+
+  const openEditModal = (product) => {
+    setSelectedProduct(product);
+    setFormData({
+      name: product.name || product.customName || '',
+      brand: product.brand || product.customBrand || '',
+      categoryId: product.categoryId || '',
+      productType: product.productType || product.customProductType || 'granular',
+      activeIngredients: product.activeIngredients || product.customActiveIngredients || '',
+      description: product.description || product.customDescription || '',
+      rates: product.rates && product.rates.length > 0 ? product.rates : [{ 
+        applicationType: product.productType || 'granular', 
+        rateAmount: product.customRateAmount || '', 
+        rateUnit: product.customRateUnit || 'lbs/1000 sq ft', 
+        notes: '' 
+      }]
+    });
+    setShowEditModal(true);
+  };
+
+  const addRate = () => {
+    setFormData(prev => ({
+      ...prev,
+      rates: [...prev.rates, { applicationType: prev.productType, rateAmount: '', rateUnit: prev.productType === 'granular' ? 'lbs/1000 sq ft' : 'oz/1000 sq ft', notes: '' }]
+    }));
+  };
+
+  const removeRate = (index) => {
+    setFormData(prev => ({
+      ...prev,
+      rates: prev.rates.filter((_, i) => i !== index)
+    }));
+  };
+
+  const updateRate = (index, field, value) => {
+    setFormData(prev => ({
+      ...prev,
+      rates: prev.rates.map((rate, i) => 
+        i === index ? { ...rate, [field]: value } : rate
+      )
+    }));
+  };
+
+  // Filter products based on shared/custom filter
+  const allProducts = [
+    ...(productTypeFilter === 'custom' ? [] : products.map(p => ({ ...p, isShared: true }))),
+    ...(productTypeFilter === 'shared' ? [] : userProducts.map(p => ({ ...p, isShared: false })))
+  ];
+
+  const ProductForm = ({ onSubmit, submitText }) => (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Product Name *
+          </label>
+          <input
+            type="text"
+            required
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Brand
+          </label>
+          <input
+            type="text"
+            value={formData.brand}
+            onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Category
+          </label>
+          <select
+            value={formData.categoryId}
+            onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">Select Category</option>
+            {categories.map(cat => (
+              <option key={cat.id} value={cat.id}>{cat.name}</option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Product Type *
+          </label>
+          <select
+            required
+            value={formData.productType}
+            onChange={(e) => setFormData({ ...formData, productType: e.target.value })}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="granular">Granular</option>
+            <option value="liquid">Liquid</option>
+            <option value="seed">Seed</option>
+            <option value="powder">Powder</option>
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Active Ingredients
+        </label>
+        <textarea
+          value={formData.activeIngredients}
+          onChange={(e) => setFormData({ ...formData, activeIngredients: e.target.value })}
+          rows="3"
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Description
+        </label>
+        <textarea
+          value={formData.description}
+          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+          rows="3"
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      {/* Application Rates */}
+      <div>
+        <div className="flex justify-between items-center mb-2">
+          <label className="block text-sm font-medium text-gray-700">
+            Application Rates
+          </label>
+          <button
+            type="button"
+            onClick={addRate}
+            className="text-sm text-blue-600 hover:text-blue-800"
+          >
+            + Add Rate
+          </button>
+        </div>
+        {formData.rates.map((rate, index) => (
+          <div key={index} className="border border-gray-200 rounded-md p-3 mb-2">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
+              <input
+                type="number"
+                placeholder="Rate Amount"
+                value={rate.rateAmount}
+                onChange={(e) => updateRate(index, 'rateAmount', e.target.value)}
+                className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+              />
+              <select
+                value={rate.rateUnit}
+                onChange={(e) => updateRate(index, 'rateUnit', e.target.value)}
+                className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+              >
+                <option value="lbs/1000 sq ft">lbs/1000 sq ft</option>
+                <option value="oz/1000 sq ft">oz/1000 sq ft</option>
+                <option value="lbs/acre">lbs/acre</option>
+                <option value="oz/acre">oz/acre</option>
+              </select>
+              {formData.rates.length > 1 && (
+                <button
+                  type="button"
+                  onClick={() => removeRate(index)}
+                  className="text-red-600 hover:text-red-800 text-sm"
+                >
+                  Remove
+                </button>
+              )}
+            </div>
+            <input
+              type="text"
+              placeholder="Notes (optional)"
+              value={rate.notes}
+              onChange={(e) => updateRate(index, 'notes', e.target.value)}
+              className="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
+            />
+          </div>
+        ))}
+      </div>
+
+      <div className="flex justify-end space-x-3 pt-4">
+        <button
+          type="button"
+          onClick={() => {
+            setShowCreateModal(false);
+            setShowEditModal(false);
+            resetForm();
+          }}
+          className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
+        >
+          {submitText}
+        </button>
+      </div>
+    </form>
+  );
+
   return (
     <div className="p-6">
-      <h1 className="text-2xl font-bold text-gray-900 mb-6">Manage Products</h1>
-      <div className="card">
-        <p className="text-gray-600">Product management coming soon...</p>
+      <div className="mb-6">
+        <div className="flex justify-between items-center mb-4">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">Manage Products</h1>
+            <p className="text-gray-600">Add, edit, and manage all lawn care products</p>
+          </div>
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="btn-primary flex items-center"
+          >
+            <PlusIcon className="h-5 w-5 mr-2" />
+            Add Product
+          </button>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+          <div className="relative">
+            <MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search products..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
+            />
+          </div>
+          <select
+            value={categoryFilter}
+            onChange={(e) => setCategoryFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">All Categories</option>
+            {categories.map(cat => (
+              <option key={cat.id} value={cat.id}>{cat.name}</option>
+            ))}
+          </select>
+          <select
+            value={typeFilter}
+            onChange={(e) => setTypeFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">All Types</option>
+            <option value="granular">Granular</option>
+            <option value="liquid">Liquid</option>
+            <option value="seed">Seed</option>
+            <option value="powder">Powder</option>
+          </select>
+          <select
+            value={productTypeFilter}
+            onChange={(e) => setProductTypeFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">Shared & Custom</option>
+            <option value="shared">Shared Only</option>
+            <option value="custom">Custom Only</option>
+          </select>
+        </div>
       </div>
+
+      {loading ? (
+        <div className="flex justify-center items-center h-64">
+          <LoadingSpinner size="lg" />
+        </div>
+      ) : (
+        <div className="card overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Product
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Type
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Category
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Source
+                  </th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {allProducts.map((product) => (
+                  <tr key={`${product.isShared ? 'shared' : 'custom'}-${product.id}`} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="flex items-center">
+                        <div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
+                          <BeakerIcon className="h-6 w-6 text-green-600" />
+                        </div>
+                        <div className="ml-4">
+                          <div className="text-sm font-medium text-gray-900">
+                            {product.name || product.customName}
+                          </div>
+                          <div className="text-sm text-gray-500">
+                            {product.brand || product.customBrand}
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`px-2 py-1 text-xs font-medium rounded-full ${
+                        (product.productType || product.customProductType) === 'granular' 
+                          ? 'bg-blue-100 text-blue-800'
+                          : (product.productType || product.customProductType) === 'liquid'
+                          ? 'bg-green-100 text-green-800'
+                          : 'bg-gray-100 text-gray-800'
+                      }`}>
+                        {product.productType || product.customProductType}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                      {product.categoryName || 'Uncategorized'}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
+                      <span className={`px-2 py-1 text-xs font-medium rounded-full ${
+                        product.isShared 
+                          ? 'bg-purple-100 text-purple-800' 
+                          : 'bg-orange-100 text-orange-800'
+                      }`}>
+                        {product.isShared ? 'Shared' : 'Custom'}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex items-center space-x-2">
+                        <button
+                          onClick={() => openEditModal(product)}
+                          className="text-indigo-600 hover:text-indigo-900"
+                          title="Edit Product"
+                        >
+                          <PencilIcon className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={() => {
+                            setSelectedProduct(product);
+                            setShowDeleteModal(true);
+                          }}
+                          className="text-red-600 hover:text-red-900"
+                          title="Delete Product"
+                        >
+                          <TrashIcon className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* Create Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
+            <div className="mt-3">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">
+                Create New Product
+              </h3>
+              <ProductForm onSubmit={handleCreate} submitText="Create Product" />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Modal */}
+      {showEditModal && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
+            <div className="mt-3">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">
+                Edit Product
+              </h3>
+              <ProductForm onSubmit={handleUpdate} submitText="Update Product" />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Modal */}
+      {showDeleteModal && selectedProduct && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div className="mt-3">
+              <div className="flex items-center mb-4">
+                <ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-2" />
+                <h3 className="text-lg font-medium text-gray-900">
+                  Delete Product
+                </h3>
+              </div>
+              <p className="text-sm text-gray-600 mb-6">
+                Are you sure you want to delete "{selectedProduct.name || selectedProduct.customName}"? 
+                This action cannot be undone.
+              </p>
+              <div className="flex justify-end space-x-3">
+                <button
+                  onClick={() => setShowDeleteModal(false)}
+                  className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDelete}
+                  className="px-4 py-2 text-sm text-white bg-red-600 rounded hover:bg-red-700"
+                >
+                  Delete Product
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/pages/Admin/AdminUsers.js b/frontend/src/pages/Admin/AdminUsers.js
index 33cc5d2..85d67fb 100644
--- a/frontend/src/pages/Admin/AdminUsers.js
+++ b/frontend/src/pages/Admin/AdminUsers.js
@@ -1,12 +1,358 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { 
+  UsersIcon, 
+  MagnifyingGlassIcon, 
+  UserPlusIcon,
+  TrashIcon,
+  CogIcon,
+  EnvelopeIcon,
+  KeyIcon,
+  ExclamationTriangleIcon
+} from '@heroicons/react/24/outline';
+import { adminAPI } from '../../services/api';
+import LoadingSpinner from '../../components/UI/LoadingSpinner';
+import toast from 'react-hot-toast';
 
 const AdminUsers = () => {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [roleFilter, setRoleFilter] = useState('all');
+  const [pagination, setPagination] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [showRoleModal, setShowRoleModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showInviteModal, setShowInviteModal] = useState(false);
+
+  const fetchUsers = async (page = 1) => {
+    try {
+      setLoading(true);
+      const params = {
+        page,
+        limit: 20,
+        ...(searchTerm && { search: searchTerm }),
+        ...(roleFilter !== 'all' && { role: roleFilter })
+      };
+      
+      const response = await adminAPI.getUsers(params);
+      setUsers(response.data.data.users);
+      setPagination(response.data.data.pagination);
+      setCurrentPage(page);
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+      toast.error('Failed to load users');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers(1);
+  }, [searchTerm, roleFilter]);
+
+  const handleRoleChange = async (newRole) => {
+    try {
+      await adminAPI.updateUserRole(selectedUser.id, newRole);
+      toast.success(`User role updated to ${newRole}`);
+      setShowRoleModal(false);
+      setSelectedUser(null);
+      fetchUsers(currentPage);
+    } catch (error) {
+      console.error('Failed to update role:', error);
+      toast.error('Failed to update user role');
+    }
+  };
+
+  const handleDeleteUser = async () => {
+    try {
+      await adminAPI.deleteUser(selectedUser.id);
+      toast.success('User deleted successfully');
+      setShowDeleteModal(false);
+      setSelectedUser(null);
+      fetchUsers(currentPage);
+    } catch (error) {
+      console.error('Failed to delete user:', error);
+      toast.error('Failed to delete user');
+    }
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  };
+
   return (
     <div className="p-6">
-      <h1 className="text-2xl font-bold text-gray-900 mb-6">Manage Users</h1>
-      <div className="card">
-        <p className="text-gray-600">User management coming soon...</p>
+      <div className="mb-6">
+        <div className="flex justify-between items-center mb-4">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">Manage Users</h1>
+            <p className="text-gray-600">Add, edit, and manage user accounts</p>
+          </div>
+          <button
+            onClick={() => setShowInviteModal(true)}
+            className="btn-primary flex items-center"
+          >
+            <UserPlusIcon className="h-5 w-5 mr-2" />
+            Invite User
+          </button>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="flex flex-col sm:flex-row gap-4 mb-6">
+          <div className="flex-1 relative">
+            <MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search users..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
+            />
+          </div>
+          <select
+            value={roleFilter}
+            onChange={(e) => setRoleFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="all">All Roles</option>
+            <option value="admin">Admins</option>
+            <option value="user">Users</option>
+          </select>
+        </div>
       </div>
+
+      {loading ? (
+        <div className="flex justify-center items-center h-64">
+          <LoadingSpinner size="lg" />
+        </div>
+      ) : (
+        <>
+          {/* Users Table */}
+          <div className="card overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      User
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Role
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Properties
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Applications
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Joined
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {users.map((user) => (
+                    <tr key={user.id} className="hover:bg-gray-50">
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="flex items-center">
+                          <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
+                            <UsersIcon className="h-6 w-6 text-blue-600" />
+                          </div>
+                          <div className="ml-4">
+                            <div className="text-sm font-medium text-gray-900">
+                              {user.firstName} {user.lastName}
+                            </div>
+                            <div className="text-sm text-gray-500">{user.email}</div>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <span className={`px-2 py-1 text-xs font-medium rounded-full ${
+                          user.role === 'admin' 
+                            ? 'bg-purple-100 text-purple-800' 
+                            : 'bg-gray-100 text-gray-800'
+                        }`}>
+                          {user.role}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                        {user.propertyCount}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap">
+                        <div className="text-sm text-gray-900">{user.applicationCount}</div>
+                        {user.lastApplication && (
+                          <div className="text-xs text-gray-500">
+                            Last: {formatDate(user.lastApplication)}
+                          </div>
+                        )}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {formatDate(user.createdAt)}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                        <div className="flex items-center space-x-2">
+                          <button
+                            onClick={() => {
+                              setSelectedUser(user);
+                              setShowRoleModal(true);
+                            }}
+                            className="text-indigo-600 hover:text-indigo-900"
+                            title="Change Role"
+                          >
+                            <CogIcon className="h-4 w-4" />
+                          </button>
+                          <button
+                            onClick={() => {
+                              setSelectedUser(user);
+                              setShowDeleteModal(true);
+                            }}
+                            className="text-red-600 hover:text-red-900"
+                            title="Delete User"
+                          >
+                            <TrashIcon className="h-4 w-4" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* Pagination */}
+          {pagination && pagination.totalPages > 1 && (
+            <div className="flex items-center justify-between mt-6">
+              <div className="text-sm text-gray-700">
+                Showing page {pagination.currentPage} of {pagination.totalPages} 
+                ({pagination.totalUsers} total users)
+              </div>
+              <div className="flex items-center space-x-2">
+                <button
+                  onClick={() => fetchUsers(currentPage - 1)}
+                  disabled={!pagination.hasPrev}
+                  className="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  Previous
+                </button>
+                <button
+                  onClick={() => fetchUsers(currentPage + 1)}
+                  disabled={!pagination.hasNext}
+                  className="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Role Change Modal */}
+      {showRoleModal && selectedUser && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div className="mt-3">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">
+                Change Role for {selectedUser.firstName} {selectedUser.lastName}
+              </h3>
+              <p className="text-sm text-gray-600 mb-6">
+                Current role: <span className="font-medium">{selectedUser.role}</span>
+              </p>
+              <div className="flex justify-end space-x-3">
+                <button
+                  onClick={() => setShowRoleModal(false)}
+                  className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
+                >
+                  Cancel
+                </button>
+                {selectedUser.role !== 'user' && (
+                  <button
+                    onClick={() => handleRoleChange('user')}
+                    className="px-4 py-2 text-sm text-white bg-blue-600 rounded hover:bg-blue-700"
+                  >
+                    Make User
+                  </button>
+                )}
+                {selectedUser.role !== 'admin' && (
+                  <button
+                    onClick={() => handleRoleChange('admin')}
+                    className="px-4 py-2 text-sm text-white bg-purple-600 rounded hover:bg-purple-700"
+                  >
+                    Make Admin
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Modal */}
+      {showDeleteModal && selectedUser && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div className="mt-3">
+              <div className="flex items-center mb-4">
+                <ExclamationTriangleIcon className="h-6 w-6 text-red-600 mr-2" />
+                <h3 className="text-lg font-medium text-gray-900">
+                  Delete User
+                </h3>
+              </div>
+              <p className="text-sm text-gray-600 mb-6">
+                Are you sure you want to delete {selectedUser.firstName} {selectedUser.lastName}? 
+                This action cannot be undone and will permanently remove all their data.
+              </p>
+              <div className="flex justify-end space-x-3">
+                <button
+                  onClick={() => setShowDeleteModal(false)}
+                  className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDeleteUser}
+                  className="px-4 py-2 text-sm text-white bg-red-600 rounded hover:bg-red-700"
+                >
+                  Delete User
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Invite User Modal */}
+      {showInviteModal && (
+        <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+          <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div className="mt-3">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">
+                Invite User
+              </h3>
+              <p className="text-sm text-gray-600 mb-6">
+                Feature coming soon: Send email invitations to new users.
+              </p>
+              <div className="flex justify-end">
+                <button
+                  onClick={() => setShowInviteModal(false)}
+                  className="px-4 py-2 text-sm text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };