Login Page

src/App.tsx

@@ -3,27 +3,36 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Sidebar from "./userComponents/Sidebar";
 import Navbar from "./userComponents/Navbar";
 import Dashboard from "./pages/Dashboard";
+import RegisterUsers from "./pages/Manage-users/RegisterUsers";
+import DefaultLayout from "./DefaultLayout";
 
 const App = () => {
   return (
-    <Router>
-      <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
-        <div style={{ flexShrink: 0, width: "280px" }}>
-          <Sidebar />
-        </div>
+    <div>
+      <DefaultLayout />
 
-        <div style={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
-          <div style={{ flexShrink: 0 }}>
-            <Navbar />
-          </div>
-          <div style={{ flexGrow: 1, overflowY: "auto" }}>
-            <Routes>
-              <Route path="/" element={<Dashboard />} />
-            </Routes>
-          </div>
-        </div>
-      </div>
-    </Router>
+      
+    </div>
+
+    // <Router>
+    //   <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
+    //     <div style={{ flexShrink: 0, width: "280px" }}>
+    //       <Sidebar />
+    //     </div>
+
+    //     <div style={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
+    //       <div style={{ flexShrink: 0 }}>
+    //         <Navbar />
+    //       </div>
+    //       <div style={{ flexGrow: 1, overflowY: "auto" }}>
+    //         <Routes>
+    //           <Route path="/" element={<Dashboard />} />
+    //           <Route path="/manage-users/register-users" element={<RegisterUsers/>}/>
+    //         </Routes>
+    //       </div>
+    //     </div>
+    //   </div>
+    // </Router>
   );
 };
 

src/DefaultLayout.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Sidebar from "./userComponents/Sidebar";
+import Navbar from "./userComponents/Navbar";
+import Dashboard from "./pages/Dashboard";
+import RegisterUsers from "./pages/Manage-users/RegisterUsers";
+
+const DefaultLayout = () => {
+  return (
+    <Router>
+      <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
+        <div style={{ flexShrink: 0, width: "280px" }}>
+          <Sidebar />
+        </div>
+
+        <div style={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
+          <div style={{ flexShrink: 0 }}>
+            <Navbar />
+          </div>
+          <div style={{ flexGrow: 1, overflowY: "auto" }}>
+            <Routes>
+              <Route path="/" element={<Dashboard />} />
+              <Route path="/manage-users/register-users" element={<RegisterUsers/>}/>
+            </Routes>
+          </div>
+        </div>
+      </div>
+    </Router>
+  );
+};
+
+export default DefaultLayout;

src/index.css

@@ -0,0 +1,33 @@
+/* [
+    {
+      "id": 1,
+      "name": "Laptop",
+      "category": "Electronics",
+      "price": 999.99
+    },
+    {
+      "id": 2,
+      "name": "Coffee Maker",
+      "category": "Home Appliances",
+      "price": 49.99
+    },
+    {
+      "id": 3,
+      "name": "Desk Chair",
+      "category": "Furniture",
+      "price": 150.0
+    },
+    {
+      "id": 4,
+      "name": "Smartphone",
+      "category": "Electronics",
+      "price": 799.99
+    },
+    {
+      "id": 5,
+      "name": "Headphones",
+      "category": "Accessories",
+      "price": 199.99
+    }
+  ]
+   */

src/main.tsx

@@ -3,11 +3,15 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 import { Provider } from "./components/ui/provider.tsx";
+import { Provider as ReduxProvider } from "react-redux";
+import store from "./store.ts";
 
 createRoot(document.getElementById("root")!).render(
-  <Provider>
-    <StrictMode>
-      <App />
-    </StrictMode>
-  </Provider>
+  <ReduxProvider store={store}>
+    <Provider>
+      <StrictMode>
+        <App />
+      </StrictMode>
+    </Provider>
+  </ReduxProvider>
 );

src/pages/Manage-users/RegisterUsers.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { useGetStaticJsonQuery } from "../../redux/apiSlice";
+import { Box, HStack, Input, Kbd, Text, VStack } from "@chakra-ui/react";
+import { InputGroup } from "../../components/ui/input-group";
+import { LuSearch } from "react-icons/lu";
+import UserTable from "../../userComponents/UserTable";
+
+const RegisterUsers = () => {
+  const { data, error, isLoading } = useGetStaticJsonQuery();
+
+  if (isLoading) return <p>Loading...</p>;
+
+  if (error) {
+    return <p>An error occurred: {error.message || "Unable to fetch data."}</p>;
+  }
+
+  if (!data || data.length === 0) {
+    return <p>No data available.</p>;
+  }
+
+  console.log(data);
+
+  return (
+    <Box bgColor="#FFF" h="100vh" p={4} color="#00000">
+      <VStack gap={10} >
+        <HStack justifyContent="space-between" w="100%">
+          <Text color="black" fontWeight="700" fontSize="lg">
+            Register Users
+          </Text>
+          <InputGroup
+            bgColor="#EEEEEE"
+            color="black"
+            flex="1"
+            startElement={<LuSearch />}
+            maxWidth="362.5px"
+            borderRadius="50px"
+          >
+            <Input
+              placeholder="Search contacts"
+              border="none"
+              _focus={{
+                boxShadow: "none",
+                border: "none",
+              }}
+            />
+          </InputGroup>
+        </HStack>
+
+            <UserTable items={data} />
+      </VStack>
+    </Box>
+  );
+};
+
+export default RegisterUsers;

src/redux/apiSlice.ts

@@ -1,14 +1,13 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
-
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 export const apiSlice = createApi({
-    reducerPath: "api",
-    baseQuery: fetchBaseQuery = ({ baseUrl: "src/utlis/regesterUser.json" }),
-    endpoints: (builder) => ({
-        getStaticJson: builder.query({
-            query: () => 'regesterUser.json'
-        }),
-    })
-})
+  reducerPath: 'api', 
+  baseQuery: fetchBaseQuery({ baseUrl: '/src/utlis/' }), 
+  endpoints: (builder) => ({
+    getStaticJson: builder.query({
+      query: () => 'regesterUser.json',
+    }),
+  }),
+});
 
