Controls/CMS-Client
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2023-10-14 22:02:57 -04:00
commit 5f95d857d4
783 changed files with 112323 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/eCommerce/Cart/HaveAPromoCode.js
+78
View File
@@ -0,0 +1,78 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
const HaveAPromoCode = () => {
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get("email"),
password: data.get("password"),
});
};
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px 25px 20px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: "10px",
}}
>
Have a Promo Code?
</Typography>
<Box
component="form"
noValidate
onSubmit={handleSubmit}
position="relative"
>
<TextField
fullWidth
id="couponCode"
label="Coupon code"
name="email"
autoComplete="Coupon code"
InputProps={{
style: { borderRadius: 8 },
}}
/>
<Button
type="submit"
variant="contained"
sx={{
textTransform: "capitalize",
borderRadius: "8px",
fontWeight: "500",
fontSize: "13px",
padding: "10px 18px",
position: "absolute",
right: "5px",
top: "5px",
color: "#fff !important",
}}
>
Apply
</Button>
</Box>
</Card>
</>
);
};
export default HaveAPromoCode;
components/eCommerce/Cart/OrderSummary.js
+188
View File
@@ -0,0 +1,188 @@
import * as React from 'react';
import Card from "@mui/material/Card";
import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import AddIcon from "@mui/icons-material/Add";
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
const OrderSummary = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px 25px 15px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: "10px",
}}
>
Order Summary
</Typography>
<TableContainer
component={Paper}
sx={{
boxShadow: "none",
}}
>
<Table aria-label="simple table" className='dark-table'>
<TableBody>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="left"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
fontWeight: '500'
}}
>
Sub Total :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
fontWeight: '500'
}}
>
$760.00
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="left"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
fontWeight: '500'
}}
>
Discount :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
fontWeight: '500'
}}
>
$60.00
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="left"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
fontWeight: '500'
}}
>
Shipping Charge :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
fontWeight: '500'
}}
>
$50.00
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="left"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
fontWeight: '500'
}}
>
Estimated Tax :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
fontWeight: '500'
}}
>
$00.00
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="left"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "14px",
fontWeight: '500',
color: "#000"
}}
>
Total (USD) :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
fontWeight: '500',
color: "#000"
}}
>
$750.00
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Card>
</>
)
}
export default OrderSummary;
components/eCommerce/Cart/ShoppingCart.js
+562
View File
@@ -0,0 +1,562 @@
import * as React from 'react';
import Card from "@mui/material/Card";
import { Box, Typography } from "@mui/material";
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
import Button from '@mui/material/Button';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import Tooltip from '@mui/material/Tooltip';
import Link from 'next/link';
const ShoppingCart = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: "20px",
}}
>
Shopping Cart
</Typography>
<TableContainer
component={Paper}
sx={{
boxShadow: "none",
}}
>
<Table
sx={{ minWidth: 650 }}
aria-label="simple table"
className="dark-table"
>
<TableHead sx={{ background: "#F7FAFF" }}>
<TableRow>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Product
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Price
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Quantity
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Total Amount
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product1.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Laptop Macos Pro
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$100.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
02
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$200</b>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Tooltip title="Remove" placement="left" arrow>
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product2.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Smart Camera XD6
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$200.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
01
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$200</b>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Tooltip title="Remove" placement="left" arrow>
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product3.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Pixi 8 Wireless Airphone
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$120.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
01
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$120</b>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Tooltip title="Remove" placement="left" arrow>
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product4.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Jebble Smart Watch
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$120.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
01
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$120</b>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Tooltip title="Remove" placement="left" arrow>
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product5.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Airpod
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$120.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
01
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$120</b>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Tooltip title="Remove" placement="left" arrow>
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<Box mt={2}>
<Typography fontWeight="500" mb="5px">Add a Note:</Typography>
<TextareaAutosize
aria-label="minimum height"
minRows={5}
placeholder="Some demo text ... "
style={{
width: '100%',
background: '#FFFFFF',
border: '1px solid #E7EBF5',
borderRadius: '10px',
padding: '10px'
}}
className="dark-textarea"
/>
<Box align="end">
<Link href="/ecommerce/checkout" className="text-decoration-none">
<Button
variant="contained"
startIcon={<ShoppingCartIcon sx={{ color: "#fff !important" }} />}
sx={{
p: "10px 25px",
mt: '10px',
textTransform: 'capitalize',
color: "#fff !important",
}}
>
Checkout
</Button>
</Link>
</Box>
</Box>
</Card>
</>
)
}
export default ShoppingCart;
components/eCommerce/Checkout/BillingInformation.js
+334
View File
@@ -0,0 +1,334 @@
import * as React from "react";
import { Box } from "@mui/material";
import Grid from "@mui/material/Grid";
import { Typography } from "@mui/material";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import dynamic from 'next/dynamic'
const RichTextEditor = dynamic(() => import('@mantine/rte'), {
ssr: false,
})
const BillingInformation = () => {
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get("email"),
password: data.get("password"),
});
};
// Select dropdown
const [countrySelect, setCountrySelect] = React.useState('');
const handleChange = (event) => {
setCountrySelect(event.target.value);
};
return (
<>
<Box component="form" noValidate onSubmit={handleSubmit}>
<Box
sx={{
background: "#fff",
padding: "30px 20px",
borderRadius: "8px",
mb: "15px"
}}
className="card-dark-bg"
>
<Typography as="h4" fontWeight="500" fontSize="18px" mb="10px">
Billing Information
</Typography>
<Grid container alignItems="center" spacing={2}>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
First Name
</Typography>
<TextField
autoComplete="first-name"
name="firstName"
required
fullWidth
id="firstName"
label="Enter name"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Last Name
</Typography>
<TextField
autoComplete="last-name"
name="lastName"
required
fullWidth
id="LastName"
label="Enter name"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Email Address
</Typography>
<TextField
autoComplete="email-address"
name="emailAddress"
required
fullWidth
id="emailAddress"
label="Enter email address"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Phone
</Typography>
<TextField
autoComplete="phone"
name="phone"
required
fullWidth
id="phone"
label="Enter phone number"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={12}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Address
</Typography>
<TextField
autoComplete="address"
name="address"
required
fullWidth
id="address"
label="Your location"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Country
</Typography>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Select</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={countrySelect}
label="Country"
onChange={handleChange}
>
<MenuItem value={10}>USA</MenuItem>
<MenuItem value={20}>Canada</MenuItem>
<MenuItem value={30}>Australia</MenuItem>
<MenuItem value={30}>UK</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Town/City
</Typography>
<TextField
autoComplete="town-city"
name="townCity"
required
fullWidth
id="townCity"
label="Town/city"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
State
</Typography>
<TextField
autoComplete="state"
name="state"
required
fullWidth
id="state"
label="State"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Zip Code
</Typography>
<TextField
autoComplete="zip-code"
name="zipCode"
required
fullWidth
id="zipCode"
label="Enter Zip Code"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Order Notes :
</Typography>
<RichTextEditor
id="rte"
controls={[
['bold', 'italic', 'underline', 'link', 'image'],
['unorderedList', 'h1', 'h2', 'h3'],
['sup', 'sub'],
['alignLeft', 'alignCenter', 'alignRight'],
]}
/>
</Grid>
<Grid item xs={12} textAlign="end">
<Button
type="submit"
variant="contained"
sx={{
textTransform: "capitalize",
borderRadius: "8px",
fontWeight: "500",
fontSize: "13px",
padding: "12px 20px",
color: "#fff !important"
}}
>
Procced To Shipping
</Button>
</Grid>
</Grid>
</Box>
</Box>
</>
)
}
export default BillingInformation;
components/eCommerce/Checkout/ShoppingCart.js
+440
View File
@@ -0,0 +1,440 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Box, Typography } from "@mui/material";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
const ShoppingCart = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: "10px",
}}
>
Shopping Cart
</Typography>
<TableContainer
component={Paper}
sx={{
boxShadow: "none",
}}
>
<Table aria-label="simple table" className="dark-table">
<TableHead sx={{ background: "#F7FAFF" }}>
<TableRow>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Product
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Price
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product1.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Laptop Macos Pro
</Typography>
</Box>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$100.00
</TableCell>
</TableRow>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product2.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Smart Camera XD6
</Typography>
</Box>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$200.00
</TableCell>
</TableRow>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product3.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Pixi 8 Wireless Airphone
</Typography>
</Box>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$120.00
</TableCell>
</TableRow>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product4.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Jebble Smart Watch
</Typography>
</Box>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$120.00
</TableCell>
</TableRow>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product5.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "12px",
}}
className='ml-10px'
>
Airpod
</Typography>
</Box>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$120.00
</TableCell>
</TableRow>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
align="left"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: "500",
}}
>
Sub Total :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: "500",
}}
>
$760.00
</TableCell>
</TableRow>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: "500",
}}
>
Discount :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: "500",
}}
>
$60.00
</TableCell>
</TableRow>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: "500",
}}
>
Shipping Charge :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: "500",
}}
>
$50.00
</TableCell>
</TableRow>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: "500",
}}
>
Estimated Tax :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: "500",
}}
>
$00.00
</TableCell>
</TableRow>
<TableRow
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
padding: "8px 10px",
fontWeight: "500",
color: "#000",
}}
>
Total (USD) :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
padding: "8px 10px",
fontWeight: "500",
color: "#000",
}}
>
$750.00
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Card>
</>
);
};
export default ShoppingCart;
components/eCommerce/Customers/CustomersLists.js
+965
View File
@@ -0,0 +1,965 @@
import * as React from "react";
import { Box, Typography } from "@mui/material";
import Card from "@mui/material/Card";
import PropTypes from "prop-types";
import { useTheme } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableFooter from "@mui/material/TableFooter";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import FirstPageIcon from "@mui/icons-material/FirstPage";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import LastPageIcon from "@mui/icons-material/LastPage";
import Grid from "@mui/material/Grid";
import Tooltip from "@mui/material/Tooltip";
import DeleteIcon from "@mui/icons-material/Delete";
import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import AddIcon from "@mui/icons-material/Add";
import ClearIcon from "@mui/icons-material/Clear";
import Checkbox from '@mui/material/Checkbox';
import { styled } from '@mui/material/styles';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import CloseIcon from '@mui/icons-material/Close';
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
// Create new Modal
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
'& .MuiDialogContent-root': {
padding: theme.spacing(2),
},
'& .MuiDialogActions-root': {
padding: theme.spacing(1),
},
}));
function BootstrapDialogTitle(props) {
const { children, onClose, ...other } = props;
return (
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
{children}
{onClose ? (
<IconButton
aria-label="close"
onClick={onClose}
sx={{
position: 'absolute',
right: 8,
top: 8,
color: (theme) => theme.palette.grey[500],
}}
>
<CloseIcon />
</IconButton>
) : null}
</DialogTitle>
);
}
BootstrapDialogTitle.propTypes = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
};
// End Create new Modal
function CustomersList(props) {
const theme = useTheme();
const { count, page, rowsPerPage, onPageChange } = props;
const handleFirstPageButtonClick = (event) => {
onPageChange(event, 0);
};
const handleBackButtonClick = (event) => {
onPageChange(event, page - 1);
};
const handleNextButtonClick = (event) => {
onPageChange(event, page + 1);
};
const handleLastPageButtonClick = (event) => {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</Box>
);
}
CustomersList.propTypes = {
count: PropTypes.number.isRequired,
onPageChange: PropTypes.func.isRequired,
page: PropTypes.number.isRequired,
rowsPerPage: PropTypes.number.isRequired,
};
function createData(name, image, userName, email, phone, balance, orders, status, badgeClass, joiningDate, projects) {
return {
name,
image,
userName,
email,
phone,
balance,
orders,
status,
badgeClass,
joiningDate,
projects,
};
}
const rows = [
createData(
"Evangelina Mcclain",
"/images/user1.png",
"@jstevenson5c",
"jordansteve@gmail.com",
"0018 5054 8877",
"$3365.12",
"165",
"Active",
"successBadge",
"Jan 1, 2023",
),
createData(
"Candice Munoz",
"/images/user2.png",
"@candice3unoz",
"candicemunoz@gmail.com",
"0018 5054 7532",
"$3550",
"112",
"Active",
"successBadge",
"Jan 2, 2023",
),
createData(
"Mike Mcclain",
"/images/user3.png",
"@mike4mcclain",
"mikemcclain@gmail.com",
"0018 3567 8422",
"$3928",
"240",
"Deactivate",
"dangerBadge",
"Jan 3, 2023",
),
createData(
"Bernard Langley",
"/images/user4.png",
"@bernardlangley",
"bernardlangley@gmail.com",
"0018 9382 4820",
"$4932",
"350",
"Active",
"successBadge",
"Jan 4, 2023",
),
createData(
"Kristie Hall",
"/images/user5.png",
"@kristie7hall",
"kristiehall@gmail.com",
"0018 4663 5732",
"$4922",
"384",
"Active",
"successBadge",
"Jan 5, 2023",
),
createData(
"Bolton Obrien",
"/images/user6.png",
"@bolton4obrien",
"boltonobrien@gmail.com",
"0018 5743 5657",
"$4663.12",
"145",
"Active",
"successBadge",
"Jan 6, 2023",
),
createData(
"Dee Alvarado",
"/images/user7.png",
"@dee3alvarado",
"deealvarado@gmail.com",
"0018 4532 6666",
"$2343.12",
"435",
"Active",
"successBadge",
"Jan 7, 2023",
),
createData(
"Cervantes Kramer",
"/images/user8.png",
"@cervantes4kramer",
"cervantes4kramer@gmail.com",
"0018 54545 7878",
"$345",
"24",
"Active",
"successBadge",
"Jan 8, 2023",
),
createData(
"Dejesus Michael",
"/images/user9.png",
"@dejesus1michael",
"dejesusmichael@gmail.com",
"0018 3552 6678",
"$3365.12",
"56",
"Active",
"successBadge",
"Jan 9, 2023",
),
createData(
"Alissa Nelson",
"/images/user10.png",
"@alissa1nelson",
"alissa1nelson@gmail.com",
"0018 3354 6822",
"$3522.12",
"165",
"Active",
"successBadge",
"Jan 10, 2023",
),
createData(
"Milton",
"/images/user11.png",
"@milton",
"milton@gmail.com",
"0018 366 2232",
"$3434",
"222",
"Active",
"successBadge",
"Jan 11, 2023",
),
createData(
"Claude",
"/images/user12.png",
"@claude",
"claude@gmail.com",
"0018 4614 23211",
"$4554.12",
"673",
"Active",
"successBadge",
"Jan 12, 2023",
),
createData(
"Joshua",
"/images/user13.png",
"@joshua",
"joshua@gmail.com",
"0018 3354 2532",
"$2434.12",
"463",
"Active",
"successBadge",
"Jan 13, 2023",
),
createData(
"Harvey",
"/images/user14.png",
"@harvey",
"harvey@gmail.com",
"0018 3331 2224",
"$453.12",
"445",
"Active",
"successBadge",
"Jan 14, 2023",
),
createData(
"Antonio",
"/images/user15.png",
"@antonio",
"antonio@gmail.com",
"0018 3354 6822",
"$3522.12",
"165",
"Active",
"successBadge",
"Jan 15, 2023",
),
createData(
"Julian",
"/images/user16.png",
"@julian",
"julian@gmail.com",
"0018 4322 1231",
"$455.12",
"165",
"Active",
"successBadge",
"Jan 16, 2023",
),
createData(
"Harold",
"/images/user17.png",
"@harold",
"harold@gmail.com",
"0018 455 3323",
"$3422.12",
"564",
"Active",
"successBadge",
"Jan 17, 2023",
),
createData(
"Kingston",
"/images/user18.png",
"@kingston",
"kingston@info.com",
"0018 3453 4325",
"$442.12",
"6776",
"Active",
"successBadge",
"Jan 18, 2023",
),
].sort((a, b) => (a.name < b.name ? -1 : 1));
export default function CustomersLists() {
// Table
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
// Create new modal
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get("email"),
password: data.get("password"),
});
};
// End Create new Modal
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px 20px 15px",
mb: "15px",
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderBottom: "1px solid #EEF0F7",
paddingBottom: "10px",
mb: "20px",
}}
className="for-dark-bottom-border"
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
}}
>
Customers Lists
</Typography>
<Button
onClick={handleClickOpen}
variant="contained"
sx={{
textTransform: "capitalize",
borderRadius: "8px",
fontWeight: "500",
fontSize: "13px",
padding: "12px 20px",
color: "#fff !important",
}}
>
<AddIcon
sx={{ position: "relative", top: "-1px" }}
className='mr-5px'
/>{" "}
Create New
</Button>
</Box>
<TableContainer
component={Paper}
sx={{
boxShadow: "none",
}}
>
<Table
sx={{ minWidth: 1100 }}
aria-label="custom pagination table"
className="dark-table"
>
<TableHead sx={{ background: "#F7FAFF" }}>
<TableRow>
<TableCell
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
>
Name
</TableCell>
<TableCell
align="center"
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
>
Email
</TableCell>
<TableCell
align="center"
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
>
Phone
</TableCell>
<TableCell
align="center"
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
>
Balance
</TableCell>
<TableCell
align="center"
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
>
Orders
</TableCell>
<TableCell
align="center"
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
>
Status
</TableCell>
<TableCell
align="center"
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
>
Joining Date
</TableCell>
<TableCell
align="right"
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
>
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{(rowsPerPage > 0
? rows.slice(
page * rowsPerPage,
page * rowsPerPage + rowsPerPage
)
: rows
).map((row) => (
<TableRow key={row.name}>
<TableCell
style={{
width: 250,
borderBottom: "1px solid #F7FAFF",
paddingTop: "13px",
paddingBottom: "13px",
display: "flex",
alignItems: "center",
}}
>
<Checkbox {...label} size="small" />
<Box
sx={{
display: "flex",
alignItems: "center",
ml: '10px'
}}
>
<img
src={row.image}
alt="User"
width={40}
height={40}
className="borRadius100"
/>
<Box className='ml-10px'>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "13.5px",
}}
>
{row.name}
</Typography>
<Typography
sx={{
fontSize: "12px",
color: "#A9A9C8",
}}
>
{row.userName}
</Typography>
</Box>
</Box>
</TableCell>
<TableCell
align="center"
style={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
paddingTop: "13px",
paddingBottom: "13px",
}}
>
{row.email}
</TableCell>
<TableCell
align="center"
style={{
borderBottom: "1px solid #F7FAFF",
paddingTop: "13px",
paddingBottom: "13px",
fontSize: "13px",
}}
>
{row.phone}
</TableCell>
<TableCell
align="center"
style={{
borderBottom: "1px solid #F7FAFF",
paddingTop: "13px",
paddingBottom: "13px",
fontSize: "13px",
}}
>
{row.balance}
</TableCell>
<TableCell
align="center"
style={{
borderBottom: "1px solid #F7FAFF",
paddingTop: "13px",
paddingBottom: "13px",
fontSize: "13px",
}}
>
{row.orders}
</TableCell>
<TableCell
align="center"
style={{
borderBottom: "1px solid #F7FAFF",
paddingTop: "13px",
paddingBottom: "13px",
fontSize: "13px",
}}
>
<span className={row.badgeClass}>{row.status}</span>
</TableCell>
<TableCell
align="center"
style={{
borderBottom: "1px solid #F7FAFF",
paddingTop: "13px",
paddingBottom: "13px",
fontSize: "13px",
}}
>
{row.joiningDate}
</TableCell>
<TableCell
align="right"
sx={{ borderBottom: "1px solid #F7FAFF" }}
>
<Box
sx={{
display: "inline-block",
}}
>
<Tooltip title="Remove" placement="top">
<IconButton
aria-label="remove"
size="small"
color="danger"
className="danger"
>
<DeleteIcon fontSize="inherit" />
</IconButton>
</Tooltip>
<Tooltip title="Rename" placement="top">
<IconButton
aria-label="rename"
size="small"
color="primary"
className="primary"
>
<DriveFileRenameOutlineIcon fontSize="inherit" />
</IconButton>
</Tooltip>
</Box>
</TableCell>
</TableRow>
))}
{emptyRows > 0 && (
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell
colSpan={7}
style={{ borderBottom: "1px solid #F7FAFF" }}
/>
</TableRow>
)}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
colSpan={8}
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
inputProps: {
"aria-label": "rows per page",
},
native: true,
}}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
ActionsComponent={CustomersList}
style={{ borderBottom: "none" }}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
</Card>
{/* Create new modal */}
<BootstrapDialog
onClose={handleClose}
aria-labelledby="customized-dialog-title"
open={open}
>
<Box>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
background: "#EDEFF5",
borderRadius: "8px",
padding: "20px 20px",
}}
>
<Typography
id="modal-modal-title"
variant="h6"
component="h2"
sx={{
fontWeight: "500",
fontSize: "18px",
}}
>
Create New
</Typography>
<IconButton
aria-label="remove"
size="small"
onClick={handleClose}
>
<ClearIcon />
</IconButton>
</Box>
<Box component="form" noValidate onSubmit={handleSubmit}>
<Box
sx={{
background: "#fff",
padding: "20px 20px",
borderRadius: "8px",
}}
>
<Grid container alignItems="center" spacing={2}>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Image
</Typography>
<TextField
autoComplete="image"
name="image"
required
fullWidth
id="image"
type="file"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Name
</Typography>
<TextField
autoComplete="name"
name="name"
required
fullWidth
id="name"
label="Name"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
User Name
</Typography>
<TextField
autoComplete="user-name"
name="userName"
required
fullWidth
id="userName"
label="User Name"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Email
</Typography>
<TextField
autoComplete="email"
name="email"
required
fullWidth
id="email"
label="example@info.com"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Phone Number
</Typography>
<TextField
autoComplete="phone"
name="phone"
required
fullWidth
id="phone"
label="0018 5054 8877"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} md={12} lg={6}>
<Typography
as="h5"
sx={{
fontWeight: "500",
fontSize: "14px",
mb: "12px",
}}
>
Balance
</Typography>
<TextField
autoComplete="balance"
name="balance"
required
fullWidth
id="balance"
label="Balance"
autoFocus
InputProps={{
style: { borderRadius: 8 },
}}
/>
</Grid>
<Grid item xs={12} textAlign="end">
<Button
type="submit"
variant="contained"
sx={{
mt: 1,
textTransform: "capitalize",
borderRadius: "8px",
fontWeight: "500",
fontSize: "13px",
padding: "12px 20px",
}}
>
<AddIcon
sx={{
position: "relative",
top: "-2px",
}}
className='mr-5px'
/>{" "}
Create New
</Button>
</Grid>
</Grid>
</Box>
</Box>
</Box>
</BootstrapDialog>
</>
);
}
components/eCommerce/OrderDetails/TrackOrder/OrderTable.js
+612
View File
@@ -0,0 +1,612 @@
import * as React from 'react';
import Card from "@mui/material/Card";
import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import AddIcon from "@mui/icons-material/Add";
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
const OrderTable = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px 25px 20px",
mb: "15px",
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "end",
mb: "20px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 600,
}}
>
Order #VL2667
</Typography>
<Button
variant="contained"
sx={{
textTransform: "capitalize",
borderRadius: "8px",
fontWeight: "600",
fontSize: "13px",
padding: "10px 20px",
color: "#fff !important",
}}
>
<AddIcon
sx={{ position: "relative", top: "-1px" }}
className='mr-5px'
/>{" "}
Invoice
</Button>
</Box>
<TableContainer
component={Paper}
sx={{
boxShadow: "none",
}}
>
<Table
sx={{ minWidth: 650 }}
aria-label="simple table"
className="dark-table"
>
<TableHead sx={{ background: "#F7FAFF" }}>
<TableRow>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Product
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Price
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Quantity
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
}}
>
Total Amount
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product1.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "600",
fontSize: "12px",
}}
className='ml-10px'
>
Laptop Macos Pro
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$100.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
02
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$200</b>
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product2.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "600",
fontSize: "12px",
}}
className='ml-10px'
>
Smart Camera XD6
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$200.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
01
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$200</b>
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product3.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "600",
fontSize: "12px",
}}
className='ml-10px'
>
Pixi 8 Wireless Airphone
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$120.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
01
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$120</b>
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product4.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "600",
fontSize: "12px",
}}
className='ml-10px'
>
Jebble Smart Watch
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$120.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
01
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$120</b>
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src="/images/product5.png"
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "600",
fontSize: "12px",
}}
className='ml-10px'
>
Airpod
</Typography>
</Box>
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
$120.00
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
01
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<b>$120</b>
</TableCell>
</TableRow>
{/* For Total Amount */}
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="right"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: '600'
}}
>
Sub Total :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: '600'
}}
>
$760.00
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="right"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: '600'
}}
>
Discount :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: '600'
}}
>
$60.00
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="right"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: '600'
}}
>
Shipping Charge :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: '600'
}}
>
$50.00
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="right"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: '600'
}}
>
Estimated Tax :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
fontWeight: '600'
}}
>
$00.00
</TableCell>
</TableRow>
<TableRow
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
align="right"
colSpan={3}
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
padding: "8px 10px",
fontWeight: '600',
color: "#000"
}}
>
Total (USD) :
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13px",
padding: "8px 10px",
fontWeight: '600',
color: "#000"
}}
>
$750.00
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Card>
</>
)
}
export default OrderTable;
components/eCommerce/OrderDetails/TrackOrder/TrackOrder.module.css
+73
View File
@@ -0,0 +1,73 @@
.timelineList .tList {
position: relative;
padding-left: 20px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #F7FAFF;
}
.timelineList .tList:last-child {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
.timelineList .tList::before {
content: '';
background: linear-gradient(149.1deg, #99B8F3 14.61%, #177FCB 130.18%);
box-shadow: 0px 2.98686px 13.4409px rgba(126, 172, 235, 0.25);
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
top: 4px;
left: 0;
}
.timelineList .tList::after {
content: '';
background: #F7FAFF;
width: 3px;
height: 75px;
border-radius: 5px;
position: absolute;
top: 18px;
left: 3px;
}
.timelineList .tList h4 {
font-weight: 500;
font-size: 14px;
margin: 0 0 10px;
}
.timelineList .tList .date {
color: #A9A9C8;
font-size: 12px;
margin: 0;
}
.timelineList .tList .text {
margin: 10px 0 0;
font-size: 13px;
}
/* For RTL Style */
[dir="rtl"] .timelineList .tList {
padding-left: 0;
padding-right: 20px;
}
[dir="rtl"] .timelineList .tList::before {
left: auto;
right: 0;
}
[dir="rtl"] .timelineList .tList::after {
left: auto;
right: 3px;
}
/* For dark mode */
[class="dark"] .timelineList .tList {
border-bottom: 1px solid var(--borderColor);
}
[class="dark"] .timelineList .tList:last-child {
border-bottom: none;
}
.timelineList .tList::after {
background: var(--borderColor);
}
components/eCommerce/OrderDetails/TrackOrder/index.js
+124
View File
@@ -0,0 +1,124 @@
import React from "react";
import { Box, Typography } from "@mui/material";
import Card from "@mui/material/Card";
import styles from "@/components/eCommerce/OrderDetails/TrackOrder/TrackOrder.module.css";
const ActivityTimelineData = [
{
id: "1",
title: "Order Placed",
date: "April 21 2019 07:22 AM",
text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered.",
},
{
id: "2",
title: "Packed",
date: "April 22 2019 12:16 AM",
text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered.",
},
{
id: "3",
title: "Shipped",
date: "April 22 2019 05:16 PM",
text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered.",
},
{
id: "4",
title: "Delivered",
date: "Estimated Delivery Within 3 Days",
text: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered.",
},
];
const TrackOrder = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px 20px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 16,
fontWeight: 500,
mb: "20px",
}}
>
Track Order
</Typography>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
mb: "20px"
}}
>
<Box>
<Typography
as="h3"
sx={{
fontSize: 14,
fontWeight: 500,
mb: "5px",
}}
>
Order ID:
</Typography>
<Typography
sx={{
fontSize: 13,
fontWeight: 500,
}}
>
#VL2667
</Typography>
</Box>
<Box>
<Typography
as="h3"
sx={{
fontSize: 14,
fontWeight: 500,
mb: "5px",
}}
>
Tracking ID:
</Typography>
<Typography
sx={{
fontSize: 13,
fontWeight: 500,
}}
>
1004152012012
</Typography>
</Box>
</Box>
<div className={styles.timelineList}>
{ActivityTimelineData.slice(0, 4).map((timeline) => (
<div className={styles.tList} key={timeline.id}>
<h4>{timeline.title}</h4>
<p className={styles.date}>{timeline.date}</p>
<p className={styles.text}>
{timeline.text}
</p>
</div>
))}
</div>
</Card>
</>
);
};
export default TrackOrder;
components/eCommerce/OrdersList/Features.js
+170
View File
@@ -0,0 +1,170 @@
import React from "react";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import Typography from "@mui/material/Typography";
const featuresData = [
{
id: 1,
iconName: "ri-money-dollar-circle-line",
progress: "1.3%",
title: "Up from past week",
lists: [
{
id: 1,
title: "All Orders",
number: "18k",
},
{
id: 2,
title: "Pending Orders",
number: "5k",
},
{
id: 3,
title: "Complited Orders",
number: "13k",
}
]
},
{
id: 2,
iconName: "ri-bar-chart-line",
progress: "50%",
title: "Up from past week",
lists: [
{
id: 1,
title: "Canceled",
number: "2k",
},
{
id: 2,
title: "Orders Returned",
number: "3k",
},
{
id: 3,
title: "Damaged",
number: "1k",
}
]
},
{
id: 3,
iconName: "ri-star-fill",
progress: "70%",
title: "Up from past week",
lists: [
{
id: 1,
title: "Abandoned Cart",
number: "5k",
},
{
id: 2,
title: "Customers",
number: "10k",
},
{
id: 3,
title: "In Progress",
number: "16k",
}
]
},
]
const Features = () => {
return (
<>
<Grid
container
justifyContent="center"
rowSpacing={1}
columnSpacing={{ xs: 1, sm: 2, md: 2 }}
>
{featuresData.map((feature) => (
<Grid item xs={12} sm={6} md={6} lg={6} xl={4} key={feature.id}>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px 20px",
mb: "15px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
mb: "15px",
}}
>
<Box
sx={{
width: "45px",
height: "45px",
lineHeight: "45px",
background: "#757FEF",
color: "#fff",
fontSize: "25px",
borderRadius: "100%",
textAlign: "center",
}}
>
<i className={feature.iconName}></i>
</Box>
<Typography
variant="h1"
sx={{
fontSize: 15,
fontWeight: 500,
}}
className="ml-10px"
>
<span className="successColor">{feature.progress}</span> {feature.title}
</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
{feature.lists.map((list) => (
<Box key={list.id}>
<Typography
sx={{
fontSize: "13px",
mb: "5px"
}}
>
{list.title}
</Typography>
<Typography
as="h4"
sx={{
fontSize: "18px",
fontWeight: "500",
}}
>
{list.number}
</Typography>
</Box>
))}
</Box>
</Card>
</Grid>
))}
</Grid>
</>
)
}
export default Features;
components/eCommerce/OrdersList/OrdersLists.js
+679
View File
@@ -0,0 +1,679 @@
import * as React from "react";
import { Box } from "@mui/material";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import PropTypes from "prop-types";
import { useTheme } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableFooter from "@mui/material/TableFooter";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import FirstPageIcon from "@mui/icons-material/FirstPage";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import LastPageIcon from "@mui/icons-material/LastPage";
function OrdersList(props) {
const theme = useTheme();
const { count, page, rowsPerPage, onPageChange } = props;
const handleFirstPageButtonClick = (event) => {
onPageChange(event, 0);
};
const handleBackButtonClick = (event) => {
onPageChange(event, page - 1);
};
const handleNextButtonClick = (event) => {
onPageChange(event, page + 1);
};
const handleLastPageButtonClick = (event) => {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</Box>
);
}
OrdersList.propTypes = {
count: PropTypes.number.isRequired,
onPageChange: PropTypes.func.isRequired,
page: PropTypes.number.isRequired,
rowsPerPage: PropTypes.number.isRequired,
};
function createData(
orderID,
productImg,
productTitle,
customer,
price,
vendor,
date,
status,
badgeClass,
rating
) {
return {
orderID,
productImg,
productTitle,
customer,
price,
vendor,
date,
status,
badgeClass,
rating,
};
}
const rows = [
createData(
"#SK258",
"/images/product1.png",
"Laptop Macos Pro",
"Colin Firth",
"$289.50",
"Boetic Fashion",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK259",
"/images/product2.png",
"Smart Camera XD6",
"Wade Dave",
"$189.50",
"Aronic Conver",
"2021-12-19",
"Out of Stock",
"dangerBadge",
"5.0 (61 votes)"
),
createData(
"#SK260",
"/images/product3.png",
"Pixi 8 Wireless Airphone",
"Seth Riley",
"$250.50",
"Lotu Arnich",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK261",
"/images/product4.png",
"Jebble Smart Watch",
"Gilbert Dan",
"$289.50",
"Zoetic Fashion",
"2021-12-19",
"Pending",
"primaryBadge",
"5.0 (61 votes)"
),
createData(
"#SK262",
"/images/product5.png",
"Admas Airpod x-Zon",
"Joshua Glen",
"$289.50",
"Airpod",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK263",
"/images/product6.png",
"Smart Satch F8 Pro",
"Lewis Milton",
"$289.50",
"Smart Satch",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK264",
"/images/product7.png",
"Nord Fold ZL",
"Liam Ethan",
"$289.50",
"Nord",
"2021-12-19",
"Pending",
"primaryBadge",
"5.0 (61 votes)"
),
createData(
"#SK265",
"/images/product8.png",
"Wall Clock Cimbina",
"Ramon Miles",
"$289.50",
"Clock",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK266",
"/images/product9.png",
"Galaxo T6 Munsun",
"Brian Roberto",
"$289.50",
"Smart Phone",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK267",
"/images/product1.png",
"Laptop Macos Pro",
"Colin Firth",
"$289.50",
"Boetic Fashion",
"2021-12-19",
"Pending",
"primaryBadge",
"5.0 (61 votes)"
),
createData(
"#SK268",
"/images/product2.png",
"Smart Camera XD6",
"Wade Dave",
"$189.50",
"Aronic Conver",
"2021-12-19",
"Out of Stock",
"dangerBadge",
"5.0 (61 votes)"
),
createData(
"#SK269",
"/images/product3.png",
"Pixi 8 Wireless Airphone",
"Seth Riley",
"$250.50",
"Lotu Arnich",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK270",
"/images/product4.png",
"Jebble Smart Watch",
"Gilbert Dan",
"$289.50",
"Zoetic Fashion",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK271",
"/images/product5.png",
"Admas Airpod x-Zon",
"Joshua Glen",
"$289.50",
"Airpod",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK272",
"/images/product6.png",
"Smart Satch F8 Pro",
"Lewis Milton",
"$289.50",
"Smart Satch",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK273",
"/images/product7.png",
"Nord Fold ZL",
"Liam Ethan",
"$289.50",
"Nord",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK274",
"/images/product8.png",
"Wall Clock Cimbina",
"Ramon Miles",
"$289.50",
"Clock",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
createData(
"#SK275",
"/images/product9.png",
"Galaxo T6 Munsun",
"Brian Roberto",
"$289.50",
"Smart Phone",
"2021-12-19",
"Delivered",
"successBadge",
"5.0 (61 votes)"
),
].sort((a, b) => (a.orderID < b.orderID ? -1 : 1));
export default function OrdersLists() {
// Select
const [select, setSelect] = React.useState("");
const handleChange = (event) => {
setSelect(event.target.value);
};
// Table
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px 25px 10px",
mb: "15px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
paddingBottom: "10px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
}}
>
Recent Orders
</Typography>
<Box>
<FormControl sx={{ minWidth: 120 }} size="small">
<InputLabel id="demo-select-small" sx={{ fontSize: "14px" }}>
Select
</InputLabel>
<Select
labelId="demo-select-small"
id="demo-select-small"
value={select}
label="Select"
onChange={handleChange}
sx={{ fontSize: "14px" }}
>
<MenuItem value={0} sx={{ fontSize: "14px" }}>
Today
</MenuItem>
<MenuItem value={1} sx={{ fontSize: "14px" }}>
Last 7 Days
</MenuItem>
<MenuItem value={2} sx={{ fontSize: "14px" }}>
Last Month
</MenuItem>
<MenuItem value={3}>Last 12 Months</MenuItem>
<MenuItem value={4} sx={{ fontSize: "14px" }}>
All Time
</MenuItem>
</Select>
</FormControl>
</Box>
</Box>
<TableContainer
component={Paper}
sx={{
boxShadow: "none",
}}
>
<Table
sx={{ minWidth: 950 }}
aria-label="custom pagination table"
className="dark-table"
>
<TableHead sx={{ background: "#F7FAFF" }}>
<TableRow>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13.5px",
padding: "16px 10px",
}}
>
Order ID
</TableCell>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13.5px",
padding: "16px 10px",
}}
>
Product
</TableCell>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13.5px",
padding: "16px 10px",
}}
>
Customer
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13.5px",
padding: "16px 10px",
}}
>
Price
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13.5px",
padding: "16px 10px",
}}
>
Vendor
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13.5px",
padding: "16px 10px",
}}
>
Date
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13.5px",
padding: "16px 10px",
}}
>
Status
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
fontSize: "13.5px",
padding: "16px 10px",
}}
>
Rating
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{(rowsPerPage > 0
? rows.slice(
page * rowsPerPage,
page * rowsPerPage + rowsPerPage
)
: rows
).map((row) => (
<TableRow key={row.orderID}>
<TableCell
sx={{
width: 100,
fontWeight: "500",
fontSize: "13px",
borderBottom: "1px solid #F7FAFF",
padding: "8px 10px",
}}
>
{row.orderID}
</TableCell>
<TableCell
sx={{
width: 250,
borderBottom: "1px solid #F7FAFF",
padding: "8px 10px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<img
src={row.productImg}
alt="Product Img"
width={50}
className="borderRadius10"
/>
<Typography
sx={{
fontWeight: "500",
fontSize: "13px",
}}
className='ml-10px'
>
{row.productTitle}
</Typography>
</Box>
</TableCell>
<TableCell
sx={{
borderBottom: "1px solid #F7FAFF",
padding: "8px 10px",
fontSize: "13px",
}}
>
{row.customer}
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
padding: "8px 10px",
fontSize: "13px",
}}
>
{row.price}
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
padding: "8px 10px",
fontSize: "13px",
}}
>
{row.vendor}
</TableCell>
<TableCell
align="center"
sx={{
borderBottom: "1px solid #F7FAFF",
padding: "8px 10px",
fontSize: "13px",
}}
>
{row.date}
</TableCell>
<TableCell
align="center"
sx={{
fontWeight: 500,
borderBottom: "1px solid #F7FAFF",
fontSize: "12px",
padding: "8px 10px",
}}
>
<span className={row.badgeClass}>{row.status}</span>
</TableCell>
<TableCell
align="right"
sx={{
borderBottom: "1px solid #F7FAFF",
padding: "8px 10px",
fontSize: "13px",
}}
>
{row.rating}
</TableCell>
</TableRow>
))}
{emptyRows > 0 && (
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell
colSpan={8}
style={{ borderBottom: "1px solid #F7FAFF" }}
/>
</TableRow>
)}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
colSpan={8}
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
inputProps: {
"aria-label": "rows per page",
},
native: true,
}}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
ActionsComponent={OrdersList}
style={{ borderBottom: "none" }}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
</Card>
</>
);
}
components/eCommerce/ProductDetails/ProductDescription.js
+23
View File
@@ -0,0 +1,23 @@
import React from 'react';
const ProductDescription = () => {
return (
<>
<div className='product-description'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</li>
<li>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</li>
</ul>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
</div>
</>
)
}
export default ProductDescription;
components/eCommerce/ProductDetails/ProductDetailsContent.js
+177
View File
@@ -0,0 +1,177 @@
import React from "react";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import Typography from "@mui/material/Typography";
import StarIcon from "@mui/icons-material/Star";
import Button from "@mui/material/Button";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import styles from "@/components/eCommerce/ProductDetails/ProductDetailsContent.module.css";
import ProductDescription from "./ProductDescription";
import ProductReviews from "./ProductReviews";
const ProductDetailsContent = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Grid
container
rowSpacing={2}
alignItems="center"
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 3, xl: 4 }}
>
<Grid item xs={12} md={12} lg={5} xl={5}>
<Swiper
navigation={true}
modules={[Navigation]}
className="product-img-slider"
>
<SwiperSlide>
<img src="/images/product-preview.png" alt="product" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/product-preview.png" alt="product" />
</SwiperSlide>
<SwiperSlide>
<img src="/images/product-preview.png" alt="product" />
</SwiperSlide>
</Swiper>
</Grid>
<Grid item xs={12} md={12} lg={7} xl={7}>
<Box>
<Typography as="h4" fontWeight="500" fontSize="18px" mb="10px">
Black T-Shirt Sleeve
</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
mb: "15px",
}}
>
<StarIcon sx={{ color: "#FFBC2B", fontSize: 18 }} />
<StarIcon sx={{ color: "#FFBC2B", fontSize: 18 }} />
<StarIcon sx={{ color: "#FFBC2B", fontSize: 18 }} />
<StarIcon sx={{ color: "#FFBC2B", fontSize: 18 }} />
<StarIcon sx={{ color: "#FFBC2B", fontSize: 18 }} />
<Typography as="h4" fontSize="13px" className="ml-1">
5.0 (61 votes)
</Typography>
</Box>
<Typography fontSize="15px" fontWeight="500" mb="15px">
Price:{" "}
<del
style={{
fontSize: "12px",
color: "#95959d",
}}
className='mr-5px ml-5px'
>
$200
</del>{" "}
$150
</Typography>
<Typography fontSize="14px" mb="15px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim adlino minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</Typography>
<ul className={styles.metaTagList}>
<li>
<span>Category :</span> T-Shirt
</li>
<li>
<span>Availability :</span> In Stock 10 Items
</li>
</ul>
<ul className={styles.socialLink}>
<li>
<span>Share :</span>
</li>
<li>
<a
href="https://www.facebook.com/"
target="_blank"
rel="noreferrer"
>
<i className="ri-facebook-line"></i>
</a>
</li>
<li>
<a
href="https://www.twitter.com/"
target="_blank"
rel="noreferrer"
>
<i className="ri-twitter-line"></i>
</a>
</li>
<li>
<a
href="https://www.instagram.com/"
target="_blank"
rel="noreferrer"
>
<i className="ri-instagram-line"></i>
</a>
</li>
</ul>
<Button
variant="contained"
startIcon={<ShoppingCartIcon sx={{ color: "#fff !important" }} />}
sx={{
p: "10px 25px",
color: "#fff !important"
}}
>
Add To Cart
</Button>
</Box>
</Grid>
</Grid>
<Box mt={2}>
<Tabs className="product-details-tabs">
<TabList>
<Tab>Description</Tab>
<Tab>Reviews (3)</Tab>
</TabList>
<TabPanel>
{/* ProductDescription */}
<ProductDescription />
</TabPanel>
<TabPanel>
{/* ProductReviews */}
<ProductReviews />
</TabPanel>
</Tabs>
</Box>
</Card>
</>
);
};
export default ProductDetailsContent;
components/eCommerce/ProductDetails/ProductDetailsContent.module.css
+57
View File
@@ -0,0 +1,57 @@
.metaTagList {
list-style-type: none;
margin: 0 0 15px;
padding: 0;
}
.metaTagList li {
margin-bottom: 10px;
}
.metaTagList li:last-child {
margin-bottom: 0;
}
.metaTagList li span {
font-weight: 500;
width: 100px;
display: inline-block;
}
.socialLink {
list-style-type: none;
margin: 0 0 25px;
padding: 0;
}
.socialLink li {
display: inline-block;
margin-right: 10px;
}
.socialLink li:last-child {
margin-right: 0;
}
.socialLink li span {
font-weight: 500;
}
.socialLink li a {
text-decoration: none;
background: #EDEFF5;
border-radius: 10px;
color: var(--primaryColor);
display: inline-block;
width: 33px;
height: 33px;
line-height: 33px;
border-radius: 100%;
text-align: center;
}
.socialLink li a:hover {
background-color: var(--primaryColor);
color: #fff;
}
/* For RTL Style */
[dir="rtl"] .socialLink li {
margin-right: 0;
margin-left: 10px;
}
[dir="rtl"] .socialLink li:last-child {
margin-left: 0;
}
components/eCommerce/ProductDetails/ProductReviews.js
+83
View File
@@ -0,0 +1,83 @@
import React from 'react';
import Grid from "@mui/material/Grid";
const ProductReviews = () => {
return (
<>
<Grid
container
rowSpacing={2}
alignItems="center"
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 3, xl: 4 }}
>
<Grid item xs={12} md={12} lg={4} xl={4}>
<div className='review-card'>
<div className='content'>
<div className='reating'>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
</div>
<p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit.</p>
<img src="/images/down-arrow.png" alt="down-arrow" className='down-arrow' />
</div>
<div className='info'>
<img src="/images/user1.png" alt="User" />
<h4>Alvarado Turner</h4>
</div>
</div>
</Grid>
<Grid item xs={12} md={12} lg={4} xl={4}>
<div className='review-card'>
<div className='content'>
<div className='reating'>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
</div>
<p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit.</p>
<img src="/images/down-arrow.png" alt="down-arrow" className='down-arrow' />
</div>
<div className='info'>
<img src="/images/user2.png" alt="User" />
<h4>Riley Dave</h4>
</div>
</div>
</Grid>
<Grid item xs={12} md={12} lg={4} xl={4}>
<div className='review-card'>
<div className='content'>
<div className='reating'>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
<i className="ri-star-fill"></i>
</div>
<p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit.</p>
<img src="/images/down-arrow.png" alt="down-arrow" className='down-arrow' />
</div>
<div className='info'>
<img src="/images/user3.png" alt="User" />
<h4>Ivan Dan</h4>
</div>
</div>
</Grid>
</Grid>
</>
)
}
export default ProductReviews;