added refine integration and tailwind config theme

package.json

@@ -20,12 +20,17 @@
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@refinedev/core": "^4.53.0",
+    "@refinedev/kbar": "^1.3.12",
+    "@refinedev/mui": "^5.19.0",
+    "@refinedev/simple-rest": "^5.0.8",
     "antd": "^5.18.2",
     "axios": "^1.7.2",
     "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.25.1",
+    "react-toastify": "^10.0.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/App.jsx

@@ -1,48 +1,56 @@
-import React, { useContext } from 'react';
+import React from "react";
-import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
-import { Layout } from 'antd';
+import { Layout } from "antd";
-import LoginPage from './components/Auth/LoginPage';
+import LoginPage from "./components/Auth/LoginPage";
-import ResetPasswordRequest from './components/Auth/ResetPasswordRequest';
+import ResetPasswordRequest from "./components/Auth/ResetPasswordRequest";
-import AdminDashboard from './components/admin/AdminDashboard';
+import AdminDashboard from "./pages/AdminDashboard";
-import EmployeeDashboard from './components/employee/EmployeeDashboard';
+import EmployeeDashboard from "./pages/EmployeeDashboard";
-import CustomerList from './components/customer/CustomerList';
+import CustomerList from "./components/customer/CustomerList";
-import AddCustomer from './components/customer/AddCustomer';
+import AddCustomer from "./components/customer/AddCustomer";
-import Sidebar from './components/sidebar/Sidebar';
+import Sidebar from "./components/sidebar/Sidebar";
-import CustomerMeasurements from './components/customer/CustomerMeasurements';
+import CustomerMeasurements from "./components/customer/CustomerMeasurements";
-import { AuthProvider, AuthContext } from './contexts/AuthContext';
+import { AuthProvider, AuthContext } from "./contexts/AuthContext";
-import EmployeeList from './components/admin/EmployeeList';
+import EmployeeList from "./components/admin/EmployeeList";
-import AddEmployee from './components/admin/AddEmployee';
+import AddEmployee from "./components/admin/AddEmployee";
-import EmployeeProfile from './components/admin/EmployeeProfile';
+import EmployeeProfile from "./components/admin/EmployeeProfile";
+import { Refine } from "@refinedev/core";
+import { RefineKbarProvider } from "@refinedev/kbar";
+import { ToastContainer, toast } from "react-toastify"; 
+import 'react-toastify/dist/ReactToastify.css'; 
 
 const { Content } = Layout;
 
 const App = () => {
-  const { user } = { name: 'Suraj' }; // useContext(AuthContext);
+  const { user } = { name: "Suraj" }; // useContext(AuthContext);
 
   return (
+    <Router>
+      <RefineKbarProvider>
+        <Refine>
+          <AuthProvider>
             <div className="min-h-screen flex w-full">
               <Content className="flex-1 text-white">
-          <AuthProvider>
-          <Router>
                 <Routes>
                   <Route exact path="/" element={<LoginPage />} />
                   <Route path="/reset-password" element={<ResetPasswordRequest />} />
-                  <Route path="/employee/home" element={<EmployeeDashboard />} /> {/* Add HomePage route */}
+                  <Route path="/employee/home" element={<EmployeeDashboard />} />
                   <Route path="/admin" element={<PrivateRoute><AdminDashboard /></PrivateRoute>} />
                   <Route path="/employee" element={<PrivateRoute><EmployeeDashboard /></PrivateRoute>} />
                   <Route path="/customers" element={<PrivateRoute><CustomerList /></PrivateRoute>} />
                   <Route path="/add-customer" element={<PrivateRoute><AddCustomer /></PrivateRoute>} />
                   <Route path="/employee/create-order" element={<CustomerList />} />
                   <Route path="/measurements" element={<CustomerMeasurements />} />
-                  <Route path="employees" element={<PrivateRoute><EmployeeList /></PrivateRoute>} />
+                  <Route path="/employees" element={<PrivateRoute><EmployeeList /></PrivateRoute>} />
                   <Route path="/add-employee" element={<PrivateRoute><AddEmployee /></PrivateRoute>} />
                   <Route path="/employee-profile" element={<PrivateRoute><EmployeeProfile /></PrivateRoute>} />
                 </Routes>
-            </Router>
-    </AuthProvider>
               </Content>
             </div>
-      
+          </AuthProvider>
+        </Refine>
+      </RefineKbarProvider>
+      <ToastContainer /> {/* Added ToastContainer for displaying notifications */}
+    </Router>
   );
 };
 

src/components/Auth/LoginPage.jsx

