Don't know the merge

package.json

@@ -11,11 +11,13 @@
   "dependencies": {
     "@heroicons/react": "2.0.18",
     "@material-tailwind/react": "2.1.4",
+    "@reduxjs/toolkit": "^2.5.0",
     "apexcharts": "3.44.0",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-apexcharts": "1.4.1",
     "react-dom": "18.2.0",
+    "react-redux": "^9.2.0",
     "react-router-dom": "6.17.0"
   },
   "devDependencies": {
@@ -29,4 +31,4 @@
     "tailwindcss": "3.3.4",
     "vite": "4.5.0"
   }
-}
+}

src/data/statistics-cards-data.js

@@ -9,8 +9,8 @@ export const statisticsCardsData = [
   {
     color: "gray",
     icon: BanknotesIcon,
-    title: "Today's Money",
-    value: "$53k",
+    title: "Attendance Today",
+    value: "15",
     footer: {
       color: "text-green-500",
       value: "+55%",
@@ -20,8 +20,8 @@ export const statisticsCardsData = [
   {
     color: "gray",
     icon: UsersIcon,
-    title: "Today's Users",
-    value: "2,300",
+    title: "Active Projects",
+    value: "3",
     footer: {
       color: "text-green-500",
       value: "+3%",
@@ -31,8 +31,8 @@ export const statisticsCardsData = [
   {
     color: "gray",
     icon: UserPlusIcon,
-    title: "New Clients",
-    value: "3,462",
+    title: "New Commits Today",
+    value: "17",
     footer: {
       color: "text-red-500",
       value: "-2%",
@@ -42,14 +42,38 @@ export const statisticsCardsData = [
   {
     color: "gray",
     icon: ChartBarIcon,
-    title: "Sales",
-    value: "$103,430",
+    title: "Pull Requests",
+    value: "23",
     footer: {
       color: "text-green-500",
       value: "+5%",
       label: "than yesterday",
     },
   },
+
+  {
+    color: "gray",
+    icon: BanknotesIcon,
+    title: "Work Items",
+    value: "15",
+    footer: {
+      color: "text-green-500",
+      value: "+55%",
+      label: "than last week",
+    },
+  },
+
+  {
+    color: "gray",
+    icon: BanknotesIcon,
+    title: "Available Resource",
+    value: "15",
+    footer: {
+      color: "text-green-500",
+      value: "+55%",
+      label: "than last week",
+    },
+  },
 ];
 
 export default statisticsCardsData;

src/data/statistics-charts-data.js

@@ -107,15 +107,15 @@ const completedTasksChart = {
 export const statisticsChartsData = [
   {
     color: "white",
-    title: "Website View",
+    title: "QA Review",
     description: "Last Campaign Performance",
     footer: "campaign sent 2 days ago",
     chart: websiteViewsChart,
   },
   {
     color: "white",
-    title: "Daily Sales",
-    description: "15% increase in today sales",
+    title: "Daily Commits",
+    description: "15% decrease in today sales",
     footer: "updated 4 min ago",
     chart: dailySalesChart,
   },

src/layouts/auth.jsx

@@ -5,7 +5,7 @@ import {
   UserPlusIcon,
   ArrowRightOnRectangleIcon,
 } from "@heroicons/react/24/solid";
-import { Navbar, Footer } from "@/widgets/layout";
+///import { Navbar, Footer } from "@/widgets/layout";
 import routes from "@/routes";
 
 export function Auth() {

src/layouts/dashboard.jsx

@@ -43,9 +43,9 @@ export function Dashboard() {
               ))
           )}
         </Routes>
-        <div className="text-blue-gray-600">
+        {/* <div className="text-blue-gray-600">
           <Footer />
-        </div>
+        </div> */}
       </div>
     </div>
   );

src/main.jsx

@@ -16,13 +16,17 @@ import { BrowserRouter } from "react-router-dom";
 import { ThemeProvider } from "@material-tailwind/react";
 import { MaterialTailwindControllerProvider } from "@/context";
 import "../public/css/tailwind.css";
+import { Provider } from "react-redux";
+import { store } from "./store/store";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <BrowserRouter>
       <ThemeProvider>
         <MaterialTailwindControllerProvider>
-          <App />
+          <Provider store={store}>
+            <App />
+          </Provider>
         </MaterialTailwindControllerProvider>
       </ThemeProvider>
     </BrowserRouter>

src/pages/dashboard/commits.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+///import { useFetchProjectsQuery, useFetchRepositoriesQuery, useFetchCommitsQuery } from '@/store/services/azure-api-service';
+
+import { useFetchProjectsQuery } from "@/store/services/azure-api-service";
+
+const CommitList = () => {
+    const { data: projects } = useFetchProjectsQuery();
+    const [selectedProject, setSelectedProject] = useState < string | null > (null);
+
+    //   const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    //     setSelectedProject(event.target.value);
+    //   };
+
+
+    return (
+        <div>
+            <h1>Azure Commits</h1>
+
+            <label>
+                Select Project:
+                <select
+                    value={selectedProject || ''}
+                // onChange={(e) => setSelectedProject(e.target.value)}
+                >
+                    <option value="">-- Select a Project --</option>
+                    {projects?.map((project) => (
+                        <option key={project.id} value={project.name}>
+                            {project.name}
+                        </option>
+                    ))}
+                </select>
+            </label>
+
+
+            {/* Loading States */}
+            {(isLoadingProjects) && (
+                <p>Loading...</p>
+            )}
+        </div>
+    );
+};
+
+export default CommitList;

src/pages/dashboard/home.jsx

@@ -126,11 +126,10 @@ export function Home() {
               <tbody>
                 {projectsTableData.map(
                   ({ img, name, members, budget, completion }, key) => {
-                    const className = `py-3 px-5 ${
-                      key === projectsTableData.length - 1
-                        ? ""
-                        : "border-b border-blue-gray-50"
-                    }`;
+                    const className = `py-3 px-5 ${key === projectsTableData.length - 1
+                      ? ""
+                      : "border-b border-blue-gray-50"
+                      }`;
 
                     return (
                       <tr key={name}>
@@ -154,9 +153,8 @@ export function Home() {
                                 alt={name}
                                 size="xs"
                                 variant="circular"
-                                className={`cursor-pointer border-2 border-white ${
-                                  key === 0 ? "" : "-ml-2.5"
-                                }`}
+                                className={`cursor-pointer border-2 border-white ${key === 0 ? "" : "-ml-2.5"
+                                  }`}
                               />
                             </Tooltip>
                           ))}
@@ -201,7 +199,7 @@ export function Home() {
             className="m-0 p-6"
           >
             <Typography variant="h6" color="blue-gray" className="mb-2">
-              Orders Overview
+              Backlog Tasks Overview
             </Typography>
             <Typography
               variant="small"
@@ -219,11 +217,10 @@ export function Home() {
               ({ icon, color, title, description }, key) => (
                 <div key={title} className="flex items-start gap-4 py-3">
                   <div
-                    className={`relative p-1 after:absolute after:-bottom-6 after:left-2/4 after:w-0.5 after:-translate-x-2/4 after:bg-blue-gray-50 after:content-[''] ${
-                      key === ordersOverviewData.length - 1
-                        ? "after:h-0"
-                        : "after:h-4/6"
-                    }`}
+                    className={`relative p-1 after:absolute after:-bottom-6 after:left-2/4 after:w-0.5 after:-translate-x-2/4 after:bg-blue-gray-50 after:content-[''] ${key === ordersOverviewData.length - 1
+                      ? "after:h-0"
+                      : "after:h-4/6"
+                      }`}
                   >
                     {React.createElement(icon, {
                       className: `!w-5 !h-5 ${color}`,

src/pages/dashboard/members.jsx

@@ -0,0 +1,94 @@
+import {
+    Card,
+    CardHeader,
+    CardBody,
+    Typography,
+    Avatar,
+    Chip,
+    Tooltip,
+    Progress,
+} from "@material-tailwind/react";
+
+import { useFetchUsersQuery } from "@/store/services/azure-organization-service";
+import { data } from "autoprefixer";
+
+export function Members() {
+    const { data: users, error, isLoading } = useFetchUsersQuery();
+
+    if (isLoading) return <p>Loading users...</p>;
+    if (error) return <p>Something went wrong! {JSON.stringify(error)}</p>;
+
+    return (
+        <div>
+            <h1>Azure DevOps Users</h1>
+            <ul>
+                {users?.map((user) => (
+                    <li key={user.id}>
+                        {user.displayName} ({user.principalName})
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+
+    const className = `py-3 px-5 border-b border-blue-gray-50`;
+    return (
+        <Card className="mt-10">
+            <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
+                <Typography variant="h6" color="white">
+                    Members Zindigi
+                </Typography>
+            </CardHeader>
+
+            <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
+                <table className="w-full min-w-[640px] table-auto">
+                    <thead>
+                        <tr>
+                            {["user", "email"].map((el) => (
+                                <th
+                                    key={el}
+                                    className="border-b border-blue-gray-50 py-3 px-5 text-left"
+                                >
+                                    <Typography
+                                        variant="small"
+                                        className="text-[11px] font-bold uppercase text-blue-gray-400"
+                                    >
+                                        {el}
+                                    </Typography>
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {members?.map((member) => (
+
+                            <tr>
+                                <td className={className}>
+                                    <div className="flex items-center gap-4">
+                                        {/* <Avatar src={img} alt={project.name} size="sm" /> */}
+                                        <Typography
+                                            variant="small"
+                                            color="blue-gray"
+                                            className="font-bold"
+                                        >
+                                            {member.principalName} - {member.displayName}
+                                        </Typography>
+                                    </div>
+                                </td>
+                                <td className={className}>
+                                    <Typography
+                                        as="a"
+                                        href="#"
+                                        className="text-xs font-semibold text-blue-gray-600"
+                                    >
+                                        {member.emailAddress}
+                                    </Typography>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </CardBody>
+        </Card>
+    );
+}