How to create backend CRM using React JS

Create a Vite React Project

• Creates a new Vite project named my-app using the React template.
  
  
• Vite is a fast build tool optimized for modern front-end development.

  npm create vite@latest my-app -- --template react
  cd my-app
  npm install axios react-helmet sonner tailwindcss
  

React Project Structure

• Folder structure for your React project
  
  

  src/
  ├── api/
  │   └── axios.jsx
  ├── assets/
  ├── auth/
  │   ├── AuthContext.jsx
  │   └── ProtectedRoute.jsx
  ├── components/
  │   ├── Footer.jsx
  │   ├── Navbar.jsx
  │   └── Sidebar.jsx
  ├── pages/
  │   ├── Roles/
  │   │   ├── AddRole.jsx
  │   │   ├── EditRole.jsx
  │   │   └── RoleList.jsx
  │   ├── Tickets/
  │   │   └── TicketList.jsx
  │   ├── Users/
  │   │   ├── AddUser.jsx
  │   │   ├── EditUser.jsx
  │   │   └── UserList.jsx
  │   └── Dashboard.jsx
  │   └── Login.jsx
  │   └── Unauthorized.jsx
  ├── App.css
  ├── App.jsx
  ├── index.css
  └── main.jsx
  

Root-Level Files

• App.jsx – Main component that contains the routes and wraps the whole application.
  
  
• App.css – CSS file for global styles related to the App component.
  
  
• index.css – General global styles used across the app.
  
  
• main.jsx – Entry point of the React app where the root component is rendered (typically wraps App.jsx with providers like BrowserRouter).
  
  Example:

  import React from 'react';
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  
  import { AuthProvider } from './auth/AuthContext';
  import ProtectedRoute from './auth/ProtectedRoute';
  
  import Navbar from './components/Navbar';
  import Sidebar from './components/Sidebar';
  
  import Login from './pages/Login';
  import Dashboard from './pages/Dashboard';
  
  import UserList from './pages/Users/UserList';
  import AddUser from './pages/Users/AddUser';
  import EditUser from './pages/Users/EditUser';
  
  import RoleList from './pages/Roles/RoleList';
  import AddRole from './pages/Roles/AddRole';
  import EditRole from './pages/Roles/EditRole';
  import Footer from './components/Footer'; 
  import TicketList from './pages/Tickets/TicketList'; 
  import { Toaster, toast } from 'sonner';
  import Unauthorized from './pages/Unauthorized';
  import Header from './components/Header';
  
  const App = () => {
    return (
      <Router>
        <AuthProvider> 
          <Toaster richColors position="top-right" /> 
          <div className="flex min-h-screen bg-gray-100"> 
            <ProtectedRoute><Sidebar /></ProtectedRoute> 
            <main className="flex-1 flex-col h-screen overflow-y-auto ">
              <ProtectedRoute><Navbar /></ProtectedRoute>
              <Routes>
                <Route path="/login" element={<Login />} />
                <Route path="/unauthorized" element={<Unauthorized />} />
  
                {/* Dashboard */}
                <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} /> 
  
                {/* User Routes */}
                <Route path="/users" element={<ProtectedRoute permissions={['User_View','User_Add','User_Edit']}><UserList /></ProtectedRoute>} />
                <Route path="/users/add" element={<ProtectedRoute permissions={['User_Add']}><AddUser /></ProtectedRoute>} />
                <Route path="/users/edit/:id" element={<ProtectedRoute permissions={['User_Edit']}><EditUser /></ProtectedRoute>} />
  
                {/* Role Routes */}
                <Route path="/roles" element={<ProtectedRoute permissions={['Role_View','Role_Add','Role_Edit']}><RoleList /></ProtectedRoute>} />
                <Route path="/roles/add" element={<ProtectedRoute permissions={['Role_Add']}><AddRole /></ProtectedRoute>} />
                <Route path="/roles/edit/:id" element={<ProtectedRoute permissions={['Role_Edit']}><EditRole /></ProtectedRoute>} />
  
                {/* Ticket Routes */}
                <Route path="/tickets" element={<ProtectedRoute permissions={['Ticket_View']}><TicketList /></ProtectedRoute>} />
              </Routes> 
              <ProtectedRoute><Footer/></ProtectedRoute>
            </main>
          </div>
        </AuthProvider>
      </Router>
    );
  };
  
  export default App;
  
  

API Service - Interceptor

• Axios.jsx – Custom Axios instance configuration (base URL, headers, interceptors, etc.)
  
  Example:

  import axios from 'axios';
  
  //  localhost seperate
  //  const api = axios.create({
  //    baseURL: 'http://localhost:8000/api',
  //    withCredentials: true,
  //  });
  
  // Production
  // const api = axios.create({
  //   baseURL: 'https://test.couriercollects.com/api',
  //   withCredentials: true,
  // });
  
  // Inside public_html in Laravel 
  const api = axios.create({
    baseURL: '/api',
    withCredentials: true,
  });
  
  // Request interceptor for setting auth token
  api.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  }, error => {
    return Promise.reject(error);
  });
  
  // Global response interceptor for handling errors
  api.interceptors.response.use(
    response => response,
    error => {
      if (error.response) {
        const { status, data } = error.response;
  
        switch (status) {
          case 400:
            console.error('Bad Request:', data.message || data);
            break;
          case 401:
            console.warn('Unauthorized: Logging out...');
            localStorage.removeItem('token');
            window.location.href = '/login'; // Redirect to login
            break;
          case 403:
            console.warn('Forbidden:', data.message || data);
            break;
          case 404:
            console.warn('Not Found:', data.message || data);
            break;
          case 500:
            console.error('Server Error:', data.message || 'Something went wrong');
            break;
          default:
            console.error('Error:', data.message || 'Unexpected error');
        }
      } else if (error.request) {
        // No response from server
        console.error('No response from server. Please check your network.');
      } else {
        // Axios config error
        console.error('Request error:', error.message);
      } 
      return Promise.reject(error); // Optional: forward the error to the component
    }
  );
  
  
  export default api;
  
  

Authorization - auth

• AuthContext.jsx – Provides authentication context (user state, login/logout logic).
  
  
• ProtectedRoute.jsx – Route wrapper to restrict access based on login or roles.
  
  
  Example:

  AuthContext.jsx
  import { createContext, useContext, useEffect, useState } from 'react';
  import { useNavigate } from 'react-router-dom';
  import { toast } from 'sonner';
  
  const AuthContext = createContext();
  export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')) || null);
    const [token, setToken] = useState(localStorage.getItem('token') || '');
    const navigate = useNavigate();
  
    const login = (userData, token) => {
      setUser(userData);
      setToken(token);
      localStorage.setItem('user', JSON.stringify(userData));
      localStorage.setItem('token', token);
    };
  
    const logout = () => {
      setUser(null);
      setToken('');
      localStorage.clear();
      navigate('/login');
      toast.error('You have been logged out.');
    };
  
    useEffect(() => {
      if (!user) return; 
      let warningTimeout;
      let logoutTimeout; 
      const resetTimers = () => {
        clearTimeout(warningTimeout);
        clearTimeout(logoutTimeout); 
        warningTimeout = setTimeout(() => {
          toast.warning('You will be logged out in 3 minute due to inactivity.');
        }, 12 * 60 * 1000); 
        logoutTimeout = setTimeout(() => {
          logout();
        }, 15 * 60 * 1000);
      }; 
      const events = ['mousemove', 'keydown', 'click', 'scroll'];
      events.forEach(event => window.addEventListener(event, resetTimers)); 
      resetTimers(); // Start timers initially 
      return () => {
        clearTimeout(warningTimeout);
        clearTimeout(logoutTimeout);
        events.forEach(event => window.removeEventListener(event, resetTimers));
      };
    }, [user]); // depends only on user state
  
    return (
      <AuthContext.Provider value={{ user, token, login, logout }}>
        {children}
      </AuthContext.Provider>
    );
  };
  export const useAuth = () => useContext(AuthContext);
  
  
  #ProtectedRoute.jsx
  import { Navigate } from 'react-router-dom';
  import { useAuth } from './AuthContext';
  const ProtectedRoute = ({ children, permissions = [] }) => {
    const { user } = useAuth(); 
    if (!user) {
      return <Navigate to="/login" />;
    } 
    // If permissions are specified, check if user has at least one
    if (permissions.length > 0) {
      const userPermissions = user?.role?.role_details || [];  
      const hasPermission = permissions.some(permission => userPermissions.includes(permission)); 
      if (!hasPermission) {
        return <Navigate to="/unauthorized" />;
      }
    } 
    return children;
  };
  
  export default ProtectedRoute;
  

