SLIDER PAGE
This commit is contained in:
priyanshuvish
19
package-lock.json
generated
19
package-lock.json
generated
@@ -33,6 +33,7 @@
|
||||
"react-router-dom": "^6.22.3",
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-persist-transform-encrypt": "^5.1.1",
|
||||
"swiper": "^11.1.12",
|
||||
"uuid": "^10.0.0",
|
||||
"vanilla-tilt": "^1.8.1",
|
||||
"xlsx": "^0.18.5",
|
||||
@@ -6005,6 +6006,24 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "11.1.12",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.12.tgz",
|
||||
"integrity": "sha512-PUkCToYAZMB4kP7z+YfPnkMHOMwMO71g8vUhz2o5INGIgIMb6Sb0XiP6cEJFsiFTd7FRDn5XCbg+KVKPDZqXLw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/text-table": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
"react-router-dom": "^6.22.3",
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-persist-transform-encrypt": "^5.1.1",
|
||||
"swiper": "^11.1.12",
|
||||
"uuid": "^10.0.0",
|
||||
"vanilla-tilt": "^1.8.1",
|
||||
"xlsx": "^0.18.5",
|
||||
|
||||
74
src/Components/Swiper/SwiperSlider.css
Normal file
74
src/Components/Swiper/SwiperSlider.css
Normal file
@@ -0,0 +1,74 @@
|
||||
.swiper{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 50% !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.swiper-slide-active {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.swiper-slide-next,
|
||||
.swiper-slide-prev {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.swiper-slide-active{
|
||||
transform: translate3d(-5px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(0.8) !important;
|
||||
}
|
||||
|
||||
.swiper-slide-prev {
|
||||
transform: translate3d(60px, 0px, -500px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||||
}
|
||||
|
||||
.swiper-slide-next {
|
||||
transform: translate3d(-40px, 0px, -533.578px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||||
}
|
||||
|
||||
|
||||
.slider-controler {
|
||||
position: relative;
|
||||
bottom: 12rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px 0 6px;
|
||||
}
|
||||
|
||||
.slider-controler .swiper-button-next,
|
||||
.slider-controler .swiper-button-prev {
|
||||
background: #fff;
|
||||
color: #3725EA;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 2px 4px 0px #666666CC;
|
||||
|
||||
}
|
||||
|
||||
.slider-controler .slider-arrow::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1366px) {
|
||||
.slider-controler .swiper-button-next {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.slider-controler .swiper-button-next {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
70
src/Components/Swiper/SwiperSlider.jsx
Normal file
70
src/Components/Swiper/SwiperSlider.jsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Box, Image, IconButton } from '@chakra-ui/react';
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
|
||||
import RupayCard from "../../Components/PayCards/RupayCard";
|
||||
import Platinium from "../../Components/PayCards/Platinium";
|
||||
import PlatiniumGift from "../../Components/PayCards/PlatiniumGift";
|
||||
import './SwiperSlider.css';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/effect-coverflow';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/navigation';
|
||||
|
||||
// Import required modules
|
||||
import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules';
|
||||
|
||||
function SwiperSlider() {
|
||||
return (
|
||||
<Box>
|
||||
<Swiper
|
||||
effect={'coverflow'}
|
||||
grabCursor={true}
|
||||
centeredSlides={true}
|
||||
loop={true}
|
||||
slidesPerView={'auto'}
|
||||
coverflowEffect={{
|
||||
rotate: 0,
|
||||
stretch: 0,
|
||||
depth: 100,
|
||||
slideShadows: false,
|
||||
}}
|
||||
pagination={{ clickable: true }}
|
||||
navigation={{
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
}}
|
||||
modules={[EffectCoverflow, Pagination, Navigation]}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<Platinium />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<RupayCard />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<PlatiniumGift />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<Platinium />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<RupayCard />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<PlatiniumGift />
|
||||
</SwiperSlide>
|
||||
|
||||
</Swiper>
|
||||
<Box className="slider-controler">
|
||||
<IconButton className="swiper-button-prev slider-arrow" aria-label="Previous slide" icon={<ChevronLeftIcon />} />
|
||||
<IconButton className="swiper-button-next slider-arrow" aria-label="Next slide" icon={<ChevronRightIcon />} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default SwiperSlider;
|
||||
162
src/Pages/AllTicketsModal/AllTicketsModal.jsx
Normal file
162
src/Pages/AllTicketsModal/AllTicketsModal.jsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
Text,
|
||||
Box,
|
||||
HStack,
|
||||
Icon,
|
||||
Divider,
|
||||
Badge,
|
||||
Button,
|
||||
Image,
|
||||
ModalFooter
|
||||
} from '@chakra-ui/react';
|
||||
import { FiDownload } from "react-icons/fi";
|
||||
import NoInternet from "../../assets/noInternet.jpg";
|
||||
import { HiOutlineMail } from 'react-icons/hi';
|
||||
|
||||
// FileButton component
|
||||
const FileButton = ({ fileName, fileSize, imageUrl }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
border="1px solid #3725EA"
|
||||
borderRadius="md"
|
||||
px={3}
|
||||
p={2}
|
||||
justifyContent="space-between"
|
||||
boxShadow="sm"
|
||||
bg={"rgba(94, 15, 205, 0.05)"}
|
||||
_hover={{ opacity: "0.8" }}
|
||||
>
|
||||
<HStack me={6}>
|
||||
<Image boxSize="24px" src={imageUrl} alt={fileName} />
|
||||
<Box textAlign="left">
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="600"
|
||||
color="#313039"
|
||||
mb={1}
|
||||
>
|
||||
{fileName}
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color="#6F6E77"
|
||||
fontWeight={500}
|
||||
mb={0}
|
||||
>
|
||||
{fileSize}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<Icon as={FiDownload} boxSize={5} color="#5E0FCD" />
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
// AllTicketsModal component
|
||||
const AllTicketsModal = ({ isOpen, onClose }) => {
|
||||
return (
|
||||
<Modal size={'xl'} isOpen={isOpen} onClose={onClose} isCentered>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<Text
|
||||
color="#667085"
|
||||
fontSize="xs"
|
||||
fontWeight="500"
|
||||
mb={0}
|
||||
px={6}
|
||||
pt={4}
|
||||
>
|
||||
TA-97868
|
||||
</Text>
|
||||
<ModalHeader
|
||||
pt={1}
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
justifyContent={"space-between"}
|
||||
pe={12}
|
||||
>
|
||||
App loading issue
|
||||
<Badge
|
||||
bg={"#FCF8E9"}
|
||||
color="#E5C862"
|
||||
border={"1px solid #E5C862"}
|
||||
px={2}
|
||||
py={1}
|
||||
borderRadius="full"
|
||||
fontSize="xs"
|
||||
fontWeight="500"
|
||||
>
|
||||
In Progress
|
||||
</Badge>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<Divider mt={0} />
|
||||
<ModalBody>
|
||||
<Text fontSize="sm" fontWeight="600" mb={2}>
|
||||
Subtype of the ticket
|
||||
</Text>
|
||||
<Text fontSize="xs" fontWeight="500" mb={2}>
|
||||
Aenean et elit vehicula, aliquet libero vitae, tempus massa. Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus sollicitudin, ultrices quam eget, dapibus elit. Fusce lorem arcu, auctor id efficitur sed, ultrices vel orci.
|
||||
</Text>
|
||||
<Text fontSize="xs" fontWeight="500" mb={2}>
|
||||
Aenean et elit vehicula, aliquet libero vitae, tempus massa. Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus sollicitudin, ultrices quam eget, dapibus elit. Fusce lorem arcu, auctor id efficitur sed, ultrices vel orci.
|
||||
</Text>
|
||||
<Text color="#667085" fontSize="sm" fontWeight="600" mb={2}>
|
||||
2 Attachments
|
||||
</Text>
|
||||
<HStack spacing={4}>
|
||||
<FileButton fileName="No Internet" fileSize="28 kb" imageUrl={NoInternet} />
|
||||
<FileButton fileName="No Internet" fileSize="28 kb" imageUrl={NoInternet} />
|
||||
</HStack>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter flexDirection={"column"} alignItems={"start"} px={0}>
|
||||
<Divider mt={0} />
|
||||
<Box px={6} w={"100%"} >
|
||||
<HStack justifyContent={"space-between"}>
|
||||
<HStack>
|
||||
<Text color="#667085" fontSize="sm" fontWeight="600" mb={0}>
|
||||
Assigned to:
|
||||
</Text>
|
||||
<Text color="#363636" fontSize="sm" fontWeight="600" mb={0}>
|
||||
Siddhesh
|
||||
</Text>
|
||||
</HStack>
|
||||
<Box>
|
||||
<Button
|
||||
px={2}
|
||||
variant="outline"
|
||||
transition={"0.5s all"}
|
||||
colorScheme='purple'
|
||||
display={"flex"}
|
||||
gap={2}
|
||||
h={8}
|
||||
>
|
||||
<Text
|
||||
fontSize={"xs"}
|
||||
fontWeight={600}
|
||||
size={"sm"}
|
||||
mb={0}
|
||||
>
|
||||
Mail
|
||||
</Text>
|
||||
<Icon as={HiOutlineMail} color="#5E0FCD" w={4} h={4} />
|
||||
</Button>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AllTicketsModal;
|
||||
@@ -13,6 +13,7 @@ import { AiOutlineEdit } from "react-icons/ai";
|
||||
import { RiDeleteBin5Line } from "react-icons/ri";
|
||||
import { CalendarIcon, PhoneIcon, Search2Icon } from "@chakra-ui/icons";
|
||||
import { Input, InputGroup, InputLeftElement } from "@chakra-ui/input";
|
||||
import SwiperSlider from "../../Components/Swiper/SwiperSlider";
|
||||
|
||||
const MyGiftCardsTab = () => {
|
||||
const { requestsTable } = useContext(GlobalStateContext);
|
||||
@@ -34,6 +35,38 @@ const MyGiftCardsTab = () => {
|
||||
"Amount Spent",
|
||||
];
|
||||
|
||||
const InternalCard = ({ title1, subTitle1, title2, subbTitle2 }) => {
|
||||
return (
|
||||
<VStack
|
||||
gap={0}
|
||||
w={"100%"}
|
||||
rounded={"lg"}
|
||||
justifyContent={"space-evenly"}
|
||||
bg={"gray.50"}
|
||||
>
|
||||
<VStack gap={0} alignItems={"start"} w={"100%"} p={2}>
|
||||
<Text as={"span"} fontSize={"md"} fontWeight={600}>
|
||||
{title1}
|
||||
</Text>
|
||||
|
||||
<Text as={"span"} fontSize={"xs"} fontWeight={500} color={"gray.600"}>
|
||||
{subTitle1}
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<VStack gap={0} alignItems={"start"} w={"100%"} p={2}>
|
||||
<Text as={"span"} fontSize={"md"} fontWeight={600}>
|
||||
{title2}
|
||||
</Text>
|
||||
|
||||
<Text as={"span"} fontSize={"xs"} fontWeight={500} color={"gray.600"}>
|
||||
{subbTitle2}
|
||||
</Text>
|
||||
</VStack>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
// Extracted data for table
|
||||
const extractedArray = requestsTable.map((item, index) => ({
|
||||
"Transaction Type": (
|
||||
@@ -154,63 +187,93 @@ const MyGiftCardsTab = () => {
|
||||
|
||||
return (
|
||||
<VStack w={'100%'} gap={5}>
|
||||
<Box h={400} bg={"#fff"} w={'100%'} rounded={'lg'} shadow={'md'}>
|
||||
|
||||
<HStack
|
||||
bg={"#fff"}
|
||||
w={'100%'}
|
||||
rounded={'lg'}
|
||||
shadow={'md'} p={6}
|
||||
spacing={2}
|
||||
flexWrap={"wrap"}
|
||||
>
|
||||
<Box w={"48%"} position={"relative"}>
|
||||
<SwiperSlider />
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
w={'100%'}
|
||||
>
|
||||
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
|
||||
<Text fontSize={"lg"} fontWeight={600} color={"#000000"}>
|
||||
Transactions
|
||||
</Text>
|
||||
<HStack w={"100%"} justifyContent={"space-between"}>
|
||||
<HStack>
|
||||
<InputGroup rounded={"md"} size={"sm"}>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<Search2Icon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
rounded={"md"}
|
||||
focusBorderColor="purple.500" // Border color when focused
|
||||
// borderColor='purple.300' // Default border color
|
||||
placeholder="Search"
|
||||
/>
|
||||
</InputGroup>
|
||||
</HStack>
|
||||
|
||||
<Button
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
leftIcon={<CalendarIcon color={"purple.800"} />}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
fontSize={"xs"}
|
||||
<Box w={"50%"}>
|
||||
<VStack
|
||||
flexGrow={1}
|
||||
gap={4}
|
||||
rounded={"xl"}
|
||||
p={4}
|
||||
>
|
||||
Select Date Range
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Divider />
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponsors `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
<InternalCard
|
||||
title1={"Kartikey Gautam"}
|
||||
subTitle1={"Cardholder Name"}
|
||||
title2={"**** **** **** 5678"}
|
||||
subbTitle2={"Card Number "}
|
||||
/>
|
||||
<InternalCard
|
||||
title1={"₹ 1,00,000"}
|
||||
subTitle1={"Card Balance"}
|
||||
title2={"₹ 50,000"}
|
||||
subbTitle2={"Remaining Balance"}
|
||||
/>
|
||||
</VStack>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<Box
|
||||
rounded={"xl"}
|
||||
py={3}
|
||||
display={"flex"}
|
||||
flexDirection={"column"}
|
||||
bg={"#fff"}
|
||||
shadow={"md"}
|
||||
w={'100%'}
|
||||
>
|
||||
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
|
||||
<Text fontSize={"lg"} fontWeight={600} color={"#000000"}>
|
||||
Transactions
|
||||
</Text>
|
||||
<HStack w={"100%"} justifyContent={"space-between"}>
|
||||
<HStack>
|
||||
<InputGroup rounded={"md"} size={"sm"}>
|
||||
<InputLeftElement pointerEvents="none">
|
||||
<Search2Icon color="gray.300" />
|
||||
</InputLeftElement>
|
||||
<Input
|
||||
rounded={"md"}
|
||||
focusBorderColor="purple.500" // Border color when focused
|
||||
// borderColor='purple.300' // Default border color
|
||||
placeholder="Search"
|
||||
/>
|
||||
</InputGroup>
|
||||
</HStack>
|
||||
|
||||
<Button
|
||||
fontWeight={500}
|
||||
size={"sm"}
|
||||
leftIcon={<CalendarIcon color={"purple.800"} />}
|
||||
colorScheme="gray"
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
fontSize={"xs"}
|
||||
>
|
||||
Select Date Range
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Divider />
|
||||
<NormalTable
|
||||
emptyMessage={`We don't have any Sponsors `}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={extractedArray}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</Box>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,14 +1,597 @@
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import React, { useState, useRef } from "react";
|
||||
import {
|
||||
Box,
|
||||
Tabs,
|
||||
Tab,
|
||||
TabList,
|
||||
TabPanels,
|
||||
TabPanel,
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionButton,
|
||||
AccordionPanel,
|
||||
AccordionIcon,
|
||||
HStack,
|
||||
Text,
|
||||
Input,
|
||||
Textarea,
|
||||
Select,
|
||||
Button,
|
||||
TabIndicator,
|
||||
VStack,
|
||||
Icon,
|
||||
Badge,
|
||||
useDisclosure,
|
||||
Link,
|
||||
} from "@chakra-ui/react";
|
||||
import MiniHeader from "../../Components/MiniHeader";
|
||||
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
|
||||
import { OPACITY_ON_LOAD } from "../../Layout/animations";
|
||||
import { CiCalendarDate } from "react-icons/ci";
|
||||
import { HiOutlineMail } from "react-icons/hi";
|
||||
import AllTicketsModal from "../AllTicketsModal/AllTicketsModal";
|
||||
|
||||
const HelpAndSupport = () => {
|
||||
const [value, setValue] = useState(""); // State to store the textarea value
|
||||
const handleInputChange = (event) => setValue(event.target.value); // Update the state with the textarea input value
|
||||
|
||||
const inputRef = useRef(null);
|
||||
const handleFileUpload = () => inputRef.current.click(); // Trigger click on hidden input
|
||||
|
||||
// For controlling the modal
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const faqItems = [
|
||||
{ title: "How to create new account?", content: "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' Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry'" },
|
||||
{ title: "How to reset password?", content: "Description for resetting password." },
|
||||
{ title: "How to manage expenses?", content: "Description for managing expenses." },
|
||||
{ title: "How to redeem gift cards?", content: "Description for redeeming gift cards." },
|
||||
{ title: "How to submit tickets?", content: "Description for submitting tickets." },
|
||||
];
|
||||
|
||||
return (
|
||||
<Box h={"100%"} p={6}>
|
||||
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
|
||||
<MiniHeader
|
||||
title={"Contact Us"}
|
||||
title={"Help and Support"}
|
||||
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
|
||||
/>
|
||||
|
||||
{/* Ticket Creation Box */}
|
||||
<Box bg={"#FFFFFF"} borderRadius={"md"} boxShadow={"sm"} p={3} mb={4}>
|
||||
<Text mb={2} fontWeight={"600"} fontSize={"md"}>
|
||||
Raise a Ticket
|
||||
</Text>
|
||||
|
||||
<HStack spacing={4} mb={4}>
|
||||
{/* Subject Input */}
|
||||
<Box w={"50%"}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
|
||||
Subject
|
||||
</Text>
|
||||
<Input borderRadius={"md"} placeholder="Enter your subject" size="sm" />
|
||||
</Box>
|
||||
|
||||
{/* Type of Issue Select */}
|
||||
<Box w={"50%"}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
|
||||
Type of Issue
|
||||
</Text>
|
||||
<Select placeholder="Select option" size="sm" borderRadius={"md"}>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={4}>
|
||||
<Box w={"50%"}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
|
||||
Add Screenshot
|
||||
</Text>
|
||||
|
||||
<Input ref={inputRef} type="file" display="none" />
|
||||
<Button
|
||||
borderRadius={"md"}
|
||||
size="sm"
|
||||
onClick={handleFileUpload}
|
||||
border={"1px solid #e2e8f0"}
|
||||
w={"100%"}
|
||||
bg="transparent"
|
||||
color="#3725EA"
|
||||
textDecoration={"underline"}
|
||||
display={"flex"}
|
||||
justifyContent={"start"}
|
||||
>
|
||||
Upload File
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Subtype Select */}
|
||||
<Box w={"50%"}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
|
||||
Subtype
|
||||
</Text>
|
||||
<Select placeholder="Select option" size="sm" borderRadius={"md"}>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
</Select>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<Box mt={4}>
|
||||
<Text mb={1} fontWeight={"500"} fontSize={"sm"} color={"#313039"}>
|
||||
Summarize your issue
|
||||
</Text>
|
||||
<Textarea
|
||||
value={value}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Describe your issue here"
|
||||
size="sm"
|
||||
borderRadius={"md"}
|
||||
resize={"none"}
|
||||
/>
|
||||
</Box>
|
||||
<Box mt={4}>
|
||||
<PrimaryButton title={"Submit Ticket"} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Tabs for FAQ */}
|
||||
<Box mt={4}>
|
||||
<HStack spacing={4} alignItems={"baseline"}>
|
||||
<Box bg={"#FFFFFF"} borderRadius={"md"} boxShadow={"sm"} p={3} w={"50%"}>
|
||||
<Text mb={2} fontWeight={"600"} fontSize={"md"}>
|
||||
FAQ
|
||||
</Text>
|
||||
<Tabs variant="unstyled">
|
||||
<TabList h={10} gap={4}>
|
||||
<Tab
|
||||
_selected={{ color: "#fff", bg: "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)" }}
|
||||
py={1}
|
||||
px={8}
|
||||
borderRadius={"md"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"sm"}
|
||||
border={"1px solid #7D7D7D"}
|
||||
bg="transparent"
|
||||
color="#7D7D7D"
|
||||
>
|
||||
All
|
||||
</Tab>
|
||||
<Tab
|
||||
_selected={{ color: "#fff", bg: "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)", border: "none" }}
|
||||
py={1}
|
||||
px={4}
|
||||
border={"1px solid #7D7D7D"}
|
||||
borderRadius={"md"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"sm"}
|
||||
color={"#7D7D7D"}
|
||||
bg="transparent"
|
||||
>
|
||||
Expense
|
||||
</Tab>
|
||||
<Tab
|
||||
_selected={{ color: "#fff", bg: "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)", border: "none" }}
|
||||
py={1}
|
||||
px={4}
|
||||
border={"1px solid #7D7D7D"}
|
||||
borderRadius={"md"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"sm"}
|
||||
color={"#7D7D7D"}
|
||||
bg="transparent"
|
||||
>
|
||||
Benefits
|
||||
</Tab>
|
||||
<Tab
|
||||
_selected={{ color: "#fff", bg: "linear-gradient(90deg, #3725EA 0%, #5E0FCD 100%)", border: "none" }}
|
||||
py={1}
|
||||
px={4}
|
||||
border={"1px solid #7D7D7D"}
|
||||
borderRadius={"md"}
|
||||
fontWeight={"500"}
|
||||
fontSize={"sm"}
|
||||
color={"#7D7D7D"}
|
||||
bg="transparent"
|
||||
>
|
||||
Gift Cards
|
||||
</Tab>
|
||||
</TabList>
|
||||
|
||||
|
||||
{/* Tab Panels */}
|
||||
<TabPanels>
|
||||
<TabPanel py={4} pl={0} pr={0}>
|
||||
<Accordion defaultIndex={[0]} allowMultiple>
|
||||
{faqItems.map((item, index) => (
|
||||
<AccordionItem
|
||||
key={index}
|
||||
borderTop="none"
|
||||
borderBottom="none"
|
||||
>
|
||||
{({ isExpanded }) => (
|
||||
<>
|
||||
<AccordionButton
|
||||
bg={
|
||||
isExpanded
|
||||
? "linear-gradient(0deg, rgba(94, 15, 205, 0.05), rgba(94, 15, 205, 0.05))"
|
||||
: "transparent"
|
||||
}
|
||||
border={"1px solid #DCDCDC"}
|
||||
borderRadius={"md"}
|
||||
mt={2}
|
||||
>
|
||||
<Box
|
||||
as="span"
|
||||
flex="1"
|
||||
textAlign="left"
|
||||
color={"#313039"}
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
>
|
||||
{item.title}
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
<AccordionPanel
|
||||
pb={4}
|
||||
bg={
|
||||
isExpanded
|
||||
? "linear-gradient(0deg, rgba(94, 15, 205, 0.05), rgba(94, 15, 205, 0.05))"
|
||||
: "transparent"
|
||||
}
|
||||
borderRadius={"md"}
|
||||
color={"#313039"}
|
||||
fontWeight={500}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{item.content}
|
||||
</AccordionPanel>
|
||||
</>
|
||||
)}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</TabPanel>
|
||||
<TabPanel py={4} pl={0} pr={0}>
|
||||
Reimbursement content
|
||||
</TabPanel>
|
||||
<TabPanel py={4} pl={0} pr={0}>
|
||||
<Accordion defaultIndex={[0]} allowMultiple>
|
||||
{faqItems.map((item, index) => (
|
||||
<AccordionItem
|
||||
key={index}
|
||||
borderTop="none"
|
||||
borderBottom="none"
|
||||
>
|
||||
{({ isExpanded }) => (
|
||||
<>
|
||||
<AccordionButton
|
||||
bg={
|
||||
isExpanded
|
||||
? "linear-gradient(0deg, rgba(94, 15, 205, 0.05), rgba(94, 15, 205, 0.05))"
|
||||
: "transparent"
|
||||
}
|
||||
border={"1px solid #DCDCDC"}
|
||||
borderRadius={"md"}
|
||||
mt={2}
|
||||
>
|
||||
<Box
|
||||
as="span"
|
||||
flex="1"
|
||||
textAlign="left"
|
||||
color={"#313039"}
|
||||
fontWeight={500}
|
||||
fontSize={"sm"}
|
||||
>
|
||||
{item.title}
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
<AccordionPanel
|
||||
pb={4}
|
||||
bg={
|
||||
isExpanded
|
||||
? "linear-gradient(0deg, rgba(94, 15, 205, 0.05), rgba(94, 15, 205, 0.05))"
|
||||
: "transparent"
|
||||
}
|
||||
borderRadius={"md"}
|
||||
color={"#313039"}
|
||||
fontWeight={500}
|
||||
fontSize={"xs"}
|
||||
>
|
||||
{item.content}
|
||||
</AccordionPanel>
|
||||
</>
|
||||
)}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</TabPanel>
|
||||
<TabPanel py={4} pl={0} pr={0}>
|
||||
Reimbursement content
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<Box bg={"#FFFFFF"} borderRadius={"md"} boxShadow={"sm"} p={3} w={"50%"}>
|
||||
<Text mb={3} fontWeight={"600"} fontSize={"md"}>
|
||||
All Tickets
|
||||
</Text>
|
||||
<HStack>
|
||||
<Text
|
||||
color={"#667085"}
|
||||
fontSize={"xs"}
|
||||
mb={0}
|
||||
fontWeight={500}
|
||||
>
|
||||
Date
|
||||
</Text>
|
||||
<Icon as={CiCalendarDate} color="#5E0FCD" w={4} h={4} />
|
||||
</HStack>
|
||||
<HStack alignItems={"baseline"}>
|
||||
<Box>
|
||||
<Tabs position='relative' variant='unstyled'>
|
||||
<TabList justifyContent={"end"}>
|
||||
<Tab
|
||||
color={"#313039"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
_selected={{
|
||||
color: "#5E0FCD",
|
||||
}}
|
||||
>
|
||||
In Progress
|
||||
</Tab>
|
||||
<Tab
|
||||
color={"#313039"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
_selected={{
|
||||
color: "#5E0FCD",
|
||||
}}
|
||||
>
|
||||
Completed
|
||||
</Tab>
|
||||
<Tab
|
||||
color={"#313039"}
|
||||
fontSize={"sm"}
|
||||
fontWeight={500}
|
||||
_selected={{
|
||||
color: "#5E0FCD",
|
||||
}}
|
||||
>
|
||||
Terminated
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabIndicator mt='-1.5px' height='2px' bg='#5E0FCD' borderRadius='1px' />
|
||||
<TabPanels>
|
||||
<TabPanel px={0} py={4}>
|
||||
<Box
|
||||
p={4}
|
||||
borderWidth="1px"
|
||||
borderRadius="lg"
|
||||
boxShadow="sm"
|
||||
borderColor="#EDEDED"
|
||||
maxW="600px"
|
||||
mx="auto"
|
||||
>
|
||||
<Box>
|
||||
<Box>
|
||||
<HStack justifyContent={"space-between"} alignItems={"start"} mb={2}>
|
||||
<Text color="#667085"
|
||||
fontSize="xs"
|
||||
fontWeight="500"
|
||||
mb={0}
|
||||
onClick={onOpen}
|
||||
cursor={"pointer"}>
|
||||
TA-97868
|
||||
</Text>
|
||||
<Icon as={HiOutlineMail} color="#5E0FCD" w={5} h={5} />
|
||||
</HStack>
|
||||
<Box>
|
||||
<HStack>
|
||||
<Text
|
||||
fontWeight="500"
|
||||
fontSize="sm"
|
||||
color="#363636"
|
||||
mb={2}
|
||||
>
|
||||
App loading issue
|
||||
</Text>
|
||||
<Text
|
||||
fontWeight="500"
|
||||
fontSize="sm"
|
||||
color="#363636"
|
||||
mb={2}
|
||||
>
|
||||
{" "}
|
||||
❯ Lorem ipsum dolor
|
||||
</Text>
|
||||
<Text color="#858585" fontSize="xs" mb={2}>
|
||||
17 Jan 2023
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Text fontSize="xs" color="#667085">
|
||||
Aenean et elit vehicula, aliquet libero vitae, tempus massa.
|
||||
Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus
|
||||
sollicitudin, ultrices quam eget, dapibus elit.
|
||||
</Text>
|
||||
<Badge
|
||||
bg={"#FCF8E9"}
|
||||
color="#E5C862"
|
||||
border={"1px solid #E5C862"}
|
||||
px={1}
|
||||
py={2}
|
||||
borderRadius="full"
|
||||
fontSize="xs"
|
||||
fontWeight="500"
|
||||
>
|
||||
In Progress
|
||||
</Badge>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
<TabPanel px={0} py={4}>
|
||||
<Box
|
||||
p={4}
|
||||
borderWidth="1px"
|
||||
borderRadius="lg"
|
||||
boxShadow="sm"
|
||||
borderColor="#EDEDED"
|
||||
maxW="600px"
|
||||
mx="auto"
|
||||
>
|
||||
<Box>
|
||||
<Box>
|
||||
<HStack justifyContent={"space-between"} alignItems={"start"} mb={2}>
|
||||
<Text color="#667085"
|
||||
fontSize="xs"
|
||||
fontWeight="500"
|
||||
mb={0}
|
||||
onClick={onOpen}
|
||||
cursor={"pointer"}>
|
||||
TA-97868
|
||||
</Text>
|
||||
<Icon as={HiOutlineMail} color="#5E0FCD" w={5} h={5} />
|
||||
</HStack>
|
||||
<Box>
|
||||
<HStack>
|
||||
<Text
|
||||
fontWeight="500"
|
||||
fontSize="sm"
|
||||
color="#363636"
|
||||
mb={2}
|
||||
>
|
||||
App loading issue
|
||||
</Text>
|
||||
<Text
|
||||
fontWeight="500"
|
||||
fontSize="sm"
|
||||
color="#363636"
|
||||
mb={2}
|
||||
>
|
||||
{" "}
|
||||
❯ Lorem ipsum dolor
|
||||
</Text>
|
||||
<Text color="#858585" fontSize="xs" mb={2}>
|
||||
17 Jan 2023
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Text fontSize="xs" color="#667085">
|
||||
Aenean et elit vehicula, aliquet libero vitae, tempus massa.
|
||||
Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus
|
||||
sollicitudin, ultrices quam eget, dapibus elit.
|
||||
</Text>
|
||||
<Badge
|
||||
bg={"#E0FFE5"}
|
||||
color="#159F2B"
|
||||
border={"1px solid #159F2B"}
|
||||
px={1}
|
||||
py={2}
|
||||
borderRadius="full"
|
||||
fontSize="xs"
|
||||
fontWeight="500"
|
||||
>
|
||||
Completed
|
||||
</Badge>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
<TabPanel px={0} py={4}>
|
||||
<Box
|
||||
p={4}
|
||||
borderWidth="1px"
|
||||
borderRadius="lg"
|
||||
boxShadow="sm"
|
||||
borderColor="#EDEDED"
|
||||
maxW="600px"
|
||||
mx="auto"
|
||||
>
|
||||
<Box>
|
||||
<Box>
|
||||
<HStack justifyContent={"space-between"} alignItems={"start"} mb={2}>
|
||||
<Text color="#667085"
|
||||
fontSize="xs"
|
||||
fontWeight="500"
|
||||
mb={0}
|
||||
onClick={onOpen}
|
||||
cursor={"pointer"}>
|
||||
TA-97868
|
||||
</Text>
|
||||
<Icon as={HiOutlineMail} color="#5E0FCD" w={5} h={5} />
|
||||
</HStack>
|
||||
<Box>
|
||||
<HStack>
|
||||
<Text
|
||||
fontWeight="500"
|
||||
fontSize="sm"
|
||||
color="#363636"
|
||||
mb={2}
|
||||
>
|
||||
App loading issue
|
||||
</Text>
|
||||
<Text
|
||||
fontWeight="500"
|
||||
fontSize="sm"
|
||||
color="#363636"
|
||||
mb={2}
|
||||
>
|
||||
{" "}
|
||||
❯ Lorem ipsum dolor
|
||||
</Text>
|
||||
<Text color="#858585" fontSize="xs" mb={2}>
|
||||
17 Jan 2023
|
||||
</Text>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Text fontSize="xs" color="#667085">
|
||||
Aenean et elit vehicula, aliquet libero vitae, tempus massa.
|
||||
Maecenas dapibus molestie arcu vitae tincidunt. Vivamus ac risus
|
||||
sollicitudin, ultrices quam eget, dapibus elit.
|
||||
</Text>
|
||||
<Badge
|
||||
bg={"#FFD8D8"}
|
||||
color="#D40202"
|
||||
border={"1px solid #D40202"}
|
||||
px={1}
|
||||
py={2}
|
||||
borderRadius="full"
|
||||
fontSize="xs"
|
||||
fontWeight="500"
|
||||
>
|
||||
Terminated
|
||||
</Badge>
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Box>
|
||||
{/* Include the Notifications modal */}
|
||||
<AllTicketsModal isOpen={isOpen} onClose={onClose} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -29,5 +29,4 @@ export const RouteLink = [
|
||||
{ path: "/profile", Component: Profile },
|
||||
{ path: "/profile/edit-profile", Component: EditProfile },
|
||||
{ path: "/contact-us", Component: ContactUs },
|
||||
{ path: "/your-wallet", Component: YourWallet },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user