Edit and view user API integrated

This commit is contained in:
rockyeverlast
2025-06-23 18:57:56 +05:30
parent 2a0517d8dc
commit b91c97c6c2
9 changed files with 339 additions and 157 deletions

View File

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.p75md0vraj"
"revision": "0.73grfmd27h8"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

View File

@@ -38,7 +38,7 @@ const frameworks = createListCollection({
],
});
function ViewManageJob() {
const [trigger, { data }] = useLazyViewJobsQuery();
const [ data ] = useLazyViewJobsQuery();
console.log(data);
@@ -46,7 +46,7 @@ function ViewManageJob() {
// trigger(id);
// };
const viewJobs = data;
// const viewJobs = data;
console.log();

View File

@@ -1,12 +1,14 @@
import { Box, HStack, Input, Text } from "@chakra-ui/react";
import { Box, HStack, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame";
import DataTable from "../../../components/DataTable";
import { Switch } from "../../../components/ui/switch";
import { InputGroup } from "../../../components/ui/input-group";
import { LuSearch } from "react-icons/lu";
import { useGetContactQuery } from "../../../Redux/Service/deactivated.account.service";
// import { InputGroup } from "../../../components/ui/input-group";
// import { LuSearch } from "react-icons/lu";
// import { useGetContactQuery } from "../../../Redux/Service/deactivated.account.service";
import { useEffect, useState } from "react";
import { Spinner } from "../../../components/Sipnner/Spinner";
import { useGetDeactivateUserQuery, useUserDeactivateToggleMutation } from "../../../Redux/Service/manage.user";
import SearchComponent from "../../../components/SearchComponent";
const tableHeadRow = [
"Sr. No",
@@ -17,8 +19,11 @@ const tableHeadRow = [
];
const DeactivatedAccounts = () => {
const { data ,isLoading} = useGetContactQuery();
const [localData, setLocalData] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const { data, isLoading, refetch } = useGetDeactivateUserQuery(currentPage);
const [localData, setLocalData] = useState<any[]>([]);
const [searchTerm, setSearchTerm] = useState("");
const [userDeactivateToggle] = useUserDeactivateToggleMutation()
useEffect(() => {
if (data) {
@@ -26,8 +31,41 @@ const DeactivatedAccounts = () => {
}
}, [data]);
const handlePageChange = (page: number) => {
setCurrentPage(page);
}
const manageUser = localData?.map((agency: any, index: number) => ({
const filteredData = localData?.filter((agency) => {
const searchLower = searchTerm.toLowerCase();
const firstName = agency.first_name?.toLowerCase().includes(searchLower);
const lastName = agency.last_name?.toLowerCase().includes(searchLower);
// const email = agency.capital?.toLowerCase().includes(searchLower);
return firstName || lastName;
});
const handleToggle = async (agencyId: number, currentStatus: string) => {
const newStatus = currentStatus === '1' ? '0' : '1';
setLocalData((prevData) =>
prevData.map((agency) =>
agency.id === agencyId ? { ...agency, is_active: newStatus } : agency
)
);
try {
await userDeactivateToggle({ id: agencyId, is_active: newStatus }).unwrap();
refetch()
} catch (error) {
console.error("Error updating privacy policy:", error);
setLocalData((prevData) =>
prevData.map((agency) =>
agency.id === agencyId ? { ...agency, is_active: currentStatus } : agency
)
);
}
}
const manageUser = filteredData?.map((agency: any, index: number) => ({
"Sr. No": index + 1,
"First Name": agency?.first_name,
"Last Name": agency?.last_name,
@@ -38,13 +76,13 @@ const DeactivatedAccounts = () => {
size={"sm"}
colorPalette={"teal"}
checked={agency.is_active === true}
// onChange={() => handleToggle(agency.id, agency.is_active ? "1" : "0")}
onChange={() => handleToggle(agency.id, agency.is_active ? "1" : "0")}
/>
</Box>
),
}));
if (isLoading) {
if (isLoading) {
return (
<MainFrame>
<Box
@@ -89,35 +127,27 @@ const DeactivatedAccounts = () => {
</Text>
<HStack>
<InputGroup
startElement={
<LuSearch
fontSize={"xs"}
style={{ position: "relative", left: "10px" }}
/>
}
color={"#000"}
>
<Input
p={4}
w={300}
bg={"#fff"}
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={"#EEEEEE"}
ps={8}
/>
</InputGroup>
<SearchComponent
value={searchTerm}
onChange={(value) => {
setSearchTerm(value);
// setCurrentPage(1);
refetch()
}}
/>
</HStack>
</HStack>
<DataTable
sortableColumns={["Name", "Registration Date "]}
tableHeadRow={tableHeadRow}
data={manageUser}
paginationData={{
current_page: data?.data.current_page || 1,
last_page: data?.data.last_page || 1,
per_page: data?.data.per_page || 10,
total: data?.data.total || 0
}}
onPageChange={handlePageChange}
/>
</Box>
</MainFrame>

View File

@@ -1,7 +1,6 @@
// import { MdOutlineRemoveRedEye } from "react-icons/md";
import { Field, Input, Span, Stack } from "@chakra-ui/react";
import { Field, Input, Stack } from "@chakra-ui/react";
import {
DialogActionTrigger,
DialogBody,
DialogCloseTrigger,
DialogContent,
@@ -15,95 +14,197 @@ import {
import { Button } from "../../../components/ui/button";
// import { TbEdit } from "react-icons/tb";
import Edit from "../../../components/ActionIcons/Edit";
import { UserData, useUpdateUserMutation } from "../../../Redux/Service/manage.user";
import { useState } from "react";
import { Toaster, toaster } from "../../../components/ui/toaster";
function EditRegisterUsers({ data, refetch }: { data: UserData, refetch: () => void }) {
const [isOpen, setIsOpen] = useState(false);
const [formData, setFormData] = useState<UserData>({
id: data?.id,
first_name: data?.first_name || '',
last_name: data?.last_name || '',
principal_type_xid: data?.principal_type_xid,
phone_number: data?.phone_number || '',
gender: data?.gender || '',
date_of_birth: data?.date_of_birth || '',
principal_type: data?.principal_type,
is_active: data?.is_active ?? true,
principle_language_links: data?.principle_language_links ?? [],
});
const [updateUser] = useUpdateUserMutation();
const handleOpenModal = () => {
setIsOpen(true);
};
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
if (formData.first_name === '' || formData.last_name === '' || formData.phone_number === '' || formData.gender === '' || formData.date_of_birth === '') {
toaster.create({
title: "Error",
description: "Input fields cannot be empty",
type: "error",
});
return;
}
const languageData = formData?.principle_language_links.map(link => link.language_xid);
const payload = {
id: formData?.id,
principal_type_xid: formData?.principal_type_xid,
principal_source_xid: formData?.id,
first_name: formData?.first_name,
last_name: formData?.last_name,
gender: formData?.gender,
date_of_birth: formData?.date_of_birth,
language_xid: languageData,
};
// console.log('payload', payload)
try {
const response = await updateUser(payload).unwrap();
if (response?.status === "success") {
toaster.create({
title: "Success",
description: "Country updated successfully",
type: "success",
});
setIsOpen(false);
refetch()
} else {
toaster.create({
title: "Error",
description: "Failed to update Country",
type: "error",
});
}
} catch (error) {
console.error("Error updating template:", error);
// alert("Failed to update template");
toaster.create({
title: "Error",
description: "Something went wrong",
type: "error",
});
}
};
function EditRegisterUsers() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Span>
<>
<DialogRoot placement="center" key={formData.id} open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
<DialogTrigger asChild>
{/* <Span>
<Edit />
</Span>
</DialogTrigger>
</Span> */}
<Button bg="transparent" color={"black"} h={"18px"} onClick={handleOpenModal}><Edit /></Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
height={"80vh"}
overflow={"scroll"}
overflowX="hidden"
p={3} // Reduced padding
bgSize={"md"}
>
<DialogHeader bg="white" p={0}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">
Edit user Accounts
</DialogTitle>
</DialogHeader>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
height={"80vh"}
overflow={"scroll"}
overflowX="hidden"
p={3} // Reduced padding
bgSize={"md"}
>
<DialogHeader bg="white" p={0}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">
Edit user Accounts
</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack py={3}>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">
First Name
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
/>
<DialogBody bg="white">
<Stack py={3}>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">
First Name
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
value={formData.first_name}
onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
/>
<Field.Label color="black" pt={1} fontSize="12px">
Last Name
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
/>
<Field.Label color="black" pt={1} fontSize="12px">
Last Name
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
value={formData.last_name}
onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
/>
<Field.Label color="black" pt={1} fontSize="12px">
Gender
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
/>
<Field.Label color="black" pt={1} fontSize="12px">
Gender
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
value={formData.gender}
onChange={(e) => setFormData({ ...formData, gender: e.target.value })}
/>
<Field.Label color="black" pt={1} fontSize="12px">
DOB
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
/>
<Field.Label color="black" pt={1} fontSize="12px">
DOB
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
value={formData.date_of_birth ? new Date(formData.date_of_birth).toLocaleDateString('en-GB').replace(/\//g, '-') : 'N/A'}
onChange={(e) => setFormData({ ...formData, date_of_birth: e.target.value })}
/>
<Field.Label color="black" pt={1} fontSize="12px">
OTP Verified
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
/>
<Field.Label color="black" pt={1} fontSize="12px">
Mobile Number
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
value={formData.phone_number || ''}
onChange={(e) => setFormData({ ...formData, phone_number: e.target.value })}
/>
<Field.Label color="black" pt={1} fontSize="12px">
<Field.Label color="black" pt={1} fontSize="12px">
Type Of User
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
value={formData.principal_type?.principal_type_title || 'N/A'}
onChange={(e) => setFormData({ ...formData, principal_type: { ...formData.principal_type, principal_type_title: e.target.value } })}
/>
{/* <Field.Label color="black" pt={1} fontSize="12px">
Language
</Field.Label>
<Input
@@ -113,20 +214,20 @@ function EditRegisterUsers() {
pl={1}
fontSize="12px"
height="30px"
/>
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter mt={5}>
<DialogActionTrigger asChild>
<Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"}>
/> */}
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter mt={5}>
<Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"} onClick={handleSubmit}>
Save
</Button>
</DialogActionTrigger>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot>
<Toaster />
</>
);
}

View File

@@ -116,13 +116,15 @@ const RegisterUsers = () => {
"DOB": agency.date_of_birth ? new Date(agency.date_of_birth).toLocaleDateString('en-GB').replace(/\//g, '-') : 'N/A',
"Type Of User": agency.principal_type?.principal_type_title || 'N/A',
// "Language": agency.principle_language_links.map(lang => lang.language_name).join(', ') || 'N/A',
"Action": (
"Action": (
<HStack justifyContent="center">
<EditRegisterUsers
// rowData={{ id: agency.id, en_name: agency.en_name, country_code: agency.country_code, phonecode: agency.phonecode, capital: agency.capital, currency: agency.currency, currency_name: agency.currency_name, currency_symbol: agency.currency_symbol }}
// refetch={refetch}
// rowData={{ id: agency.id, en_name: agency.en_name, country_code: agency.country_code, phonecode: agency.phonecode, capital: agency.capital, currency: agency.currency, currency_name: agency.currency_name, currency_symbol: agency.currency_symbol }}
// refetch={refetch}
data={agency}
refetch={refetch}
/>
<ViewRegisterUsers />
<ViewRegisterUsers data={agency} />
<Box>
<Switch
colorPalette={'teal'}

View File

@@ -9,8 +9,9 @@ import {
DialogTitle,
DialogTrigger,
} from "../../../components/ui/dialog";
import { UserData } from "../../../Redux/Service/manage.user";
function ViewRegisterUsers() {
function ViewRegisterUsers({ data }: { data: UserData }) {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
@@ -18,13 +19,13 @@ function ViewRegisterUsers() {
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: '90%', md: '400px' }}
height={'80vh'}
overflow={'scroll'}
overflowX="hidden"
p={3} // Reduced padding
bgSize={'md'}
bg={"#fff"}
w={{ base: '90%', md: '400px' }}
height={'80vh'}
overflow={'scroll'}
overflowX="hidden"
p={3} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white">
<DialogTitle alignSelf="center" color="black" fontSize="14px">
@@ -39,14 +40,24 @@ function ViewRegisterUsers() {
First Name
</Field.Label>
<Input
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
value={data?.first_name || ''}
/>
<Field.Label color="black" pt={1} fontSize="12px">
Last Name
</Field.Label>
<Input
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
bgColor="#EEEEEE"
color="black"
border="none" pl={1}
fontSize="12px" height="30px"
value={data?.last_name || ''}
/>
<Field.Label color="black" pt={1} fontSize="12px">
@@ -54,6 +65,7 @@ function ViewRegisterUsers() {
</Field.Label>
<Input
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
value={data?.gender || ''}
/>
<Field.Label color="black" pt={1} fontSize="12px">
@@ -61,21 +73,41 @@ function ViewRegisterUsers() {
</Field.Label>
<Input
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
value={data?.date_of_birth ? new Date(data.date_of_birth).toLocaleDateString('en-GB').replace(/\//g, '-') : 'N/A'}
/>
<Field.Label color="black" pt={1} fontSize="12px">
OTP Verified
Mobile Number
</Field.Label>
<Input
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
value={data?.phone_number || ''}
/>
<Field.Label color="black" pt={1} fontSize="12px">
Type Of User
</Field.Label>
<Input
bgColor="#EEEEEE"
color="black"
border="none"
pl={1}
fontSize="12px"
height="30px"
value={data?.principal_type?.principal_type_title || 'N/A'}
/>
{/* <Field.Label color="black" pt={1} fontSize="12px">
Language
</Field.Label>
<Input
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
/>
/> */}
</Field.Root>
</Stack>
</DialogBody>

View File

@@ -25,7 +25,7 @@ function AddModel({ refetch }: { refetch: VoidFunction }) {
const [userName, setUserName] = useState("");
const [dateOfBirth, setDateOfBirth] = useState("");
const [gender, setGender] = useState("");
const [ setIsOpen] = useState(false);
// const [ setIsOpen] = useState(false);
const handleSubmit = async () => {
if (
@@ -65,7 +65,7 @@ function AddModel({ refetch }: { refetch: VoidFunction }) {
type: "success",
});
refetch();
setIsOpen(false);
// setIsOpen(false);
setFirstName("");
setLastName("");
setUserName("");

View File

@@ -171,7 +171,7 @@ const SubAdmin = () => {
/>
</InputGroup>
{/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
<AddModel />
<AddModel refetch={refetch}/>
</HStack>
</HStack>
<DataTable

View File

@@ -14,7 +14,15 @@ export interface UserData {
id: number;
principal_type_title: string;
},
principle_language_links:[]
principle_language_links:{
id: number;
language_xid: number;
iam_principal_xid: number;
language: {
id: number,
language_name: string;
}
}[]
}
interface ApiResponse {
@@ -55,7 +63,7 @@ export const registerUser = createApi({
reducerPath: "registerUser",
baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
endpoints: (builder) => ({
createCountryPost: builder.mutation<PostCountry, Partial<PostCountry>>({
createUser: builder.mutation<PostCountry, Partial<PostCountry>>({
query: (data) => ({
url: "/country-add",
method: "POST",
@@ -67,13 +75,13 @@ export const registerUser = createApi({
query: (page = 1) => `/manage-user-list?page=${page}`,
}),
getCountryMasterEdit: builder.query<CountryEdit, number>({
query: (id) => `/country-edit/${id}`,
getDeactivateUser: builder.query<ApiResponse, number>({
query: (page = 1) => `/manage-user-deactivate-list?page=${page}`,
}),
updateCountry: builder.mutation({
updateUser: builder.mutation({
query: (updatedData) => ({
url: "/country-update",
url: "/manage-user-update",
method: "POST",
body: updatedData,
}),
@@ -87,6 +95,14 @@ export const registerUser = createApi({
}),
}),
userDeactivateToggle: builder.mutation({
query: ({ id, is_active }) => ({
url: `/manage-user-deactivate-status`,
method: "POST",
body: { id, is_active },
}),
}),
// deleteFaqPost: builder.mutation<{ status: string; message: string }, { id: number }>({
// query: ({ id }) => ({
// url: `/faq-delete`,
@@ -100,9 +116,10 @@ export const registerUser = createApi({
export const {
useGetManageUserQuery,
useGetCountryMasterEditQuery,
useCreateCountryPostMutation,
useUpdateCountryMutation,
useCreateUserMutation,
useUpdateUserMutation,
useUserToggleMutation,
useGetDeactivateUserQuery,
useUserDeactivateToggleMutation,
// useDeleteFaqPostMutation
} = registerUser;