Components

• Navbar.jsx – Top navigation bar UI.
  
  
• Sidebar.jsx – Side menu UI, likely with links to pages based on roles.
  
  
• Footer.jsx – App footer UI component.
  

  import React from 'react'
  const Footer = () => {
     return (
        <>
           <hr className="my-3 border-gray-200 dark:border-gray-600" />
           <footer className="bg-white dark:bg-gray-900">
              <div className="container flex flex-col items-center justify-between p-6 mx-auto space-y-4 sm:space-y-0 sm:flex-row">
                 <a href="#"> 
                    <img className="w-auto px-1 rounded-sm bg-blue-800 h-7" alt="" src="https://hr.repunext.info/backend/assets/media/logos/repunextlogo.png"/>
                 </a> 
                 <p className="text-sm text-gray-600 dark:text-gray-300">Repunext © Copyright 2025-28. All Rights Reserved.</p>
                 <div className="flex -mx-2">
                    <a href="#" className="mx-2 text-gray-600 transition-colors duration-300 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400" aria-label="Reddit">
                       <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                             <path
                                d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
                             </path>
                       </svg>
                    </a> 
                    <a href="#" className="mx-2 text-gray-600 transition-colors duration-300 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400" aria-label="Facebook">
                       <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                             <path
                                d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
                             </path>
                       </svg>
                    </a> 
                    <a href="#" className="mx-2 text-gray-600 transition-colors duration-300 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400" aria-label="Github">
                       <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                             <path
                                d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
                             </path>
                       </svg>
                    </a>
                 </div>
              </div>
           </footer> 
        </>
     )
  }
  export default Footer
  
  
  import { useAuth } from '../auth/AuthContext';
  import { useState } from 'react';
  
  const Navbar = () => {
    const { logout } = useAuth();
    const [isOpen, setIsOpen] = useState(false); 
    const toggleMenu = () => setIsOpen(!isOpen); 
    return (
      <>
      <nav className="relative bg-white shadow dark:bg-gray-800">
        <div className="container px-6 py-4 mx-auto">
          <div className="lg:flex lg:items-center lg:justify-between">
            <div className="flex items-center justify-between"> 
              <a href="/" className="flex">
                <img className="w-auto px-1 rounded-sm bg-blue-800 h-7" alt="" src="https://hr.repunext.info/backend/assets/media/logos/repunextlogo.png"/>
                <span className="mx-4 text-xl font-bold">Repunext</span>
              </a> 
              <div className="flex lg:hidden">
                <button onClick={toggleMenu} type="button" className="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none"
                  aria-label="toggle menu" >
                  {isOpen ? ( <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"  >
                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> ) : 
                    ( <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6" fill="none"  viewBox="0 0 24 24" stroke="currentColor"  strokeWidth="2">
                        <path strokeLinecap="round"  strokeLinejoin="round" d="M4 8h16M4 16h16" />
                      </svg>  )}
                </button>
              </div>
            </div> 
            <div className={`${ isOpen ? 'translate-x-0 opacity-100' : 'opacity-0 -translate-x-full' } absolute inset-x-0 z-20 w-full px-6 py-4 transition-all duration-300 ease-in-out bg-white dark:bg-gray-800 lg:mt-0 lg:p-0 lg:top-0 lg:relative lg:bg-transparent lg:w-auto lg:opacity-100 lg:translate-x-0 lg:flex lg:items-center`}>
              <div className="flex flex-col -mx-6 lg:flex-row lg:items-center lg:mx-8">
                <a href="#" className="px-3 py-2 mx-3 mt-2 text-gray-700 transition-colors duration-300 transform rounded-md lg:mt-0 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
                  Join Slack
                </a>
                <a href="#" className="px-3 py-2 mx-3 mt-2 text-gray-700 transition-colors duration-300 transform rounded-md lg:mt-0 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
                  Browse Topics </a>
                <a href="#" className="px-3 py-2 mx-3 mt-2 text-gray-700 transition-colors duration-300 transform rounded-md lg:mt-0 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
                  Random Item </a>
                <a href="#" className="px-3 py-2 mx-3 mt-2 text-gray-700 transition-colors duration-300 transform rounded-md lg:mt-0 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
                  Experts </a>
              </div>
  
              <div className="flex items-center mt-4 lg:mt-0">
                <button className="hidden mx-4 text-gray-600 transition-colors duration-300 transform lg:block dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:outline-none"
                  aria-label="show notifications" >
                  <svg className="w-6 h-6" viewBox="0 0 24 24"  fill="none"  xmlns="http://www.w3.org/2000/svg"  >
                    <path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button> 
                <button type="button" className="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
                  <div className="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" className="object-cover w-full h-full" alt="avatar" />
                  </div>
  
                  <h3 className="mx-2 text-gray-700 dark:text-gray-200 lg:hidden">
                    Khatab wedaa
                  </h3>
                </button> 
                <a onClick={logout} className="mx-3 text-gray-500 transition-colors duration-200 rotate-180 dark:text-gray-400 rtl:rotate-0 hover:text-blue-500 dark:hover:text-blue-400">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-8 h-8">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                    </svg>
                </a>
              </div>
            </div>
          </div>
        </div> 
      </nav>
      </>
    );
  };
  export default Navbar;
  
  
  import { Link, useLocation  } from 'react-router-dom';
  import { useAuth } from '../auth/AuthContext';
  import { useState } from 'react';
  import { ChevronDown, ChevronRight, User, Menu, X } from 'lucide-react';
  
  const Sidebar = () => {
    const location = useLocation();
    const currentPath = location.pathname;
    const { user,logout } = useAuth();
    const roles = user?.role?.role_details || [];
    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
    const [activeMenu, setActiveMenu] = useState(null);
    const toggleMenu = (menuName) => { 
      setActiveMenu(prev => (prev === menuName ? null : menuName));
    };
    return (
      <> 
        {!isSidebarOpen && (
          <button onClick={() => setIsSidebarOpen(true)}
            className="z-50 p-2 m-2 text-gray-800 dark:text-white md:hidden" >
            <Menu className="w-6 h-6" />
          </button>
        )} 
        <aside
          className={`fixed z-40 top-0 left-0 h-full w-64 h-screen overflow-y-auto bg-white dark:bg-gray-900 border-r dark:border-gray-700 transform transition-transform duration-300 ease-in-out 
            ${ isSidebarOpen ? 'translate-x-0' : '-translate-x-full' } md:translate-x-0 md:relative md:block`} >
          <div className="flex flex-col h-full px-4 py-4 relative">
            {/* Close Button Inside for Mobile */}
            <button  onClick={() => setIsSidebarOpen(false)}
            className="absolute top-3 right-3 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white md:hidden">
              <X className="w-6 h-6" />
            </button>
            
            <Link to="/dashboard" className="flex items-center mb-6 mt-2">
              <img className="w-auto px-1 rounded-sm bg-blue-800 h-9" alt="Repunext Logo"
                src="https://hr.repunext.info/backend/assets/media/logos/repunextlogo.png" />
              <span className="mx-4 text-2xl font-bold">Repunext</span>
            </Link>
  
            {/* Search Box */}
            <div className="relative mt-2">
              <span className="absolute inset-y-0 left-0 flex items-center pl-3">
                <svg className="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                  <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
                </svg>
              </span>
              <input type="text" className="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring"
                placeholder="Search" />
            </div> 
  
            <nav className="mt-6 flex flex-col flex-1">
  
              <Link to="/dashboard" className={`flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md 
                ${currentPath === '/dashboard' ? 'bg-blue-100 text-blue-700 dark:bg-gray-800 dark:text-white' : 
                'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200'}`}>
                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none">
                    <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17"
                      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                <span className="mx-4 font-medium">Dashboard</span>
              </Link>
   
              <button onClick={() => toggleMenu('accounts')}
                className="flex items-center justify-between w-full px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200">
                <span className="flex items-center">
                  <User className="w-5 h-5" />
                  <span className="mx-4 font-medium">Accounts</span>
                </span>
                {activeMenu === 'accounts' ? ( <ChevronDown className="w-4 h-4" /> ) :  ( <ChevronRight className="w-4 h-4" />)}
              </button> 
              {activeMenu === 'accounts' && (
                <div className="mt-2 space-y-2 pl-12">
                  {['User_Add', 'User_Edit', 'User_Delete', 'User_View'].some(permission => roles.includes(permission)) && 
                    ( <Link to="/users" className={`flex items-center text-gray-600 transition-colors duration-300 transform rounded-md 
                      ${currentPath === '/users' ? 'bg-blue-100 text-blue-700 dark:bg-gray-800 dark:text-white' : 
                      'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200'}`}>
                        <span className="mx-4 font-small">User List</span>
                      </Link> )}
                </div>
              )}
              
              <button onClick={() => toggleMenu('roles')}
                className="flex items-center justify-between w-full px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200">
                <span className="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                  </svg>
                  <span className="mx-4 font-medium">Roles</span>
                </span>
                {activeMenu === 'roles' ? ( <ChevronDown className="w-4 h-4" /> ) :  ( <ChevronRight className="w-4 h-4" />)}
              </button> 
              {activeMenu === 'roles' && (
                <div className="mt-2 space-y-2 pl-12">
                  {['Role_Add', 'Role_Edit', 'Role_Delete', 'Role_View'].some(permission => roles.includes(permission)) && 
                    ( <Link to="/roles" className={`flex items-center text-gray-600 transition-colors duration-300 transform rounded-md 
                      ${currentPath === '/roles' ? 'bg-blue-100 text-blue-700 dark:bg-gray-800 dark:text-white' : 
                      'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200'}`}>
                        <span className="mx-4 font-small">Role List</span>
                      </Link> )}
                </div>
              )} 
  
              <Link to="/tickets" className={`flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md 
                ${currentPath === '/tickets' ? 'bg-blue-100 text-blue-700 dark:bg-gray-800 dark:text-white' : 
                'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200'}`}>            
                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
                  </svg>
                <span className="mx-4 font-medium">Tickets</span>
              </Link>
  
              <Link to="#" className={`flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md 
                ${currentPath === '/settings' ? 'bg-blue-100 text-blue-700 dark:bg-gray-800 dark:text-white' : 
                'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200'}`}>
                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg> 
                <span className="mx-4 font-medium">Settings</span>
              </Link>  
              <hr className="my-6 border-gray-200 dark:border-gray-600" /> 
  
            </nav>
            
            <div className="mb-6">
              <div className="flex items-center justify-between mt-6">
                <Link to="#" className="flex items-center gap-x-2">
                  <img className="object-cover rounded-full h-7 w-7"
                    src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-4.0.3&auto=format&fit=crop&w=80&q=80" alt="avatar" />
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
                    {user?.name || 'User'}
                  </span>
                </Link>
                <a onClick={logout} className="text-gray-500 transition-colors duration-200 rotate-180 dark:text-gray-400 rtl:rotate-0 hover:text-blue-500 dark:hover:text-blue-400">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                    </svg>
                </a>
              </div>
            </div>
          </div>
        </aside>
      </>
    );
  };
  
  export default Sidebar;
  

