From d72ce514886ac61b3590932f5a92ae90ff687147 Mon Sep 17 00:00:00 2001 From: npcdazai Date: Mon, 30 Sep 2024 17:08:18 +0530 Subject: [PATCH 1/4] Create Wallet --- package-lock.json | 6 + package.json | 1 + .../OptiFiiExpense/wallet/CreateWallet.jsx | 125 ++++++++++--- .../OptiFiiExpense/wallet/OutOfPoket.jsx | 173 ++++++++++++++++++ .../OptiFiiExpense/wallet/WalletPolicy.jsx | 51 ++++++ src/Routes/Routes.js | 4 +- 6 files changed, 333 insertions(+), 27 deletions(-) create mode 100644 src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx create mode 100644 src/Pages/OptiFiiExpense/wallet/WalletPolicy.jsx diff --git a/package-lock.json b/package-lock.json index 7fd1e3c..e0d2d41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "axios": "^1.7.2", "bootstrap": "5.3.3", "chart.js": "^4.4.3", + "dayjs": "^1.11.13", "dotenv": "^16.4.5", "framer-motion": "^11.5.5", "js-cookie": "^3.0.5", @@ -3196,6 +3197,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index 8577bf4..2ec5e70 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "axios": "^1.7.2", "bootstrap": "5.3.3", "chart.js": "^4.4.3", + "dayjs": "^1.11.13", "dotenv": "^16.4.5", "framer-motion": "^11.5.5", "js-cookie": "^3.0.5", diff --git a/src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx b/src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx index 4095fe3..f8d43c7 100644 --- a/src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx +++ b/src/Pages/OptiFiiExpense/wallet/CreateWallet.jsx @@ -1,32 +1,65 @@ -import React from "react"; +import React, { useState } from "react"; +import { useForm } from "react-hook-form"; import { - Box, - Step, - StepDescription, - StepIcon, - StepIndicator, - StepNumber, - StepSeparator, - StepStatus, - StepTitle, Stepper, - useSteps, + Step, + StepIndicator, + StepStatus, + StepIcon, + StepNumber, + Box, + StepTitle, + StepDescription, + StepSeparator, + Button, + FormControl, + FormLabel, + Input, + Heading, + Text, } from "@chakra-ui/react"; +import WalletPolicy from "./WalletPolicy"; +import { OPACITY_ON_LOAD } from "../../../Layout/animations"; const steps = [ - { title: "Wallet policy", description: "Wallet policy" }, - { title: "Approval policy", description: "Approval policy" }, - { title: "Submission policy", description: "Submission policy" }, - { title: "Define budget", description: "Define budget" }, + { title: "Wallet policy", description: "Contact Info" }, + { title: "Approval policy", description: "Date & Time" }, + { title: "Submission policy", description: "Select Rooms" }, + { title: "Define budget", description: "Select Rooms" }, ]; -const CreateWallet = () => { - const { activeStep } = useSteps({ - index: 1, - count: steps.length, - }); +function CreateWallet() { + const [activeStep, setActiveStep] = useState(0); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm(); + const [formData, setFormData] = useState({}); + + const nextStep = () => { + if (activeStep < steps.length - 1) { + setActiveStep(activeStep + 1); + } + }; + + const prevStep = () => { + if (activeStep > 0) { + setActiveStep(activeStep - 1); + } + }; + + const onSubmit = (data) => { + setFormData({ ...formData, ...data }); + if (activeStep === steps.length - 1) { + console.log("Form Submitted:", formData); + } else { + nextStep(); + } + }; + return ( - + {steps.map((step, index) => ( @@ -34,22 +67,64 @@ const CreateWallet = () => { } incomplete={} - active={} + active={} /> {step.title} - {step.description} + {/* {step.description} */} ))} + +
+ {activeStep === 0 && ( + + + Create wallet policy + + + + + )} + {activeStep === 1 && ( + + {/* + Date & Time + + */} + + )} + {activeStep === 2 && ( + + {/* + Select Room + + */} + + )} + + + + + +
); -}; +} export default CreateWallet; diff --git a/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx b/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx new file mode 100644 index 0000000..bbf53e7 --- /dev/null +++ b/src/Pages/OptiFiiExpense/wallet/OutOfPoket.jsx @@ -0,0 +1,173 @@ +import { + Box, + FormControl, + FormLabel, + Input, + Menu, + MenuButton, + MenuItem, + MenuList, + Select, + Tag, + TagCloseButton, + TagLabel, + Textarea, + Wrap, + WrapItem, + Button, + useToast, +} from "@chakra-ui/react"; +import { AddIcon } from "@chakra-ui/icons"; +import React, { useState } from "react"; +import dayjs from "dayjs"; + +const OutOfPoket = ({ register, formState }) => { + const [selectedDepartments, setSelectedDepartments] = useState([]); + const [selectedTimes, setSelectedTimes] = useState([]); + const toast = useToast(); + + const departments = ["Finance", "HR", "Marketing", "Engineering"]; + const options = [ + { + label: "An hour from now", + value: dayjs().add(1, "hour").format("ddd, MMM D, h:mm A"), + }, + { + label: "Tomorrow", + value: dayjs() + .add(1, "day") + .set("hour", 21) + .minute(0) + .format("ddd, MMM D, h:mm A"), + }, + { + label: "Next week", + value: dayjs() + .add(7, "day") + .set("hour", 21) + .minute(0) + .format("ddd, MMM D, h:mm A"), + }, + ]; + + const handleSelect = (time) => { + if (!selectedTimes.includes(time)) { + setSelectedTimes([...selectedTimes, time]); + } else { + toast({ + title: "Duplicate entry", + description: "This time has already been selected.", + status: "warning", + duration: 2000, + isClosable: true, + }); + } + }; + + const handleRemove = (time) => { + setSelectedTimes(selectedTimes.filter((t) => t !== time)); + }; + + const handleSelectChange = (event) => { + const value = event.target.value; + if (value && !selectedDepartments.includes(value)) { + setSelectedDepartments([...selectedDepartments, value]); + } + }; + + const handleRemoveTag = (department) => { + setSelectedDepartments(selectedDepartments.filter((d) => d !== department)); + }; + + return ( +
+ + + + Wallet policy + + + + + Description +