Siddhesh.More/tanami-admin-panel
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 2 Wiki Activity

merge

Browse Source
This commit is contained in:
Siddhesh More
2024-06-25 20:35:03 +05:30
parent f0189855eb
commit 39fbe2b1d5
7 changed files with 131 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -29,7 +29,7 @@
"react-router-dom": "^6.22.3",
"redux-persist": "^6.0.0",
"redux-persist-transform-encrypt": "^5.1.1",
"uuid": "^9.0.1",
"uuid": "^10.0.0",
"xlsx": "^0.18.5",
"yup": "^1.4.0"
},

10
src/Components/DataTable/DataTable.jsx
View File

@@ -110,11 +110,11 @@ const DataTable = ({
textOverflow: "ellipsis",
}}
className="web-text-small"
onClick={
i === tableHeadRow.length - 1 || i === 0
? null
: () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells
}
// onClick={
// i === tableHeadRow.length - 1 || i === 0
// ? null
// : () => navigate(`edit-sponser/${item.id}`) // Define the onClick handler for other cells
// }
>
{item[heading]}
</Td>

2
src/Components/FormField.jsx
View File

@@ -28,6 +28,7 @@ const FormField = ({
size={"sm"}
{...field}
{...props}
placeholder={label}
textAlign={arabic ? "right" : "left"}
/>
) : (
@@ -37,6 +38,7 @@ const FormField = ({
type={type}
{...field}
{...props}
placeholder={label}
textAlign={arabic ? "right" : "left"}
/>
);

1
src/Components/HeaderMain.jsx
View File

@@ -32,7 +32,6 @@ const HeaderMain = ({
}) => {
const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
console.log(colorMode);
return (
<Box

142
src/Pages/Master/Sponser/AddSponser.jsx
View File

@@ -20,24 +20,18 @@ import { TiWarning } from "react-icons/ti";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useNavigate } from "react-router-dom";
import FormField from "../../../Components/FormField";
import { v4 as uuidv4 } from "uuid";
const schema = yup.object().shape({
sponserName: yup.string().required("Sponser name is required"),
mobileNo: yup.string().required("Mobile no is required"),
sponserAddress: yup.string().required("Sponser address is required"),
bankName: yup.string().required("Bank Name is required"),
accountNumber: yup.string().required("Account Number is required"),
swiftCode: yup.string().required("SWIFT/BIC Code is required"),
bankEmail: yup.string().email("Invalid email format"),
// routingNumber: yup.string().required("Routing Number is required"),
// iban: yup.string().required("IBAN is required"),
// accountType: yup.string().required("Account Type is required"),
@@ -50,8 +44,15 @@ const schema = yup.object().shape({
export function debounce(func, delay) {
let debounceTimer;
return function(...args) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(this, args), delay);
};
}
const AddSponser = () => {
const navigate = useNavigate()
const navigate = useNavigate();
const { sponser, setSponser } = useContext(GlobalStateContext);
const {
control,
@@ -64,8 +65,16 @@ const AddSponser = () => {
console.log(errors);
const onSubmit = (data) => {
setSponser([{...data, status: true}, ...sponser]);
navigate('/sponser');
setSponser([
{
...data,
status: true,
id: uuidv4(),
createdAt: new Date().toISOString(),
},
...sponser,
]);
navigate("/sponser");
};
return (
@@ -75,56 +84,54 @@ const AddSponser = () => {
Personal Details
</Heading>
<Box display={"flex"} gap={0}>
<Box
width={"50%"}
p={5}
display={"flex"}
flexDirection={"column"}
gap={4}
>
<FormField
label="Sponser name"
name="sponserName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Mobile no"
name="mobileNo"
type="tel"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Sponser address"
name="sponserAddress"
type="textarea"
control={control}
errors={errors}
isRequired={true}
/>
</Box>
<Box
width={"50%"}
p={5}
display={"flex"}
flexDirection={"column"}
gap={4}
>
<FormField
label="Sponser name"
name="sponserName"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Mobile no"
name="mobileNo"
type="tel"
control={control}
errors={errors}
isRequired={true}
/>
<FormField
label="Sponser address"
name="sponserAddress"
type="textarea"
control={control}
errors={errors}
isRequired={true}
/>
</Box>
<Box
width={"50%"}
p={5}
display={"flex"}
flexDirection={"column"}
gap={4}
>
<FormField
label="اسم الراعي"
name="اسم الراعي"
control={control}
errors={errors}
isRequired={true}
arabic={true}
/></Box>
<Box
width={"50%"}
p={5}
display={"flex"}
flexDirection={"column"}
gap={4}
>
<FormField
label="اسم الراعي"
name="اسم الراعي"
control={control}
errors={errors}
isRequired={true}
arabic={true}
/>
</Box>
</Box>
<Divider />
@@ -232,18 +239,23 @@ const AddSponser = () => {
errors={errors}
/>
{/* <Button size={"sm"} rounded={"sm"} type="submit" colorScheme="green">
{/* <Button size={"sm"} rounded={"sm"} type="submit" colorScheme="green">
Submit
</Button> */}
</Box>
)}
</Box>
<Box display={'flex'} justifyContent={"flex-end"} p={4}>
<Button size={"sm"} width={"50%"} rounded={"sm"} type="submit" colorScheme="green">
Submit
</Button>
<Box display={"flex"} justifyContent={"flex-start"} p={4}>
<Button
size={"sm"}
width={"50%"}
rounded={"sm"}
type="submit"
colorScheme="green"
>
Submit
</Button>
</Box>
</form>
</Box>

58
src/Pages/Master/Sponser/Sponsers.jsx
View File

@@ -14,6 +14,7 @@ import {
Switch,
Tag,
Text,
useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
@@ -24,10 +25,13 @@ import { AddIcon, EmailIcon } from "@chakra-ui/icons";
import Pagination from "../../../Components/Pagination";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import ToastBox from "../../../Components/ToastBox";
import { debounce } from "./AddSponser";
const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
const Sponser = () => {
const toast = useToast()
const { sponser, setSponser,slideFromRight } = useContext(GlobalStateContext);
const [searchTerm, setSearchTerm] = useState("");
const [isLoading, setIsLoading] = useState(true);
@@ -37,7 +41,6 @@ const Sponser = () => {
const [mouseEnteredId, setMouseEnteredId] = useState("");
console.log(mouseEnteredId);
useEffect(() => {
// Simulate loading
@@ -58,10 +61,21 @@ const Sponser = () => {
"Created At",
];
const handleUpdateStatus = (id) => {
console.log(`Status updated for id: ${id}`);
// Add your status update logic here
};
const handleUpdateStatus = debounce((id) => {
setSponser((prevSponser) =>
prevSponser.map((sponsor) =>
sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor
)
);
toast({
render: () => (
<ToastBox
message={"Status changed succesfully.!"}
/>
),
});
},300) ;
// ====================================================[Table Filter]================================================================
const filteredData = sponser.filter((item) => {
@@ -108,22 +122,24 @@ const Sponser = () => {
</Box>
),
Status:
// <Switch
// size={"sm"}
// colorScheme="teal"
// onChange={() => handleUpdateStatus(item.id)}
// isChecked={item.status}
// />
<Switch
size={"sm"}
color="green"
onChange={() => handleUpdateStatus(item.id)}
isChecked={item.status}
/>
item?.status ? (
<Badge bg={'transparent'} color={"#05c46b"}>
Passed
</Badge>
) : (
<Badge bg={'transparent'} color={"#f53b57"}>
Not passes
</Badge>
),
// item?.status ? (
// <Badge bg={'transparent'} color={"#05c46b"}>
// Passed
// </Badge>
// ) : (
// <Badge bg={'transparent'} color={"#f53b57"}>
// Not passes
// </Badge>
// ),
,
"Created At": (
<span className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} className=" fw-bold">
@@ -172,7 +188,7 @@ const Sponser = () => {
return (
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
<Box bg="white.500">
<HStack
display={"flex"}

18
src/Theme/Theme.js
View File

@@ -42,15 +42,15 @@ const customTheme = extendTheme({
},
components: {
Switch: {
baseStyle: {
track: {
_checked: {
bg: 'forestGreen.500', // using your custom color here
},
},
},
},
// Switch: {
// baseStyle: {
// track: {
// _checked: {
// bg: 'forestGreen.500', // using your custom color here
// },
// },
// },
// },
},
});