Roles page

• AddRole.jsx – Form for creating a new role..
  
  
• EditRole.jsx – Form for editing an existing role.
  
  
• RoleList.jsx – List view of all roles (with edit/delete options).
  

  import React, { useState } from 'react';
  import API from '../../api/axios';
  import { useNavigate,Link } from 'react-router-dom';
  import { Helmet } from 'react-helmet'; 
  import { toast } from 'sonner';
  
  const AddRole = () => {
    const permissions = [ 'User_Add',     'User_Edit',    'User_Delete',    'User_View',
                          'Role_Add',     'Role_Edit',    'Role_Delete',    'Role_View',
                          'Ticket_Add',   'Ticket_Edit',  'Ticket_Delete',  'Ticket_View',];
    const [roleName, setRoleName] = useState('');
    const [roleDetails, setRoleDetails] = useState([]); 
    const navigate = useNavigate();
    const handleCheckboxChange = (permission) => {
      setRoleDetails((prev) =>  prev.includes(permission) ? 
                      prev.filter((item) => item !== permission) : [...prev, permission]);
    };
    const handleSubmit = async (e) => {
      e.preventDefault(); 
      await API.post('/roles', {
        role_name: roleName,
        role_details: JSON.stringify(roleDetails),
      });
      toast.success('New Role added successfully!');
      navigate('/roles');
    };
  
    return ( 
      <>
      <Helmet>
        <title>Add Role | My CRM</title>
        <meta name="description" content="Default CRM meta description" />
        <meta property="og:title" content="My CRM" />
        <meta property="og:description" content="View all roles and permissions in your CRM" />
      </Helmet>
      <div className="flex items-center px-2 py-2 overflow-x-auto whitespace-nowrap">
        <a href="/" className="text-gray-600 dark:text-gray-200">
          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
          </svg>
        </a> 
        <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
          </svg>
        </span> 
        <a href="/roles" className="text-gray-600 dark:text-gray-200 hover:underline">
          Roles </a> 
        <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
          </svg>
        </span> 
        <a href="#" className="text-gray-600 dark:text-gray-200 hover:underline">
          Role Add </a>  
      </div> 
      <div className="max-w-auto px-8 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h2 className="text-lg font-medium text-gray-800 dark:text-white mb-4">Add New Role</h2>
        <form onSubmit={handleSubmit} className="space-y-6"> 
          <div>
            <label className="block text-sm font-medium mb-1">Role Name</label>
            <input type="text" value={roleName}  onChange={(e) => setRoleName(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-400 outline-none"
              placeholder="Enter role name" required />
          </div> 
          <div>
            <label className="block text-sm font-medium mb-2">Role Details</label>
            <div className="m-0 sm:m-4 grid grid-cols-4 gap-3 "> 
              {permissions.map((perm) => ( 
                <label key={perm} className="flex items-center gap-2">
                  <input type="checkbox" value={perm} checked={roleDetails.includes(perm)}
                    onChange={() => handleCheckboxChange(perm)} className="h-4 w-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500" />
                  <span className="text-sm">{perm.replace(/_/g, ' ')}</span>
                </label>
              ))}
            </div>
          </div>  
          <div className="flex justify-end mt-6">
            <Link to="/roles" className="px-4 py-2 mx-4 leading-5 text-white transition-colors duration-300 transform bg-blue-400 rounded-md hover:bg-blue-300 focus:outline-none focus:bg-blue-600">
            Cancel </Link> 
            <button className="px-6 py-2 leading-5 text-white transition-colors duration-300 transform bg-blue-800 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600 cursor-pointer">Save</button>
          </div>
        </form>
      </div>
      </>
    );
  };
  
  export default AddRole;
  
  
  import React, { useEffect, useState } from 'react';
  import { useParams, useNavigate,Link } from 'react-router-dom';
  import { Helmet } from 'react-helmet'; 
  import API from '../../api/axios';
  import { toast } from 'sonner';
  
  const permissions = [ 'User_Add',     'User_Edit',    'User_Delete',    'User_View',
                        'Role_Add',     'Role_Edit',    'Role_Delete',    'Role_View',
                        'Ticket_Add',   'Ticket_Edit',  'Ticket_Delete',  'Ticket_View',];
  const EditRole = () => {
    const { id } = useParams();
    const navigate = useNavigate(); 
    const [roleName, setRoleName] = useState('');
    const [roleDetails, setRoleDetails] = useState([]);
  
    useEffect(() => {
      const fetchRole = async () => {
        try {
          const res = await API.get('/roles');
          const role = res.data.find(r => r.id === parseInt(id));
          if (role) {
            setRoleName(role.role_name);
            setRoleDetails(JSON.parse(role.role_details || '[]'));
          }
        } catch (error) {
          console.error('Error fetching roles:', error);
        }
      }; 
      fetchRole();
    }, [id]);
    const handleCheckboxChange = (perm) => {
      setRoleDetails((prev) =>
        prev.includes(perm)
          ? prev.filter((item) => item !== perm)
          : [...prev, perm]
      );
    };
  
    const handleSubmit = async (e) => {
      e.preventDefault();
      await API.put(`/roles/${id}`, {
        role_name: roleName,
        role_details: JSON.stringify(roleDetails),
      });
      toast.success('Roles details updated successfully!');
      navigate('/roles');
    };
  
    return ( 
      <>
        <Helmet>
          <title>Edit Role | My CRM</title>
          <meta name="description" content="Default CRM meta description" />
          <meta property="og:title" content="My CRM" />
          <meta property="og:description" content="View all roles and permissions in your CRM" />
        </Helmet>
        <div className="flex items-center px-2 py-2 overflow-x-auto whitespace-nowrap">
          <a href="/" className="text-gray-600 dark:text-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
          </a> 
          <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
            </svg>
          </span> 
          <a href="/roles" className="text-gray-600 dark:text-gray-200 hover:underline">
            Roles </a> 
          <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
            </svg>
          </span> 
          <a href="#" className="text-gray-600 dark:text-gray-200 hover:underline">
            Role Add </a>  
        </div>  
        <div className="max-w-auto px-8 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
          <h2 className="text-2xl font-semibold mb-4">Edit Role</h2>
          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Role Name */}
            <div>
              <label className="block text-sm font-medium mb-1">Role Name</label>
              <input
                type="text"
                value={roleName}
                onChange={(e) => setRoleName(e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-400 outline-none"
                required
              />
            </div> 
            <div>
              <label className="block text-sm font-medium mb-2">Role Details</label>
              <div className="m-0 sm:m-4 grid grid-cols-4 gap-3">
                {permissions.map((perm) => (
                  <label key={perm} className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      value={perm}
                      checked={roleDetails.includes(perm)}
                      onChange={() => handleCheckboxChange(perm)}
                      className="rounded text-indigo-600"
                    />
                    <span className="text-sm">{perm.replace(/_/g, ' ')}</span>
                  </label>
                ))}
              </div>
            </div> 
            <div className="flex justify-end mt-6">
              <Link to="/roles" className="px-4 py-2 mx-4 leading-5 text-white transition-colors duration-300 transform bg-blue-400 rounded-md hover:bg-blue-300 focus:outline-none focus:bg-blue-600">
              Cancel </Link> 
              <button className="px-6 py-2 leading-5 text-white transition-colors duration-300 transform bg-blue-800 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600 cursor-pointer">Update</button>
            </div> 
          </form>
        </div>
      </>
    );
  };
  
  export default EditRole;
  
  
  import React, { useEffect, useState } from 'react';
  import { Link } from 'react-router-dom';
  import API from '../../api/axios';
  import { useAuth } from '../../auth/AuthContext';
  import { Helmet } from 'react-helmet'; 
  import { toast } from 'sonner';
  
  const RoleList = () => {
    const [roles, setRoles] = useState([]);
    const { user } = useAuth();
    const authRoles = user?.role?.role_details || []; 
    useEffect(() => {
      API.get('/roles').then(res => setRoles(res.data));
    }, []);
  
    const handleDelete = async (id) => {
      if (window.confirm('Are you sure you want to delete this role?')) {
        await API.delete(`/roles/${id}`);
        setRoles(roles.filter(r => r.id !== id));
        toast.success('Role deleted successfully!')
      }
    }; 
    return (
      <> 
        <Helmet>
          <title>Role List | My CRM</title>
          <meta name="description" content="Default CRM meta description" />
          <meta property="og:title" content="My CRM" />
          <meta property="og:description" content="View all roles and permissions in your CRM" />
        </Helmet>
        <div className="flex items-center px-2 py-2 overflow-x-auto whitespace-nowrap">
          <a href="/" className="text-gray-600 dark:text-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
          </a> 
          <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
            </svg>
          </span> 
          <a href="#" className="text-gray-600 dark:text-gray-200 hover:underline">
            Roles </a> 
          <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
            </svg>
          </span> 
          <a href="/roles" className="text-gray-600 dark:text-gray-200 hover:underline">
            Role List </a>  
        </div> 
        <div className="max-w-auto px-8 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <section className="container px-4 mx-auto">
              <div className="sm:flex sm:items-center sm:justify-between">
                  <h2 className="text-lg font-medium text-gray-800 dark:text-white">Role List</h2> 
                  <div className="flex items-center gap-x-3"> 
                    {authRoles.includes('Role_Add') &&
                      <Link to="/roles/add" className="flex items-center justify-center w-1/2 px-5 py-2 text-sm tracking-wide text-white transition-colors duration-200 bg-blue-800 rounded-lg sm:w-auto gap-x-2 hover:bg-blue-600 dark:hover:bg-blue-500 dark:bg-blue-600">
                          <span>+ Add Role</span>
                      </Link>}
                  </div> 
              </div>
              <div className="flex flex-col mt-6">
                  <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
                        <div className="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
                          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                              <thead className="bg-gray-50 dark:bg-gray-800">
                                <tr>
                                    <th scope="col" className="py-3.5 px-4 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                      <div className="flex items-center gap-x-3"> 
                                          <span>S.No</span>
                                      </div>
                                    </th>
                                    <th scope="col" className="py-3.5 px-4 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                      <div className="flex items-center gap-x-3"> 
                                          <span>Name</span>
                                      </div>
                                    </th> 
                                    <th scope="col" className="px-3 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                      <button className="flex items-center gap-x-2">
                                          <span>Status</span> 
                                          <svg className="h-3" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M2.13347 0.0999756H2.98516L5.01902 4.79058H3.86226L3.45549 3.79907H1.63772L1.24366 4.79058H0.0996094L2.13347 0.0999756ZM2.54025 1.46012L1.96822 2.92196H3.11227L2.54025 1.46012Z" fill="currentColor" stroke="currentColor" strokeWidth="0.1" />
                                                <path d="M0.722656 9.60832L3.09974 6.78633H0.811638V5.87109H4.35819V6.78633L2.01925 9.60832H4.43446V10.5617H0.722656V9.60832Z" fill="currentColor" stroke="currentColor" strokeWidth="0.1" />
                                                <path d="M8.45558 7.25664V7.40664H8.60558H9.66065C9.72481 7.40664 9.74667 7.42274 9.75141 7.42691C9.75148 7.42808 9.75146 7.42993 9.75116 7.43262C9.75001 7.44265 9.74458 7.46304 9.72525 7.49314C9.72522 7.4932 9.72518 7.49326 9.72514 7.49332L7.86959 10.3529L7.86924 10.3534C7.83227 10.4109 7.79863 10.418 7.78568 10.418C7.77272 10.418 7.73908 10.4109 7.70211 10.3534L7.70177 10.3529L5.84621 7.49332C5.84617 7.49325 5.84612 7.49318 5.84608 7.49311C5.82677 7.46302 5.82135 7.44264 5.8202 7.43262C5.81989 7.42993 5.81987 7.42808 5.81994 7.42691C5.82469 7.42274 5.84655 7.40664 5.91071 7.40664H6.96578H7.11578V7.25664V0.633865C7.11578 0.42434 7.29014 0.249976 7.49967 0.249976H8.07169C8.28121 0.249976 8.45558 0.42434 8.45558 0.633865V7.25664Z" fill="currentColor" stroke="currentColor" strokeWidth="0.3" />
                                          </svg>
                                      </button>
                                    </th> 
                                    <th scope="col" className="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                      <button className="flex items-center gap-x-2">
                                          <span >Role</span> 
                                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="w-4 h-4">
                                                <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
                                          </svg>
                                      </button>
                                    </th>  
                                    <th scope="col" className="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">Action</th>
                                </tr>
                              </thead>
                              <tbody className="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
                              {roles.map((role,index) => (
                                <tr key={index}>
                                    <td className="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
                                      <div className="inline-flex items-center gap-x-3">
                                          <div className="flex items-center gap-x-2"> {index+1}
                                          </div>
                                      </div>
                                    </td>  
                                    <td className="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
                                      <div className="inline-flex items-center gap-x-3">
                                          <div className="flex items-center gap-x-2"> 
                                            <h2 className="font-medium text-gray-800 dark:text-white ">{role.role_name}</h2> 
                                          </div>
                                      </div>
                                    </td>
                                    <td className="px-3 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
                                      <div className="inline-flex items-center px-3 py-1 rounded-full gap-x-2 bg-emerald-100/60 dark:bg-gray-800">
                                          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500"></span> 
                                          <h2 className="text-sm font-normal text-emerald-500">Active</h2>
                                      </div>
                                    </td>
                                    <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
                                      <div className="grid grid-cols-1 sm:grid-cols-5 gap-2">  
                                       {JSON.parse(role.role_details || "[]").map((item, index) => ( 
                                          <p key={index} className="px-1 py-1 text-xs text-center text-blue-500 rounded-full dark:bg-gray-800 bg-blue-100/60" >
                                            {item.replace(/_/g, ' ')}
                                          </p> 
                                      ))}
                                      </div></td> 
                                    <td className="px-4 py-4 text-sm whitespace-nowrap">
                                      <div className="flex items-center gap-x-6">
                                        {authRoles.includes('Role_Edit') &&
                                          <Link to={`/roles/edit/${role.id}`} className="text-gray-500 transition-colors duration-200 dark:hover:text-yellow-500 dark:text-gray-300 hover:text-yellow-500 focus:outline-none">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5">
                                                  <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                                </svg>
                                          </Link>}
                                        {authRoles.includes('Role_Delete') && (role.role_name !== 'Admin') &&
                                          <button onClick={() => handleDelete(role.id)} className="text-gray-500 transition-colors duration-200 dark:hover:text-red-500 dark:text-gray-300 hover:text-red-500 focus:outline-none cursor-pointer">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5">
                                                  <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                                </svg>
                                          </button> }
                                      </div>
                                    </td>
                                </tr>
                                ))}
                              </tbody>
                          </table>
                        </div>
                    </div>
                  </div>
              </div>
  
              <div className="flex items-center justify-between mt-6">
                  <a href="#" className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 rtl:-scale-x-100">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
                    </svg> 
                    <span>  previous </span>
                  </a> 
                  <div className="items-center hidden lg:flex gap-x-3">
                    <a href="#" className="px-2 py-1 text-sm text-blue-500 rounded-md dark:bg-gray-800 bg-blue-100/60">1</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">2</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">3</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">...</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">12</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">13</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">14</a>
                  </div> 
                  <a href="#" className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800">
                    <span> Next </span> 
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 rtl:-scale-x-100">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
                    </svg>
                  </a>
              </div>
            </section>
        </div>    
      </>   
    );
  };
  
  export default RoleList;
  
  

Users page

• AddUser.jsx – Form to add a new user
  
  
• EditUser.jsx – Form to update user details.
  
  
• UserList.jsx – List of users with management actions
  

  import React, { useState, useEffect } from 'react';
  import API from '../../api/axios';
  import { useNavigate,Link } from 'react-router-dom';
  import { Helmet } from 'react-helmet';
  import { toast } from 'sonner';
  
  const AddUser = () => {
    const [name, setName] = useState('');
    const [password, setPassword] = useState('');
    const [email, setEmail] = useState('');
    const [roleId, setRoleId] = useState('');
    const [roles, setRoles] = useState([]);
    const navigate = useNavigate();
  
    useEffect(() => {
      API.get('/roles').then(res => setRoles(res.data));
    }, []);
  
    const handleSubmit = async (e) => {
      e.preventDefault();
      await API.post('/users', { name, password,email, role_id: roleId });
      toast.success('User added successfully!');
      navigate('/users');
    };
  
    return (
    <>  
      <Helmet>
        <title>Add User | My CRM</title>
        <meta name="description" content="Default CRM meta description" />
        <meta property="og:title" content="My CRM" />
        <meta property="og:description" content="View all roles and permissions in your CRM" />
      </Helmet>
      <div className="flex items-center px-2 py-2 overflow-x-auto whitespace-nowrap">
        <a href="/" className="text-gray-600 dark:text-gray-200">
          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
          </svg>
        </a> 
        <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
          </svg>
        </span> 
        <a href="/users" className="text-gray-600 dark:text-gray-200 hover:underline">
          User </a> 
        <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
          </svg>
        </span> 
        <a href="/users/add" className="text-gray-600 dark:text-gray-200 hover:underline">
          User Add </a>  
      </div>  
      <section className="max-w-auto px-8 py-4 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
        <h2 className="text-lg font-semibold text-gray-700 capitalize dark:text-white">User Add</h2> 
        <form onSubmit={handleSubmit}>
          <div className="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
            <div>
              <label className="text-gray-700 dark:text-gray-200" htmlFor="username">Name</label>
              <input id="username" type="text" value={name} onChange={(e) => setName(e.target.value)} className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" required/>
            </div> 
            <div>
              <label className="text-gray-700 dark:text-gray-200" htmlFor="emailAddress">Email Address</label>
              <input id="emailAddress" type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" required/>
            </div> 
            <div>
              <label className="text-gray-700 dark:text-gray-200" htmlFor="password">Password</label>
              <input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" required/>
            </div> 
            <div>
              <label className="text-gray-700 dark:text-gray-200" htmlFor="roleId">User Role</label>  
              <select value={roleId} onChange={(e) => setRoleId(e.target.value)} id="roleId" className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" required>
                <option value="">Select Role</option>
                {roles.map(role => (
                  <option key={role.id} value={role.id}>{role.role_name}</option>
                ))}
              </select>
            </div>
          </div> 
          <div className="flex justify-end mt-6">
            <Link to="/users" className="px-4 py-2 mx-4 leading-5 text-white transition-colors duration-300 transform bg-blue-400 rounded-md hover:bg-blue-300 focus:outline-none focus:bg-blue-600">
            Cancel </Link> 
            <button className="px-6 py-2 leading-5 text-white transition-colors duration-300 transform bg-blue-700 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600 cursor-pointer">Save</button>
          </div>
        </form>
      </section>
    </>
    );
  };
  
  export default AddUser;
  
  
  import React, { useState, useEffect } from 'react';
  import API from '../../api/axios';
  import { useNavigate, useParams,Link } from 'react-router-dom'; 
  import { Helmet } from 'react-helmet';
  import { toast } from 'sonner';
  
  const EditUser = () => {
    const { id } = useParams();
    const [name, setName] = useState('');
    const [password, setPassword] = useState('');
    const [email, setEmail] = useState('');
    const [roleId, setRoleId] = useState('');
    const [roles, setRoles] = useState([]);
    const navigate = useNavigate();
  
    useEffect(() => {
      API.get(`/users`).then(res => {
        const user = res.data.find(u => u.id === parseInt(id));
        if (user) {
          setName(user.name);
          setRoleId(user.role_id);
          setEmail(user.email);
        }
      });
      API.get('/roles').then(res => setRoles(res.data));
    }, [id]);
  
    const handleSubmit = async (e) => {
      e.preventDefault();
      await API.put(`/users/${id}`, { name, password, role_id: roleId , email});
      toast.success('User details updated successfully!');
      navigate('/users');
    };
  
    return ( 
      <>   
        <Helmet>
          <title>Edit User | My CRM</title>
          <meta name="description" content="Default CRM meta description" />
          <meta property="og:title" content="My CRM" />
          <meta property="og:description" content="View all roles and permissions in your CRM" />
        </Helmet>
        <div className="flex items-center px-2 py-2 overflow-x-auto whitespace-nowrap">
          <a href="/" className="text-gray-600 dark:text-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
          </a> 
          <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
            </svg>
          </span> 
          <a href="/users" className="text-gray-600 dark:text-gray-200 hover:underline">
            User </a> 
          <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
            </svg>
          </span> 
          <a href="/users/add" className="text-gray-600 dark:text-gray-200 hover:underline">
            User Edit </a>  
        </div>  
        <section className="max-w-auto px-8 py-4 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
          <h2 className="text-lg font-semibold text-gray-700 capitalize dark:text-white">User Edit</h2> 
          <form onSubmit={handleSubmit}>
            <div className="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
              <div>
                <label className="text-gray-700 dark:text-gray-200" htmlFor="username">Name</label>
                <input id="username" type="text" value={name} onChange={(e) => setName(e.target.value)} className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" required/>
              </div> 
              <div>
                <label className="text-gray-700 dark:text-gray-200" htmlFor="emailAddress">Email Address</label>
                <input id="emailAddress" type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" required/>
              </div> 
              <div>
                <label className="text-gray-700 dark:text-gray-200" htmlFor="password">Password</label>
                <input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" required/>
              </div> 
              <div>
                <label className="text-gray-700 dark:text-gray-200" htmlFor="roleId">User Role</label>  
                <select value={roleId} onChange={(e) => setRoleId(e.target.value)} id="roleId" className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring" required>
                  <option value="">Select Role</option>
                  {roles.map(role => (
                    <option key={role.id} value={role.id}>{role.role_name}</option>
                  ))}
                </select>
              </div>
            </div>  
            <div className="flex justify-end mt-6">
              <Link to="/users" className="px-4 py-2 mx-4 leading-5 text-white transition-colors duration-300 transform bg-blue-400 rounded-md hover:bg-blue-300 focus:outline-none focus:bg-blue-600">
              Cancel </Link> 
              <button className="px-6 py-2 leading-5 text-white transition-colors duration-300 transform bg-blue-700 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600 cursor-pointer">Save</button>
            </div>
          </form>
        </section>
      </>
    );
  };
  
  export default EditUser;
  
  
  import React, { useEffect, useState } from 'react';
  import { useAuth } from '../../auth/AuthContext';
  import { Link } from 'react-router-dom';
  import API from '../../api/axios';
  import { Helmet } from 'react-helmet';
  import { toast } from 'sonner';
  const UserList = () => {
     const [users, setUsers] = useState([]);
     const { user } = useAuth();
     const authRoles = user?.role?.role_details || []; 
     useEffect(() => {
        API.get('/users').then(res => setUsers(res.data));
     }, []);
  
     const handleDelete = async (id) => {
        if (window.confirm('Are you sure you want to delete this user?')) {
           await API.delete(`/users/${id}`);
           setUsers(users.filter(user => user.id !== id));
           toast.success('User deleted successfully!')
        }
     };
  
  return (
     <> 
        <Helmet>
          <title>User List | My CRM</title>
          <meta name="description" content="Default CRM meta description" />
          <meta property="og:title" content="My CRM" />
          <meta property="og:description" content="View all roles and permissions in your CRM" />
        </Helmet>
        <div className="flex items-center px-2 py-2 overflow-x-auto whitespace-nowrap">
          <a href="/" className="text-gray-600 dark:text-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
          </a> 
          <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
            </svg>
          </span> 
          <a href="#" className="text-gray-600 dark:text-gray-200 hover:underline">
            Account </a> 
          <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
            </svg>
          </span> 
          <a href="/users" className="text-gray-600 dark:text-gray-200 hover:underline">
            User List </a>  
        </div> 
        <div className="max-w-auto px-8 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
           <section className="container px-4 mx-auto">
              <div className="sm:flex sm:items-center sm:justify-between">
                 <h2 className="text-lg font-medium text-gray-800 dark:text-white">User List</h2> 
                 <div className="flex items-center gap-x-3"> 
                    {authRoles.includes('User_Add') &&
                       <Link to="/users/add" className="flex items-center justify-center w-1/2 px-5 py-2 text-sm tracking-wide text-white transition-colors duration-200 bg-blue-800 rounded-lg sm:w-auto gap-x-2 hover:bg-blue-600 dark:hover:bg-blue-500 dark:bg-blue-600">
                          <span>+ Add User</span>
                       </Link>}
                 </div> 
              </div>
              <div className="flex flex-col mt-6">
                 <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
                       <div className="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
                          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                             <thead className="bg-gray-50 dark:bg-gray-800">
                                <tr>
                                   <th scope="col" className="py-3.5 px-4 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                      <div className="flex items-center gap-x-3"> 
                                         <span>S.No</span>
                                      </div>
                                   </th>
                                   <th scope="col" className="py-3.5 px-4 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                      <div className="flex items-center gap-x-3"> 
                                         <span>Name</span>
                                      </div>
                                   </th> 
                                   <th scope="col" className="px-12 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                      <button className="flex items-center gap-x-2">
                                         <span>Status</span> 
                                         <svg className="h-3" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                               <path d="M2.13347 0.0999756H2.98516L5.01902 4.79058H3.86226L3.45549 3.79907H1.63772L1.24366 4.79058H0.0996094L2.13347 0.0999756ZM2.54025 1.46012L1.96822 2.92196H3.11227L2.54025 1.46012Z" fill="currentColor" stroke="currentColor" strokeWidth="0.1" />
                                               <path d="M0.722656 9.60832L3.09974 6.78633H0.811638V5.87109H4.35819V6.78633L2.01925 9.60832H4.43446V10.5617H0.722656V9.60832Z" fill="currentColor" stroke="currentColor" strokeWidth="0.1" />
                                               <path d="M8.45558 7.25664V7.40664H8.60558H9.66065C9.72481 7.40664 9.74667 7.42274 9.75141 7.42691C9.75148 7.42808 9.75146 7.42993 9.75116 7.43262C9.75001 7.44265 9.74458 7.46304 9.72525 7.49314C9.72522 7.4932 9.72518 7.49326 9.72514 7.49332L7.86959 10.3529L7.86924 10.3534C7.83227 10.4109 7.79863 10.418 7.78568 10.418C7.77272 10.418 7.73908 10.4109 7.70211 10.3534L7.70177 10.3529L5.84621 7.49332C5.84617 7.49325 5.84612 7.49318 5.84608 7.49311C5.82677 7.46302 5.82135 7.44264 5.8202 7.43262C5.81989 7.42993 5.81987 7.42808 5.81994 7.42691C5.82469 7.42274 5.84655 7.40664 5.91071 7.40664H6.96578H7.11578V7.25664V0.633865C7.11578 0.42434 7.29014 0.249976 7.49967 0.249976H8.07169C8.28121 0.249976 8.45558 0.42434 8.45558 0.633865V7.25664Z" fill="currentColor" stroke="currentColor" strokeWidth="0.3" />
                                         </svg>
                                      </button>
                                   </th> 
                                   <th scope="col" className="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                      <button className="flex items-center gap-x-2">
                                         <span>Role</span> 
                                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" className="w-4 h-4">
                                               <path strokeLinecap="round" strokeLinejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
                                         </svg>
                                      </button>
                                   </th> 
                                   <th scope="col" className="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">Email address</th> 
                                   <th scope="col" className="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">Action</th>
                                </tr>
                             </thead>
                             <tbody className="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
                             {users.map((user,index) => (
                                <tr key={index}>
                                   <td className="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
                                      <div className="inline-flex items-center gap-x-3">
                                         <div className="flex items-center gap-x-2"> {index+1}
                                         </div>
                                      </div>
                                   </td>  
                                   <td className="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
                                      <div className="inline-flex items-center gap-x-3">
                                         <div className="flex items-center gap-x-2">
                                               <img className="object-cover w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt=""/>
                                               <div>
                                                  <h2 className="font-medium text-gray-800 dark:text-white ">{user.name}</h2>
                                                  <p className="text-sm font-normal text-gray-600 dark:text-gray-400">@{user.name}</p>
                                               </div>
                                         </div>
                                      </div>
                                   </td>
                                   <td className="px-12 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
                                      <div className="inline-flex items-center px-3 py-1 rounded-full gap-x-2 bg-emerald-100/60 dark:bg-gray-800">
                                         <span className="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
  
                                         <h2 className="text-sm font-normal text-emerald-500">Active</h2>
                                      </div>
                                   </td>
                                   <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">{user.role?.role_name}</td>
                                   <td className="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">{user.email}</td>
                                   <td className="px-4 py-4 text-sm whitespace-nowrap">
                                      <div className="flex items-center gap-x-6">
                                         {authRoles.includes('User_Edit') &&
                                         <Link to={`/users/edit/${user.id}`} className="text-gray-500 transition-colors duration-200 dark:hover:text-yellow-500 dark:text-gray-300 hover:text-yellow-500 focus:outline-none">
                                               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5">
                                                  <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                               </svg>
                                         </Link>}
                                         {authRoles.includes('User_Edit') && (user.role_id !== 1) &&
                                         <button onClick={() => handleDelete(user.id)} className="text-gray-500 transition-colors duration-200 dark:hover:text-red-500 dark:text-gray-300 hover:text-red-500 focus:outline-none cursor-pointer">
                                               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5">
                                                  <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                               </svg>
                                         </button> }
                                      </div>
                                   </td>
                                </tr>
                                ))}
                             </tbody>
                          </table>
                       </div>
                    </div>
                 </div>
              </div>
  
              <div className="flex items-center justify-between mt-6">
                 <a href="#" className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 rtl:-scale-x-100">
                       <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
                    </svg> 
                    <span>  previous </span>
                 </a> 
                 <div className="items-center hidden lg:flex gap-x-3">
                    <a href="#" className="px-2 py-1 text-sm text-blue-500 rounded-md dark:bg-gray-800 bg-blue-100/60">1</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">2</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">3</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">...</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">12</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">13</a>
                    <a href="#" className="px-2 py-1 text-sm text-gray-500 rounded-md dark:hover:bg-gray-800 dark:text-gray-300 hover:bg-gray-100">14</a>
                 </div> 
                 <a href="#" className="flex items-center px-5 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 bg-white border rounded-md gap-x-2 hover:bg-gray-100 dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800">
                    <span> Next </span> 
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 rtl:-scale-x-100">
                       <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
                    </svg>
                 </a>
              </div>
           </section>
        </div>   
     </> 
    );
  };
  
  export default UserList;
  
  

Pages - Dashboard, Login

• Dashboard.jsx – Main landing page after login; may include metrics or summaries.
  
  
• Login.jsx – Login form for authenticating users.
  
  
• Unauthorized.jsx – Shown when a user tries to access a page without permissions.
  

  import React from 'react';
  
  const Dashboard = () => {
    return ( 
     <> 
        <div className="flex items-center px-2 py-2 overflow-x-auto whitespace-nowrap">
          <a href="#" className="text-gray-600 dark:text-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
          </a> 
          <span className="mx-4 text-gray-500 dark:text-gray-300 rtl:-scale-x-100">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
            </svg>
          </span> 
          <a href="#" className="text-gray-600 dark:text-gray-200 hover:underline">
            Dashboard </a>  
        </div>
  
        <div className="max-w-auto px-8 py-4 bg-white rounded-lg shadow-md dark:bg-gray-800">
           <section className="container px-4 mx-auto">
              <div className="flex items-center gap-x-3">
                 <h2 className="text-lg font-medium text-gray-800 dark:text-white">Dashboard</h2>
              </div>
              <div className="flex flex-col mt-6">
                 <div className="bg-white dark:bg-gray-900">
                    <div className="container px-6 py-8 mx-auto">
                       <h1 className="text-2xl font-semibold text-center text-gray-800 capitalize lg:text-3xl dark:text-white">Simple pricing plan</h1>
  
                       <p className="max-w-2xl mx-auto mt-4 text-center text-gray-500 xl:mt-6 dark:text-gray-300">
                             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias quas magni libero consequuntur voluptatum velit amet id repudiandae ea, deleniti laborum in neque eveniet.
                       </p>
  
                       <div className="grid grid-cols-1 gap-8 mt-6 lg:grid-cols-3 xl:mt-12">
                             <div className="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
                                <div className="flex flex-col items-center space-y-1">
                                   <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
                                         <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                   </svg>
  
                                   <h2 className="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Basic</h2>
                                </div>
  
                                <h2 className="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">Free</h2>
                             </div>
  
                             <div className="flex items-center justify-between px-8 py-4 border border-blue-500 cursor-pointer rounded-xl">
                                <div className="flex flex-col items-center space-y-1">
                                   <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-blue-600 dark:text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
                                         <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                   </svg>
  
                                   <h2 className="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Standard</h2>
                                </div>
  
  
                                <div className="flex flex-col items-center space-y-1">
                                   <div className="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
                                         Save 30%
                                   </div>
  
                                   <h2 className="text-2xl font-semibold text-blue-600 dark:text-blue-500 sm:text-3xl">$99 <span className="text-base font-medium">/Yearly</span></h2>
                                </div>
                             </div>
  
                             <div className="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
                                <div className="flex flex-col items-center space-y-1">
                                   <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
                                         <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                   </svg>
  
                                   <h2 className="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Pro</h2>
                                </div>
  
                                <div className="flex flex-col items-center space-y-1">
                                   <div className="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
                                         Save 20%
                                   </div>
  
                                   <h2 className="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">$149 <span className="text-base font-medium">/Month</span></h2>
                                </div>
                             </div>
                       </div>
  
                       <div className="p-8 mt-8 space-y-8 bg-gray-100 dark:bg-gray-800 rounded-xl">
                             <div className="flex items-center justify-between text-gray-800 dark:text-gray-200">
                                <p className="textlg sm:text-xl">Unlimited Links</p>
  
                                <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
                                   <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                </svg>
                             </div>
  
                             <div className="flex items-center justify-between text-gray-800 dark:text-gray-200">
                                <p className="textlg sm:text-xl">Own analytics platfrom</p>
  
                                <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
                                   <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                </svg>
                             </div>
  
                             <div className="flex items-center justify-between text-gray-800 dark:text-gray-200">
                                <p className="textlg sm:text-xl">Full Support with discussion</p>
  
                                <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
                                   <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                </svg>
                             </div>
  
                             <div className="flex items-center justify-between text-gray-800 dark:text-gray-200">
                                <p className="textlg sm:text-xl">Optimize hashtags</p>
  
                                <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
                                   <path fillRule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clipRule="evenodd" />
                                </svg>
                             </div>
  
                             <div className="flex items-center justify-between text-gray-800 dark:text-gray-200">
                                <p className="textlg sm:text-xl">Mobile app</p>
  
                                <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
                                   <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                </svg>
                             </div>
  
                             <div className="flex items-center justify-between text-gray-800 dark:text-gray-200">
                                <p className="textlg sm:text-xl">Unlimited users</p>
  
                                <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
                                   <path fillRule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clipRule="evenodd" />
                                </svg>
                             </div>
                       </div>
  
                       <div className="flex justify-center mt-8">
                             <button className="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
                                Choose Plan
                             </button>
                       </div>
                    </div>
                 </div>
              </div> 
           </section>
        </div>  
     </>
    );
  };
  
  export default Dashboard;
  
  
  import { useState } from 'react'; 
  import API from '../api/axios';
  import { useAuth } from '../auth/AuthContext';
  import { useNavigate } from 'react-router-dom';
  import { toast } from 'sonner';  
  import { Helmet } from 'react-helmet';  
  
  const Login = () => {
    const [name, setName] =   useState('');
    const [password, setPassword] =   useState('');
    const { login }   =   useAuth();
    const navigate    = useNavigate(); 
    const handleSubmit = async (e) => {
      e.preventDefault();
      try {  
        const res = await API.post('/login', { name, password });
        login(res.data.user, res.data.token);
        toast.success('User login success!')
        navigate('/dashboard');
      } catch (err) {
        alert('Invalid credentials'); 
      }
    }; 
    return (
      <> 
      <Helmet>
          {/* Basic SEO */}
          <title>Dashboard - CourierCollects</title>
          <meta charSet="utf-8" />
          <meta name="description" content="View and manage all your deliveries and tickets on CourierCollects." />
  
          {/* OpenGraph (for Facebook, LinkedIn, etc.) */}
          <meta property="og:title" content="Dashboard - CourierCollects" />
          <meta property="og:description" content="Manage all your deliveries and users in one place." />
          <meta property="og:image" content="https://yourdomain.com/images/dashboard-preview.png" />
          <meta property="og:url" content="https://yourdomain.com/dashboard" />
          <meta property="og:type" content="website" />
  
          {/* Twitter Card */}
          <meta name="twitter:card" content="summary_large_image" />
          <meta name="twitter:title" content="Dashboard - CourierCollects" />
          <meta name="twitter:description" content="All-in-one dashboard to manage deliveries, users, and roles." />
          <meta name="twitter:image" content="https://yourdomain.com/images/dashboard-preview.png" />
          <meta name="twitter:site" content="@yourtwitterhandle" />
        </Helmet>
        <div className="bg-white dark:bg-gray-900">
          <div className="flex justify-center h-screen">
            <div className="hidden bg-cover lg:block lg:w-2/3"  >
              <div className="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
                <div>
                  <h2 className="text-2xl font-bold text-white sm:text-3xl">Repunext UI</h2> 
                  <p className="max-w-xl mt-3 text-gray-300">
                  At Repunext UI, we specialize in building modern, responsive websites tailored to your business goals.
                  Our team blends creativity and technology to deliver seamless user experiences that drive results.
                  </p>
                </div>
              </div>
          </div> 
          <div className="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
              <div className="flex-1">
                <div className="text-center">
                  <div className="flex justify-center mx-auto">
                      <img className="w-auto px-1 rounded-sm bg-blue-800 h-7 sm:h-8 " src="https://hr.repunext.info/backend/assets/media/logos/repunextlogo.png" alt=""/>
                  </div> 
                  <p className="mt-3 text-gray-500 dark:text-gray-300">Sign in to access your account</p>
                </div> 
                <div className="mt-8">
                  <form onSubmit={handleSubmit}>
                    <div>
                      <label htmlFor="name" className="block mb-2 text-sm text-gray-600 dark:text-gray-200">Username</label>
                      <input value={name} id="name" onChange={e => setName(e.target.value)} placeholder="Name" className="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-lg dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                    </div> 
                    <div className="mt-6">
                      <div className="flex justify-between mb-2">
                          <label htmlFor="password" className="text-sm text-gray-600 dark:text-gray-200">Password</label>
                          <a href="#" className="text-sm text-gray-400 focus:text-blue-500 hover:text-blue-500 hover:underline">Forgot password?</a>
                      </div> 
                      <input type="password" id="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" className="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-lg dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40" />
                    </div> 
                    <div className="mt-6">
                      <button type="submit" className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-300 transform bg-blue-500 rounded-lg hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
                          Sign in
                      </button>
                    </div> 
                  </form> 
                    {/* <p className="mt-6 text-sm text-center text-gray-400">Don't have an account yet? <a href="#" className="text-blue-500 focus:outline-none focus:underline hover:underline">Sign up</a>.</p> */}
                </div>
              </div>
            </div>
          </div>
        </div>
      </> 
    );
  };
  
  export default Login;
  
  
  
  const Unauthorized = () => {
      return (
        <div className="flex flex-col items-center justify-center h-screen text-center">
          <h1 className="text-4xl font-bold text-red-600">403</h1>
          <p className="mt-4 text-xl">You are not authorized to view this page.</p>
        </div>
      );
    };
    
    export default Unauthorized;