feat: implement comprehensive admin CRUD interfaces for swap stations, users, merchants, and roles with sidebar navigation updates

src/app/admin/roles/page.tsx

@@ -0,0 +1,431 @@
+'use client';
+
+import { useState } from 'react';
+import { Shield, Plus, Search, X, Edit, Trash2, Copy, CheckCircle, XCircle, Eye } from 'lucide-react';
+
+interface Permission {
+  module: string;
+  view: boolean;
+  create: boolean;
+  edit: boolean;
+  delete: boolean;
+}
+
+interface Role {
+  id: string;
+  name: string;
+  description: string;
+  isDefault: boolean;
+  permissions: Permission[];
+}
+
+const defaultPermissions: Permission[] = [
+  { module: 'Dashboard', view: true, create: false, edit: false, delete: false },
+  { module: 'KYC', view: false, create: false, edit: false, delete: false },
+  { module: 'Rentals', view: false, create: false, edit: false, delete: false },
+  { module: 'Bikers', view: false, create: false, edit: false, delete: false },
+  { module: 'Investors', view: false, create: false, edit: false, delete: false },
+  { module: 'Fleet', view: false, create: false, edit: false, delete: false },
+  { module: 'Merchants', view: false, create: false, edit: false, delete: false },
+  { module: 'Swap Stations', view: false, create: false, edit: false, delete: false },
+  { module: 'Hubs', view: false, create: false, edit: false, delete: false },
+  { module: 'Maintenance', view: false, create: false, edit: false, delete: false },
+  { module: 'Accounting', view: false, create: false, edit: false, delete: false },
+  { module: 'Reports', view: false, create: false, edit: false, delete: false },
+  { module: 'Users', view: false, create: false, edit: false, delete: false },
+];
+
+const mockRoles: Role[] = [
+  {
+    id: 'ROLE-001',
+    name: 'Admin',
+    description: 'Full system access with all permissions',
+    isDefault: false,
+    permissions: defaultPermissions.map(p => ({ ...p, view: true, create: true, edit: true, delete: true }))
+  },
+  {
+    id: 'ROLE-002',
+    name: 'Manager',
+    description: 'Management access with limited delete permissions',
+    isDefault: false,
+    permissions: defaultPermissions.map(p => ({ 
+      module: p.module, 
+      view: true, 
+      create: ['Dashboard', 'Reports'].includes(p.module) ? false : true, 
+      edit: ['Dashboard', 'Users'].includes(p.module) ? false : true, 
+      delete: false 
+    }))
+  },
+  {
+    id: 'ROLE-003',
+    name: 'Biker',
+    description: 'Limited access for bike riders',
+    isDefault: false,
+    permissions: defaultPermissions.map(p => ({ 
+      module: p.module, 
+      view: ['Dashboard', 'Fleet', 'Rentals'].includes(p.module), 
+      create: p.module === 'Rentals', 
+      edit: false, 
+      delete: false 
+    }))
+  },
+  {
+    id: 'ROLE-004',
+    name: 'Investor',
+    description: 'Access for investors to view portfolio',
+    isDefault: false,
+    permissions: defaultPermissions.map(p => ({ 
+      module: p.module, 
+      view: ['Dashboard', 'Portfolio', 'Withdraw'].includes(p.module), 
+      create: p.module === 'Withdraw', 
+      edit: false, 
+      delete: false 
+    }))
+  },
+  {
+    id: 'ROLE-005',
+    name: 'Shop',
+    description: 'Access for shop owners',
+    isDefault: false,
+    permissions: defaultPermissions.map(p => ({ 
+      module: p.module, 
+      view: ['Dashboard', 'Fleet', 'Deliveries'].includes(p.module), 
+      create: p.module === 'Deliveries', 
+      edit: p.module === 'Deliveries', 
+      delete: false 
+    }))
+  },
+  {
+    id: 'ROLE-006',
+    name: 'Merchant',
+    description: 'Access for merchants',
+    isDefault: true,
+    permissions: defaultPermissions.map(p => ({ 
+      module: p.module, 
+      view: ['Dashboard', 'Deliveries'].includes(p.module), 
+      create: false, 
+      edit: ['Deliveries'].includes(p.module), 
+      delete: false 
+    }))
+  },
+];
+
+const allModules = ['Dashboard', 'KYC', 'Rentals', 'Bikers', 'Investors', 'Fleet', 'Merchants', 'Swap Stations', 'Hubs', 'Maintenance', 'Accounting', 'Reports', 'Users', 'Portfolio', 'Withdraw', 'Deliveries'];
+
+export default function RolesPage() {
+  const [roles, setRoles] = useState<Role[]>(mockRoles);
+  const [search, setSearch] = useState('');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingRole, setEditingRole] = useState<Role | null>(null);
+  const [selectedRole, setSelectedRole] = useState<Role | null>(null);
+  
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+  });
+
+  const filteredRoles = roles.filter(r => 
+    r.name.toLowerCase().includes(search.toLowerCase()) ||
+    r.description.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const handleSave = () => {
+    if (!formData.name) return;
+    
+    if (editingRole) {
+      setRoles(roles.map(r => r.id === editingRole.id ? { ...r, ...formData, isDefault: false } : r));
+    } else {
+      const newRole: Role = {
+        id: `ROLE-${String(roles.length + 1).padStart(3, '0')}`,
+        ...formData,
+        isDefault: false,
+        permissions: defaultPermissions.map(p => ({ ...p, view: false, create: false, edit: false, delete: false }))
+      };
+      setRoles([...roles, newRole]);
+    }
+    
+    setShowCreateModal(false);
+    setEditingRole(null);
+    setFormData({ name: '', description: '' });
+  };
+
+  const handleDelete = (id: string) => {
+    if (confirm('Are you sure you want to delete this role?')) {
+      setRoles(roles.filter(r => r.id !== id));
+      setSelectedRole(null);
+    }
+  };
+
+  const handleDuplicate = (role: Role) => {
+    const newRole: Role = {
+      id: `ROLE-${String(roles.length + 1).padStart(3, '0')}`,
+      name: `${role.name} (Copy)`,
+      description: role.description,
+      isDefault: false,
+      permissions: role.permissions.map(p => ({ ...p }))
+    };
+    setRoles([...roles, newRole]);
+  };
+
+  const openEdit = (role: Role) => {
+    setEditingRole(role);
+    setFormData({
+      name: role.name,
+      description: role.description
+    });
+    setShowCreateModal(true);
+  };
+
+  const togglePermission = (moduleIndex: number, action: 'view' | 'create' | 'edit' | 'delete') => {
+    if (!selectedRole) return;
+    const updated = [...selectedRole.permissions];
+    updated[moduleIndex][action] = !updated[moduleIndex][action];
+    setSelectedRole({ ...selectedRole, permissions: updated });
+    setRoles(roles.map(r => r.id === selectedRole.id ? { ...selectedRole, permissions: updated } : r));
+  };
+
+  const getPermissionCount = (role: Role, action: keyof Permission) => {
+    return role.permissions.filter(p => p[action] === true).length;
+  };
+
+  return (
+    <div className="p-4 lg:p-6">
+      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
+        <div>
+          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Roles & Permissions</h1>
+          <p className="text-sm text-slate-500 mt-1">Manage roles and access permissions</p>
+        </div>
+        <button 
+          onClick={() => {
+            setEditingRole(null);
+            setFormData({ name: '', description: '' });
+            setShowCreateModal(true);
+          }}
+          className="py-2.5 px-4 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark transition-colors flex items-center gap-2"
+        >
+          <Plus className="w-4 h-4" /> Create Role
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <p className="text-2xl font-extrabold text-slate-800">{roles.length}</p>
+          <p className="text-sm text-slate-500">Total Roles</p>
+        </div>
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <p className="text-2xl font-extrabold text-green-600">{roles.filter(r => r.isDefault).length}</p>
+          <p className="text-sm text-slate-500">Default Roles</p>
+        </div>
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <p className="text-2xl font-extrabold text-blue-600">{roles.reduce((a, r) => a + getPermissionCount(r, 'create'), 0)}</p>
+          <p className="text-sm text-slate-500">Total Create Perms</p>
+        </div>
+        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
+          <p className="text-2xl font-extrabold text-purple-600">{roles.reduce((a, r) => a + getPermissionCount(r, 'view'), 0)}</p>
+          <p className="text-sm text-slate-500">Total View Perms</p>
+        </div>
+      </div>
+
+      <div className="grid lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-1 bg-white rounded-xl shadow-sm border border-slate-100">
+          <div className="p-4 border-b border-slate-100">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+              <input 
+                type="text" 
+                placeholder="Search roles..." 
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
+              />
+            </div>
+          </div>
+          <div className="divide-y divide-slate-50 max-h-[600px] overflow-y-auto">
+            {filteredRoles.map(role => (
+              <div 
+                key={role.id} 
+                className={`p-4 hover:bg-slate-50 cursor-pointer transition-colors ${selectedRole?.id === role.id ? 'bg-accent-light' : ''}`}
+                onClick={() => setSelectedRole(role)}
+              >
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-slate-700">{role.name}</p>
+                    <p className="text-xs text-slate-400 truncate">{role.description}</p>
+                  </div>
+                  {role.isDefault && (
+                    <span className="text-xs px-2 py-0.5 bg-accent-light text-accent rounded-full">Default</span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 mt-2 text-xs text-slate-400">
+                  <span>{getPermissionCount(role, 'view')} view</span>
+                  <span>•</span>
+                  <span>{getPermissionCount(role, 'create')} create</span>
+                  <span>•</span>
+                  <span>{getPermissionCount(role, 'edit')} edit</span>
+                  <span>•</span>
+                  <span>{getPermissionCount(role, 'delete')} delete</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-100">
+          {selectedRole ? (
+            <>
+              <div className="p-4 border-b border-slate-100 flex items-center justify-between">
+                <div>
+                  <h3 className="text-lg font-semibold text-slate-800">{selectedRole.name}</h3>
+                  <p className="text-sm text-slate-500">{selectedRole.description}</p>
+                </div>
+                <div className="flex gap-2">
+                  <button onClick={() => handleDuplicate(selectedRole)} className="p-2 hover:bg-slate-100 rounded-lg text-slate-600">
+                    <Copy className="w-4 h-4" />
+                  </button>
+                  <button onClick={() => openEdit(selectedRole)} className="p-2 hover:bg-slate-100 rounded-lg text-slate-600">
+                    <Edit className="w-4 h-4" />
+                  </button>
+                  {!selectedRole.isDefault && (
+                    <button onClick={() => handleDelete(selectedRole.id)} className="p-2 hover:bg-red-50 rounded-lg text-red-500">
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  )}
+                </div>
+              </div>
+              <div className="p-4">
+                <div className="flex items-center justify-between mb-4">
+                  <h4 className="font-medium text-slate-800">Permissions</h4>
+                  <div className="flex gap-4 text-xs">
+                    <span className="text-slate-500">Check all <span className="font-medium text-green-600">view</span></span>
+                    <span className="text-slate-500">Check all <span className="font-medium text-blue-600">create</span></span>
+                    <span className="text-slate-500">Check all <span className="font-medium text-amber-600">edit</span></span>
+                    <span className="text-slate-500">Check all <span className="font-medium text-red-600">delete</span></span>
+                  </div>
+                </div>
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead className="bg-slate-50">
+                      <tr>
+                        <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Module</th>
+                        <th className="px-4 py-3 text-center text-xs font-semibold text-slate-500 uppercase">View</th>
+                        <th className="px-4 py-3 text-center text-xs font-semibold text-slate-500 uppercase">Create</th>
+                        <th className="px-4 py-3 text-center text-xs font-semibold text-slate-500 uppercase">Edit</th>
+                        <th className="px-4 py-3 text-center text-xs font-semibold text-slate-500 uppercase">Delete</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-50">
+                      {selectedRole.permissions.map((perm, i) => (
+                        <tr key={i} className="hover:bg-slate-50">
+                          <td className="px-4 py-3 text-sm font-medium text-slate-700">{perm.module}</td>
+                          <td className="px-4 py-3 text-center">
+                            <button
+                              onClick={() => togglePermission(i, 'view')}
+                              className={`w-5 h-5 rounded flex items-center justify-center ${
+                                perm.view ? 'bg-green-100 text-green-600' : 'bg-slate-100 text-slate-300'
+                              }`}
+                            >
+                              {perm.view && <CheckCircle className="w-4 h-4" />}
+                              {!perm.view && <XCircle className="w-4 h-4" />}
+                            </button>
+                          </td>
+                          <td className="px-4 py-3 text-center">
+                            <button
+                              onClick={() => togglePermission(i, 'create')}
+                              className={`w-5 h-5 rounded flex items-center justify-center ${
+                                perm.create ? 'bg-blue-100 text-blue-600' : 'bg-slate-100 text-slate-300'
+                              }`}
+                            >
+                              {perm.create && <CheckCircle className="w-4 h-4" />}
+                              {!perm.create && <XCircle className="w-4 h-4" />}
+                            </button>
+                          </td>
+                          <td className="px-4 py-3 text-center">
+                            <button
+                              onClick={() => togglePermission(i, 'edit')}
+                              className={`w-5 h-5 rounded flex items-center justify-center ${
+                                perm.edit ? 'bg-amber-100 text-amber-600' : 'bg-slate-100 text-slate-300'
+                              }`}
+                            >
+                              {perm.edit && <CheckCircle className="w-4 h-4" />}
+                              {!perm.edit && <XCircle className="w-4 h-4" />}
+                            </button>
+                          </td>
+                          <td className="px-4 py-3 text-center">
+                            <button
+                              onClick={() => togglePermission(i, 'delete')}
+                              className={`w-5 h-5 rounded flex items-center justify-center ${
+                                perm.delete ? 'bg-red-100 text-red-600' : 'bg-slate-100 text-slate-300'
+                              }`}
+                            >
+                              {perm.delete && <CheckCircle className="w-4 h-4" />}
+                              {!perm.delete && <XCircle className="w-4 h-4" />}
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="p-12 text-center text-slate-500">
+              <Shield className="w-12 h-12 mx-auto mb-4 text-slate-300" />
+              <p className="text-sm">Select a role to view and edit permissions</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800">{editingRole ? 'Edit Role' : 'Create New Role'}</h3>
+              <button onClick={() => setShowCreateModal(false)} className="text-slate-400 hover:text-slate-600">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="p-4 space-y-4">
+              <div>
+                <label className="text-sm text-slate-600">Role Name *</label>
+                <input
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                  placeholder="e.g., Super Manager"
+                />
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Description</label>
+                <textarea
+                  value={formData.description}
+                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                  rows={2}
+                  placeholder="Describe what this role can do"
+                />
+              </div>
+            </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button 
+                onClick={() => setShowCreateModal(false)} 
+                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={handleSave}
+                disabled={!formData.name}
+                className="px-4 py-2 bg-accent text-white rounded-lg text-sm disabled:opacity-50"
+              >
+                {editingRole ? 'Update' : 'Create'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}