-export const { getStaticJson } = apiSlice
+export const { useGetStaticJsonQuery } = apiSlice;

src/userComponents/UserTable.tsx

@@ -1,10 +1,10 @@
 import { Table } from "@chakra-ui/react";
 
-const Demo = () => {
+const UserTable = ({ items }) => {
   return (
     <Table.Root size="sm">
       <Table.Header>
-        <Table.Row>
+        <Table.Row bgColor="#02A0A0">
           <Table.ColumnHeader>Product</Table.ColumnHeader>
           <Table.ColumnHeader>Category</Table.ColumnHeader>
           <Table.ColumnHeader textAlign="end">Price</Table.ColumnHeader>
@@ -12,9 +12,16 @@ const Demo = () => {
       </Table.Header>
       <Table.Body>
         {items.map((item) => (
-          <Table.Row key={item.id}>
-            <Table.Cell>{item.name}</Table.Cell>
-            <Table.Cell>{item.category}</Table.Cell>
+          <Table.Row
+            key={item.id}
+            bgColor="#ffff"
+            color="black"
+            borderWidth="1px, 0px, 1px, 0px"
+            borderStyle="solid"
+            borderColor="#00000033"
+          >
+            <Table.Cell borderColor="#00000033" >{item.name}</Table.Cell>
+            <Table.Cell borderColor="#00000033" >{item.category}</Table.Cell>
             <Table.Cell textAlign="end">{item.price}</Table.Cell>
           </Table.Row>
         ))}
@@ -23,10 +30,4 @@ const Demo = () => {
   );
 };
 
-const items = [
-  { id: 1, name: "Laptop", category: "Electronics", price: 999.99 },
-  { id: 2, name: "Coffee Maker", category: "Home Appliances", price: 49.99 },
-  { id: 3, name: "Desk Chair", category: "Furniture", price: 150.0 },
-  { id: 4, name: "Smartphone", category: "Electronics", price: 799.99 },
-  { id: 5, name: "Headphones", category: "Accessories", price: 199.99 },
-];
+export default UserTable;