Siddhesh.More/SSA-Admin-Panel
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Dashboard API integration

Browse Source
This commit is contained in:
rockyeverlast
2025-09-10 20:18:07 +05:30
parent 32ccea4917
commit 1e7b7347e4
5 changed files with 231 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/Pages/Dashboard/AgencyName.tsx
View File

@@ -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<Todo[]>([]);
const [input, setInput] = useState<string>("");
const getCurrentTime = () => {
const now = new Date();
return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
};
const AgencyName = ({ agencyList }: { agencyList: AgencyList }) => {
// const [todos, setTodos] = useState<Todo[]>([]);
// const [input, setInput] = useState<string>("");
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 (
<Box p={"10px"}>
<HStack justifyContent={"space-between"} mb={5}>
<Text fontSize={"xs"} fontWeight={500}>
Add Agency Name
Agency List
</Text>
<Button
{/* <Button
bg={"#fff"}
color={"#222222CC"}
px={3}
@@ -64,9 +71,18 @@ const AgencyName: React.FC = () => {
onClick={addTodo}
>
<IoAddSharp /> Add
</Button> */}
<Button
bg={"#fff"}
color={"#222222CC"}
px={3}
fontSize={"12px"}
h={"28px"}
>
<Link to="/master-module/agency-master">View ALL</Link>
</Button>
</HStack>
<Input
{/* <Input
type="text"
value={input}
onChange={(e) => 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) => (
<HStack key={todo.id} backgroundColor={"#fff"} rounded={5} mb={3} p={4} justifyContent={'space-between'} alignItems={'inherit'}>
<Text fontSize={'sm'} color={'#222222bd'} fontWeight={400}>{todo.text}</Text>
<Stack display={'flex'} alignItems={'end'} w={'130px'}>
<Text fontSize={'sm'} color={'#222222bd'} fontWeight={400}>{todo.name}</Text>
{/* <Stack display={'flex'} alignItems={'end'} w={'130px'}>
<Box display={'flex'} alignItems={'center'} gap={2}>
<FaClockRotateLeft fontSize={'10px'} style={{fontSize:'13px',color:'#222222bd'}} />
<Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
<FaClockRotateLeft fontSize={'10px'} style={{ fontSize: '13px', color: '#222222bd' }} />
<Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
</Box>
<Box
onClick={() => deleteTodo(todo.id)}
@@ -93,7 +109,7 @@ const AgencyName: React.FC = () => {
>
<Image w={"16px"} src={delateIcon} />
</Box>
</Stack>
</Stack> */}
</HStack>
))}
</Box>

101
src/Pages/Dashboard/Dashboard.tsx
View File

@@ -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<any>(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 (
<MainFrame>
<Box display={"flex"} p={"20px"} pe={'20px'} gap={5}>
<Box display={"flex"} p={"20px"} pe={'20px'} gap={5}>
<Box rounded={'lg'} w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
<Heading fontSize={"sm"} p={2}>
Total Users
Total Users : {totalUsers?.data?.totalUserCount ?? 0}
</Heading>
<Tabs.Root
size={"sm"}
@@ -74,6 +97,8 @@ const Dashboard = () => {
variant="enclosed"
fitted
defaultValue={"tab-1"}
value={activeTab}
onValueChange={(details) => setActiveTab(details.value)}
mb={6}
>
<Tabs.List>
@@ -89,7 +114,7 @@ const Dashboard = () => {
</Tabs.List>
</Tabs.Root>
<Box>
<SemiDoughnutChart />
{totalUser && <SemiDoughnutChart totalUser={totalUser} />}
</Box>
<Box
@@ -101,11 +126,11 @@ const Dashboard = () => {
>
<Status.Root colorPalette="blue">
<Status.Indicator />
Recruiter <Text fontWeight={500}>2554</Text>
Recruiter <Text fontWeight={500}>{totalUser?.past24hourRecruiterCount ?? totalUser?.totalRecruiterCount ?? totalUser?.newRecuiterCount }</Text>
</Status.Root>
<Status.Root colorPalette="blue">
<Status.Indicator />
Customer <Text fontWeight={500}>1224</Text>
Customer <Text fontWeight={500}>{totalUser?.past24hourCustomercount ?? totalUser?.totalCustomerCount ?? totalUser?.newCustomerCount}</Text>
</Status.Root>
</Box>
</Box>
@@ -142,8 +167,8 @@ const Dashboard = () => {
<CircularApp />
</Box>
</Box>
<Box p={"20px"} pt={0} display={"flex"} gap={5}>
<Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} p={"10px"} overflow={'auto'}>
<Box p={"20px"} pt={0} display={"flex"} gap={5}>
<Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} p={"10px"} overflow={'auto'}>
<HStack justifyContent={"space-between"} mb={5}>
<Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
<Button
@@ -153,15 +178,15 @@ const Dashboard = () => {
fontSize={"12px"}
h={"28px"}
>
View ALL
<Link to="/manage-cms/faq">View ALL</Link>
</Button>
</HStack>
<AccordionRoot collapsible defaultValue={["b"]}>
{accItems.map((item, index) => (
{faqList?.data.map((item) => (
<AccordionItem
boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
key={index}
value={item.value}
boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
key={item.id}
value={item.faqs_xid.toString()}
bg={"#fff"}
mb={2}
p={"12px"}
@@ -169,17 +194,17 @@ const Dashboard = () => {
borderBottom={0}
>
<AccordionItemTrigger fontSize={"sm"} >
{item.title}
{item.question}
</AccordionItemTrigger>
<AccordionItemContent fontSize={"xs"} color={'#222222CC'} pt={2}>
{item.text}
{item.answer}
</AccordionItemContent>
</AccordionItem>
))}
</AccordionRoot>
</Box>
<Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} overflow={'auto'}>
<AgencyName />
<Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} alignItems={'flex-start'} overflowY={'scroll'} height={'292px'}>
{agencyList && <AgencyName agencyList={agencyList}/>}
</Box>
</Box>
</MainFrame>

77
src/Redux/Service/dashBoard.ts Normal file
View File

@@ -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<string, number>;
customersByMonth: Record<string, number>;
};
};
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<TotalUser, void>({ query: () => "/dashboard-total-user" }),
getPastUser: builder.query<PastUser, void>({ query: () => "/dashboard-past-user" }),
getNewUser: builder.query<NewUser, void>({ query: () => "/dashboard-new-user" }),
getAgencyList: builder.query<AgencyList, void>({ query: () => "/dashboard-agency-list" }),
getFaqList: builder.query<FaqList, void>({ query: () => "/dashboard-faq-list" }),
}),
});
export const {
useGetTotalUserQuery,
useGetPastUserQuery,
useGetNewUserQuery,
useGetAgencyListQuery,
useGetFaqListQuery,
} = dashBoard;

3
src/Redux/Store.tsx
View File

@@ -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,
),
});

28
src/components/Charts/SemiDoughnutChart.tsx
View File

@@ -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%'
}}
>
<FaUser />