@@ -73,7 +73,7 @@ const LoginPage = () => {
               className="input-field"
             />
             <div className="forgot-password-container">
-              <a href="/reset-password">Forgot password?</a>
+              <a href="/reset-password">forgot password?</a>
             </div>
             <button type="submit" className="login-button">
               login

src/components/Auth/ResetPasswordRequest.jsx

@@ -21,8 +21,8 @@ const ResetPasswordRequest = () => {
     <div className="flex flex-row min-h-screen justify-center items-center">
       <div className="reset-request-page flex items-center justify-center min-h-screen w-full md:w-1/2 lg:w-1/3 p-4">
         <div className="w-full">
-          <h1>Reset Password</h1>
+          <h1>reset password</h1>
-          <p>Enter your email to receive password reset instructions.</p>
+          <p>enter your email to receive password reset instructions.</p>
           {message && <p className="message">{message}</p>}
           <form onSubmit={handleResetRequest} className="space-y-4">
             <label htmlFor="email" className="block"></label>
@@ -37,7 +37,7 @@ const ResetPasswordRequest = () => {
               className="input-field"
             />
             <button type="submit" className="reset-button">
-              Send Reset Instructions
+              send reset instructions
             </button>
           </form>
         </div>

src/components/ExampleComponent.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { toast } from "react-toastify";
+
+const ExampleComponent = () => {
+  const handleClick = () => {
+    toast.success("This is a success notification!");
+  };
+
+  return <button onClick={handleClick}>Show Notification</button>;
+};
+
+export default ExampleComponent;

src/components/admin/AddEmployee.jsx

@@ -296,5 +296,4 @@ const AddEmployee = () => {
     </div>
   );
 };
-
 export default AddEmployee;

src/components/common/button.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Button.css'; // Import the CSS file
+
+const Button = ({ onClick, children, style, type = 'button' }) => {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      className="custom-button"
+      style={style}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/pages/AdminDashboard.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Sidebar from '../sidebar/Sidebar';
+import Sidebar from '../components/sidebar/Sidebar';
-import '../../styles/AdminDashboard.css';
+import '../styles/AdminDashboard.css';
 
 const AdminDashboard = () => {
   const navigate = useNavigate();
@@ -23,29 +23,33 @@ const AdminDashboard = () => {
       <Sidebar />
       <div className="dashboard-content">
         <header className="dashboard-header">
-          <h1 className="header-title">Admin Dashboard</h1>
+          <h1 className="header-title">admin dashboard</h1>
-          <p className="welcome-text">Welcome back, {userName}</p>
+          <p className="welcome-text">welcome back, {userName}</p>
         </header>
         <main className="dashboard-main">
-          <div className="dashboard-buttons">
+          <div className="dashboard-main-content">
-            <img src="path_to_image" alt="Dashboard Graphic" className="dashboard-image" />
+            <img
+              src="path_to_image"
+              alt="Dashboard Graphic"
+              className="dashboard-image"
+            />
             <button
               className="btn-primary"
               onClick={() => handleClick('')}
             >
-              View Orders
+              view orders
             </button>
             <button
               className="btn-primary"
               onClick={() => handleClick('/employees')}
             >
-              View Employees
+              view employees
             </button>
             <button
               className="btn-primary"
               onClick={() => handleClick('')}
             >
-              View Customers
+              view customers
             </button>
           </div>
         </main>

src/pages/EmployeeDashboard.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import Sidebar from '../sidebar/Sidebar';
+import Sidebar from '../components/sidebar/Sidebar';
-import '../../styles/EmployeeDashboard.css'; 
+// import '../../styles/EmployeeDashboard.css'; 
 
 const classNames = {
   container: 'dashboard-container',
@@ -39,7 +39,7 @@ const EmployeeDashboard = () => {
             <h1 className={classNames.headerTitle}>Home</h1>
           </div>
           <div>
-            <p className={classNames.welcomeText}>Welcome back, {userName}</p>
+            <p className={classNames.welcomeText}>welcome back, {userName}</p>
           </div>
         </header>
         <main className={classNames.main}>
@@ -49,19 +49,19 @@ const EmployeeDashboard = () => {
               className={classNames.button}
               onClick={() => handleClick('/customers')}
             >
-              Create a New Order
+              create a new order
             </button>
             <button
               className={classNames.button}
               onClick={() => handleClick('')}
             >
-              View Orders
+              view orders
             </button>
             <button
               className={classNames.button}
               onClick={() => handleClick('')}
             >
-              View Customers
+              view customers
             </button>
           </div>
         </main>

src/styles/AdminDashboard.css

@@ -1,5 +1,3 @@
-/* Dashboard.css */
-
 .dashboard-container {
   display: flex;
   flex-direction: row;
@@ -40,9 +38,9 @@
   padding: 1.5rem;
 }
 
-  .dashboard-buttons {
+.dashboard-main-content {
   width: 100%;
-    max-width: 48rem;
+  max-width: 768px;
   text-align: center;
 }
 
@@ -60,10 +58,9 @@
   border-radius: 0.375rem;
   font-weight: 600;
   margin-bottom: 1rem;
-    transition: background-color 0.3s ease;
+  cursor: pointer;
 }
 
 .btn-primary:hover {
   background-color: #154676;
 }
-  

src/styles/EmployeeDashboard.css

@@ -64,4 +64,3 @@
 .btn-primary:hover {
   background-color: #154676;
 }
-  

tailwind.config.cjs

@@ -1,10 +1,36 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
+    './src/**/*.{html,js,jsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#0e355b',
+        'primary-dark': '#154676',
+        secondary: '#ffffff',
+        'primary-text': '#0e355b',
+        'secondary-text': '#4b5563',
+        'button-text': '#d1d5db',
+      },
+      fontFamily: {
+        sans: ['"Nunito Sans"', 'sans-serif'],
+      },
+      fontSize: {
+        base: '14px',
+        'h1': '24px',
+        'p': '16px',
+        'input': '16px',
+        'button': '18px',
+      },
+      screens: {
+        'sm': '640px',   
+        'md': '768px',   
+        'lg': '1024px',  
+        'xl': '1280px',  
+        '2xl': '1536px', 
+      },
+    },
   },
   plugins: [],
-}
+};

vite.config.js

@@ -1,7 +1,12 @@
-import { defineConfig } from 'vite'
+// vite.config.js
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
+});