first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,474 @@
|
||||
import * as React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
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 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 { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||
import PrintIcon from "@mui/icons-material/Print";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import StarBorderIcon from "@mui/icons-material/StarBorder";
|
||||
import StarIcon from "@mui/icons-material/Star";
|
||||
import Link from "next/link";
|
||||
|
||||
const label = { inputProps: { "aria-label": "Checkbox demo" } };
|
||||
|
||||
function EmailList(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>
|
||||
);
|
||||
}
|
||||
|
||||
EmailList.propTypes = {
|
||||
count: PropTypes.number.isRequired,
|
||||
onPageChange: PropTypes.func.isRequired,
|
||||
page: PropTypes.number.isRequired,
|
||||
rowsPerPage: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
function createData(name, text, readEmail, date) {
|
||||
return { name, readEmail, text, date };
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData(
|
||||
"Benthon, me (2)",
|
||||
"Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
|
||||
"/email/read-email",
|
||||
"1 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Lucas Kriebel (via Twitter)",
|
||||
"Last pic over my village – Yeah i'd like that! Do you remember the video som..",
|
||||
"/email/read-email",
|
||||
"2 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Andrew Zimmer",
|
||||
"Mochila Beta: Subscription Confirmed – You've been confirmed! Welcome to ",
|
||||
"/email/read-email",
|
||||
"3 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Infinity HR",
|
||||
"You've been confirmed! Welcome to the ruling class of the inbox. For your ",
|
||||
"/email/read-email",
|
||||
"4 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"keter (3)",
|
||||
"For your records, here is a copy of the information you submitted to us...",
|
||||
"/email/read-email",
|
||||
"5 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Death to Stock 2",
|
||||
"Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
|
||||
"/email/read-email",
|
||||
"6 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Heter (10)",
|
||||
"Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
|
||||
"/email/read-email",
|
||||
"7 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Erik, me (15)",
|
||||
"For your records, here is a copy of the information you submitted to us...",
|
||||
"/email/read-email",
|
||||
"8 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Death to Stock 4",
|
||||
"Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
|
||||
"/email/read-email",
|
||||
"9 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Erik, me (5)",
|
||||
"Off on Thursday – Eff that place, you might as well stay here with us inst",
|
||||
"/email/read-email",
|
||||
"10 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Benthon, me (3)",
|
||||
"Hello – Trip home from 🎉 Colombo has been arranged, then Jenna will com...",
|
||||
"/email/read-email",
|
||||
"11 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Google Drive Team",
|
||||
"This Week's Top Stories – Our top pick for you on Medium this week The",
|
||||
"/email/read-email",
|
||||
"12 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"Benthon, me (13)",
|
||||
"Weekend on Revibe – Today's Friday and we thought maybe you want so",
|
||||
"/email/read-email",
|
||||
"13 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"me, Susanna (11)",
|
||||
"You can now use your storage in Google Drive – Hey Nicklas Sandell! Tha",
|
||||
"/email/read-email",
|
||||
"14 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"EnvyTheme Support",
|
||||
"New Ticket Reply - eDemy - Michel Valenzuela",
|
||||
"/email/read-email",
|
||||
"15 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"EnvyTheme Support 2",
|
||||
"New Ticket Reply - Abev - Manos Pappas",
|
||||
"/email/read-email",
|
||||
"16 Jan 2022"
|
||||
),
|
||||
createData(
|
||||
"EnvyTheme Support 3",
|
||||
"New Ticket Reply - Lofi - Adarsh Raj",
|
||||
"/email/read-email",
|
||||
"11 Jan 2022"
|
||||
),
|
||||
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
||||
|
||||
export default function EmailLists() {
|
||||
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);
|
||||
};
|
||||
|
||||
// Dropdown
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 25px 10px",
|
||||
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: 16,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Email List
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Tooltip title="Print">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='ml-5px'
|
||||
>
|
||||
<PrintIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='ml-5px'
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Report Spam">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='ml-5px'
|
||||
>
|
||||
<ErrorOutlineIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="More...">
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
size="small"
|
||||
aria-controls={open ? "account-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
sx={{
|
||||
background: "#F2F6F8",
|
||||
}}
|
||||
className='ml-5px'
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="account-menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
PaperProps={{
|
||||
elevation: 0,
|
||||
sx: {
|
||||
overflow: "visible",
|
||||
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
|
||||
mt: 1.5,
|
||||
"& .MuiAvatar-root": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
ml: -0.5,
|
||||
mr: 1,
|
||||
},
|
||||
"&:before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 14,
|
||||
width: 10,
|
||||
height: 10,
|
||||
bgcolor: "background.paper",
|
||||
transform: "translateY(-50%) rotate(45deg)",
|
||||
zIndex: 0,
|
||||
},
|
||||
},
|
||||
}}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last 15 Days</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Month</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Year</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
sx={{ minWidth: 800 }}
|
||||
aria-label="custom pagination table"
|
||||
className="dark-table"
|
||||
>
|
||||
<TableBody>
|
||||
{(rowsPerPage > 0
|
||||
? rows.slice(
|
||||
page * rowsPerPage,
|
||||
page * rowsPerPage + rowsPerPage
|
||||
)
|
||||
: rows
|
||||
).map((row) => (
|
||||
<TableRow key={row.name}>
|
||||
<TableCell
|
||||
style={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Checkbox {...label} size="small" />
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
style={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
{...label}
|
||||
icon={<StarBorderIcon />}
|
||||
checkedIcon={<StarIcon />}
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
style={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Link href={row.readEmail} className="readEmail">
|
||||
{row.name}
|
||||
</Link>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
style={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Link href={row.readEmail} className="readEmail">
|
||||
{row.text}
|
||||
</Link>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
style={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
{row.date}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
{emptyRows > 0 && (
|
||||
<TableRow style={{ height: 53 * emptyRows }}>
|
||||
<TableCell
|
||||
colSpan={5}
|
||||
style={{ borderBottom: "1px solid #F7FAFF" }}
|
||||
/>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
|
||||
colSpan={5}
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: {
|
||||
"aria-label": "rows per page",
|
||||
},
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
ActionsComponent={EmailList}
|
||||
style={{ borderBottom: "none" }}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,375 @@
|
||||
import React from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { Box } from "@mui/material";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Button from "@mui/material/Button";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import SendIcon from "@mui/icons-material/Send";
|
||||
import styles from "@/components/Email/LeftSidebar.module.css";
|
||||
import Badge from "@mui/material/Badge";
|
||||
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";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
const RichTextEditor = dynamic(() => import("@mantine/rte"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
// Compose 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 Compose Modal
|
||||
|
||||
const LeftSidebar = () => {
|
||||
const router = useRouter();
|
||||
|
||||
// Compose 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 Compose Modal
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={handleClickOpen}
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
padding: "12px 20px",
|
||||
mb: "30px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Compose
|
||||
</Button>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
textTransform: "uppercase",
|
||||
fontSize: "13px",
|
||||
color: "#A9A9C8",
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
mailbox
|
||||
</Typography>
|
||||
|
||||
{/* Nav */}
|
||||
<ul className={styles.leftNav}>
|
||||
<li
|
||||
className={router.pathname == "/email/inbox" ? styles.active : ""}
|
||||
>
|
||||
<Link href="/email/inbox">
|
||||
<span>
|
||||
<i className="ri-mail-line"></i> Inbox
|
||||
</span>
|
||||
<Badge
|
||||
badgeContent={4}
|
||||
color="primary"
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "15px",
|
||||
}}
|
||||
className="float-right right-10px for-dark-text-white"
|
||||
></Badge>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.FormDataactive : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-star-fill"></i> Important
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-time-line"></i> Snooozed
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-file-text-line"></i> Draft
|
||||
<Badge
|
||||
badgeContent={4}
|
||||
color="info"
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "15px",
|
||||
}}
|
||||
className="float-right right-10px for-dark-text-white"
|
||||
></Badge>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-send-plane-2-line"></i> Sent Mail
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-error-warning-line"></i> Spam
|
||||
<Badge
|
||||
badgeContent={4}
|
||||
color="danger"
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "15px",
|
||||
color: "#fff",
|
||||
}}
|
||||
className="float-right right-10px for-dark-text-white"
|
||||
></Badge>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-delete-bin-line"></i> Trash
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
textTransform: "uppercase",
|
||||
fontSize: "13px",
|
||||
color: "#A9A9C8",
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
labels
|
||||
</Typography>
|
||||
|
||||
{/* Nav */}
|
||||
<ul className={styles.leftNav}>
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<span>
|
||||
<i className="ri-price-tag-3-line"></i> Personal
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-price-tag-3-line"></i> Company
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-price-tag-3-line"></i> Wallet Balance
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-price-tag-3-line"></i> Friends
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className={router.pathname == "#" ? styles.active : ""}>
|
||||
<Link href="#">
|
||||
<i className="ri-price-tag-3-line"></i> Family
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
{/* Compose 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: "15px 20px",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
New Message
|
||||
</Typography>
|
||||
|
||||
<IconButton
|
||||
aria-label="remove"
|
||||
size="small"
|
||||
onClick={handleClose}
|
||||
className="modal-close"
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Box component="form" noValidate onSubmit={handleSubmit}>
|
||||
<Box
|
||||
sx={{
|
||||
background: "#fff",
|
||||
padding: "30px 20px",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<Grid container alignItems="center" spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
autoComplete="to"
|
||||
name="to"
|
||||
required
|
||||
fullWidth
|
||||
id="to"
|
||||
label="To"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
autoComplete="subject"
|
||||
name="subject"
|
||||
required
|
||||
fullWidth
|
||||
id="subject"
|
||||
label="Subject"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<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={{
|
||||
mt: 1,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
padding: "12px 20px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
<SendIcon
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
className="mr-5px"
|
||||
/>{" "}
|
||||
Send
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</BootstrapDialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LeftSidebar;
|
||||
@@ -0,0 +1,75 @@
|
||||
.leftNav {
|
||||
padding: 0;
|
||||
margin: 0 0 30px;
|
||||
list-style-type: none;
|
||||
}
|
||||
.leftNav li {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.leftNav li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.leftNav li a {
|
||||
text-decoration: none;
|
||||
color: #260944;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
}
|
||||
.leftNav li a:hover, .leftNav li a:hover i {
|
||||
color: var(--primaryColor);
|
||||
}
|
||||
.leftNav li.active > a, .leftNav li.active a i {
|
||||
color: var(--primaryColor) !important;
|
||||
}
|
||||
.leftNav li a i {
|
||||
color: #818093;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.leftNav li ul {
|
||||
padding: 0;
|
||||
margin: 15px 0 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.leftNav li ul li {
|
||||
position: relative;
|
||||
padding-left: 45px;
|
||||
}
|
||||
.leftNav li ul li::before {
|
||||
content: "";
|
||||
background-color: #818093;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 6px;
|
||||
}
|
||||
.leftNav li ul li a {
|
||||
color: #5B5B98;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .leftNav li a {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .leftNav li a span {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .leftNav li a i {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .leftNav li ul li a {
|
||||
color: var(--darkHeadingTextColor);
|
||||
}
|
||||
[class="dark"] .leftNav li a:hover, [class="dark"] .leftNav li a:hover i {
|
||||
color: var(--primaryColor);
|
||||
}
|
||||
[class="dark"] .leftNav li.active > a span, [class="dark"] .leftNav li.active a i {
|
||||
color: var(--primaryColor);
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
import * as React from "react";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||
import PrintIcon from "@mui/icons-material/Print";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
||||
import Button from '@mui/material/Button';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import ReplyIcon from '@mui/icons-material/Reply';
|
||||
import ForwardToInboxIcon from '@mui/icons-material/ForwardToInbox';
|
||||
|
||||
export default function ReadEmailContent() {
|
||||
// Dropdown
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
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: 15,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
EnvyTheme Support
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Tooltip title="Print">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='ml-5px'
|
||||
>
|
||||
<PrintIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Delete">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='ml-5px'
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Report Spam">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ background: "#F2F6F8" }}
|
||||
className='ml-5px'
|
||||
>
|
||||
<ErrorOutlineIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="More...">
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
size="small"
|
||||
aria-controls={open ? "account-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
sx={{
|
||||
background: "#F2F6F8",
|
||||
}}
|
||||
className='ml-5px'
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="account-menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
PaperProps={{
|
||||
elevation: 0,
|
||||
sx: {
|
||||
overflow: "visible",
|
||||
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
|
||||
mt: 1.5,
|
||||
"& .MuiAvatar-root": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
ml: -0.5,
|
||||
mr: 1,
|
||||
},
|
||||
"&:before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 14,
|
||||
width: 10,
|
||||
height: 10,
|
||||
bgcolor: "background.paper",
|
||||
transform: "translateY(-50%) rotate(45deg)",
|
||||
zIndex: 0,
|
||||
},
|
||||
},
|
||||
}}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last 15 Days</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Month</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Year</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
mb={2}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user1.png"
|
||||
alt="User"
|
||||
width="44px"
|
||||
height="44px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Box className="ml-1">
|
||||
<Typography as='h5' fontSize="14px" fontWeight="500">Jordan Stevenson</Typography>
|
||||
<Typography fontSize="13px">From: jonathan@domain.com</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography fontSize="13px">Dec 14, 2017, 5:17 AM</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="h6" gutterBottom fontSize="14px">
|
||||
Hi Coderthemes!
|
||||
</Typography>
|
||||
|
||||
<Typography mb={2}>
|
||||
Last pic over my village – Yeah i'd like that! Do you remember the video som..
|
||||
</Typography>
|
||||
|
||||
<Typography mb={2}>
|
||||
Praesent dui ex, dapibus eget mauris ut, finibus vestibulum enim. Quisque arcu leo, facilisis in fringilla id, luctus in tortor. Nunc vestibulum est quis orci varius viverra. Curabitur dictum volutpat massa vulputate molestie. In at felis ac velit maximus convallis.
|
||||
</Typography>
|
||||
|
||||
<Typography mb={2}>
|
||||
Sed elementum turpis eu lorem interdum, sed porttitor eros commodo. Nam eu venenatis tortor, id lacinia diam. Sed aliquam in dui et porta. Sed bibendum orci non tincidunt ultrices. Vivamus fringilla, mi lacinia dapibus condimentum, ipsum urna lacinia lacus, vel tincidunt mi nibh sit amet lorem.
|
||||
</Typography>
|
||||
|
||||
<Typography variant="h6" gutterBottom fontSize="14px">
|
||||
Checklists/Sub-tasks
|
||||
</Typography>
|
||||
|
||||
<ol>
|
||||
<li>Your design preferences (Color, style, shapes, Fonts, others)</li>
|
||||
<li>Tell me, why is your item different?</li>
|
||||
<li>Do you want to bring up a specific feature of your item? If yes, please tell me</li>
|
||||
<li>Do you have any preference or specific thing you would like to change or improve on your item page?</li>
|
||||
<li>Do you want to include your item's or your provider's logo on the page? if yes, please send it to me in vector format (Ai or EPS)</li>
|
||||
<li>Please provide me with the copy or text to display</li>
|
||||
</ol>
|
||||
|
||||
<Typography mb={2}>
|
||||
Filling in this form with the above information will ensure that they will be able to start work quickly.
|
||||
</Typography>
|
||||
|
||||
<Typography mb={2}>
|
||||
You can complete your order by putting your coupon code into the Promotional code box and clicking ‘Apply Coupon’.
|
||||
</Typography>
|
||||
|
||||
<Typography mb={2}>
|
||||
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.
|
||||
</Typography>
|
||||
|
||||
<Typography mb={2}>
|
||||
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.
|
||||
</Typography>
|
||||
|
||||
<Typography mb={2}>
|
||||
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.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" justifyContent="end" mt={2}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
startIcon={<ReplyIcon sx={{ color: "#fff !important", }} />}
|
||||
sx={{
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
className="mr-2"
|
||||
>
|
||||
Reply
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<ForwardToInboxIcon sx={{ color: "#fff !important", }} />}
|
||||
sx={{
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
Forward
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user