Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 6353aded by Jyotsna
Options

admin journey ui

1 parent eb6dc002
Expand all
Inline Side-by-side
Showing 19 changed files with 968 additions and 4 deletions
components/admin/ActivityDetailsModal.js 0 → 100644
import Image from "next/image";
import { Fragment } from "react"
import { Button, Modal } from "react-bootstrap";
const ActivityDetailsModal = ({ show, handleClose }) => {
return (
<Fragment>
<Modal show={show} onHide={handleClose} size="xl" aria-labelledby="contained-modal-title-vcenter"
centered>
<Modal.Body>
<div className="vendorDetails">
<div className="row">
<div className="col-12 col-lg-12">
<div className="d-flex align-items-center justify-content-between mb-4">
<h4 className="mb-0">Activity Details</h4>
<span className="image-container" style={{ cursor: "pointer" }} onClick={handleClose}>
<Image width={13} height={13} alt="" src="/images/admin/icon-close.svg" className="image" />
</span>
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-4 borderRight">
<p className="phead">Basic Details</p>
<div className="row">
<p className="col-12 col-lg-6">Category</p>
<p className="col-12 col-lg-6">Adventure</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">SubCategory</p>
<p className="col-12 col-lg-6">Rooftop</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Activity Name</p>
<p className="col-12 col-lg-6">Edge City Climb</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Activity Description</p>
<p className="col-12 col-lg-6 pview">View</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Location</p>
<p className="col-12 col-lg-6">Chelsea</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Address</p>
<p className="col-12 col-lg-6">30 Hudson Yards, New York, NY 10001</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Activity Name</p>
<p className="col-12 col-lg-6">Edge City Climb</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Price (per person)</p>
<p className="col-12 col-lg-6">$185</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Tags</p>
<p className="col-12 col-lg-6"></p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Place</p>
<p className="col-12 col-lg-6">Outdoor</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Gifting to someone</p>
<p className="col-12 col-lg-6">Disallowed</p>
</div>
</div>
<div className="col-12 col-lg-4 borderRight ps-4">
<div>
<p className="phead">Group Information</p>
<div className="row">
<p className="col-12 col-lg-6">Contact Person for the activity</p>
<p className="col-12 col-lg-6">Arnav</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Size of the Group</p>
<p className="col-12 col-lg-6">2</p>
</div>
</div>
<div>
<p className="phead">Availability</p>
<div className="row">
<p className="col-12 col-lg-6">Months</p>
<p className="col-12 col-lg-6">February</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Time</p>
<p className="col-12 col-lg-6">9:45am-10:00pm</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Duration</p>
<p className="col-12 col-lg-6">2-3 hours</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Age Group</p>
<p className="col-12 col-lg-6">13+</p>
</div>
</div>
</div>
<div className="col-12 col-lg-4 ps-4">
<div>
<p className="phead">Booking & Activity Information</p>
<div className="row">
<p className="col-12 col-lg-6">Link of Booking</p>
<p className="col-12 col-lg-6 pview">https://www.zango.com</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Images of Activities</p>
<p className="col-12 col-lg-6 pview">View Images</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Brand Logo</p>
<p className="col-12 col-lg-6 pview">View Logo</p>
</div>
</div>
<div>
<p className="phead">Policy & Terms</p>
<div className="row">
<p className="col-12 col-lg-6">Cancellation Policy</p>
<p className="col-12 col-lg-6 pview">View</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Terms & Conditions</p>
<p className="col-12 col-lg-6 pview">View</p>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-12">
<div className="d-flex justify-content-center">
<Button variant="" className="btnAdd btnApprove m-0" onClick={handleClose}>
Approve
</Button>
<div className="px-1"></div>
<Button variant="" className="btnAdd btnReject m-0" onClick={handleClose}>
Reject
</Button>
</div>
</div>
</div>
</div>
</Modal.Body>
</Modal>
</Fragment>
)
}
export default ActivityDetailsModal;
\ No newline at end of file \ No newline at end of file
components/admin/ActivityListing.js 0 → 100644
import { Fragment, useState } from "react";
import { Button, Image, Table } from "react-bootstrap";
const ActivityListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const [showMenuIndex, setShowMenuIndex] = useState(null);
const toggleMenu = (index) => {
setShowMenuIndex(index === showMenuIndex ? null : index);
};
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Activities</h2>
<p>View all the Activities</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Category</th>
<th>Name</th>
<th>Location</th>
<th>Price</th>
<th>Place</th>
<th>Gift</th>
<th>Vendor Website</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td><span>Adventure</span></td>
<td>Ice-Skating in NY</td>
<td>North Avenue</td>
<td>$ 479</td>
<td>Outdoor</td>
<td>Allowed</td>
<td><span style={{ color: "#0070BD", marginRight: ".5rem" }}>View Link</span> <Image alt="" width={17} height={17} src="/images/admin/icon-link.svg" /></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-view.svg" /></td>
<td>
<div className="actions">
<div className="ellipse" onClick={() => toggleMenu(index)}>
<Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
</div>
{showMenuIndex === index && (
<div className="menu">
<ul>
<li>Delete</li>
</ul>
</div>
)}
</div>
</td>
</tr>
))}
<tr>
<td colSpan={10}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default ActivityListing;
components/admin/GiftcardListing.js 0 → 100644
import { Fragment, useState } from "react";
import { Button, Image, Table } from "react-bootstrap";
const GiftcardListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const [showMenuIndex, setShowMenuIndex] = useState(null);
const toggleMenu = (index) => {
setShowMenuIndex(index === showMenuIndex ? null : index);
};
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Gift Card Requests</h2>
<p>View all the gift cards</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Name</th>
<th>Amount</th>
<th>Phone Number</th>
<th>Sender Email Address</th>
<th>Receiver Email Address</th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>Michael Anderson</td>
<td>$ 499</td>
<td>+91 9865 43210</td>
<td>adventuretrails@example.com</td>
<td>john@example.com</td>
<td>
<div className="actions">
<div className="ellipse" onClick={() => toggleMenu(index)}>
<Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
</div>
{showMenuIndex === index && (
<div className="menu">
<ul>
<li>Delete</li>
</ul>
</div>
)}
</div>
</td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default GiftcardListing;
components/admin/OrderListing.js 0 → 100644
import { Fragment, useState } from "react";
import { Button, Image, Table } from "react-bootstrap";
const OrderListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const [showMenuIndex, setShowMenuIndex] = useState(null);
const toggleMenu = (index) => {
setShowMenuIndex(index === showMenuIndex ? null : index);
};
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Orders</h2>
<p>View all the orders</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Order ID</th>
<th>Order Date</th>
<th>Items</th>
<th>Total Amount</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>ID_8797878</td>
<td>29 Jan 2024</td>
<td>Edge City Climb <span style={{ color: "blue" }}>+3more</span></td>
<td>$ 499</td>
<td><div className={`statusDiv ${index % 2 ? "booked" : "cancelled"}`}>{index % 2 ? "Booked" : "Cancelled"}</div></td>
<td>
<div className="actions">
<div className="ellipse" onClick={() => toggleMenu(index)}>
<Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
</div>
{showMenuIndex === index && (
<div className="menu">
<ul>
<li>Delete</li>
</ul>
</div>
)}
</div>
</td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default OrderListing;
components/admin/RejectModal.js 0 → 100644
import { Formik } from "formik";
import { Fragment, useState } from "react";
import { Button, Form, Modal } from "react-bootstrap";
import ReactSelect from "react-select";
import * as Yup from "yup";
const RejectModal = ({ show, handleClose }) => {
const formValidationSchema = Yup.object().shape({
email: Yup.string().required("Email Id is Required").email("Please Enter An Valid Email Id"),
reason: Yup.string().required("Reason is Required"),
comments: Yup.string().required("Comment is Required"),
});
const reasonOptions = [
{ value: "Not listed", label: "Not listed" }
]
const [selectedOption, setSelectedOption] = useState(null);
return (
<Fragment>
<Modal show={show} onHide={handleClose} aria-labelledby="contained-modal-title-vcenter"
centered>
<Modal.Body>
<div className="row">
<div className="col-12 col-lg-12">
<div className="px-3">
<p className="mphead">Reject reason</p>
<div className="form-container">
<Formik
initialValues={{
email: "",
reason: "",
comments: "",
}}
validationSchema={formValidationSchema}
onSubmit={(values) => {
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<div className="input-group">
<label>Email Id</label>
<input type="text" name="email" onChange={handleChange} onBlur={handleBlur} value={values.email} placeholder="yourname@example.com" style={{ backgroundColor: "#EBEBEB", boxShadow: "1.63px 3.26px 4.07px 0px #FFFFFF40 inset", border: "none" }} />
{errors.email && touched.email && <span className="form-error">{errors.email}</span>}
</div>
<div className="input-group mb-1">
<label>Reason</label>
<select
name="reason"
onChange={handleChange}
onBlur={handleBlur}
value={values.reason}
>
<option value="">Select</option>
<option value="Not listed">Not listed</option>
</select>
{/* <ReactSelect
defaultValue={selectedOption}
onChange={setSelectedOption}
options={reasonOptions}
/> */}
{errors.reason && touched.reason && <span className="form-error">{errors.reason}</span>}
</div>
<div className="input-group">
<textarea rows={4} placeholder="Leave your comments here..." name="comments"
onChange={handleChange}
onBlur={handleBlur}
value={values.comments} />
{errors.comments && touched.comments && <span className="form-error">{errors.comments}</span>}
</div>
<div className="my-4">
<div className="d-flex justify-content-center">
<Button type="submit" variant="" className="btnAdd btnApprove m-0">
Submit
</Button>
<div className="px-1"></div>
<Button type="button" variant="" className="btnAdd btnReject m-0" onClick={handleClose}>
Cancel
</Button>
</div>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
</div>
</Modal.Body>
</Modal>
</Fragment>
)
}
export default RejectModal;
\ No newline at end of file \ No newline at end of file
components/admin/VendorDetails.js 0 → 100644
import React, { Fragment, useState } from "react"
import { Button, Table } from "react-bootstrap";
import { FaAngleLeft, FaArrowLeft } from "react-icons/fa";
import ActivityDetailsModal from "./ActivityDetailsModal";
import Image from "next/image";
import RejectModal from "./RejectModal";
const VendorDetails = ({ id, backClick }) => {
const [showActivityDetailsModal, setShowActivityDetailsModal] = useState(false);
const [showRejectModal, setShowRejectModal] = useState(false);
const handleShowActivityDetails = () => {
setShowActivityDetailsModal(true)
}
const handleCloseActivityDetails = () => {
setShowActivityDetailsModal(false)
}
const handleShowRejectModal = () => {
setShowRejectModal(true)
}
const handleCloseRejectModal = () => {
setShowRejectModal(false)
}
return (
<Fragment>
<div className="vendorDetails">
<div className="row">
<div className="col-12 col-lg-12">
<div className="d-flex align-items-center justify-content-between">
<div className="backDiv">
<span className="backArrow" onClick={backClick}><FaAngleLeft /></span>
<span>Vendors List</span>
</div>
<div className="d-flex">
<Button variant="" className="btnAdd btnApprove my-0 me-2">
Approve
</Button>
<Button variant="" className="btnAdd btnReject m-0" onClick={handleShowRejectModal}>
Reject
</Button>
</div>
</div>
</div>
<div className="col-12 col-lg-12 mt-4">
<h4>Business Information</h4>
<div className="row">
<div className="col-12 col-lg-4">
<p className="phead">Business Documents</p>
<div className="row">
<p className="col-12 col-lg-6">Business PAN No.</p>
<p className="col-12 col-lg-6">BQYOG5528T</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">PAN</p>
<p className="col-12 col-lg-6 pview">View</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">GST Number</p>
<p className="col-12 col-lg-6">27AAGFL7781K2AX</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">GST Certificate</p>
<p className="col-12 col-lg-6 pview">View</p>
</div>
<div className="row">
<p className="col-12 col-lg-6">Business Name</p>
<p className="col-12 col-lg-6">M S Adventures</p>
</div>
</div>
<div className="col-12 col-lg-5 borderLeft">
<p className="phead">Business Address</p>
<div className="row">
<p className="col-12 col-lg-4">Pincode</p>
<p className="col-12 col-lg-8">91006</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">Country</p>
<p className="col-12 col-lg-8">United States</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">State</p>
<p className="col-12 col-lg-8">California</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">City</p>
<p className="col-12 col-lg-8">Los Angeles</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">Address Line 1</p>
<p className="col-12 col-lg-8">5396 North Reese Avenue, Fresno</p>
</div>
<div className="row">
<p className="col-12 col-lg-4">Address Line 2</p>
<p className="col-12 col-lg-8">N/A</p>
</div>
</div>
</div>
</div>
<div className="col-12 col-lg-12 mt-4">
<h4 className="mb-1">Activities</h4>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Category</th>
<th>Sub Category</th>
<th>Name</th>
<th>Location</th>
<th>Price</th>
<th>Place</th>
<th>Gift</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{[1, 2].map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td><span onClick={handleShowActivityDetails}>Adventure</span></td>
<td>Ice-Skating</td>
<td>Ice-Skating in NY</td>
<td>North Avenue</td>
<td>$ 479</td>
<td>Outdoor</td>
<td>Allowed</td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-view.svg" /></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
</tr>
))}
<tr>
<td colSpan={10}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
{showActivityDetailsModal && (
<ActivityDetailsModal show={showActivityDetailsModal} handleClose={handleCloseActivityDetails} />
)}
{showRejectModal && (
<RejectModal show={showRejectModal} handleClose={handleCloseRejectModal} />
)}
</Fragment>
)
}
export default VendorDetails;
\ No newline at end of file \ No newline at end of file
components/admin/VendorListing.js 0 → 100644
import { Fragment, useState } from "react";
import { Button, Image, Table } from "react-bootstrap";
import VendorDetails from "./VendorDetails";
const VendorListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const [showMenuIndex, setShowMenuIndex] = useState(null);
const toggleMenu = (index) => {
setShowMenuIndex(index === showMenuIndex ? null : index);
};
const [vendorId, setVendorId] = useState(null);
const [showVendorDetails, setShowVendorDetails] = useState(false);
const handleShowVendorDetails = () => {
setShowVendorDetails(true)
}
const handleCloseVendorDetails = () => {
setShowVendorDetails(false)
}
return (
<Fragment>
{!showVendorDetails && (
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Vendors</h2>
<p>View all the vendors</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Vendor</th>
<th>Vendor Id</th>
<th>Contact Person</th>
<th>Phone Number</th>
<th>Email Address</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>
<span onClick={() => {
setVendorId(1);
handleShowVendorDetails();
}}>
M S Adventure
</span>
</td>
<td>VN_ET9797</td>
<td>Ridge Johnson</td>
<td>+91 9865 43210</td>
<td>adventuretrails@example.com</td>
<td><div className={`statusDiv ${index % 2 ? "inactive" : "active"}`}>{index % 2 ? "Inactive" : "Active"}</div></td>
<td>
<div className="actions">
<div className="ellipse" onClick={() => toggleMenu(index)}>
<Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
</div>
{showMenuIndex === index && (
<div className="menu">
<ul>
<li>View</li>
<li>Deactivate</li>
<li>Delete</li>
</ul>
</div>
)}
</div>
</td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
)}
{vendorId && showVendorDetails && (
<VendorDetails id={vendorId} backClick={handleCloseVendorDetails} />
)}
</Fragment>
);
};
export default VendorListing;
components/layout/AdminDashboardSidebar.js 0 → 100644
import Image from 'next/image';
import { useRouter } from 'next/router';
import React, { useState } from 'react';
const Sidebar = () => {
const router = useRouter();
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
return (
<div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
{/* <button className="toggle-btn" onClick={toggleSidebar}>
Toggle Sidebar
</button> */}
<ul>
<li className={router.pathname === "/admin/orders" ? "active" : ""}>
<a href="/admin/orders">
<Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
<span>Orders</span>
</a>
</li>
<li className={router.pathname === "/admin/activities" ? "active" : ""}>
<a href="/admin/activities">
<Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
<span>Activities</span>
</a>
</li>
<li className={router.pathname === "/admin/vendors" ? "active" : ""}>
<a href="/admin/vendors">
<Image alt="" width={22} height={15} src="/images/admin/icon-user.svg" />
<span>Vendor</span>
</a>
</li>
<li className={router.pathname === "/admin/giftcards" ? "active" : ""}>
<a href="/admin/giftcards">
<Image alt="" width={22} height={15} src="/images/admin/icon-gift.svg" />
<span>Gift Card</span>
</a>
</li>
</ul>
</div>
);
};
export default Sidebar;
\ No newline at end of file \ No newline at end of file
components/vendor/ActivityListing.js
import { Fragment } from "react"; import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap"; import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const ActivityListing = () => { const ActivityListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9] const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
...@@ -57,7 +56,7 @@ const ActivityListing = () => { ...@@ -57,7 +56,7 @@ const ActivityListing = () => {
<span className="checkmark"></span> <span className="checkmark"></span>
</label> </label>
</td> </td>
<td>Adventure</td> <td><span>Adventure</span></td>
<td>Ice-Skating</td> <td>Ice-Skating</td>
<td>Ice-Skating in NY</td> <td>Ice-Skating in NY</td>
<td>North Avenue</td> <td>North Avenue</td>
......
components/vendor/OrderListing.js
import { Fragment } from "react"; import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap"; import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const OrderListing = () => { const OrderListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9] const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
...@@ -56,7 +55,7 @@ const OrderListing = () => { ...@@ -56,7 +55,7 @@ const OrderListing = () => {
</td> </td>
<td>ID_8797878</td> <td>ID_8797878</td>
<td>29 Jan 2024</td> <td>29 Jan 2024</td>
<td>Edge City Climb <span>+3more</span></td> <td>Edge City Climb <span style={{color:"blue"}}>+3more</span></td>
<td>$ 499</td> <td>$ 499</td>
<td><div className="statusDiv processing">Processing</div></td> <td><div className="statusDiv processing">Processing</div></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td> <td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
......
pages/admin/activities/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import Sidebar from "../../../components/layout/AdminDashboardSidebar";
import ActivityListing from "../../../components/admin/ActivityListing";
export default function ActivityListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<ActivityListing />
</div>
</div>
</Layout>
);
};
pages/admin/giftcards/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import Sidebar from "../../../components/layout/AdminDashboardSidebar";
import GiftcardListing from "../../../components/admin/GiftcardListing";
export default function GiftCardListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<GiftcardListing />
</div>
</div>
</Layout>
);
};
pages/admin/orders/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import Sidebar from "../../../components/layout/AdminDashboardSidebar";
import OrderListing from "../../../components/admin/OrderListing";
export default function OrderListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<OrderListing />
</div>
</div>
</Layout>
);
};
pages/admin/vendors/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import Sidebar from "../../../components/layout/AdminDashboardSidebar";
import VendorListing from "../../../components/admin/VendorListing";
export default function VendorListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<VendorListing />
</div>
</div>
</Layout>
);
};
public/images/admin/icon-close.svg 0 → 100644
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.9997 5.5865L11.9495 0.636719L13.3637 2.05093L8.4139 7.0007L13.3637 11.9504L11.9495 13.3646L6.9997 8.4149L2.04996 13.3646L0.635742 11.9504L5.5855 7.0007L0.635742 2.05093L2.04996 0.636719L6.9997 5.5865Z" fill="black"/>
</svg>
public/images/admin/icon-gift.svg 0 → 100644
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 15V17H18V15H2ZM2 4H4.2C4.11667 3.85 4.0625 3.69167 4.0375 3.525C4.0125 3.35833 4 3.18333 4 3C4 2.16667 4.29167 1.45833 4.875 0.875C5.45833 0.291667 6.16667 0 7 0C7.5 0 7.9625 0.129167 8.3875 0.3875C8.8125 0.645833 9.18333 0.966667 9.5 1.35L10 2L10.5 1.35C10.8 0.95 11.1667 0.625 11.6 0.375C12.0333 0.125 12.5 0 13 0C13.8333 0 14.5417 0.291667 15.125 0.875C15.7083 1.45833 16 2.16667 16 3C16 3.18333 15.9875 3.35833 15.9625 3.525C15.9375 3.69167 15.8833 3.85 15.8 4H18C18.55 4 19.0208 4.19583 19.4125 4.5875C19.8042 4.97917 20 5.45 20 6V17C20 17.55 19.8042 18.0208 19.4125 18.4125C19.0208 18.8042 18.55 19 18 19H2C1.45 19 0.979167 18.8042 0.5875 18.4125C0.195833 18.0208 0 17.55 0 17V6C0 5.45 0.195833 4.97917 0.5875 4.5875C0.979167 4.19583 1.45 4 2 4ZM2 12H18V6H12.9L15 8.85L13.4 10L10 5.4L6.6 10L5 8.85L7.05 6H2V12ZM7 4C7.28333 4 7.52083 3.90417 7.7125 3.7125C7.90417 3.52083 8 3.28333 8 3C8 2.71667 7.90417 2.47917 7.7125 2.2875C7.52083 2.09583 7.28333 2 7 2C6.71667 2 6.47917 2.09583 6.2875 2.2875C6.09583 2.47917 6 2.71667 6 3C6 3.28333 6.09583 3.52083 6.2875 3.7125C6.47917 3.90417 6.71667 4 7 4ZM13 4C13.2833 4 13.5208 3.90417 13.7125 3.7125C13.9042 3.52083 14 3.28333 14 3C14 2.71667 13.9042 2.47917 13.7125 2.2875C13.5208 2.09583 13.2833 2 13 2C12.7167 2 12.4792 2.09583 12.2875 2.2875C12.0958 2.47917 12 2.71667 12 3C12 3.28333 12.0958 3.52083 12.2875 3.7125C12.4792 3.90417 12.7167 4 13 4Z" fill="white"/>
</svg>
public/images/admin/icon-link.svg 0 → 100644
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6567 11.8284L13.2425 10.4142L14.6567 9C16.2188 7.4379 16.2188 4.90524 14.6567 3.34314C13.0946 1.78105 10.5619 1.78105 8.9998 3.34314L7.5856 4.75736L6.17139 3.34314L7.5856 1.92893C9.9287 -0.414218 13.7277 -0.414218 16.0709 1.92893C18.414 4.27208 18.414 8.0711 16.0709 10.4142L14.6567 11.8284ZM11.8282 14.6569L10.414 16.0711C8.0709 18.4142 4.27189 18.4142 1.92875 16.0711C-0.414401 13.7279 -0.414401 9.9289 1.92875 7.5858L3.34296 6.17157L4.75717 7.5858L3.34296 9C1.78086 10.5621 1.78086 13.0948 3.34296 14.6569C4.90506 16.2189 7.4377 16.2189 8.9998 14.6569L10.414 13.2426L11.8282 14.6569ZM11.8282 4.75736L13.2425 6.17157L6.17139 13.2426L4.75717 11.8284L11.8282 4.75736Z" fill="#0070BD"/>
</svg>
public/images/admin/icon-user.svg 0 → 100644
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM0 16V13.2C0 12.6333 0.145833 12.1125 0.4375 11.6375C0.729167 11.1625 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64583 4.75 9.3875C5.81667 9.12917 6.9 9 8 9C9.1 9 10.1833 9.12917 11.25 9.3875C12.3167 9.64583 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2708 11.1625 15.5625 11.6375C15.8542 12.1125 16 12.6333 16 13.2V16H0ZM2 14H14V13.2C14 13.0167 13.9542 12.85 13.8625 12.7C13.7708 12.55 13.65 12.4333 13.5 12.35C12.6 11.9 11.6917 11.5625 10.775 11.3375C9.85833 11.1125 8.93333 11 8 11C7.06667 11 6.14167 11.1125 5.225 11.3375C4.30833 11.5625 3.4 11.9 2.5 12.35C2.35 12.4333 2.22917 12.55 2.1375 12.7C2.04583 12.85 2 13.0167 2 13.2V14ZM8 6C8.55 6 9.02083 5.80417 9.4125 5.4125C9.80417 5.02083 10 4.55 10 4C10 3.45 9.80417 2.97917 9.4125 2.5875C9.02083 2.19583 8.55 2 8 2C7.45 2 6.97917 2.19583 6.5875 2.5875C6.19583 2.97917 6 3.45 6 4C6 4.55 6.19583 5.02083 6.5875 5.4125C6.97917 5.80417 7.45 6 8 6Z" fill="white"/>
</svg>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!