Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 90b51b73 by Jyotsna
Options

vendor dashboard, orders and activities listing ui

1 parent f85792b0
Inline Side-by-side
Showing 15 changed files with 466 additions and 34 deletions
components/layout/VendorDashboardSidebar.js
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';
import React, { useState } from 'react';
const Sidebar = ({ collapsed, toggleSidebar }) => {
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}>
......@@ -18,13 +24,13 @@ const Sidebar = ({ collapsed, toggleSidebar }) => {
</a>
</li>
<li className={router.pathname === "/vendor/orders" ? "active" : ""}>
<a href="#">
<a href="/vendor/orders">
<Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
<span>Orders</span>
</a>
</li>
<li className={router.pathname === "/vendor/activities" ? "active" : ""}>
<a href="#">
<a href="/vendor/activities">
<Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
<span>Activities</span>
</a>
......
components/vendor/ActivityListing.js 0 → 100644
import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const ActivityListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
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>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>
{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>Adventure</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>
</Fragment>
);
};
export default ActivityListing;
components/vendor/OrderListing.js 0 → 100644
import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const OrderListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
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>+3more</span></td>
<td>$ 499</td>
<td><div className="statusDiv processing">Processing</div></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default OrderListing;
package.json
......@@ -33,6 +33,7 @@
"react-player": "^2.11.0",
"react-rating": "^2.0.5",
"react-redux": "^8.0.2",
"react-select": "^5.8.0",
"react-toastify": "^9.0.8",
"reactjs-otp-input": "^2.0.8",
"redux": "^4.2.0",
......
pages/vendor/activities/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import ActivityListing from "../../../components/vendor/ActivityListing";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function ActivityListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<ActivityListing />
</div>
</div>
</Layout>
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {},
};
});
pages/vendor/dashboard/index.js
......@@ -6,17 +6,10 @@ import { Button } from "react-bootstrap";
import { FaPlus } from "react-icons/fa";
const VendorDashboard = () => {
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
return (
<Layout>
<div className="sidebarContainer">
<Sidebar collapsed={collapsed} toggleSidebar={toggleSidebar} />
<Sidebar />
<div className="content">
<div className="row">
<div className="col-12 offset-lg-2 col-lg-8">
......
pages/vendor/orders/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import OrderListing from "../../../components/vendor/OrderListing";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function OrderListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<OrderListing />
</div>
</div>
</Layout>
);
};
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(getVendorDetails())
return {
props: {},
};
});
public/fonts/Poppins-SemiBold.ttf 0 → 100644
No preview for this file type
public/images/vendor/icon-filter.svg 0 → 100644
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.17071 16C4.58254 14.8348 5.69378 14 7 14C8.3062 14 9.4175 14.8348 9.8293 16H20V18H9.8293C9.4175 19.1652 8.3062 20 7 20C5.69378 20 4.58254 19.1652 4.17071 18H0V16H4.17071ZM10.1707 9C10.5825 7.83481 11.6938 7 13 7C14.3062 7 15.4175 7.83481 15.8293 9H20V11H15.8293C15.4175 12.1652 14.3062 13 13 13C11.6938 13 10.5825 12.1652 10.1707 11H0V9H10.1707ZM4.17071 2C4.58254 0.83481 5.69378 0 7 0C8.3062 0 9.4175 0.83481 9.8293 2H20V4H9.8293C9.4175 5.16519 8.3062 6 7 6C5.69378 6 4.58254 5.16519 4.17071 4H0V2H4.17071Z" fill="white"/>
</svg>
public/images/vendor/icon-img.svg 0 → 100644
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 2H2V16L11.2923 6.70649C11.6828 6.31595 12.3159 6.31591 12.7065 6.70641L18 12.0104V2ZM0 0.9934C0 0.44476 0.45531 0 0.9918 0H19.0082C19.556 0 20 0.44495 20 0.9934V17.0066C20 17.5552 19.5447 18 19.0082 18H0.9918C0.44405 18 0 17.5551 0 17.0066V0.9934ZM6 8C4.89543 8 4 7.1046 4 6C4 4.89543 4.89543 4 6 4C7.10457 4 8 4.89543 8 6C8 7.1046 7.10457 8 6 8Z" fill="black"/>
</svg>
public/images/vendor/icon-more-vertical.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20C11.45 20 10.9792 19.8042 10.5875 19.4125C10.1958 19.0208 10 18.55 10 18C10 17.45 10.1958 16.9792 10.5875 16.5875C10.9792 16.1958 11.45 16 12 16C12.55 16 13.0208 16.1958 13.4125 16.5875C13.8042 16.9792 14 17.45 14 18C14 18.55 13.8042 19.0208 13.4125 19.4125C13.0208 19.8042 12.55 20 12 20ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM12 8C11.45 8 10.9792 7.80417 10.5875 7.4125C10.1958 7.02083 10 6.55 10 6C10 5.45 10.1958 4.97917 10.5875 4.5875C10.9792 4.19583 11.45 4 12 4C12.55 4 13.0208 4.19583 13.4125 4.5875C13.8042 4.97917 14 5.45 14 6C14 6.55 13.8042 7.02083 13.4125 7.4125C13.0208 7.80417 12.55 8 12 8Z" fill="#686767"/>
</svg>
public/images/vendor/icon-view.svg 0 → 100644
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0003 0C16.3924 0 20.8784 3.87976 21.8189 9C20.8784 14.1202 16.3924 18 11.0003 18C5.60812 18 1.12215 14.1202 0.181641 9C1.12215 3.87976 5.60812 0 11.0003 0ZM11.0003 16C15.2359 16 18.8603 13.052 19.7777 9C18.8603 4.94803 15.2359 2 11.0003 2C6.7646 2 3.14022 4.94803 2.22278 9C3.14022 13.052 6.7646 16 11.0003 16ZM11.0003 13.5C8.51498 13.5 6.50026 11.4853 6.50026 9C6.50026 6.51472 8.51498 4.5 11.0003 4.5C13.4855 4.5 15.5003 6.51472 15.5003 9C15.5003 11.4853 13.4855 13.5 11.0003 13.5ZM11.0003 11.5C12.381 11.5 13.5003 10.3807 13.5003 9C13.5003 7.6193 12.381 6.5 11.0003 6.5C9.6196 6.5 8.50026 7.6193 8.50026 9C8.50026 10.3807 9.6196 11.5 11.0003 11.5Z" fill="black"/>
</svg>
styles/fonts.css
......@@ -211,3 +211,9 @@
font-weight: 400;
src: local('Poppons Regular'), url('../public/fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Poppins SemiBold';
font-style: normal;
font-weight: 600;
src: local('Poppons SemiBold'), url('../public/fonts/Poppins-SemiBold.ttf') format('truetype');
}
\ No newline at end of file
styles/globals.css
......@@ -574,7 +574,8 @@ p {
line-height: normal;
}
span.form-error, .form-error {
span.form-error,
.form-error {
color: red;
font-size: 0.8rem;
font-family: "Sofia Pro Light";
......@@ -651,7 +652,8 @@ span.form-error, .form-error {
}
.form-container input,
.form-container select, .form-container textarea {
.form-container select,
.form-container textarea {
width: 100%;
border-radius: 10px !important;
border: 0.814px solid #000;
......@@ -659,14 +661,14 @@ span.form-error, .form-error {
color: #000;
font-family: "Sofia Pro Light";
font-size: 15px;
font-weight: 400;
line-height: normal;
height: 45px;
padding: 16px 22px;
}
.form-container input:focus,
.form-container select:focus, .form-container textarea {
.form-container select:focus,
.form-container textarea {
box-shadow: none;
outline: unset;
}
......@@ -802,23 +804,23 @@ span.form-error, .form-error {
}
.check-container .checkmark:after {
left: 7px;
top: 0px;
width: 4px;
height: 11px;
left: 6px;
top: 1px;
width: 5px;
height: 10px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkmark:after {
.check-container .checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-container input {
position: absolute;
/* position: absolute; */
opacity: 0;
cursor: pointer;
height: 0;
......@@ -829,7 +831,7 @@ span.form-error, .form-error {
background-color: #fff;
}
.checkmark {
.check-container .checkmark {
position: absolute;
top: 0;
left: 0;
......@@ -913,7 +915,6 @@ span.form-error, .form-error {
.uploadProfileImage p {
font-family: "Sofia Pro Bold";
font-size: 20px;
font-weight: 700;
line-height: 28px;
letter-spacing: 0em;
color: #fff;
......@@ -1150,7 +1151,6 @@ span.form-error, .form-error {
.content-div h2 {
font-family: "Sofia Pro Bold";
font-size: 36px;
font-weight: 700;
line-height: 50px;
letter-spacing: 0em;
margin-bottom: 20px;
......@@ -1159,7 +1159,6 @@ span.form-error, .form-error {
.content-div h4 {
font-family: "Sofia Pro Light";
font-size: 30px;
font-weight: 300;
line-height: 37px;
letter-spacing: 0em;
margin-bottom: 20px;
......@@ -1217,7 +1216,7 @@ span.form-error, .form-error {
.business-details .textS {
font-size: 12px;
line-height: 12px;
line-height: 13px;
margin-top: 10px;
margin-bottom: 5px;
}
......@@ -1253,7 +1252,6 @@ span.form-error, .form-error {
color: #000;
font-family: "Sofia Pro Light";
font-size: 15px;
font-weight: 400;
line-height: normal;
height: 45px;
padding: 16px 22px;
......@@ -1283,13 +1281,13 @@ span.form-error, .form-error {
}
.sidebar {
width: 250px;
width: 210px;
height: auto;
background-color: #242932;
color: #fff;
transition: width 0.3s ease;
margin-top: -20px;
padding-top: 3rem;
padding-top: 2rem;
}
.sidebar.collapsed {
......@@ -1303,7 +1301,7 @@ span.form-error, .form-error {
}
.sidebar ul li {
padding: 1rem 2rem;
padding: 0.85rem 2rem;
}
.sidebar ul li.active {
......@@ -1329,7 +1327,7 @@ span.form-error, .form-error {
.sidebarContainer .content {
flex: 1;
padding: 3rem 1rem;
padding: 2rem 1rem;
}
/*-------------------------*/
......@@ -1447,7 +1445,7 @@ span.form-error, .form-error {
}
/* Create a custom radio button */
.checkmark {
.radioContainer .checkmark {
position: absolute;
top: 50%;
left: 0;
......@@ -1470,7 +1468,7 @@ span.form-error, .form-error {
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
.radioContainer .checkmark:after {
content: "";
position: absolute;
display: none;
......@@ -1492,8 +1490,193 @@ span.form-error, .form-error {
transform: translate(-50%, -50%);
}
/*--------- multiselect dropdown --------*/
.css-b62m3t-container {
width: 100%;
}
.select__control {
border: 0.81px solid #000 !important;
border-radius: 10px !important;
font-family: "Sofia Pro Light";
font-size: 15px;
text-align: left;
color: #000;
min-height: 45px !important;
height: 45px !important;
}
.select__value-container.select__value-container--is-multi,
.select__input-container {
height: 45px !important;
}
.select__input-container {
margin: 0 !important;
}
.select__control.select__control--is-focused {
border-color: #000 !important;
box-shadow: unset !important;
}
.select__menu {
font-family: "Sofia Pro Light";
font-size: 15px;
text-align: left;
color: #000;
}
.select__indicator.select__dropdown-indicator svg {
fill: #000 !important;
stroke: #000 !important;
}
/*---- activity images upload----*/
.customUploadImage {
position: relative;
display: inline-block;
border: .81px solid #000;
border-radius: 10px;
width: 51px;
height: 51px;
margin-right: 1rem;
padding: 8px;
cursor: pointer;
}
.customUploadImage label {
margin: 0 auto !important;
padding: 0;
}
.customUploadImage img {
min-width: 20px !important;
min-height: 18px !important;
}
.customUploadImage input[type="file"] {
position: absolute;
z-index: 2;
margin: 0;
opacity: 0;
top: 0;
left: 0;
}
.removeImage {
position: absolute;
top: -5px;
right: -5px;
cursor: pointer;
}
.textAdd {
font-family: "Sofia Pro Light";
font-size: 15px !important;
line-height: 15.17px !important;
text-align: left;
color: #0070BD;
text-decoration: underline;
text-wrap: nowrap;
margin-top: 10px;
cursor: pointer;
}
/*--------- orders listing -----------*/
.rightContent h2 {
font-family: "Sofia Pro Bold";
font-size: 32px;
line-height: 40px;
letter-spacing: 0em;
margin-bottom: 0;
}
.rightContent .btn {
padding: 10px 15px !important;
}
.listingTable {
padding: 0 10px;
border-collapse: separate;
border-spacing: 0 12px;
}
.listingTable thead tr th {
background-color: #E9EEF0;
padding: 12px;
color: #1C1C1E;
font-family: "Poppins SemiBold";
font-size: 16px;
line-height: 25px;
}
.listingTable thead tr th:first-child {
border-radius: 12px 0 0 0;
}
.listingTable thead tr th:last-child {
border-radius: 0 12px 0 0;
}
.listingTable .check-container .checkmark {
top: 5px;
border: 1px solid rgba(218, 220, 224, 1)
}
.listingTable .check-container .checkmark:after {
left: 7px;
top: 2px;
}
.listingTable tbody tr {
box-shadow: 0px 4px 4px 0px rgba(156, 156, 156, 0.15);
}
.listingTable tbody tr:last-child {
border-radius: 0 0 12px 12px;
}
.listingTable tbody tr:last-child td {
color: rgba(178, 178, 182, 1);
}
.listingTable tbody tr td {
padding: 12px;
font-family: "Poppins Regular";
font-size: 15px;
line-height: 22px;
color: #1C1C1E;
}
.listingTable tbody tr td span {
color: Blue;
text-decoration: underline;
}
.statusDiv {
border-radius: 50px;
padding: 5px;
font-family: "Poppins Regular";
font-size: 15px;
line-height: 22px;
text-align: center;
cursor: pointer;
}
.statusDiv.processing {
background-color: #DFF3FB;
border: 1px solid #01A7DB;
color: #3198F3;
}
.statusDiv.completed {
background-color: #F1FFEB;
border: 1px solid #5ED028;
color: #5ED028;
}
......@@ -2361,6 +2544,7 @@ footer hr {
.faqs-session {
padding: 5rem 0;
}
.subscribe label .btn {
font-size: 16px;
padding-left: 1rem;
......
yarn.lock
This diff could not be displayed because it is too large.
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!