diff --git a/src/Pages/Dashboard/AgencyName.tsx b/src/Pages/Dashboard/AgencyName.tsx index 9941623..edfa9a0 100644 --- a/src/Pages/Dashboard/AgencyName.tsx +++ b/src/Pages/Dashboard/AgencyName.tsx @@ -1,61 +1,68 @@ -import { Box, HStack, Image, Input, Stack, Text } from "@chakra-ui/react"; -import React, { useState, useEffect } from "react"; +import { + Box, + HStack, + // Image, Input, Stack, + Text +} from "@chakra-ui/react"; +// import React, { useState, useEffect } from "react"; import { Button } from "../../components/ui/button"; -import { IoAddSharp } from "react-icons/io5"; -import delateIcon from "../../assets/deleteIcon.png"; -import { FaClockRotateLeft } from "react-icons/fa6"; +// import { IoAddSharp } from "react-icons/io5"; +// import delateIcon from "../../assets/deleteIcon.png"; +// import { FaClockRotateLeft } from "react-icons/fa6"; +import { Link } from "react-router-dom"; +import { AgencyList } from "../../Redux/Service/dashBoard"; -interface Todo { - id: number; - text: string; - completed: boolean; - timestamp: string; -} +// interface Todo { +// id: number; +// text: string; +// completed: boolean; +// timestamp: string; +// } -const AgencyName: React.FC = () => { - const [todos, setTodos] = useState([]); - const [input, setInput] = useState(""); - - - const getCurrentTime = () => { - const now = new Date(); - return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); - }; +const AgencyName = ({ agencyList }: { agencyList: AgencyList }) => { + // const [todos, setTodos] = useState([]); + // const [input, setInput] = useState(""); - const addTodo = () => { - if (input.trim() === "") return; - setTodos([...todos, { id: Date.now(), text: input, completed: false, timestamp: getCurrentTime() }]); - setInput(""); - }; + // const getCurrentTime = () => { + // const now = new Date(); + // return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); + // }; + + + // const addTodo = () => { + // if (input.trim() === "") return; + // setTodos([...todos, { id: Date.now(), text: input, completed: false, timestamp: getCurrentTime() }]); + // setInput(""); + // }; // Delete a task - const deleteTodo = (id: number) => { - setTodos(todos.filter((todo) => todo.id !== id)); - }; + // const deleteTodo = (id: number) => { + // setTodos(todos.filter((todo) => todo.id !== id)); + // }; - useEffect(() => { - const savedTodos = localStorage.getItem("todos"); - if (savedTodos) { - setTodos(JSON.parse(savedTodos)); - } - }, []); // Runs only on mount + // useEffect(() => { + // const savedTodos = localStorage.getItem("todos"); + // if (savedTodos) { + // setTodos(JSON.parse(savedTodos)); + // } + // }, []); // Runs only on mount - // 🔹 Save todos to localStorage whenever they change - useEffect(() => { - if (todos.length > 0) { - localStorage.setItem("todos", JSON.stringify(todos)); - } - }, [todos]); // Runs when `todos` changes + // // 🔹 Save todos to localStorage whenever they change + // useEffect(() => { + // if (todos.length > 0) { + // localStorage.setItem("todos", JSON.stringify(todos)); + // } + // }, [todos]); // Runs when `todos` changes return ( - Add Agency Name + Agency List - */} + - setInput(e.target.value)} @@ -76,14 +92,14 @@ const AgencyName: React.FC = () => { w={"100%"} p={2} mb={4} - /> - {todos.map((todo) => ( + /> */} + {agencyList?.data.map((todo) => ( - {todo.text} - + {todo.name} + {/* - - {todo.timestamp} + + {todo.timestamp} deleteTodo(todo.id)} @@ -93,7 +109,7 @@ const AgencyName: React.FC = () => { > - + */} ))} diff --git a/src/Pages/Dashboard/Dashboard.tsx b/src/Pages/Dashboard/Dashboard.tsx index f669ef3..04bcc07 100644 --- a/src/Pages/Dashboard/Dashboard.tsx +++ b/src/Pages/Dashboard/Dashboard.tsx @@ -26,8 +26,31 @@ import { SelectValueText } from "../../components/ui/select"; import AgencyName from "./AgencyName"; +import { useGetAgencyListQuery, useGetFaqListQuery, useGetNewUserQuery, useGetPastUserQuery, useGetTotalUserQuery } from "../../Redux/Service/dashBoard"; +import { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; const Dashboard = () => { + const { data: totalUsers } = useGetTotalUserQuery() + const { data: pastUsers } = useGetPastUserQuery() + const { data: newUsers } = useGetNewUserQuery() + const {data: agencyList} = useGetAgencyListQuery() + const { data: faqList } = useGetFaqListQuery() + const [activeTab, setActiveTab] = useState("tab-1"); + const [totalUser, setTotalUser] = useState(null); + + console.log("data", totalUser) + + useEffect(() => { + if (activeTab === "tab-1") { + setTotalUser( pastUsers?.data) + } else if (activeTab === "tab-2") { + setTotalUser(totalUsers?.data) + } else if (activeTab === "tab-3") { + setTotalUser(newUsers?.data) + } + }, [totalUsers?.data, pastUsers?.data, newUsers?.data, activeTab]); + const frameworks = createListCollection({ items: [ { label: "Today", value: "Today" }, @@ -37,35 +60,35 @@ const Dashboard = () => { ], }); - const accItems = [ - { - value: "1", - title: "How to create new account?", - text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.", - }, - { - value: "2", - title: "How to create new account?", - text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.", - }, - { - value: "3", - title: "How to create new account?", - text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.", - }, - { - value: "4", - title: "How to create new account?", - text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.", - }, - ]; + // const accItems = [ + // { + // value: "1", + // title: "How to create new account?", + // text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.", + // }, + // { + // value: "2", + // title: "How to create new account?", + // text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.", + // }, + // { + // value: "3", + // title: "How to create new account?", + // text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.", + // }, + // { + // value: "4", + // title: "How to create new account?", + // text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.", + // }, + // ]; return ( - + - Total Users + Total Users : {totalUsers?.data?.totalUserCount ?? 0} { variant="enclosed" fitted defaultValue={"tab-1"} + value={activeTab} + onValueChange={(details) => setActiveTab(details.value)} mb={6} > @@ -89,7 +114,7 @@ const Dashboard = () => { - + {totalUser && } { > - Recruiter 2554 + Recruiter {totalUser?.past24hourRecruiterCount ?? totalUser?.totalRecruiterCount ?? totalUser?.newRecuiterCount } - Customer 1224 + Customer {totalUser?.past24hourCustomercount ?? totalUser?.totalCustomerCount ?? totalUser?.newCustomerCount} @@ -142,8 +167,8 @@ const Dashboard = () => { - - + + Faqs - {accItems.map((item, index) => ( + {faqList?.data.map((item) => ( { borderBottom={0} > - {item.title} + {item.question} - {item.text} + {item.answer} ))} - - + + {agencyList && } diff --git a/src/Redux/Service/dashBoard.ts b/src/Redux/Service/dashBoard.ts new file mode 100644 index 0000000..1135294 --- /dev/null +++ b/src/Redux/Service/dashBoard.ts @@ -0,0 +1,77 @@ +import { createApi } from "@reduxjs/toolkit/query/react"; +import { baseQueryWithReauth } from "./apiSlice"; + +export type TotalUser = { + data: { + totalRecruiterCount: number; + totalCustomerCount: string; + totalUserCount: string; + recruitersByMonth: Record; + customersByMonth: Record; + }; +}; + +export type PastUser = { + data: { + past24hourRecruiterCount: number; + past24hourCustomercount: number; + }; +}; + +export type NewUser = { + data: { + newRecuiterCount: number; + newCustomerCount: number; + newTotalUserCount: number; + }; +}; + +export type AgencyList = { + data: [ + { + id: number; + name: string; + created_at: string; + is_active: boolean + } + ]; +}; + +export type FaqList = { + data: [ + { + id: number; + faqs_xid: number; + language_master_xid: number; + question: string; + answer: string; + is_active: boolean + } + ]; +}; + + +export const dashBoard = createApi({ + reducerPath: "dashBoard", + baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling + endpoints: (builder) => ({ + + getTotalUser: builder.query({ query: () => "/dashboard-total-user" }), + getPastUser: builder.query({ query: () => "/dashboard-past-user" }), + getNewUser: builder.query({ query: () => "/dashboard-new-user" }), + getAgencyList: builder.query({ query: () => "/dashboard-agency-list" }), + getFaqList: builder.query({ query: () => "/dashboard-faq-list" }), + + + + + }), +}); + +export const { + useGetTotalUserQuery, + useGetPastUserQuery, + useGetNewUserQuery, + useGetAgencyListQuery, + useGetFaqListQuery, +} = dashBoard; diff --git a/src/Redux/Store.tsx b/src/Redux/Store.tsx index 340ad1b..15a5cbe 100644 --- a/src/Redux/Store.tsx +++ b/src/Redux/Store.tsx @@ -23,6 +23,7 @@ import { workspaceMode } from "./Service/workspace.mode"; import { jobStatus } from "./Service/job.status"; import { managePosts } from "./Service/manage.post.service"; import { registerUser } from "./Service/manage.user"; +import { dashBoard } from "./Service/dashBoard"; export const store = configureStore({ reducer: { @@ -49,6 +50,7 @@ export const store = configureStore({ [jobStatus.reducerPath]: jobStatus.reducer, [managePosts.reducerPath]: managePosts.reducer, [registerUser.reducerPath]: registerUser.reducer, + [dashBoard.reducerPath]: dashBoard.reducer, auth: authReducer, }, middleware: (getDefaultMiddleware) => @@ -76,6 +78,7 @@ export const store = configureStore({ jobStatus.middleware, managePosts.middleware, registerUser.middleware, + dashBoard.middleware, ), }); diff --git a/src/components/Charts/SemiDoughnutChart.tsx b/src/components/Charts/SemiDoughnutChart.tsx index ce03b83..5d9be43 100644 --- a/src/components/Charts/SemiDoughnutChart.tsx +++ b/src/components/Charts/SemiDoughnutChart.tsx @@ -11,19 +11,35 @@ import { FaUser } from "react-icons/fa"; // ✅ Register required components ChartJS.register(ArcElement, Tooltip, Legend); -const SemiDoughnutChart = () => { +const SemiDoughnutChart = ({ totalUser }: { totalUser: any }) => { + const dataSource = totalUser ?? {} + + const recruiterCount = + dataSource.past24hourRecruiterCount ?? + dataSource.totalRecruiterCount ?? + dataSource.newRecruiterCount ?? + 0; + + const customerCount = + dataSource.past24hourCustomercount ?? + dataSource.totalCustomerCount ?? + dataSource.newCustomercount ?? + 0; + + + // 📊 Chart Data const data = { labels: ["Recruiter", "Customer"], datasets: [ { - data: [2554, 2800], // Values + data: [recruiterCount, customerCount], // Values backgroundColor: ["#E0E0E0", "#3D5AFE"], // Grey and Blue borderWidth: 0, // No border cutout: "90%", // Makes it a doughnut shape circumference: 270, // Semi-circle rotation: 225, // Starts from the top - + }, ], }; @@ -50,9 +66,9 @@ const SemiDoughnutChart = () => { fontSize: "20px", fontWeight: "bold", color: "#3D5AFE", - backgroundColor:'#ECEAF8', - padding:'15px', - borderRadius:'50%' + backgroundColor: '#ECEAF8', + padding: '15px', + borderRadius: '50%' }} >