first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Link from 'next/link';
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
export default function ErrorPage() {
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
padding: '150px 0'
|
||||
}}
|
||||
>
|
||||
<img src='/images/error.png' alt='error' />
|
||||
|
||||
<Typography
|
||||
as="h1"
|
||||
sx={{
|
||||
fontWeight: '500',
|
||||
fontSize: '22px',
|
||||
mt: '20px',
|
||||
mb: '10px',
|
||||
}}
|
||||
>
|
||||
Oops!! The page you are looking for doesn't exist!
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
The page you are looking for might have been removed had its name changed or is temporarily unavailable.
|
||||
</Typography>
|
||||
|
||||
<Link href="/" className="text-decoration-none">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 3,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
padding: "12px 30px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
Back To Home
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import '../styles/remixicon.css'
|
||||
import 'react-tabs/style/react-tabs.css';
|
||||
import "swiper/css";
|
||||
import "swiper/css/bundle";
|
||||
|
||||
// Chat Styles
|
||||
import '../styles/chat.css'
|
||||
// Globals Styles
|
||||
import '../styles/globals.css'
|
||||
// Rtl Styles
|
||||
import '../styles/rtl.css'
|
||||
// Dark Mode Styles
|
||||
import '../styles/dark.css'
|
||||
// Left Sidebar Dark Mode Styles
|
||||
import '../styles/leftSidebarDark.css'
|
||||
// Theme Styles
|
||||
import theme from '../styles/theme'
|
||||
|
||||
import { ThemeProvider, CssBaseline } from "@mui/material";
|
||||
import Layout from "@/components/_App/Layout";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
</ThemeProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
@@ -0,0 +1,25 @@
|
||||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||
|
||||
class MyDocument extends Document {
|
||||
render() {
|
||||
const { locale } = this.props.__NEXT_DATA__;
|
||||
const dir = locale === "ar" ? "rtl" : "ltr";
|
||||
return (
|
||||
<Html dir={dir} lang={locale}>
|
||||
<Head>
|
||||
<link rel="icon" href="/images/favicon.png" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument;
|
||||
@@ -0,0 +1,124 @@
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import Features from "@/components/Dashboard/Analytics/Features";
|
||||
import Profile from "@/components/Dashboard/Analytics/Profile";
|
||||
import AudienceOverview from "@/components/Dashboard/Analytics/AudienceOverview";
|
||||
import VisitsByDayAndNetIncome from "@/components/Dashboard/Analytics/VisitsByDayAndNetIncome";
|
||||
import SalesAnalytics from "@/components/Dashboard/Analytics/SalesAnalytics";
|
||||
import TotalRevenue from "@/components/Dashboard/Analytics/TotalRevenue";
|
||||
import ActivityTimeline from "@/components/Dashboard/Analytics/ActivityTimeline";
|
||||
import RevenueReport from "@/components/Dashboard/Analytics/RevenueReport";
|
||||
import SessionsByCountries from "@/components/Dashboard/Analytics/SessionsByCountries";
|
||||
import TotalTransactions from "@/components/Dashboard/Analytics/TotalTransactions";
|
||||
import BrowserUsedAndTrafficReports from "@/components/Dashboard/Analytics/BrowserUsedAndTrafficReports";
|
||||
import Terminals from "@/components/Dashboard/Analytics/Terminals";
|
||||
import NewReturning from "@/components/Dashboard/Analytics/NewReturning";
|
||||
import Gender from "@/components/Dashboard/Analytics/Gender";
|
||||
import VisitorsAge from "@/components/Dashboard/Analytics/VisitorsAge";
|
||||
import SessionsDevice from "@/components/Dashboard/Analytics/SessionsDevice";
|
||||
|
||||
export default function Analytics() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Analytics</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/analytics/">Dashboard</Link>
|
||||
</li>
|
||||
<li>
|
||||
Analytics
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* Profile */}
|
||||
<Profile />
|
||||
|
||||
{/* VisitsByDayAndNetIncome */}
|
||||
<VisitsByDayAndNetIncome />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* Features */}
|
||||
<Features />
|
||||
|
||||
{/* AudienceOverview */}
|
||||
<AudienceOverview />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 2, md: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={8}>
|
||||
{/* SalesAnalytics */}
|
||||
<SalesAnalytics />
|
||||
|
||||
{/* RevenueRepor */}
|
||||
<RevenueReport />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={4}>
|
||||
{/* TotalRevenue */}
|
||||
<TotalRevenue />
|
||||
|
||||
{/* ActivityTimelin */}
|
||||
<ActivityTimeline />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* SessionsByCountries */}
|
||||
<SessionsByCountries />
|
||||
|
||||
{/* TotalTransactions */}
|
||||
<TotalTransactions />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* BrowserUsedAndTrafficReports */}
|
||||
<BrowserUsedAndTrafficReports />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* Terminals */}
|
||||
<Terminals />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* NewReturning */}
|
||||
<NewReturning />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* Gender */}
|
||||
<Gender />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* VisitorsAge */}
|
||||
<VisitorsAge />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* SessionsDevice */}
|
||||
<SessionsDevice />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import AudienceOverview from '@/components/Dashboard/Analytics/AudienceOverview';
|
||||
import VisitsByDay from "@/components/Analytics/Customers/VisitsByDay";
|
||||
import NetIncome from "@/components/Analytics/Customers/NetIncome";
|
||||
import NewSessions from "@/components/Analytics/Customers/NewSessions";
|
||||
import CustomersDetails from "@/components/Analytics/Customers/CustomersDetails";
|
||||
|
||||
export default function Customers() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Customers</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Customers</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* AudienceOverview */}
|
||||
<AudienceOverview />
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
justifyContent="center"
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
<VisitsByDay />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
<NetIncome />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
<NewSessions />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* CustomersDetails */}
|
||||
<CustomersDetails />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import RevenueReport from "@/components/Dashboard/Analytics/RevenueReport";
|
||||
import AvarageReport from "@/components/Analytics/Reports/AvarageReport";
|
||||
import SessionsByCountries from "@/components/Dashboard/Analytics/SessionsByCountries";
|
||||
import BrowserUsedAndTrafficReports from "@/components/Analytics/Reports/BrowserUsedAndTrafficReports";
|
||||
|
||||
export default function Reports() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Reports</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Reports</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={5}>
|
||||
<RevenueReport />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={3}>
|
||||
<AvarageReport />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
<SessionsByCountries />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<BrowserUsedAndTrafficReports />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,269 @@
|
||||
import React from "react";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import FullCalendar from "@fullcalendar/react";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import events from "@/components/Apps/Calendar/Events";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Backdrop from "@mui/material/Backdrop";
|
||||
import Button from "@mui/material/Button";
|
||||
import Fade from "@mui/material/Fade";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import dayjs from "dayjs";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
|
||||
|
||||
// Add event modal style
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
maxWidth: 500,
|
||||
width: '100%',
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 24,
|
||||
borderRadius: "8px",
|
||||
};
|
||||
|
||||
const Calendar = () => {
|
||||
// Add event modal
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => 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"),
|
||||
});
|
||||
};
|
||||
|
||||
// Date & Time ickers
|
||||
const [value, setValue] = React.useState(dayjs("2023-01-01T21:11:54"));
|
||||
|
||||
const handleChange = (newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Calendar</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Calendar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
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,
|
||||
}}
|
||||
>
|
||||
Calendar
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
onClick={handleOpen}
|
||||
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'
|
||||
/>{" "}
|
||||
Add Event
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<FullCalendar
|
||||
defaultView="dayGridMonth"
|
||||
plugins={[dayGridPlugin]}
|
||||
events={events}
|
||||
displayEventEnd="true"
|
||||
eventColor={"#" + Math.floor(Math.random() * 16777215).toString(16)}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Add event modal */}
|
||||
<Modal
|
||||
aria-labelledby="transition-modal-title"
|
||||
aria-describedby="transition-modal-description"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
closeAfterTransition
|
||||
BackdropComponent={Backdrop}
|
||||
BackdropProps={{
|
||||
timeout: 500,
|
||||
}}
|
||||
>
|
||||
<Fade in={open}>
|
||||
<Box sx={style} className="dark-BG-101010">
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
background: "#EDEFF5",
|
||||
borderRadius: "8px",
|
||||
padding: "20px 20px",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
Add New Event
|
||||
</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: "20px 20px",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<Grid container alignItems="center" spacing={2}>
|
||||
<Grid item xs={12} md={12} lg={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Event Name
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
autoComplete="event-name"
|
||||
name="eventName"
|
||||
fullWidth
|
||||
id="eventName"
|
||||
label="Event Name"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Date & Time
|
||||
</Typography>
|
||||
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<Stack className="date-time-picker">
|
||||
<DateTimePicker
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
/>
|
||||
</Stack>
|
||||
</LocalizationProvider>
|
||||
</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",
|
||||
}}
|
||||
>
|
||||
<AddIcon
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
className='mr-5px'
|
||||
/>{" "}
|
||||
Save
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Fade>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Calendar;
|
||||
@@ -0,0 +1,716 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Card from "@mui/material/Card";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Box from "@mui/material/Box";
|
||||
import { styled, alpha } from "@mui/material/styles";
|
||||
import InputBase from "@mui/material/InputBase";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import Badge from "@mui/material/Badge";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import ChatBox from "@/components/Apps/Chat/ChatBox";
|
||||
import ChatBoxTwo from "@/components/Apps/Chat/ChatBoxTwo";
|
||||
import ChatBoxThree from "@/components/Apps/Chat/ChatBoxThree";
|
||||
|
||||
// Search field style
|
||||
const Search = styled("div")(({ theme }) => ({
|
||||
position: "relative",
|
||||
borderRadius: 100,
|
||||
backgroundColor: alpha(theme.palette.common.white, 0.15),
|
||||
"&:hover": {
|
||||
backgroundColor: alpha(theme.palette.common.white, 0.25),
|
||||
},
|
||||
marginRight: 0,
|
||||
marginLeft: 0,
|
||||
marginBottom: 20,
|
||||
width: "100%",
|
||||
[theme.breakpoints.up("xs")]: {
|
||||
marginRight: theme.spacing(1),
|
||||
width: "auto",
|
||||
},
|
||||
}));
|
||||
|
||||
const SearchIconWrapper = styled("div")(({ theme }) => ({
|
||||
color: "#757FEF",
|
||||
padding: theme.spacing(0, 2),
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
right: "0",
|
||||
pointerEvents: "none",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: "5",
|
||||
}));
|
||||
|
||||
const StyledInputBase = styled(InputBase)(({ theme }) => ({
|
||||
color: "inherit",
|
||||
width: "100%",
|
||||
"& .MuiInputBase-input": {
|
||||
backgroundColor: "#F5F7FA",
|
||||
borderRadius: "30px",
|
||||
padding: theme.spacing(1.4, 0, 1.4, 2),
|
||||
},
|
||||
}));
|
||||
|
||||
export default function Chat() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Chat</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>
|
||||
Chat
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Tabs className="chat-tabs">
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
p: "20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h1"
|
||||
sx={{
|
||||
fontSize: 17,
|
||||
fontWeight: 500,
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
Messages
|
||||
</Typography>
|
||||
|
||||
{/* Search */}
|
||||
<Search className="ls-search-form">
|
||||
<SearchIconWrapper className="search-btn">
|
||||
<SearchIcon />
|
||||
</SearchIconWrapper>
|
||||
<StyledInputBase
|
||||
placeholder="Search here.."
|
||||
inputProps={{ "aria-label": "search" }}
|
||||
/>
|
||||
</Search>
|
||||
|
||||
{/* All Messages */}
|
||||
<Typography mb="10px">
|
||||
<i className="ri-message-2-line"></i> ALL MESSAGES
|
||||
</Typography>
|
||||
|
||||
<TabList>
|
||||
{/* Tab 1 */}
|
||||
<Tab>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user1.png"
|
||||
alt="User"
|
||||
width="45px"
|
||||
height="45px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<span className="active-status successBgColor"></span>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
Laurent Perrier
|
||||
</Typography>
|
||||
<Typography fontSize="12px">Typing...</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
4:30 PM
|
||||
</Typography>
|
||||
|
||||
<Box className="mr-10px">
|
||||
<Badge
|
||||
badgeContent={2}
|
||||
color="primary"
|
||||
className="for-dark-text-white"
|
||||
></Badge>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tab>
|
||||
|
||||
{/* Tab 2 */}
|
||||
<Tab>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user2.png"
|
||||
alt="User"
|
||||
width="45px"
|
||||
height="45px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<span className="active-status successBgColor"></span>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
Nunez Faulkner
|
||||
</Typography>
|
||||
<Typography fontSize="12px">
|
||||
Hello everyone ...
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
9.36 AM
|
||||
</Typography>
|
||||
|
||||
<Box className="mr-10px">
|
||||
<Badge
|
||||
badgeContent={1}
|
||||
color="primary"
|
||||
className="for-dark-text-white"
|
||||
></Badge>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tab>
|
||||
|
||||
{/* Tab 3 */}
|
||||
<Tab>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user3.png"
|
||||
alt="User"
|
||||
width="45px"
|
||||
height="45px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<span className="active-status successBgColor"></span>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
Bernard Langley
|
||||
</Typography>
|
||||
<Typography fontSize="12px">
|
||||
That cool, go for it...
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
7.18 PM
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tab>
|
||||
|
||||
{/* Tab 4 */}
|
||||
<Tab>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user4.png"
|
||||
alt="User"
|
||||
width="45px"
|
||||
height="45px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<span className="active-status successBgColor"></span>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
Edwards Mckenz
|
||||
</Typography>
|
||||
<Typography fontSize="12px">Great ! 🔥</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
08:30 PM
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tab>
|
||||
|
||||
{/* Tab 5 */}
|
||||
<Tab>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user5.png"
|
||||
alt="User"
|
||||
width="45px"
|
||||
height="45px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<span className="active-status successBgColor"></span>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
Elsie Melendez
|
||||
</Typography>
|
||||
<Typography fontSize="12px">Typing...</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
2:30 PM
|
||||
</Typography>
|
||||
|
||||
<Box className="mr-10px">
|
||||
<Badge
|
||||
badgeContent={5}
|
||||
color="primary"
|
||||
className="for-dark-text-white"
|
||||
></Badge>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tab>
|
||||
|
||||
{/* Tab 6 */}
|
||||
<Tab>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user6.png"
|
||||
alt="User"
|
||||
width="45px"
|
||||
height="45px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<span className="active-status secondaryBgColor"></span>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
Mcleod Wagner
|
||||
</Typography>
|
||||
<Typography fontSize="12px">What are you...</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
1:30 PM
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tab>
|
||||
|
||||
{/* Tab 7 */}
|
||||
<Tab>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user7.png"
|
||||
alt="User"
|
||||
width="45px"
|
||||
height="45px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
Joseph Strickland
|
||||
</Typography>
|
||||
<Typography fontSize="12px">Hello Joseph!!</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
7:30 PM
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tab>
|
||||
|
||||
{/* Tab 8 */}
|
||||
<Tab>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user8.png"
|
||||
alt="User"
|
||||
width="45px"
|
||||
height="45px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
Joseph Strickland
|
||||
</Typography>
|
||||
<Typography fontSize="12px">How are you?</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
5:30 PM
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tab>
|
||||
|
||||
{/* Tab 9 */}
|
||||
<Tab>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/user9.png"
|
||||
alt="User"
|
||||
width="45px"
|
||||
height="45px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
Silva Foster
|
||||
</Typography>
|
||||
<Typography fontSize="12px">Cool! 🔥</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
8:30 PM
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tab>
|
||||
</TabList>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
>
|
||||
<TabPanel>
|
||||
{/* ChatBox */}
|
||||
<ChatBox />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
{/* ChatBox */}
|
||||
<ChatBoxTwo />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
{/* ChatBox */}
|
||||
<ChatBoxThree />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
{/* ChatBox */}
|
||||
<ChatBox />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
{/* ChatBox */}
|
||||
<ChatBoxTwo />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
{/* ChatBox */}
|
||||
<ChatBoxThree />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
{/* ChatBox */}
|
||||
<ChatBox />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
{/* ChatBox */}
|
||||
<ChatBoxTwo />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel>
|
||||
{/* ChatBox */}
|
||||
<ChatBoxThree />
|
||||
</TabPanel>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Tabs>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import AllAssets from '@/components/Apps/FileManager/AllAssets';
|
||||
|
||||
export default function Assets() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Assets</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Assets</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* AllAssets */}
|
||||
<AllAssets />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import DocumentsFiles from '@/components/Apps/FileManager/DocumentsFiles';
|
||||
|
||||
export default function Documents() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Documents</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Documents</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* DocumentsFiles */}
|
||||
<DocumentsFiles />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import ImportantFiles from '@/components/Apps/FileManager/ImportantFiles';
|
||||
|
||||
export default function Important() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Important</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Important</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* ImportantFiles */}
|
||||
<ImportantFiles />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import Grid from "@mui/material/Grid";
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import MyDrive from '@/components/Apps/FileManager/MyDrive';
|
||||
import RecentFiles from '@/components/Apps/FileManager/RecentFiles';
|
||||
import Files from '@/components/Apps/FileManager/Files';
|
||||
|
||||
export default function FileManager() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>File Manager</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>
|
||||
File Manager
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* MyDrive */}
|
||||
<MyDrive />
|
||||
|
||||
{/* RecentFiles */}
|
||||
<RecentFiles />
|
||||
|
||||
{/* Files */}
|
||||
<Files />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import MediaFiles from '@/components/Apps/FileManager/MediaFiles';
|
||||
|
||||
export default function Media() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Media</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Media</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* MediaFiles */}
|
||||
<MediaFiles />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import PersonalFiles from '@/components/Apps/FileManager/PersonalFiles';
|
||||
|
||||
export default function Personal() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Personal</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Personal</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* PersonalFiles */}
|
||||
<PersonalFiles />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import AllProjects from '@/components/Apps/FileManager/AllProjects';
|
||||
|
||||
export default function Projects() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Projects</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Projects</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* AllProjects */}
|
||||
<AllProjects />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import AllRecentFiles from '@/components/Apps/FileManager/AllRecentFiles';
|
||||
|
||||
export default function Recents() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Recents</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Recents</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* AllRecentFiles */}
|
||||
<AllRecentFiles />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import TemplateFiles from '@/components/Apps/FileManager/TemplateFiles';
|
||||
|
||||
export default function Templates() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Templates</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Templates</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* TemplateFiles */}
|
||||
<TemplateFiles />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Apps/FileManager/LeftSidebar';
|
||||
import TrashFiles from '@/components/Apps/FileManager/TrashFiles';
|
||||
|
||||
export default function Trash() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Trash</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Trash</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} sm={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={8} lg={8} xl={9}>
|
||||
{/* TrashFiles */}
|
||||
<TrashFiles />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import ToDoLists from '@/components/Apps/ToDoLists'
|
||||
|
||||
export default function ToDo() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>To Do</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>To Do</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ToDoLists />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { Typography } from "@mui/material";
|
||||
import { Box } from "@mui/system";
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
export default function ConfirmMail() {
|
||||
return (
|
||||
<>
|
||||
<div className="authenticationBox">
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
padding: "70px 0 100px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
background: "#fff",
|
||||
padding: "30px 20px",
|
||||
borderRadius: "10px",
|
||||
maxWidth: "510px",
|
||||
ml: "auto",
|
||||
mr: "auto",
|
||||
textAlign: "center",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Box>
|
||||
<img src="/images/logo.png" alt="Black logo" className="black-logo" />
|
||||
<img src="/images/logo-white.png" alt="White logo" className="white-logo" />
|
||||
</Box>
|
||||
|
||||
<Box mt={4} mb={4}>
|
||||
<img src="/images/message.png" alt="Message" />
|
||||
</Box>
|
||||
|
||||
<Typography as="h1" fontSize="20px" fontWeight="500" mb={1}>
|
||||
Success!
|
||||
</Typography>
|
||||
<Typography>
|
||||
A email has been send to{" "}
|
||||
<a
|
||||
href="mailto:envytheme@info.com"
|
||||
className="primaryColor text-decoration-none"
|
||||
>
|
||||
envytheme@info.com
|
||||
</a>
|
||||
. Please check for an email from company and click on the included
|
||||
link to reset your password.
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
href="/"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 3,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "16px",
|
||||
padding: "12px 10px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Back To Home
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import ForgotPasswordForm from '@/components/Authentication/ForgotPasswordForm';
|
||||
|
||||
export default function SignIn() {
|
||||
return (
|
||||
<>
|
||||
<ForgotPasswordForm />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import LockScreenForm from '@/components/Authentication/LockScreenForm';
|
||||
|
||||
export default function LockScreen() {
|
||||
return (
|
||||
<>
|
||||
<LockScreenForm />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { Typography } from "@mui/material";
|
||||
import { Box } from "@mui/system";
|
||||
import Button from "@mui/material/Button";
|
||||
|
||||
export default function Logout() {
|
||||
return (
|
||||
<>
|
||||
<div className="authenticationBox">
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
padding: "70px 0 100px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
background: "#fff",
|
||||
padding: "30px 20px",
|
||||
borderRadius: "10px",
|
||||
maxWidth: "510px",
|
||||
ml: "auto",
|
||||
mr: "auto",
|
||||
textAlign: "center"
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Box>
|
||||
<img
|
||||
src="/images/logo.png"
|
||||
alt="Black logo"
|
||||
className="black-logo"
|
||||
/>
|
||||
|
||||
<img
|
||||
src="/images/logo-white.png"
|
||||
alt="White logo"
|
||||
className="white-logo"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box mt={4} mb={4}>
|
||||
<img src="/images/coffee.png" alt="Coffee" />
|
||||
</Box>
|
||||
|
||||
<Typography as="h1" fontSize="20px" fontWeight="500" mb={1}>
|
||||
You are Logged Out
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
Thank you for using Admash admin template
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
href="/authentication/sign-in/"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 3,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "16px",
|
||||
padding: "12px 10px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import SignInForm from '@/components/Authentication/SignInForm';
|
||||
|
||||
export default function SignIn() {
|
||||
return (
|
||||
<>
|
||||
<SignInForm />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import SignUpForm from '@/components/Authentication/SignUpForm';
|
||||
|
||||
export default function SignUp() {
|
||||
return (
|
||||
<>
|
||||
<SignUpForm />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Box from "@mui/material/Box";
|
||||
import CallIcon from '@mui/icons-material/Call';
|
||||
import MailOutlineIcon from '@mui/icons-material/MailOutline';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import Link from 'next/link';
|
||||
|
||||
const contactLists = [
|
||||
{
|
||||
image: '/images/member1.png',
|
||||
name: 'Alvarado Turner',
|
||||
designation: 'React Developer',
|
||||
phonNumber: '+9003526765',
|
||||
email: 'alvarado@gmail.com',
|
||||
},
|
||||
{
|
||||
image: '/images/member2.png',
|
||||
name: 'Evangelina Mcclain',
|
||||
designation: 'Angular Developer',
|
||||
phonNumber: '+9003526765',
|
||||
email: 'evangelina@gmail.com',
|
||||
},
|
||||
{
|
||||
image: '/images/member3.png',
|
||||
name: 'Candice Munoz',
|
||||
designation: 'Vue Developer',
|
||||
phonNumber: '+9003526766',
|
||||
email: 'candice@gmail.com',
|
||||
},
|
||||
{
|
||||
image: '/images/member4.png',
|
||||
name: 'Bernard Langley',
|
||||
designation: 'UI/UX Designer',
|
||||
phonNumber: '+9003526767',
|
||||
email: 'bernard@gmail.com',
|
||||
},
|
||||
{
|
||||
image: '/images/member5.png',
|
||||
name: 'Kristie Hall',
|
||||
designation: 'Software Analyst',
|
||||
phonNumber: '+9003526846',
|
||||
email: 'kristie@gmail.com',
|
||||
},
|
||||
{
|
||||
image: '/images/member6.png',
|
||||
name: 'Bolton Obrien',
|
||||
designation: 'Support Engineer',
|
||||
phonNumber: '+9003526865',
|
||||
email: 'bolton@gmail.com',
|
||||
},
|
||||
{
|
||||
image: '/images/member7.png',
|
||||
name: 'Dee Alvarado',
|
||||
designation: 'SEO Specialist',
|
||||
phonNumber: '+9003526456',
|
||||
email: 'alvarado@gmail.com',
|
||||
},
|
||||
{
|
||||
image: '/images/member8.png',
|
||||
name: 'Cervantes Kramer',
|
||||
designation: 'Product Designer',
|
||||
phonNumber: '+9003526456',
|
||||
email: 'cervantes@gmail.com',
|
||||
},
|
||||
{
|
||||
image: '/images/member9.png',
|
||||
name: 'Dejesus Michael',
|
||||
designation: 'Content Writer',
|
||||
email: 'dejesus@gmail.com',
|
||||
phonNumber: '+9003526456',
|
||||
},
|
||||
{
|
||||
image: '/images/member10.png',
|
||||
name: 'Alissa Nelson',
|
||||
designation: 'Theme Developer',
|
||||
email: 'alissa@gmail.com',
|
||||
phonNumber: '+9003526355',
|
||||
},
|
||||
{
|
||||
image: '/images/member11.png',
|
||||
name: 'English Haney',
|
||||
designation: 'Digital Marketing Executive',
|
||||
email: 'english@gmail.com',
|
||||
phonNumber: '+9003526456',
|
||||
},
|
||||
{
|
||||
image: '/images/member12.png',
|
||||
name: 'Edwards Mckenzie',
|
||||
designation: 'Support Engineer',
|
||||
email: 'edwards@gmail.com',
|
||||
phonNumber: '+9003526456',
|
||||
},
|
||||
];
|
||||
|
||||
export default function ContactList2() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Contact List</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Contact List</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
{contactLists.map((contactList) => (
|
||||
<Grid item xs={12} sm={6} md={6} lg={4} xl={3} key={contactList.name}>
|
||||
<Card
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "20px 15px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={1}>
|
||||
<Tooltip title="Delete" arrow placement="top">
|
||||
<IconButton aria-label="delete" size="small">
|
||||
<DeleteIcon
|
||||
fontSize="inherit"
|
||||
sx={{
|
||||
color: '#A9A9C8',
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Edit" arrow placement="top">
|
||||
<IconButton aria-label="edit" size="small">
|
||||
<EditIcon
|
||||
fontSize="inherit"
|
||||
sx={{
|
||||
color: '#A9A9C8',
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<img
|
||||
src={contactList.image}
|
||||
alt="Member"
|
||||
width="148px"
|
||||
height="148px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Typography
|
||||
as="h4"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mt: '10px',
|
||||
}}
|
||||
>
|
||||
{contactList.name}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
as="h4"
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
color: '#A9A9C8',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{contactList.designation}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
textAlign: 'center',
|
||||
mt: '30px'
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<CallIcon
|
||||
sx={{
|
||||
color: '#A9A9C8',
|
||||
mb: '3px'
|
||||
}}
|
||||
/>
|
||||
<Typography fontWeight="500" fontSize="13px">
|
||||
{contactList.phonNumber}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<MailOutlineIcon
|
||||
sx={{
|
||||
color: '#A9A9C8',
|
||||
mb: '3px'
|
||||
}}
|
||||
/>
|
||||
<Typography fontWeight="500" fontSize="13px">
|
||||
{contactList.email}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from '@mui/material/Button';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
const contactLists = [
|
||||
{
|
||||
image: '/images/member1.png',
|
||||
name: 'Alvarado Turner',
|
||||
userName: '@alvaradoTurner',
|
||||
email: 'alvaradoTurner@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '18k',
|
||||
followers: '5.21k',
|
||||
followings: '32k',
|
||||
},
|
||||
{
|
||||
image: '/images/member2.png',
|
||||
name: 'Evangelina Mcclain',
|
||||
userName: '@evangelinaMcclain',
|
||||
email: 'evangelinaMcclain@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '10k',
|
||||
followers: '4.20k',
|
||||
followings: '15k',
|
||||
},
|
||||
{
|
||||
image: '/images/member3.png',
|
||||
name: 'Candice Munoz',
|
||||
userName: '@candiceMunoz',
|
||||
email: 'candiceMunoz@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '5k',
|
||||
followers: '2.20k',
|
||||
followings: '12k',
|
||||
},
|
||||
{
|
||||
image: '/images/member4.png',
|
||||
name: 'Bernard Langley',
|
||||
userName: '@bernardLangley',
|
||||
email: 'bernardLangley@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '19k',
|
||||
followers: '10.20k',
|
||||
followings: '30k',
|
||||
},
|
||||
{
|
||||
image: '/images/member5.png',
|
||||
name: 'Kristie Hall',
|
||||
userName: '@kristieHall',
|
||||
email: 'kristieHall@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '14k',
|
||||
followers: '9.20k',
|
||||
followings: '40k',
|
||||
},
|
||||
{
|
||||
image: '/images/member6.png',
|
||||
name: 'Bolton Obrien',
|
||||
userName: '@boltonObrien',
|
||||
email: 'boltonObrien@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '20k',
|
||||
followers: '19.20k',
|
||||
followings: '50k',
|
||||
},
|
||||
{
|
||||
image: '/images/member7.png',
|
||||
name: 'Dee Alvarado',
|
||||
userName: '@deeAlvarado',
|
||||
email: 'deeAlvarado@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '22k',
|
||||
followers: '30.20k',
|
||||
followings: '50k',
|
||||
},
|
||||
{
|
||||
image: '/images/member8.png',
|
||||
name: 'Cervantes Kramer',
|
||||
userName: '@cervantesKramer',
|
||||
email: 'cervantesKramer@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '25k',
|
||||
followers: '35.20k',
|
||||
followings: '10k',
|
||||
},
|
||||
{
|
||||
image: '/images/member9.png',
|
||||
name: 'Dejesus Michael',
|
||||
userName: '@dejesusMichael',
|
||||
email: 'dejesusMichael@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '16k',
|
||||
followers: '20.20k',
|
||||
followings: '5k',
|
||||
},
|
||||
{
|
||||
image: '/images/member10.png',
|
||||
name: 'Alissa Nelson',
|
||||
userName: '@alissaNelson',
|
||||
email: 'alissaNelson@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '13k',
|
||||
followers: '20.20k',
|
||||
followings: '250',
|
||||
},
|
||||
{
|
||||
image: '/images/member11.png',
|
||||
name: 'English Haney',
|
||||
userName: '@englishHaney',
|
||||
email: 'englishHaney@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '12k',
|
||||
followers: '12.20k',
|
||||
followings: '1205',
|
||||
},
|
||||
{
|
||||
image: '/images/member12.png',
|
||||
name: 'Edwards Mckenzie',
|
||||
userName: '@edwardsMckenzie',
|
||||
email: 'edwardsMckenzie@gmail.com',
|
||||
projectUrl: '#',
|
||||
post: '11k',
|
||||
followers: '30.20k',
|
||||
followings: '5k',
|
||||
},
|
||||
];
|
||||
|
||||
export default function ContactList() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Contact List</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Contact List</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
{contactLists.map((contactList) => (
|
||||
<Grid item xs={12} sm={6} md={6} lg={4} xl={3} key={contactList.name}>
|
||||
<Card
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "20px 15px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={contactList.image}
|
||||
alt="Member"
|
||||
width="148px"
|
||||
height="148px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Typography
|
||||
as="h4"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mt: '10px',
|
||||
}}
|
||||
>
|
||||
{contactList.name}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
color: '#A9A9C8',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{contactList.userName}
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Link href={`mailto:${contactList.email}`} className="text-decoration-none">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '8px',
|
||||
m: '0 5px',
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Message
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link href={contactList.projectUrl} className="text-decoration-none">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '8px',
|
||||
m: '0 5px',
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Projects
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
textAlign: 'center',
|
||||
mt: '30px'
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="13px">
|
||||
Post
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="20px">
|
||||
{contactList.post}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="13px">
|
||||
Followers
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="20px">
|
||||
{contactList.followers}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="13px">
|
||||
Followings
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="20px">
|
||||
{contactList.followings}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,883 @@
|
||||
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 Backdrop from "@mui/material/Backdrop";
|
||||
import Button from "@mui/material/Button";
|
||||
import Fade from "@mui/material/Fade";
|
||||
import Modal from "@mui/material/Modal";
|
||||
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 styles from '@/styles/PageTitle.module.css'
|
||||
import Link from 'next/link';
|
||||
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 user 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 user Modal
|
||||
|
||||
function MembersLists(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>
|
||||
);
|
||||
}
|
||||
|
||||
MembersLists.propTypes = {
|
||||
count: PropTypes.number.isRequired,
|
||||
onPageChange: PropTypes.func.isRequired,
|
||||
page: PropTypes.number.isRequired,
|
||||
rowsPerPage: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
function createData(name, image, userName, email, tags, projects) {
|
||||
return {
|
||||
name,
|
||||
image,
|
||||
userName,
|
||||
email,
|
||||
tags,
|
||||
projects,
|
||||
};
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData(
|
||||
"Evangelina Mcclain",
|
||||
"/images/user1.png",
|
||||
"@jstevenson5c",
|
||||
"jordansteve@gmail.com",
|
||||
"HTML, CSS & JS",
|
||||
"165"
|
||||
),
|
||||
createData(
|
||||
"Candice Munoz",
|
||||
"/images/user2.png",
|
||||
"@candice3unoz",
|
||||
"candicemunoz@gmail.com",
|
||||
"React, Next.js",
|
||||
"120"
|
||||
),
|
||||
createData(
|
||||
"Mike Mcclain",
|
||||
"/images/user3.png",
|
||||
"@mike4mcclain",
|
||||
"mikemcclain@gmail.com",
|
||||
"Angular, Gatsby",
|
||||
"220"
|
||||
),
|
||||
createData(
|
||||
"Bernard Langley",
|
||||
"/images/user4.png",
|
||||
"@bernardlangley",
|
||||
"bernardlangley@gmail.com",
|
||||
"HTML, React & Sass",
|
||||
"122"
|
||||
),
|
||||
createData(
|
||||
"Kristie Hall",
|
||||
"/images/user5.png",
|
||||
"@kristie7hall",
|
||||
"kristiehall@gmail.com",
|
||||
"React, Next.js & Sass",
|
||||
"360"
|
||||
),
|
||||
createData(
|
||||
"Bolton Obrien",
|
||||
"/images/user6.png",
|
||||
"@bolton4obrien",
|
||||
"boltonobrien@gmail.com",
|
||||
"Angular, HTML & Sass",
|
||||
"250"
|
||||
),
|
||||
createData(
|
||||
"Dee Alvarado",
|
||||
"/images/user7.png",
|
||||
"@dee3alvarado",
|
||||
"deealvarado@gmail.com",
|
||||
"React, Next.js & Sass",
|
||||
"140"
|
||||
),
|
||||
createData(
|
||||
"Cervantes Kramer",
|
||||
"/images/user8.png",
|
||||
"@cervantes4kramer",
|
||||
"cervantes4kramer@gmail.com",
|
||||
"Gatsby, React & Sass",
|
||||
"345"
|
||||
),
|
||||
createData(
|
||||
"Dejesus Michael",
|
||||
"/images/user9.png",
|
||||
"@dejesus1michael",
|
||||
"dejesusmichael@gmail.com",
|
||||
"React, Gatsby & Sass",
|
||||
"323"
|
||||
),
|
||||
createData(
|
||||
"Alissa Nelson",
|
||||
"/images/user10.png",
|
||||
"@alissa1nelson",
|
||||
"alissa1nelson@gmail.com",
|
||||
"React, Gatsby & Sass",
|
||||
"451"
|
||||
),
|
||||
createData(
|
||||
"Milton",
|
||||
"/images/user11.png",
|
||||
"@milton",
|
||||
"milton@gmail.com",
|
||||
"React, HTML & Sass",
|
||||
"432"
|
||||
),
|
||||
createData(
|
||||
"Claude",
|
||||
"/images/user12.png",
|
||||
"@claude",
|
||||
"claude@gmail.com",
|
||||
"React, Gatsby & Sass",
|
||||
"543"
|
||||
),
|
||||
createData(
|
||||
"Joshua",
|
||||
"/images/user13.png",
|
||||
"@joshua",
|
||||
"joshua@gmail.com",
|
||||
"React, Gatsby & Sass",
|
||||
"543"
|
||||
),
|
||||
createData(
|
||||
"Harvey",
|
||||
"/images/user14.png",
|
||||
"@harvey",
|
||||
"harvey@gmail.com",
|
||||
"React, Gatsby & Sass",
|
||||
"432"
|
||||
),
|
||||
createData(
|
||||
"Antonio",
|
||||
"/images/user15.png",
|
||||
"@antonio",
|
||||
"antonio@gmail.com",
|
||||
"React, Gatsby & Sass",
|
||||
"765"
|
||||
),
|
||||
createData(
|
||||
"Julian",
|
||||
"/images/user16.png",
|
||||
"@julian",
|
||||
"julian@gmail.com",
|
||||
"React, Gatsby & Sass",
|
||||
"678"
|
||||
),
|
||||
createData(
|
||||
"Harold",
|
||||
"/images/user17.png",
|
||||
"@harold",
|
||||
"harold@gmail.com",
|
||||
"React, Gatsby & Sass",
|
||||
"165"
|
||||
),
|
||||
createData(
|
||||
"Kingston",
|
||||
"/images/user18.png",
|
||||
"@kingston",
|
||||
"kingston@info.com",
|
||||
"React, Gatsby & Sass",
|
||||
"165"
|
||||
),
|
||||
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
||||
|
||||
export default function MembersList() {
|
||||
// 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 user 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 Add Task Modal
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Member List</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Member List</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
Users List
|
||||
</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 User
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
sx={{ minWidth: 850 }}
|
||||
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" }}
|
||||
>
|
||||
Tags
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
>
|
||||
Projects
|
||||
</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={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
paddingTop: "13px",
|
||||
paddingBottom: "13px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Checkbox {...label} size="small" />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
className="ml-10px"
|
||||
>
|
||||
<img
|
||||
src={row.image}
|
||||
alt="User"
|
||||
width={40}
|
||||
height={40}
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Box>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13.5px",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
{row.name}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
color: "#A9A9C8",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
{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",
|
||||
fontSize: "13px",
|
||||
paddingTop: "13px",
|
||||
paddingBottom: "13px",
|
||||
}}
|
||||
>
|
||||
{row.tags}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
paddingTop: "13px",
|
||||
paddingBottom: "13px",
|
||||
}}
|
||||
>
|
||||
{row.projects}
|
||||
</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={5}
|
||||
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={MembersLists}
|
||||
style={{ borderBottom: "none" }}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
|
||||
{/* Create new user 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",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
Create New User
|
||||
</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: "20px 20px",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<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",
|
||||
}}
|
||||
>
|
||||
Tags
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
autoComplete="tags"
|
||||
name="tags"
|
||||
required
|
||||
fullWidth
|
||||
id="tags"
|
||||
label="Tags"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Projects
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
autoComplete="projects"
|
||||
name="projects"
|
||||
required
|
||||
fullWidth
|
||||
id="projects"
|
||||
label="Example 5"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} textAlign="end">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
mt: 1,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
padding: "12px 20px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
onClick={handleClose}
|
||||
className='mr-15px'
|
||||
>
|
||||
<ClearIcon
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "-1px",
|
||||
}}
|
||||
className='mr-3px'
|
||||
/>{" "}
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 1,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
padding: "12px 20px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
<AddIcon
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
className='mr-3px'
|
||||
/>{" "}
|
||||
Create New User
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</BootstrapDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import ProfileInfo from '@/components/ContactList/ProfileInfo';
|
||||
import Features from '@/components/ContactList/Features';
|
||||
import PersonalInformation from '@/components/ContactList/PersonalInformation';
|
||||
import ActivityTimeline from '@/components/ContactList/ActivityTimeline';
|
||||
import Overview from '@/components/ContactList/Overview';
|
||||
import MyTasks from '@/components/ContactList/MyTasks';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Profile() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Profile</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Profile</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* ProfileInfo */}
|
||||
<ProfileInfo />
|
||||
|
||||
{/* Personal Information */}
|
||||
<PersonalInformation />
|
||||
|
||||
{/* ActivityTimeline */}
|
||||
<ActivityTimeline />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* Features */}
|
||||
<Features />
|
||||
|
||||
{/* Overview */}
|
||||
<Overview />
|
||||
|
||||
{/* MyTasks */}
|
||||
<MyTasks />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import Features from "@/components/Dashboard/eCommerce/Features";
|
||||
import Ratings from "@/components/Dashboard/eCommerce/Ratings";
|
||||
import AudienceOverview from "@/components/Dashboard/eCommerce/AudienceOverview";
|
||||
import VisitsByDay from "@/components/Dashboard/eCommerce/VisitsByDay";
|
||||
import Impressions from "@/components/Dashboard/eCommerce/Impressions";
|
||||
import ActivityTimeline from "@/components/Dashboard/eCommerce/ActivityTimeline";
|
||||
import RevenuStatus from "@/components/Dashboard/eCommerce/RevenuStatus";
|
||||
import SalesByCountries from "@/components/Dashboard/eCommerce/SalesByCountries";
|
||||
import NewCustomers from "@/components/Dashboard/eCommerce/NewCustomers";
|
||||
import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders";
|
||||
import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList";
|
||||
import BestSellingProducts from "@/components/Dashboard/eCommerce/BestSellingProducts";
|
||||
import LiveVisitsOnOurSite from "@/components/Dashboard/eCommerce/LiveVisitsOnOurSite";
|
||||
|
||||
export default function eCommerce() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>eCommerce</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>
|
||||
eCommerce
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* Features */}
|
||||
<Features />
|
||||
|
||||
{/* AudienceOverview */}
|
||||
<AudienceOverview />
|
||||
|
||||
<Grid
|
||||
container
|
||||
columnSpacing={{ xs: 1, sm: 2, md: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={8}>
|
||||
{/* VisitsByDay */}
|
||||
<VisitsByDay />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={4}>
|
||||
{/* Impressions */}
|
||||
<Impressions />
|
||||
|
||||
{/* ActivityTimeline */}
|
||||
<ActivityTimeline />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12}>
|
||||
{/* RevenuStatus */}
|
||||
<RevenuStatus />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* Ratings */}
|
||||
<Ratings />
|
||||
|
||||
{/* LiveVisitsOnOurSite */}
|
||||
<LiveVisitsOnOurSite />
|
||||
|
||||
{/* SalesByLocations */}
|
||||
<SalesByCountries />
|
||||
|
||||
{/* NewCustomers */}
|
||||
<NewCustomers />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Recent Orders */}
|
||||
<RecentOrders />
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* TeamMembersList */}
|
||||
<TeamMembersList />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* BestSellingProducts */}
|
||||
<BestSellingProducts />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import ShoppingCart from '@/components/eCommerce/Cart/ShoppingCart';
|
||||
import OrderSummary from '@/components/eCommerce/Cart/OrderSummary';
|
||||
import HaveAPromoCode from '@/components/eCommerce/Cart/HaveAPromoCode';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
const Cart = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Cart</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Cart</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* ShoppingCart */}
|
||||
<ShoppingCart />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* OrderSummary */}
|
||||
<OrderSummary />
|
||||
|
||||
{/* HaveAPromoCode */}
|
||||
<HaveAPromoCode />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cart;
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import ShoppingCart from '@/components/eCommerce/Checkout/ShoppingCart';
|
||||
import BillingInformation from '@/components/eCommerce/Checkout/BillingInformation';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
const Checkout = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Checkout</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Checkout</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={5} lg={5} xl={4}>
|
||||
{/* ShoppingCart */}
|
||||
<ShoppingCart />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={7} lg={7} xl={8}>
|
||||
{/* BillingInformation */}
|
||||
<BillingInformation />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Checkout;
|
||||
@@ -0,0 +1,384 @@
|
||||
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 AddIcon from "@mui/icons-material/Add";
|
||||
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 Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
import dynamic from 'next/dynamic'
|
||||
const RichTextEditor = dynamic(() => import('@mantine/rte'), {
|
||||
ssr: false,
|
||||
})
|
||||
|
||||
const CreateProduct = () => {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
console.log({
|
||||
email: data.get("email"),
|
||||
password: data.get("password"),
|
||||
});
|
||||
};
|
||||
|
||||
// Select dropdown
|
||||
const [categorySelect, setCategorySelect] = React.useState('');
|
||||
const handleChange = (event) => {
|
||||
setCategorySelect(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Create Product</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Create Product</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Box component="form" noValidate onSubmit={handleSubmit}>
|
||||
<Box
|
||||
sx={{
|
||||
background: "#fff",
|
||||
padding: "30px 20px",
|
||||
borderRadius: "8px",
|
||||
mb: "15px"
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Typography as="h4" fontWeight="500" fontSize="18px" mb="10px">
|
||||
Create Product
|
||||
</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",
|
||||
}}
|
||||
>
|
||||
Product Name
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="product-name"
|
||||
name="productName"
|
||||
required
|
||||
fullWidth
|
||||
id="productName"
|
||||
label="Product 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",
|
||||
}}
|
||||
>
|
||||
Short Description
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="short-description"
|
||||
name="Short Description"
|
||||
required
|
||||
fullWidth
|
||||
id="Short Description"
|
||||
label="Short Description"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Category
|
||||
</Typography>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="demo-simple-select-label">Select</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={categorySelect}
|
||||
label="Category"
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem value={10}>Laptop</MenuItem>
|
||||
<MenuItem value={20}>Camera</MenuItem>
|
||||
<MenuItem value={30}>Smart Watch</MenuItem>
|
||||
<MenuItem value={30}>iPhone</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Price
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="price"
|
||||
name="price"
|
||||
required
|
||||
fullWidth
|
||||
id="price"
|
||||
label="$0"
|
||||
type="number"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Discount Price
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="discount-price"
|
||||
name="DiscountPrice"
|
||||
required
|
||||
fullWidth
|
||||
id="DiscountPrice"
|
||||
label="$0"
|
||||
type="number"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Stock
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="stock"
|
||||
name="stock"
|
||||
required
|
||||
fullWidth
|
||||
id="stock"
|
||||
label="5"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Product Description
|
||||
</Typography>
|
||||
|
||||
<RichTextEditor
|
||||
id="rte"
|
||||
controls={[
|
||||
['bold', 'italic', 'underline', 'link', 'image'],
|
||||
['unorderedList', 'h1', 'h2', 'h3'],
|
||||
['sup', 'sub'],
|
||||
['alignLeft', 'alignCenter', 'alignRight'],
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Meta Title
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="meta-title"
|
||||
name="metaTitle"
|
||||
required
|
||||
fullWidth
|
||||
id="metaTitle"
|
||||
label="Meta Title"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Meta Keywords
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="meta-keywords"
|
||||
name="metaKeywords"
|
||||
required
|
||||
fullWidth
|
||||
id="metaKeywords"
|
||||
label="Meta Keywords"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Meta Description
|
||||
</Typography>
|
||||
|
||||
<RichTextEditor
|
||||
id="rte"
|
||||
controls={[
|
||||
['bold', 'italic', 'underline', 'link', 'image'],
|
||||
['unorderedList', 'h1', 'h2', 'h3'],
|
||||
['sup', 'sub'],
|
||||
['alignLeft', 'alignCenter', 'alignRight'],
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Product Image
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="product-image"
|
||||
name="productImage"
|
||||
required
|
||||
fullWidth
|
||||
id="productImage"
|
||||
type="file"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
mt: '15px'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/product1.png"
|
||||
alt="product"
|
||||
wisth="55px"
|
||||
className='mr-10px'
|
||||
/>
|
||||
</Box>
|
||||
</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"
|
||||
}}
|
||||
>
|
||||
<AddIcon
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
className='mr-5px'
|
||||
/>{" "}
|
||||
Create Product
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateProduct;
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import CustomersLists from '@/components/eCommerce/Customers/CustomersLists';
|
||||
|
||||
const Customers = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Customers</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Customers</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<CustomersLists />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Customers;
|
||||
@@ -0,0 +1,344 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import TrackOrder from "@/components/eCommerce/OrderDetails/TrackOrder";
|
||||
import OrderTable from "@/components/eCommerce/OrderDetails/TrackOrder/OrderTable";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
const OrderDetails = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Order Details</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Order Details</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* TrackOrder */}
|
||||
<TrackOrder />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* OrderTable */}
|
||||
<OrderTable />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
Shipping Information
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
Thomas Adison
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "60px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
Address:
|
||||
</span>
|
||||
3559 Roosevelt Wilson Lane San Bernardino, CA 92405
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "60px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
Phone:
|
||||
</span>
|
||||
(123) 456-7890
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "60px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
Email:
|
||||
</span>
|
||||
contact@gmail.com
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
Billing Information
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
Thomas Adison
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "100px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
Payment Type:
|
||||
</span>
|
||||
Credit Card
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "100px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
Provider:
|
||||
</span>
|
||||
Visa ending in 2851
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "100px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
Valid Date:
|
||||
</span>
|
||||
April 22 2019
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "100px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
CVV:
|
||||
</span>
|
||||
xxx
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
Delivery Info
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
UPS Delivery
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "100px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
Order ID :
|
||||
</span>
|
||||
xxxx235
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "100px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
Payment Mode :
|
||||
</span>
|
||||
COD
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
mt: "10px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: "100px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
Email:
|
||||
</span>
|
||||
info@contact.com
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderDetails;
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import OrdersLists from '@/components/eCommerce/OrdersList/OrdersLists';
|
||||
import Features from '@/components/eCommerce/OrdersList/Features';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
const OrdersList = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Orders List</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Orders List</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<Features />
|
||||
|
||||
{/* OrdersLists */}
|
||||
<OrdersLists />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrdersList;
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import ProductDetailsContent from "@/components/eCommerce/ProductDetails/ProductDetailsContent";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
export default function ProductDetails() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Product Details</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Product Details</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ProductDetailsContent />
|
||||
</>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,207 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Button from "@mui/material/Button";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import BorderColorIcon from "@mui/icons-material/BorderColor";
|
||||
import Link from "next/link";
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
const sellerLists = [
|
||||
{
|
||||
id: 1,
|
||||
brandLogo: "/images/seller1.png",
|
||||
brandName: "Nesta Technologies",
|
||||
sellersName: "Katia Stapleton",
|
||||
itemStock: "12,0558",
|
||||
walletBalance: "$48,450.00",
|
||||
viewUrl: "#",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
brandLogo: "/images/seller2.png",
|
||||
brandName: "Force Medicines",
|
||||
sellersName: "Wade Dave",
|
||||
itemStock: "10,500",
|
||||
walletBalance: "$50,500.00",
|
||||
viewUrl: "#",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
brandLogo: "/images/seller3.png",
|
||||
brandName: "Metelgo Sys",
|
||||
sellersName: "Gilbert Dan",
|
||||
itemStock: "8,450",
|
||||
walletBalance: "$60,450.00",
|
||||
viewUrl: "#",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
brandLogo: "/images/seller4.png",
|
||||
brandName: "Digito Galatoxy",
|
||||
sellersName: "Roberto Ramon",
|
||||
itemStock: "15,0587",
|
||||
walletBalance: "$78,450.00",
|
||||
viewUrl: "#",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
brandLogo: "/images/seller5.png",
|
||||
brandName: "Micro Technology",
|
||||
sellersName: "Nathaniel Liam",
|
||||
itemStock: "18,0558",
|
||||
walletBalance: "$65,450.00",
|
||||
viewUrl: "#",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
brandLogo: "/images/seller6.png",
|
||||
brandName: "iTest Factory",
|
||||
sellersName: "Ethan Milton",
|
||||
itemStock: "19,0558",
|
||||
walletBalance: "$76,450.00",
|
||||
viewUrl: "#",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
brandLogo: "/images/seller7.png",
|
||||
brandName: "Syntech Service",
|
||||
sellersName: "Joshua Harvey",
|
||||
itemStock: "20,0558",
|
||||
walletBalance: "$56,450.00",
|
||||
viewUrl: "#",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
brandLogo: "/images/seller8.png",
|
||||
brandName: "Zotic Mentex",
|
||||
sellersName: "Antonio Connor",
|
||||
itemStock: "22,0558",
|
||||
walletBalance: "$90,450.00",
|
||||
viewUrl: "#",
|
||||
},
|
||||
];
|
||||
|
||||
const Sellers = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Sellers</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Sellers</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
{sellerLists.map((seller) => (
|
||||
<Grid item xs={12} sm={6} md={6} lg={6} xl={3} key={seller.id}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
textAlign: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={seller.brandLogo}
|
||||
alt="Seller"
|
||||
width="110px"
|
||||
height="110px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
|
||||
<Typography
|
||||
as="h4"
|
||||
fontWeight="500"
|
||||
fontSize="17px"
|
||||
mt="10px"
|
||||
mb="5px"
|
||||
>
|
||||
{seller.brandName}
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">{seller.sellersName}</Typography>
|
||||
|
||||
<Link href={seller.viewUrl} className="text-decoration-none">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
mt: "20px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mt: "20px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography fontSize="13px">Item Stock</Typography>
|
||||
|
||||
<Typography as="h4" fontWeight="500" fontSize="17px" mt="5px">
|
||||
{seller.itemStock}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography fontSize="13px">Wallet Balance</Typography>
|
||||
|
||||
<Typography as="h4" fontWeight="500" fontSize="17px" mt="5px">
|
||||
{seller.walletBalance}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Edit & Delete Button */}
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "10px",
|
||||
}}
|
||||
>
|
||||
<Tooltip title="Edit" placement="top">
|
||||
<IconButton aria-label="edit" size="small">
|
||||
<BorderColorIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Delete" placement="top">
|
||||
<IconButton aria-label="delete" size="small">
|
||||
<DeleteIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sellers;
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Email/LeftSidebar';
|
||||
import EmailLists from '@/components/Email/EmailLists';
|
||||
|
||||
export default function Inbox() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Email</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Email</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={8} lg={8} xl={9}>
|
||||
{/* EmailList */}
|
||||
<EmailLists />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import LeftSidebar from '@/components/Email/LeftSidebar';
|
||||
import ReadEmailContent from '@/components/Email/ReadEmailContent';
|
||||
|
||||
export default function ReadEmail() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Read Email</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Read Email</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={4} lg={4} xl={3}>
|
||||
{/* LeftSidebar */}
|
||||
<LeftSidebar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={8} lg={8} xl={9}>
|
||||
{/* ReadEmailContent */}
|
||||
<ReadEmailContent />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import DefaultSelect from '@/components/Forms/AdvancedElements/DefaultSelect';
|
||||
import MultiSelect from '@/components/Forms/AdvancedElements/MultiSelect';
|
||||
import MultipleSelectChip from '@/components/Forms/AdvancedElements/MultipleSelectChip';
|
||||
import CountrySelect from '@/components/Forms/AdvancedElements/CountrySelect';
|
||||
import BasicDatePicker from '@/components/Forms/AdvancedElements/BasicDatePicker';
|
||||
import BasicTimePicker from '@/components/Forms/AdvancedElements/BasicTimePicker';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
export default function AdvancedElements() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Advanced Elements</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Advanced Elements</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={4} xl={4}>
|
||||
{/* DefaultSelect */}
|
||||
<DefaultSelect />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={4} xl={4}>
|
||||
{/* MultiSelect */}
|
||||
<MultiSelect />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={4} xl={4}>
|
||||
{/* MultipleSelectChip */}
|
||||
<MultipleSelectChip />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* CountrySelect */}
|
||||
<CountrySelect />
|
||||
|
||||
{/* BasicTimePicker */}
|
||||
<BasicTimePicker />
|
||||
|
||||
{/* BasicDatePicker */}
|
||||
<BasicDatePicker />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import EditorArea from '@/components/Forms/EditorArea';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
export default function Editors() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Editors</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Editors</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<EditorArea />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import UploadMultipleFiles from '@/components/Forms/FileUploader/UploadMultipleFiles';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
export default function FileUploader() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>File Uploader</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>File Uploader</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<UploadMultipleFiles />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicForm from '@/components/Forms/FormLayouts/BasicForm';
|
||||
import BasicWithIcons from '@/components/Forms/FormLayouts/BasicWithIcons';
|
||||
import SignInForm from '@/components/Forms/FormLayouts/SignInForm';
|
||||
import SignUpForm from '@/components/Forms/FormLayouts/SignUpForm';
|
||||
import CustomStyles from '@/components/Forms/FormLayouts/CustomStyles';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
export default function FormLayouts() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Form Layouts</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Form Layouts</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicForm */}
|
||||
<BasicForm />
|
||||
|
||||
{/* SignIn */}
|
||||
<SignInForm />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicWithIcons */}
|
||||
<BasicWithIcons />
|
||||
|
||||
{/* SignUpForm */}
|
||||
<SignUpForm />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<CustomStyles />
|
||||
</>
|
||||
);
|
||||
}
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import Features from "@/components/Dashboard/eCommerce/Features";
|
||||
import Ratings from "@/components/Dashboard/eCommerce/Ratings";
|
||||
import AudienceOverview from "@/components/Dashboard/eCommerce/AudienceOverview";
|
||||
import VisitsByDay from "@/components/Dashboard/eCommerce/VisitsByDay";
|
||||
import Impressions from "@/components/Dashboard/eCommerce/Impressions";
|
||||
import ActivityTimeline from "@/components/Dashboard/eCommerce/ActivityTimeline";
|
||||
import RevenuStatus from "@/components/Dashboard/eCommerce/RevenuStatus";
|
||||
import SalesByCountries from "@/components/Dashboard/eCommerce/SalesByCountries";
|
||||
import NewCustomers from "@/components/Dashboard/eCommerce/NewCustomers";
|
||||
import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders";
|
||||
import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList";
|
||||
import BestSellingProducts from "@/components/Dashboard/eCommerce/BestSellingProducts";
|
||||
import LiveVisitsOnOurSite from "@/components/Dashboard/eCommerce/LiveVisitsOnOurSite";
|
||||
|
||||
export default function eCommerce() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>eCommerce</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>
|
||||
eCommerce
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* Features */}
|
||||
<Features />
|
||||
|
||||
{/* AudienceOverview */}
|
||||
<AudienceOverview />
|
||||
|
||||
<Grid
|
||||
container
|
||||
columnSpacing={{ xs: 1, sm: 2, md: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={8}>
|
||||
{/* VisitsByDay */}
|
||||
<VisitsByDay />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={4}>
|
||||
{/* Impressions */}
|
||||
<Impressions />
|
||||
|
||||
{/* ActivityTimeline */}
|
||||
<ActivityTimeline />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12}>
|
||||
{/* RevenuStatus */}
|
||||
<RevenuStatus />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* Ratings */}
|
||||
<Ratings />
|
||||
|
||||
{/* LiveVisitsOnOurSite */}
|
||||
<LiveVisitsOnOurSite />
|
||||
|
||||
{/* SalesByLocations */}
|
||||
<SalesByCountries />
|
||||
|
||||
{/* NewCustomers */}
|
||||
<NewCustomers />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Recent Orders */}
|
||||
<RecentOrders />
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* TeamMembersList */}
|
||||
<TeamMembersList />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* BestSellingProducts */}
|
||||
<BestSellingProducts />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import Features from '@/components/Dashboard/LMSCourses/Features';
|
||||
import YourProgress from "@/components/Dashboard/LMSCourses/YourProgress";
|
||||
import ExperienceIQ from "@/components/Dashboard/LMSCourses/ExperienceIQ";
|
||||
import HoursSpent from "@/components/Dashboard/LMSCourses/HoursSpent";
|
||||
import MyPlanning from "@/components/Dashboard/LMSCourses/MyPlanning";
|
||||
import TopInstructor from "@/components/Dashboard/LMSCourses/TopInstructor";
|
||||
import TotalWatched from "@/components/Dashboard/LMSCourses/TotalWatched";
|
||||
import CurrentCourses from "@/components/Dashboard/LMSCourses/CurrentCourses";
|
||||
import Courses from "@/components/Dashboard/LMSCourses/Courses";
|
||||
import ActiveCourse from "@/components/Dashboard/LMSCourses/ActiveCourse";
|
||||
import CourseCompletion from "@/components/Dashboard/LMSCourses/CourseCompletion";
|
||||
import Messages from "@/components/Dashboard/LMSCourses/Messages";
|
||||
import TopStudents from "@/components/Dashboard/LMSCourses/TopStudents";
|
||||
|
||||
export default function LMSCourses() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>LMS Courses</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/lms-courses/">Dashboard</Link>
|
||||
</li>
|
||||
<li>
|
||||
LMS Courses
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<Features />
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* YourProgress */}
|
||||
<YourProgress />
|
||||
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
|
||||
<Grid item xs={12} md={12} lg={8}>
|
||||
{/* HoursSpent */}
|
||||
<HoursSpent />
|
||||
|
||||
{/* TopInstructor */}
|
||||
<TopInstructor />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={4}>
|
||||
{/* MyPlanning */}
|
||||
<MyPlanning />
|
||||
|
||||
{/* TotalWatched */}
|
||||
<TotalWatched />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* CurrentCourse */}
|
||||
<CurrentCourses />
|
||||
|
||||
{/* Courses */}
|
||||
<Courses />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* ExperienceIQ */}
|
||||
<ExperienceIQ />
|
||||
|
||||
{/* ActiveCourse */}
|
||||
<ActiveCourse />
|
||||
|
||||
{/* CourseCompletion */}
|
||||
<CourseCompletion />
|
||||
|
||||
{/* Messages */}
|
||||
<Messages />
|
||||
|
||||
{/* TopStudents */}
|
||||
<TopStudents />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import NotificationTable from '@/components/Notification/NotificationTable';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Notification() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Notification</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Notification</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<NotificationTable />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,399 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { Typography } from "@mui/material";
|
||||
import Basic from '@/components/Pages/Charts/ApexCharts/LineCharts/Basic';
|
||||
import Stepline from '@/components/Pages/Charts/ApexCharts/LineCharts/Stepline';
|
||||
import Gradient from '@/components/Pages/Charts/ApexCharts/LineCharts/Gradient';
|
||||
import Dashed from '@/components/Pages/Charts/ApexCharts/LineCharts/Dashed';
|
||||
import BasicAreaCharts from '@/components/Pages/Charts/ApexCharts/AreaCharts/BasicAreaCharts';
|
||||
import Spline from '@/components/Pages/Charts/ApexCharts/AreaCharts/Spline';
|
||||
import DatetimeXAxis from '@/components/Pages/Charts/ApexCharts/AreaCharts/DatetimeXAxis';
|
||||
import Negative from '@/components/Pages/Charts/ApexCharts/AreaCharts/Negative';
|
||||
import BasicColumnCharts from '@/components/Pages/Charts/ApexCharts/ColumnCharts/BasicColumnCharts';
|
||||
import ColumnWithDataLabels from '@/components/Pages/Charts/ApexCharts/ColumnCharts/ColumnWithDataLabels';
|
||||
import StackedColumns from '@/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns';
|
||||
import StackedColumns100 from '@/components/Pages/Charts/ApexCharts/ColumnCharts/StackedColumns100';
|
||||
import BasicBarCharts from '@/components/Pages/Charts/ApexCharts/BarCharts/BasicBarCharts';
|
||||
import Grouped from '@/components/Pages/Charts/ApexCharts/BarCharts/Grouped';
|
||||
import StackedBar from '@/components/Pages/Charts/ApexCharts/BarCharts/StackedBar';
|
||||
import StackedBars100 from '@/components/Pages/Charts/ApexCharts/BarCharts/StackedBars100';
|
||||
import LineColumn from '@/components/Pages/Charts/ApexCharts/MixedCharts/LineColumn';
|
||||
import MultipleYAxis from '@/components/Pages/Charts/ApexCharts/MixedCharts/MultipleYAxis';
|
||||
import LineArea from '@/components/Pages/Charts/ApexCharts/MixedCharts/LineArea';
|
||||
import LineColumnArea from '@/components/Pages/Charts/ApexCharts/MixedCharts/LineColumnArea';
|
||||
import BasicPolarAreaCharts from '@/components/Pages/Charts/ApexCharts/PolarAreaCharts/BasicPolarAreaCharts';
|
||||
import Monochrome from '@/components/Pages/Charts/ApexCharts/PolarAreaCharts/Monochrome';
|
||||
import BasicRadarCharts from '@/components/Pages/Charts/ApexCharts/RadarCharts/BasicRadarCharts';
|
||||
import RadarMultipleSeries from '@/components/Pages/Charts/ApexCharts/RadarCharts/RadarMultipleSeries';
|
||||
import RadarWithPolygonFill from '@/components/Pages/Charts/ApexCharts/RadarCharts/RadarWithPolygonFill';
|
||||
import BasicRadialBarCharts from '@/components/Pages/Charts/ApexCharts/RadialBarCharts/BasicRadialBarCharts';
|
||||
import MultipleRadialbars from '@/components/Pages/Charts/ApexCharts/RadialBarCharts/MultipleRadialbars';
|
||||
import CustomAngleCircle from '@/components/Pages/Charts/ApexCharts/RadialBarCharts/CustomAngleCircle';
|
||||
import SimplePieChart from '@/components/Pages/Charts/ApexCharts/PieCharts/SimplePieChart';
|
||||
import SimpleDonut from '@/components/Pages/Charts/ApexCharts/PieCharts/SimpleDonut';
|
||||
import UpdateDonut from '@/components/Pages/Charts/ApexCharts/PieCharts/UpdateDonut';
|
||||
import MonochromePie from '@/components/Pages/Charts/ApexCharts/PieCharts/MonochromePie';
|
||||
import GradientDonut from '@/components/Pages/Charts/ApexCharts/PieCharts/GradientDonut';
|
||||
import PieCharts from '@/components/Pages/Charts/ApexCharts/PieCharts/DonutWithPattern';
|
||||
import NavBar from '@/components/Pages/Charts/NavBar';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
export default function Charts() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Charts</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Charts</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Nav */}
|
||||
<NavBar />
|
||||
|
||||
{/* Line Charts */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Line Charts
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Gradient */}
|
||||
<Gradient />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Stepline */}
|
||||
<Stepline />
|
||||
|
||||
{/* Dashed */}
|
||||
<Dashed />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Area Charts */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
mt: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Area Charts
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicAreaCharts */}
|
||||
<BasicAreaCharts />
|
||||
|
||||
{/* DatetimeXAxis */}
|
||||
<DatetimeXAxis />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Spline */}
|
||||
<Spline />
|
||||
|
||||
{/* Negative */}
|
||||
<Negative />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Column Charts */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
mt: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Column Charts
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicColumnCharts */}
|
||||
<BasicColumnCharts />
|
||||
|
||||
{/* StackedColumns */}
|
||||
<StackedColumns />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ColumnWithDataLabels */}
|
||||
<ColumnWithDataLabels />
|
||||
|
||||
{/* StackedColumns100 */}
|
||||
<StackedColumns100 />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Bar Charts */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
mt: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Bar Charts
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicBarCharts */}
|
||||
<BasicBarCharts />
|
||||
|
||||
{/* StackedBar */}
|
||||
<StackedBar />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Grouped */}
|
||||
<Grouped />
|
||||
|
||||
{/* StackedBars100 */}
|
||||
<StackedBars100 />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Mixed Charts */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
mt: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Mixed Charts
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={12}>
|
||||
{/* LineColumn */}
|
||||
<LineColumn />
|
||||
|
||||
{/* LineArea */}
|
||||
<LineArea />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={12}>
|
||||
{/* MultipleYAxis */}
|
||||
<MultipleYAxis />
|
||||
|
||||
{/* LineColumnArea */}
|
||||
<LineColumnArea />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Polar Area Charts */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
mt: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Polar Area Charts
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicPolarAreaCharts */}
|
||||
<BasicPolarAreaCharts />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Monochrome */}
|
||||
<Monochrome />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Radar Charts */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
mt: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Radar Charts
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicRadarCharts */}
|
||||
<BasicRadarCharts />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* RadarMultipleSeries */}
|
||||
<RadarMultipleSeries />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={12}>
|
||||
{/* RadarWithPolygonFill */}
|
||||
<RadarWithPolygonFill />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* RadialBar Charts */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
mt: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
RadialBar Charts
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* BasicRadialBarCharts */}
|
||||
<BasicRadialBarCharts />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* MultipleRadialbars */}
|
||||
<MultipleRadialbars />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* CustomAngleCircle */}
|
||||
<CustomAngleCircle />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* PieCharts */}
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
mt: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Pie Charts
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SimplePieChart */}
|
||||
<SimplePieChart />
|
||||
|
||||
{/* UpdateDonut */}
|
||||
<UpdateDonut />
|
||||
|
||||
{/* MonochromePie */}
|
||||
<MonochromePie />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SimpleDonut */}
|
||||
<SimpleDonut />
|
||||
|
||||
{/* GradientDonut */}
|
||||
<GradientDonut />
|
||||
|
||||
{/* PieCharts */}
|
||||
<PieCharts />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import BasicAccordion from '@/components/UIElements/Accordion/BasicAccordion';
|
||||
import ControlledAccordion from '@/components/UIElements/Accordion/ControlledAccordion';
|
||||
import Customization from '@/components/UIElements/Accordion/Customization';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
export default function FAQ() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>FAQ</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>FAQ</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* BasicAccordion */}
|
||||
<BasicAccordion />
|
||||
|
||||
{/* ControlledAccordion */}
|
||||
<ControlledAccordion />
|
||||
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import GalleryContent from '@/components/Pages/Gallery/GalleryContent';
|
||||
|
||||
export default function Gallery() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Gallery</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Gallery</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<GalleryContent />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import InvoiceDetailsContent from '@/components/Pages/Invoice/InvoiceDetailsContent'
|
||||
|
||||
export default function InvoiceDetails() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Invoice Details</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Invoice Details</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<InvoiceDetailsContent />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import InvoiceLists from '@/components/Pages/Invoice/InvoiceLists';
|
||||
|
||||
export default function Invoice() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Invoice</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Invoice</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<InvoiceLists />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import GoogleMap from '@/components/Pages/Maps/GoogleMap';
|
||||
import BasicMarkers from '@/components/Pages/Maps/BasicMarkers';
|
||||
import EuropeMapWithGraticule from '@/components/Pages/Maps/EuropeMapWithGraticule';
|
||||
|
||||
export default function Maps() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Maps</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Maps</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* GoogleMap */}
|
||||
<GoogleMap />
|
||||
|
||||
{/* BasicMarkers */}
|
||||
<BasicMarkers />
|
||||
|
||||
{/* EuropeMapWithGraticule */}
|
||||
<EuropeMapWithGraticule />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,558 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import AbcIcon from '@mui/icons-material/Abc';
|
||||
import AcUnitIcon from '@mui/icons-material/AcUnit';
|
||||
import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
|
||||
import AccessAlarmsIcon from '@mui/icons-material/AccessAlarms';
|
||||
import AccessTimeIcon from '@mui/icons-material/AccessTime';
|
||||
import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled';
|
||||
import AccessibilityIcon from '@mui/icons-material/Accessibility';
|
||||
import AccessibilityNewIcon from '@mui/icons-material/AccessibilityNew';
|
||||
import AccessibleIcon from '@mui/icons-material/Accessible';
|
||||
import AccessibleForwardIcon from '@mui/icons-material/AccessibleForward';
|
||||
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
|
||||
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
|
||||
import AccountBoxIcon from '@mui/icons-material/AccountBox';
|
||||
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
||||
import AccountTreeIcon from '@mui/icons-material/AccountTree';
|
||||
import AdUnitsIcon from '@mui/icons-material/AdUnits';
|
||||
import AdbIcon from '@mui/icons-material/Adb';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
|
||||
import AddAlarmIcon from '@mui/icons-material/AddAlarm';
|
||||
import AddAlertIcon from '@mui/icons-material/AddAlert';
|
||||
import AddBoxIcon from '@mui/icons-material/AddBox';
|
||||
import AddBusinessIcon from '@mui/icons-material/AddBusiness';
|
||||
import AddCardIcon from '@mui/icons-material/AddCard';
|
||||
import AddCircleIcon from '@mui/icons-material/AddCircle';
|
||||
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
|
||||
import AddToQueueIcon from '@mui/icons-material/AddToQueue';
|
||||
import AlbumIcon from '@mui/icons-material/Album';
|
||||
import AlignVerticalBottomIcon from '@mui/icons-material/AlignVerticalBottom';
|
||||
import AllInboxIcon from '@mui/icons-material/AllInbox';
|
||||
import Button from '@mui/material/Button';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
|
||||
export default function MaterialIcons() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Material Icons</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Material Icons</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "40px 35px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Material Icons
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AbcIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AcUnitIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccessAlarmIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccessAlarmsIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccessTimeIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccessTimeFilledIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccessibilityIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccessibilityNewIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccessibleIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccessibleForwardIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccountBalanceIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccountBalanceWalletIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccountBoxIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccountCircleIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AccountTreeIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AdUnitsIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AdbIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddAPhotoIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddAlarmIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddAlertIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddBoxIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddBusinessIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddCardIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddCircleIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddCircleOutlineIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AddToQueueIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AlbumIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AlignVerticalBottomIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<AllInboxIcon style={{ fontSize: '60px' }} />
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
mt: '10px'
|
||||
}}
|
||||
>
|
||||
<a href="https://mui.com/material-ui/material-icons/" target="_blank" rel="noreferrer" className="text-decoration-none">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 2,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "15px",
|
||||
padding: "12px 30px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
View All Icons
|
||||
</Button>
|
||||
</a>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import PricingPlanStyle1 from '@/components/Pages/Pricing/PricingPlanStyle1';
|
||||
import PricingPlanStyle2 from '@/components/Pages/Pricing/PricingPlanStyle2';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Pricing</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Pricing</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<PricingPlanStyle1 />
|
||||
|
||||
<PricingPlanStyle2 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Features from '@/components/Pages/Profile/Features';
|
||||
import PersonalInformation from '@/components/Pages/Profile/PersonalInformation';
|
||||
import ActivityTimeline from '@/components/Pages/Profile/ActivityTimeline';
|
||||
import Overview from '@/components/Pages/Profile/Overview';
|
||||
import MyTasks from '@/components/Pages/Profile/MyTasks';
|
||||
import ProfileContent from '@/components/Pages/Profile/ProfileContent';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Profile() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Profile</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Profile</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* ProfileContent */}
|
||||
<ProfileContent />
|
||||
|
||||
{/* Personal Information */}
|
||||
<PersonalInformation />
|
||||
|
||||
{/* ActivityTimeline */}
|
||||
<ActivityTimeline />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* Features */}
|
||||
<Features />
|
||||
|
||||
{/* Overview */}
|
||||
<Overview />
|
||||
|
||||
{/* MyTasks */}
|
||||
<MyTasks />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import NavBar from '@/components/Pages/Charts/NavBar';
|
||||
import SimpleLineChart from '@/components/Pages/Charts/Recharts/LineChart/SimpleLineChart';
|
||||
import VerticalLineChart from '@/components/Pages/Charts/Recharts/LineChart/VerticalLineChart';
|
||||
import SimpleAreaChart from '@/components/Pages/Charts/Recharts/AreaChart/SimpleAreaChart';
|
||||
import StackedAreaChart from '@/components/Pages/Charts/Recharts/AreaChart/StackedAreaChart';
|
||||
import TinyBarChart from '@/components/Pages/Charts/Recharts/BarChart/TinyBarChart';
|
||||
import SimpleBarChart from '@/components/Pages/Charts/Recharts/BarChart/SimpleBarChart';
|
||||
import LineBarAreaComposedChart from '@/components/Pages/Charts/Recharts/ComposedChart/LineBarAreaComposedChart';
|
||||
import SameDataComposedChart from '@/components/Pages/Charts/Recharts/ComposedChart/SameDataComposedChart';
|
||||
import SimpleScatterChart from '@/components/Pages/Charts/Recharts/ScatterChart/SimpleScatterChart';
|
||||
import ThreeDimScatterChart from '@/components/Pages/Charts/Recharts/ScatterChart/ThreeDimScatterChart';
|
||||
import TwoLevelPieChart from './../../components/Pages/Charts/Recharts/PieChart/TwoLevelPieChart';
|
||||
import TwoSimplePieChart from '@/components/Pages/Charts/Recharts/PieChart/TwoSimplePieChart';
|
||||
import SimpleRadarChart from '@/components/Pages/Charts/Recharts/RadarChart/SimpleRadarChart';
|
||||
import SpecifiedDomainRadarChart from '@/components/Pages/Charts/Recharts/RadarChart/SpecifiedDomainRadarChart';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Recharts() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Recharts</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Recharts</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Nav */}
|
||||
<NavBar />
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SimpleLineChart */}
|
||||
<SimpleLineChart />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* VerticalLineChart */}
|
||||
<VerticalLineChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SimpleAreaChart */}
|
||||
<SimpleAreaChart />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* StackedAreaChart */}
|
||||
<StackedAreaChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* TinyBarChart */}
|
||||
<TinyBarChart />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SimpleBarChart */}
|
||||
<SimpleBarChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* LineBarAreaComposedChart */}
|
||||
<LineBarAreaComposedChart />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SameDataComposedChart */}
|
||||
<SameDataComposedChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SimpleScatterChart */}
|
||||
<SimpleScatterChart />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ThreeDimScatterChart */}
|
||||
<ThreeDimScatterChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* TwoLevelPieChart */}
|
||||
<TwoLevelPieChart />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* TwoSimplePieChart */}
|
||||
<TwoSimplePieChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SimpleRadarChart */}
|
||||
<SimpleRadarChart />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SpecifiedDomainRadarChart */}
|
||||
<SpecifiedDomainRadarChart />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,528 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Button from '@mui/material/Button';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Remixicon() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Remixicon</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Remixicon</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "40px 35px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Remixicon
|
||||
</Typography>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-home-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-mail-open-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-mail-download-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-inbox-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-at-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-pie-chart-box-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-pie-chart-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-briefcase-4-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-briefcase-5-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-projector-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-registered-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-stack-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-stack-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-window-2-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-creative-commons-nd-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-chat-4-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-chat-quote-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-pen-nib-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-contrast-drop-2-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-t-box-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-focus-2-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-anticlockwise-2-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-layout-3-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-layout-top-2-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-layout-left-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-code-box-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-hard-drive-2-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-sim-card-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-dual-sim-1-fill" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={3} lg={2}>
|
||||
<Box
|
||||
sx={{
|
||||
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
|
||||
p: '30px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '10px',
|
||||
mt: '15px'
|
||||
}}
|
||||
className="dark-border"
|
||||
>
|
||||
<i className="ri-cast-line" style={{ fontSize: '25px' }}></i>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
mt: '10px'
|
||||
}}
|
||||
>
|
||||
<a href="https://remixicon.com/" target="_blank" rel="noreferrer" className="text-decoration-none">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 2,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "15px",
|
||||
padding: "12px 30px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
View All Icons
|
||||
</Button>
|
||||
</a>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import SearchContent from '@/components/Pages/Search/SearchContent';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Search() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Search</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Search</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<SearchContent />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
import React from 'react';
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Button from "@mui/material/Button";
|
||||
import TextareaAutosize from '@mui/base/TextareaAutosize';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Support() {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
console.log({
|
||||
email: data.get("email"),
|
||||
password: data.get("password"),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Support</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
maxWidth: "510px",
|
||||
ml: "auto",
|
||||
mr: "auto",
|
||||
padding: "50px 0 100px",
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={12}>
|
||||
<Box>
|
||||
<Typography as="h1" fontSize="28px" fontWeight="700" mb="5px">
|
||||
Contact with Us
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="14px" mb="30px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
|
||||
<Box component="form" noValidate onSubmit={handleSubmit}>
|
||||
<Box
|
||||
sx={{
|
||||
background: "#fff",
|
||||
padding: "30px 20px",
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Grid container alignItems="center" spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Name
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="name"
|
||||
name="name"
|
||||
fullWidth
|
||||
id="name"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Email
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="email"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Subject
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
id="subject"
|
||||
name="subject"
|
||||
autoComplete="subject"
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Message
|
||||
</Typography>
|
||||
|
||||
<TextareaAutosize
|
||||
minRows={5}
|
||||
style={{
|
||||
width: '100%',
|
||||
background: '#FFFFFF',
|
||||
color: '#5B5B98',
|
||||
border: '1px solid rgb(193 193 193)',
|
||||
borderRadius: '10px',
|
||||
padding: '16.5px 14px'
|
||||
}}
|
||||
className="dark-textarea"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 3,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "15px",
|
||||
padding: "12px 10px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
Send Message
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import TermsConditionsContent from '@/components/Pages/TermsConditions/TermsConditionsContent';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function TermsConditions() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Terms & Conditions</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Terms & Conditions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<TermsConditionsContent />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import TestimonialsOne from '@/components/Pages/Testimonials/TestimonialsOne';
|
||||
import TestimonialsTwo from '@/components/Pages/Testimonials/TestimonialsTwo';
|
||||
import TestimonialsThree from '@/components/Pages/Testimonials/TestimonialsThree';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Testimonials() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Testimonials</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Testimonials</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<TestimonialsOne />
|
||||
|
||||
<TestimonialsTwo />
|
||||
|
||||
<TestimonialsThree />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import TimelineStyle1 from '@/components/Pages/Timeline/TimelineStyle1';
|
||||
import TimelineStyle2 from '@/components/Pages/Timeline/TimelineStyle2';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Timeline() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Timeline</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Timeline</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<TimelineStyle1 />
|
||||
|
||||
<TimelineStyle2 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import Features from '@/components/Dashboard/ProjectManagement/Features';
|
||||
import TaskDistribution from '@/components/Dashboard/ProjectManagement/TaskDistribution';
|
||||
import MyTasks from '@/components/Dashboard/ProjectManagement/MyTasks';
|
||||
import TotalUsers from '@/components/Dashboard/ProjectManagement/TotalUsers';
|
||||
import CompletedTasks from '@/components/Dashboard/ProjectManagement/CompletedTasks';
|
||||
import TasksPerformance from '@/components/Dashboard/ProjectManagement/TasksPerformance';
|
||||
import IssuesSummary from '@/components/Dashboard/ProjectManagement/IssuesSummary';
|
||||
import AllProjects from '@/components/Dashboard/ProjectManagement/AllProjects';
|
||||
import TeamMembers from '@/components/Dashboard/ProjectManagement/TeamMembers';
|
||||
import ActivityTimeline from '@/components/Dashboard/ProjectManagement/ActivityTimeline';
|
||||
|
||||
export default function ProjectManagement() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Project Management</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/project-management/">Dashboard</Link>
|
||||
</li>
|
||||
<li>
|
||||
Project Management
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<Features />
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* TaskDistribution */}
|
||||
<TaskDistribution />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* MyTasks */}
|
||||
<MyTasks />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* TotalUsers */}
|
||||
<TotalUsers />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* CompletedTasks */}
|
||||
<CompletedTasks />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* TasksPerformance */}
|
||||
<TasksPerformance />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={8}>
|
||||
{/* IssuesSummary */}
|
||||
<IssuesSummary />
|
||||
|
||||
{/* AllProjects */}
|
||||
<AllProjects />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* TeamMembers */}
|
||||
<TeamMembers />
|
||||
|
||||
{/* ActivityTimeline */}
|
||||
<ActivityTimeline />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from '@mui/material/Button';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
const clientsLists = [
|
||||
{
|
||||
image: '/images/member1.png',
|
||||
name: 'Alvarado Turner',
|
||||
userName: '@alvaradoTurner',
|
||||
email: 'alvaradoturner@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'New York, USA',
|
||||
phone: '+1 123 456 789',
|
||||
},
|
||||
{
|
||||
image: '/images/member2.png',
|
||||
name: 'Evangelina Mcclain',
|
||||
userName: '@evangelinaMcclain',
|
||||
email: 'evangelina@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'Switzerland',
|
||||
phone: '+1 123 468 789',
|
||||
},
|
||||
{
|
||||
image: '/images/member3.png',
|
||||
name: 'Candice Munoz',
|
||||
userName: '@candiceMunoz',
|
||||
email: 'candiceMunoz@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'Germany',
|
||||
phone: '+1 123 456 842',
|
||||
},
|
||||
{
|
||||
image: '/images/member4.png',
|
||||
name: 'Bernard Langley',
|
||||
userName: '@bernardLangley',
|
||||
email: 'bernardLangley@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'Canada',
|
||||
phone: '+1 123 256 789',
|
||||
},
|
||||
{
|
||||
image: '/images/member5.png',
|
||||
name: 'Kristie Hall',
|
||||
userName: '@kristieHall',
|
||||
email: 'kristieHall@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'United States',
|
||||
phone: '+1 123 456 742',
|
||||
},
|
||||
{
|
||||
image: '/images/member6.png',
|
||||
name: 'Bolton Obrien',
|
||||
userName: '@boltonObrien',
|
||||
email: 'boltonObrien@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'Sweden',
|
||||
phone: '+1 123 346 789',
|
||||
},
|
||||
{
|
||||
image: '/images/member7.png',
|
||||
name: 'Dee Alvarado',
|
||||
userName: '@deeAlvarado',
|
||||
email: 'deeAlvarado@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'Japan',
|
||||
phone: '+1 123 456 953',
|
||||
},
|
||||
{
|
||||
image: '/images/member8.png',
|
||||
name: 'Cervantes Kramer',
|
||||
userName: '@cervantesKramer',
|
||||
email: 'cervantesKramer@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'Australia',
|
||||
phone: '+1 123 368 789',
|
||||
},
|
||||
{
|
||||
image: '/images/member9.png',
|
||||
name: 'Dejesus Michael',
|
||||
userName: '@dejesusMichael',
|
||||
email: 'dejesusMichael@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'United Kingdom',
|
||||
phone: '+1 123 456 742',
|
||||
},
|
||||
{
|
||||
image: '/images/member10.png',
|
||||
name: 'Alissa Nelson',
|
||||
userName: '@alissaNelson',
|
||||
email: 'alissaNelson@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'France',
|
||||
phone: '+1 123 356 789',
|
||||
},
|
||||
{
|
||||
image: '/images/member11.png',
|
||||
name: 'English Haney',
|
||||
userName: '@englishHaney',
|
||||
email: 'englishHaney@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'Denmark',
|
||||
phone: '+1 123 456 566',
|
||||
},
|
||||
{
|
||||
image: '/images/member12.png',
|
||||
name: 'Edwards Mckenzie',
|
||||
userName: '@edwardsMckenzie',
|
||||
email: 'edwardsMckenzie@gmail.com',
|
||||
projectsUrl: '#',
|
||||
location: 'New Zealand',
|
||||
phone: '+1 123 357 789',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Clients() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Clients</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Clients</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
{clientsLists.map((client) => (
|
||||
<Grid item xs={12} sm={6} md={6} lg={4} xl={3} key={client.name}>
|
||||
<Card
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "20px 15px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={client.image}
|
||||
alt="Member"
|
||||
width="148px"
|
||||
height="148px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Typography
|
||||
as="h4"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mt: '10px',
|
||||
}}
|
||||
>
|
||||
{client.name}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
as="h4"
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
color: '#A9A9C8',
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{client.userName}
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<Link href={`mailto:${client.email}`} className="text-decoration-none">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '8px',
|
||||
m: '0 5px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
Message
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link href={client.projectsUrl} className="text-decoration-none">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
textTransform: 'capitalize',
|
||||
borderRadius: '8px',
|
||||
m: '0 5px',
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
Projects
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
textAlign: 'center',
|
||||
mt: '30px'
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Location
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="15px">
|
||||
{client.location}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Phone
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="15px">
|
||||
{client.phone}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css'
|
||||
import AllProjects from '@/components/Projects/AllProjects';
|
||||
|
||||
const Projects = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Projects</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Projects</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<AllProjects />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Projects;
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import NewProjects from "@/components/Projects/KanbanBoard/NewProjects";
|
||||
import ToDo from "@/components/Projects/KanbanBoard/ToDo";
|
||||
import InReview from "@/components/Projects/KanbanBoard/InReview";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
const KanbanBoard = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Kanban Board</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Kanban Board</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
justifyContent="center"
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* NewProjects */}
|
||||
<NewProjects />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* ToDo */}
|
||||
<ToDo />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* InReview */}
|
||||
<InReview />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default KanbanBoard;
|
||||
@@ -0,0 +1,286 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Button from "@mui/material/Button";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
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 CategoriesSelect from '@/components/Projects/ProjectCreate/CategoriesSelect';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
import dynamic from 'next/dynamic'
|
||||
import MemberSelect from '@/components/Projects/ProjectCreate/MemberSelect';
|
||||
const RichTextEditor = dynamic(() => import('@mantine/rte'), {
|
||||
ssr: false,
|
||||
})
|
||||
|
||||
const ProjectCreate = () => {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
console.log({
|
||||
email: data.get("email"),
|
||||
password: data.get("password"),
|
||||
});
|
||||
};
|
||||
|
||||
// Select Priority
|
||||
const [priority, setPriority] = React.useState('');
|
||||
const handleChange = (event) => {
|
||||
setPriority(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Project Create</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Project Create</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px 15px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '15px'
|
||||
}}
|
||||
>
|
||||
Create Project
|
||||
</Typography>
|
||||
|
||||
<Box component="form" noValidate onSubmit={handleSubmit}>
|
||||
<Grid container alignItems="center" spacing={2}>
|
||||
<Grid item xs={12} md={12} lg={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Project Name
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="project-name"
|
||||
name="projectName"
|
||||
required
|
||||
fullWidth
|
||||
id="projectName"
|
||||
label="Project 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",
|
||||
}}
|
||||
>
|
||||
Start Date
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="start-date"
|
||||
name="startDate"
|
||||
required
|
||||
fullWidth
|
||||
id="startDate"
|
||||
type="date"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
End Date
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="end-date"
|
||||
name="endDate"
|
||||
required
|
||||
fullWidth
|
||||
id="endDate"
|
||||
type="date"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Project Description
|
||||
</Typography>
|
||||
|
||||
<RichTextEditor
|
||||
id="rte"
|
||||
controls={[
|
||||
['bold', 'italic', 'underline', 'link', 'image'],
|
||||
['unorderedList', 'h1', 'h2', 'h3', 'h4'],
|
||||
['sup', 'sub'],
|
||||
['alignLeft', 'alignCenter', 'alignRight'],
|
||||
]}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Budget
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="budget"
|
||||
name="budget"
|
||||
required
|
||||
fullWidth
|
||||
id="budget"
|
||||
label="Enter rate"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Priority Status
|
||||
</Typography>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="demo-simple-select-label">Priority</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={priority}
|
||||
label="Priority"
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem value={10}>High</MenuItem>
|
||||
<MenuItem value={20}>Medium</MenuItem>
|
||||
<MenuItem value={30}>Low</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Categories
|
||||
</Typography>
|
||||
|
||||
{/* CategoriesSelect */}
|
||||
<CategoriesSelect />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Members
|
||||
</Typography>
|
||||
|
||||
{/* MemberSelect */}
|
||||
<MemberSelect />
|
||||
</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",
|
||||
}}
|
||||
>
|
||||
<AddIcon
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
className='mr-5px'
|
||||
/>{" "}
|
||||
Create Project
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectCreate;
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import TotalUsers from "@/components/Projects/Task/TotalUsers";
|
||||
import CompletedTasks from "@/components/Projects/Task/CompletedTasks";
|
||||
import TasksPerformance from "@/components/Projects/Task/TasksPerformance";
|
||||
import MyTasks from "@/components/Projects/Task/MyTasks";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
const Task = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Task</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Task</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={6} xl={4}>
|
||||
{/* TotalUsers */}
|
||||
<TotalUsers />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6} xl={4}>
|
||||
{/* CompletedTasks */}
|
||||
<CompletedTasks />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={4}>
|
||||
{/* TasksPerformance */}
|
||||
<TasksPerformance />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* MyTasks */}
|
||||
<MyTasks />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Task;
|
||||
@@ -0,0 +1,584 @@
|
||||
import React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
import Button from '@mui/material/Button';
|
||||
import { styled } from "@mui/material/styles";
|
||||
import LinearProgress, {
|
||||
linearProgressClasses,
|
||||
} from "@mui/material/LinearProgress";
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 5,
|
||||
borderRadius: 5,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor:
|
||||
theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 5,
|
||||
backgroundColor: theme.palette.mode === "light" ? "#757FEF" : "#308fe8",
|
||||
},
|
||||
}));
|
||||
|
||||
const TeamMembers = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Jason Haston",
|
||||
image: "/images/member1.png",
|
||||
designation: "Team Leader",
|
||||
teamName: "UI/UX Design Team",
|
||||
introText: "Contrary to popular belief, Lorem Ipsum is not simply",
|
||||
teamMemberLists: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member1.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member2.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
],
|
||||
viewDetailsLink: "#",
|
||||
projectName: "UI/UX Project",
|
||||
totalTask: "40/80",
|
||||
taskProgress: "50",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Willie Miller",
|
||||
image: "/images/member2.png",
|
||||
designation: "Team Leader",
|
||||
teamName: "Frontend Developer Team",
|
||||
introText: "Contrary to popular belief, Lorem Ipsum is not simply",
|
||||
teamMemberLists: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member2.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
],
|
||||
viewDetailsLink: "#",
|
||||
projectName: "Transfer Money",
|
||||
totalTask: "60/100",
|
||||
taskProgress: "60",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Jordan Stevenson",
|
||||
image: "/images/member3.png",
|
||||
designation: "Team Leader",
|
||||
teamName: "Web Design Team",
|
||||
introText: "Contrary to popular belief, Lorem Ipsum is not simply",
|
||||
teamMemberLists: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member7.png",
|
||||
},
|
||||
],
|
||||
viewDetailsLink: "#",
|
||||
projectName: "Payment App",
|
||||
totalTask: "70/100",
|
||||
taskProgress: "70",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Stevenson",
|
||||
image: "/images/member4.png",
|
||||
designation: "Team Leader",
|
||||
teamName: "ReactJS Team",
|
||||
introText: "Contrary to popular belief, Lorem Ipsum is not simply",
|
||||
teamMemberLists: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member7.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
],
|
||||
viewDetailsLink: "#",
|
||||
projectName: "React App",
|
||||
totalTask: "80/100",
|
||||
taskProgress: "80",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Marnie Flowers",
|
||||
image: "/images/member5.png",
|
||||
designation: "Team Leader",
|
||||
teamName: "Angular JS Team",
|
||||
introText: "Contrary to popular belief, Lorem Ipsum is not simply",
|
||||
teamMemberLists: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member7.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
],
|
||||
viewDetailsLink: "#",
|
||||
projectName: "Payment App",
|
||||
totalTask: "90/100",
|
||||
taskProgress: "90",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Steven Hari",
|
||||
image: "/images/member6.png",
|
||||
designation: "Team Leader",
|
||||
teamName: "Vue.js Team",
|
||||
introText: "Contrary to popular belief, Lorem Ipsum is not simply",
|
||||
teamMemberLists: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member7.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member10.png",
|
||||
},
|
||||
],
|
||||
viewDetailsLink: "#",
|
||||
projectName: "Banking app",
|
||||
totalTask: "100/100",
|
||||
taskProgress: "100",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Keith",
|
||||
image: "/images/member7.png",
|
||||
designation: "Team Leader",
|
||||
teamName: "Content Writing",
|
||||
introText: "Contrary to popular belief, Lorem Ipsum is not simply",
|
||||
teamMemberLists: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member7.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member10.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member11.png",
|
||||
},
|
||||
],
|
||||
viewDetailsLink: "#",
|
||||
projectName: "Blogging Template",
|
||||
totalTask: "40/100",
|
||||
taskProgress: "40",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Marion",
|
||||
image: "/images/member8.png",
|
||||
designation: "Team Leader",
|
||||
teamName: "E-commerce",
|
||||
introText: "Contrary to popular belief, Lorem Ipsum is not simply",
|
||||
teamMemberLists: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member1.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member2.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
],
|
||||
viewDetailsLink: "#",
|
||||
projectName: "E-commerce Template",
|
||||
totalTask: "55/100",
|
||||
taskProgress: "55",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Marshall",
|
||||
image: "/images/member9.png",
|
||||
designation: "Team Leader",
|
||||
teamName: "App Development",
|
||||
introText: "Contrary to popular belief, Lorem Ipsum is not simply",
|
||||
teamMemberLists: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
],
|
||||
viewDetailsLink: "#",
|
||||
projectName: "Admin Template",
|
||||
totalTask: "40/100",
|
||||
taskProgress: "40",
|
||||
},
|
||||
]
|
||||
|
||||
const Team = () => {
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Team</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Team</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
justifyContent="center"
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
{TeamMembers.map((member) => (
|
||||
<Grid item xs={12} md={6} lg={6} xl={4} key={member.id}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={member.image}
|
||||
alt="Member"
|
||||
width="55px"
|
||||
height="55px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{member.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
{member.designation}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
size="small"
|
||||
sx={{
|
||||
background: '#fafafa'
|
||||
}}
|
||||
aria-controls={open ? "account-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
>
|
||||
<MoreHorizIcon />
|
||||
</IconButton>
|
||||
</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' }}>Open Project</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Edit</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Delete</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Box mb={2}>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
mb: "5px"
|
||||
}}
|
||||
>
|
||||
{member.teamName}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
{member.introText}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
mb={2}
|
||||
>
|
||||
<Box>
|
||||
<AvatarGroup max={4}>
|
||||
{member.teamMemberLists.map((team) => (
|
||||
<Avatar key={team.id} src={team.image} alt="Remy Sharp" />
|
||||
))}
|
||||
</AvatarGroup>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Link href={member.viewDetailsLink} className="text-decoration-none">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: "capitalize",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
view details
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'end'
|
||||
}}
|
||||
mb={1}
|
||||
>
|
||||
<Box>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
mb: "5px"
|
||||
}}
|
||||
>
|
||||
{member.projectName}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
{member.totalTask}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
{member.taskProgress}% Completed
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<BorderLinearProgress variant="determinate" value={member.taskProgress} />
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
@@ -0,0 +1,910 @@
|
||||
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 Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
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 user 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 user Modal
|
||||
|
||||
function UsersList(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>
|
||||
);
|
||||
}
|
||||
|
||||
UsersList.propTypes = {
|
||||
count: PropTypes.number.isRequired,
|
||||
onPageChange: PropTypes.func.isRequired,
|
||||
page: PropTypes.number.isRequired,
|
||||
rowsPerPage: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
function createData(name, userName, image, email, rolls, status, badgeClass, projects) {
|
||||
return {
|
||||
name,
|
||||
userName,
|
||||
image,
|
||||
email,
|
||||
rolls,
|
||||
status,
|
||||
badgeClass,
|
||||
projects
|
||||
};
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData(
|
||||
"Evangelina Mcclain",
|
||||
"@jstevenson5c",
|
||||
"/images/user1.png",
|
||||
"jordansteve@gmail.com",
|
||||
"Agent",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"165"
|
||||
),
|
||||
createData(
|
||||
"Candice Munoz",
|
||||
"@candice3unoz",
|
||||
"/images/user2.png",
|
||||
"candicemunoz@gmail.com",
|
||||
"Administrator",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"120"
|
||||
),
|
||||
createData(
|
||||
"Mike Mcclain",
|
||||
"@mike4mcclain",
|
||||
"/images/user3.png",
|
||||
"mikemcclain@gmail.com",
|
||||
"Contributor",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"220"
|
||||
),
|
||||
createData(
|
||||
"Bernard Langley",
|
||||
"@bernardlangley",
|
||||
"/images/user4.png",
|
||||
"bernardlangley@gmail.com",
|
||||
"Agent",
|
||||
"Deactive",
|
||||
"dangerBadge",
|
||||
"122"
|
||||
),
|
||||
createData(
|
||||
"Kristie Hall",
|
||||
"@kristie7hall",
|
||||
"/images/user5.png",
|
||||
"kristiehall@gmail.com",
|
||||
"Contributor",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"360"
|
||||
),
|
||||
createData(
|
||||
"Bolton Obrien",
|
||||
"@bolton4obrien",
|
||||
"/images/user6.png",
|
||||
"boltonobrien@gmail.com",
|
||||
"Administrator",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"250"
|
||||
),
|
||||
createData(
|
||||
"Dee Alvarado",
|
||||
"@dee3alvarado",
|
||||
"/images/user7.png",
|
||||
"deealvarado@gmail.com",
|
||||
"Agent",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"140"
|
||||
),
|
||||
createData(
|
||||
"Cervantes Kramer",
|
||||
"@cervantes4kramer",
|
||||
"/images/user8.png",
|
||||
"cervantes4kramer@gmail.com",
|
||||
"Agent",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"345"
|
||||
),
|
||||
createData(
|
||||
"Dejesus Michael",
|
||||
"@dejesus1michael",
|
||||
"/images/user9.png",
|
||||
"dejesusmichael@gmail.com",
|
||||
"Agent",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"323"
|
||||
),
|
||||
createData(
|
||||
"Alissa Nelson",
|
||||
"@alissa1nelson",
|
||||
"/images/user10.png",
|
||||
"alissa1nelson@gmail.com",
|
||||
"Agent",
|
||||
"Deactive",
|
||||
"dangerBadge",
|
||||
"451"
|
||||
),
|
||||
createData(
|
||||
"Milton",
|
||||
"@milton",
|
||||
"/images/user11.png",
|
||||
"milton@gmail.com",
|
||||
"Agent",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"432"
|
||||
),
|
||||
createData(
|
||||
"Claude",
|
||||
"@claude",
|
||||
"/images/user12.png",
|
||||
"claude@gmail.com",
|
||||
"Agent",
|
||||
"Deactive",
|
||||
"dangerBadge",
|
||||
"543"
|
||||
),
|
||||
createData(
|
||||
"Joshua",
|
||||
"@joshua",
|
||||
"/images/user13.png",
|
||||
"joshua@gmail.com",
|
||||
"Agent",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"543"
|
||||
),
|
||||
createData(
|
||||
"Harvey",
|
||||
"@harvey",
|
||||
"/images/user14.png",
|
||||
"harvey@gmail.com",
|
||||
"Agent",
|
||||
"Deactive",
|
||||
"dangerBadge",
|
||||
"432"
|
||||
),
|
||||
createData(
|
||||
"Antonio",
|
||||
"@antonio",
|
||||
"/images/user15.png",
|
||||
"antonio@gmail.com",
|
||||
"Agent",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"765"
|
||||
),
|
||||
createData(
|
||||
"Julian",
|
||||
"@julian",
|
||||
"/images/user16.png",
|
||||
"julian@gmail.com",
|
||||
"Agent",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"678"
|
||||
),
|
||||
createData(
|
||||
"Harold",
|
||||
"@harold",
|
||||
"/images/user17.png",
|
||||
"harold@gmail.com",
|
||||
"Agent",
|
||||
"Deactive",
|
||||
"dangerBadge",
|
||||
"165"
|
||||
),
|
||||
createData(
|
||||
"Kingston",
|
||||
"@kingston",
|
||||
"/images/user18.png",
|
||||
"kingston@info.com",
|
||||
"Agent",
|
||||
"Active",
|
||||
"successBadge",
|
||||
"165"
|
||||
),
|
||||
].sort((a, b) => (a.name < b.name ? -1 : 1));
|
||||
|
||||
export default function User() {
|
||||
// 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 user 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 Add Task Modal
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Users</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Users</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
Users List
|
||||
</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 User
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
sx={{ minWidth: 900 }}
|
||||
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" }}
|
||||
>
|
||||
Rolls
|
||||
</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" }}
|
||||
>
|
||||
Projects
|
||||
</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={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
paddingTop: "13px",
|
||||
paddingBottom: "13px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Checkbox {...label} size="small" />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
className="ml-10px"
|
||||
>
|
||||
<img
|
||||
src={row.image}
|
||||
alt="User"
|
||||
width={40}
|
||||
height={40}
|
||||
className="borRadius100"
|
||||
/>
|
||||
<Box>
|
||||
<Typography
|
||||
as="h4"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13.5px",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
{row.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
color: "#A9A9C8",
|
||||
}}
|
||||
className='ml-10px'
|
||||
>
|
||||
{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",
|
||||
fontSize: "13px",
|
||||
paddingTop: "13px",
|
||||
paddingBottom: "13px",
|
||||
}}
|
||||
>
|
||||
{row.rolls}
|
||||
</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="center"
|
||||
style={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
paddingTop: "13px",
|
||||
paddingBottom: "13px",
|
||||
}}
|
||||
>
|
||||
{row.projects}
|
||||
</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={5}
|
||||
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={UsersList}
|
||||
style={{ borderBottom: "none" }}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
|
||||
{/* Create new user 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",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
Create New User
|
||||
</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",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<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",
|
||||
}}
|
||||
>
|
||||
Rolls
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
autoComplete="rolls"
|
||||
name="rolls"
|
||||
required
|
||||
fullWidth
|
||||
id="rolls"
|
||||
label="Rolls"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Projects
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
autoComplete="projects"
|
||||
name="projects"
|
||||
required
|
||||
fullWidth
|
||||
id="projects"
|
||||
label="Example 5"
|
||||
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",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
<AddIcon
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
className='mr-5px'
|
||||
/>{" "}
|
||||
Create New User
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</BootstrapDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import Profile from "@/components/Settings/Account/Profile";
|
||||
import NavBar from "@/components/Settings/NavBar";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
|
||||
export default function Account() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Settings
|
||||
</Typography>
|
||||
|
||||
{/* NavBar */}
|
||||
<NavBar />
|
||||
|
||||
{/* Profile */}
|
||||
<Profile />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import NavBar from "@/components/Settings/NavBar";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import PrivacyPolicyContent from "@/components/Settings/Account/PrivacyPolicyContent";
|
||||
|
||||
export default function PrivacyPolicy() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Privacy Policy
|
||||
</Typography>
|
||||
|
||||
{/* NavBar */}
|
||||
<NavBar />
|
||||
|
||||
{/* PrivacyPolicyContent */}
|
||||
<PrivacyPolicyContent />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import NavBar from "@/components/Settings/NavBar";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import ChangePassword from "@/components/Settings/Account/ChangePassword";
|
||||
|
||||
export default function Account() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Settings
|
||||
</Typography>
|
||||
|
||||
{/* NavBar */}
|
||||
<NavBar />
|
||||
|
||||
{/* ChangePassword */}
|
||||
<ChangePassword />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicAccordion from '@/components/UIElements/Accordion/BasicAccordion';
|
||||
import ControlledAccordion from '@/components/UIElements/Accordion/ControlledAccordion';
|
||||
import Customization from '@/components/UIElements/Accordion/Customization';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Accordion() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Accordion</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Accordion</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicAccordion */}
|
||||
<BasicAccordion />
|
||||
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ControlledAccordion */}
|
||||
<ControlledAccordion />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicAlerts from '@/components/UIElements/Alerts/BasicAlerts';
|
||||
import DescriptionAlerts from '@/components/UIElements/Alerts/DescriptionAlerts';
|
||||
import Actions from '@/components/UIElements/Alerts/Actions';
|
||||
import Transition from '@/components/UIElements/Alerts/Transition';
|
||||
import Icons from '@/components/UIElements/Alerts/Icons';
|
||||
import Variants from '@/components/UIElements/Alerts/Variants';
|
||||
import Filled from '@/components/UIElements/Alerts/Filled';
|
||||
import Color from '@/components/UIElements/Alerts/Color';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Alerts() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Alerts</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Alerts</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicAlerts */}
|
||||
<BasicAlerts />
|
||||
|
||||
{/* DescriptionAlerts */}
|
||||
<DescriptionAlerts />
|
||||
|
||||
{/* Variants */}
|
||||
<Variants />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Actions */}
|
||||
<Actions />
|
||||
|
||||
{/* Transition */}
|
||||
<Transition />
|
||||
|
||||
{/* Icons */}
|
||||
<Icons />
|
||||
|
||||
{/* Filled */}
|
||||
<Filled />
|
||||
|
||||
{/* Color */}
|
||||
<Color />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import ComboBox from '@/components/UIElements/Autocomplete/ComboBox';
|
||||
import CountrySelect from '@/components/UIElements/Autocomplete/CountrySelect';
|
||||
import CustomizedHook from '@/components/UIElements/Autocomplete/CustomizedHook';
|
||||
import LimitTags from '@/components/UIElements/Autocomplete/LimitTags';
|
||||
import CustomizeTextareaComponent from '@/components/UIElements/Autocomplete/CustomizeTextareaComponent';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Autocomplete() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Autocomplete</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Autocomplete</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ComboBox */}
|
||||
<ComboBox />
|
||||
|
||||
{/* CustomizedHook */}
|
||||
<CustomizedHook />
|
||||
|
||||
{/* CustomizeTextareaComponent */}
|
||||
<CustomizeTextareaComponent />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* CountrySelect */}
|
||||
<CountrySelect />
|
||||
|
||||
{/* LimitTags */}
|
||||
<LimitTags />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import SingleUserExample from '@/components/UIElements/Avatar/SingleUserExample';
|
||||
import GroupUserExample from '@/components/UIElements/Avatar/GroupUserExample';
|
||||
import ImageAvatars from '@/components/UIElements/Avatar/ImageAvatars';
|
||||
import LetterAvatars from '@/components/UIElements/Avatar/LetterAvatars';
|
||||
import SizesAvatars from '@/components/UIElements/Avatar/SizesAvatars';
|
||||
import IconAvatars from '@/components/UIElements/Avatar/IconAvatars';
|
||||
import Grouped from '@/components/UIElements/Avatar/Grouped';
|
||||
import TotalAvatars from '@/components/UIElements/Avatar/TotalAvatars';
|
||||
import WithBadge from '@/components/UIElements/Avatar/WithBadge';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Avatar() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Avatar</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Avatar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SingleUserExample */}
|
||||
<SingleUserExample />
|
||||
|
||||
{/* ImageAvatars */}
|
||||
<ImageAvatars />
|
||||
|
||||
{/* SizesAvatars */}
|
||||
<SizesAvatars />
|
||||
|
||||
{/* Grouped */}
|
||||
<Grouped />
|
||||
|
||||
{/* WithBadge */}
|
||||
<WithBadge />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* GroupUserExample */}
|
||||
<GroupUserExample />
|
||||
|
||||
{/* LetterAvatars */}
|
||||
<LetterAvatars />
|
||||
|
||||
{/* IconAvatars */}
|
||||
<IconAvatars />
|
||||
|
||||
{/* TotalAvatars */}
|
||||
<TotalAvatars />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicBadge from '@/components/UIElements/Badge/BasicBadge';
|
||||
import Dynamic from '@/components/UIElements/Badge/Dynamic';
|
||||
import MaximumValue from '@/components/UIElements/Badge/MaximumValue';
|
||||
import BadgeOverlap from '@/components/UIElements/Badge/BadgeOverlap';
|
||||
import Accessibility from '@/components/UIElements/Badge/Accessibility';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Badge() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Badge</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Badge</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={2}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 2, xl: 3 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicBadge */}
|
||||
<BasicBadge />
|
||||
|
||||
{/* MaximumValue */}
|
||||
<MaximumValue />
|
||||
|
||||
{/* BadgeOverlap */}
|
||||
<BadgeOverlap />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Dynamic */}
|
||||
<Dynamic />
|
||||
|
||||
{/* Accessibility */}
|
||||
<Accessibility />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import DefaultButtons from '@/components/UIElements/Buttons/DefaultButtons';
|
||||
import OutlineButtons from '@/components/UIElements/Buttons/OutlineButtons';
|
||||
import SoftButtons from '@/components/UIElements/Buttons/SoftButtons';
|
||||
import ButtonsWithIcon from '@/components/UIElements/Buttons/ButtonsWithIcon';
|
||||
import RoundedButtons from '@/components/UIElements/Buttons/RoundedButtons';
|
||||
import OutlineRoundedButtons from '@/components/UIElements/Buttons/OutlineRoundedButtons';
|
||||
import SizesButtons from '@/components/UIElements/Buttons/SizesButtons';
|
||||
import Loading from '@/components/UIElements/Buttons/Loading';
|
||||
import BlockButtons from '@/components/UIElements/Buttons/BlockButtons';
|
||||
import BasicFAB from '@/components/UIElements/Buttons/BasicFAB';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Buttons() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Buttons</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Buttons</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* DefaultButtons */}
|
||||
<DefaultButtons />
|
||||
|
||||
{/* SoftButtons */}
|
||||
<SoftButtons />
|
||||
|
||||
{/* RoundedButtons */}
|
||||
<RoundedButtons />
|
||||
|
||||
{/* SizesButtons */}
|
||||
<SizesButtons />
|
||||
|
||||
{/* BlockButtons */}
|
||||
<BlockButtons />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* OutlineButtons */}
|
||||
<OutlineButtons />
|
||||
|
||||
{/* ButtonsWithIcon */}
|
||||
<ButtonsWithIcon />
|
||||
|
||||
{/* OutlineRoundedButtons */}
|
||||
<OutlineRoundedButtons />
|
||||
|
||||
{/* BasicFAB */}
|
||||
<BasicFAB />
|
||||
|
||||
{/* Loading */}
|
||||
<Loading />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,975 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { Box } from "@mui/material";
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/components/UIElements/Cards/Cards.module.css'
|
||||
import BasicCard from '@/components/UIElements/Cards/BasicCard';
|
||||
import ComplexInteraction from '@/components/UIElements/Cards/ComplexInteraction';
|
||||
import Media from '@/components/UIElements/Cards/Media';
|
||||
import UIControls from '@/components/UIElements/Cards/UIControls';
|
||||
|
||||
export default function Cards() {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* BasicCard */}
|
||||
<BasicCard />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<img
|
||||
src="/images/card-img1.png"
|
||||
alt="card"
|
||||
style={{
|
||||
borderRadius: '10px',
|
||||
marginBottom: '12px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* ComplexInteraction */}
|
||||
<ComplexInteraction />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<div
|
||||
className={styles.cardWithBgImg}
|
||||
style={{
|
||||
backgroundImage: `url('/images/card-img2.png')`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mb: "15px",
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="success"
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="10px" mt="250px" color="white">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography color="white">
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
|
||||
{/* Media */}
|
||||
<Media />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<img
|
||||
src="/images/card-img3.png"
|
||||
alt="card"
|
||||
style={{
|
||||
borderRadius: '10px',
|
||||
marginBottom: '12px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<div
|
||||
className={styles.cardWithBgImg}
|
||||
style={{
|
||||
backgroundImage: `url('/images/card-img4.png')`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mb: "15px",
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="success"
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="10px" mt="70px" color="white">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography color="white">
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* UIControls */}
|
||||
<UIControls />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<div
|
||||
className={styles.cardWithBgImg}
|
||||
style={{
|
||||
backgroundImage: `url('/images/card-img5.png')`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mb: "15px",
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="success"
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="10px" mt="250px" color="white">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography color="white">
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Checkbox/Basic';
|
||||
import Label from '@/components/UIElements/Checkbox/Label';
|
||||
import Size from '@/components/UIElements/Checkbox/Size';
|
||||
import Color from '@/components/UIElements/Checkbox/Color';
|
||||
import Icon from '@/components/UIElements/Checkbox/Icon';
|
||||
import Controlled from '@/components/UIElements/Checkbox/Controlled';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Checkbox() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Checkbox</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Checkbox</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Size */}
|
||||
<Size />
|
||||
|
||||
{/* Icon */}
|
||||
<Icon />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Label */}
|
||||
<Label />
|
||||
|
||||
{/* Color */}
|
||||
<Color />
|
||||
|
||||
{/* Controlled */}
|
||||
<Controlled />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Chip/Basic';
|
||||
import ChipActions from '@/components/UIElements/Chip/ChipActions';
|
||||
import Deletable from '@/components/UIElements/Chip/Deletable';
|
||||
import ClickableAndDeletable from '@/components/UIElements/Chip/ClickableAndDeletable';
|
||||
import ClickableLink from '@/components/UIElements/Chip/ClickableLink';
|
||||
import CustomDeleteIcon from '@/components/UIElements/Chip/CustomDeleteIcon';
|
||||
import ChipAdornments from '@/components/UIElements/Chip/ChipAdornments';
|
||||
import IconChip from '@/components/UIElements/Chip/IconChip';
|
||||
import ColorChip from '@/components/UIElements/Chip/ColorChip';
|
||||
import SizesChip from '@/components/UIElements/Chip/SizesChip';
|
||||
import ChipArray from '@/components/UIElements/Chip/ChipArray';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Chip() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Chip</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Chip</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Deletable */}
|
||||
<Deletable />
|
||||
|
||||
{/* ClickableLink */}
|
||||
<ClickableLink />
|
||||
|
||||
{/* ChipAdornments */}
|
||||
<ChipAdornments />
|
||||
|
||||
{/* ColorChip */}
|
||||
<ColorChip />
|
||||
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ChipActions */}
|
||||
<ChipActions />
|
||||
|
||||
{/* ClickableAndDeletable */}
|
||||
<ClickableAndDeletable />
|
||||
|
||||
{/* CustomDeleteIcon */}
|
||||
<CustomDeleteIcon />
|
||||
|
||||
{/* IconChip */}
|
||||
<IconChip />
|
||||
|
||||
{/* SizesChip */}
|
||||
<SizesChip />
|
||||
|
||||
{/* ChipArray */}
|
||||
<ChipArray />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import StandardImageList from '@/components/UIElements/ImageList/StandardImageList';
|
||||
import QuiltedImageList from '@/components/UIElements/ImageList/QuiltedImageList';
|
||||
import WovenImageList from '@/components/UIElements/ImageList/WovenImageList';
|
||||
import MasonryImageList from '@/components/UIElements/ImageList/MasonryImageList';
|
||||
import ImageListWithTitleBars from '@/components/UIElements/ImageList/ImageListWithTitleBars';
|
||||
import TitleBarBelowImageStandard from '@/components/UIElements/ImageList/TitleBarBelowImageStandard';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function ImageList() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Image List</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Image List</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* StandardImageList */}
|
||||
<StandardImageList />
|
||||
|
||||
{/* WovenImageList */}
|
||||
<WovenImageList />
|
||||
|
||||
{/* ImageListWithTitleBars */}
|
||||
<ImageListWithTitleBars />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* QuiltedImageList */}
|
||||
<QuiltedImageList />
|
||||
|
||||
{/* MasonryImageList */}
|
||||
<MasonryImageList />
|
||||
|
||||
{/* TitleBarBelowImageStandard */}
|
||||
<TitleBarBelowImageStandard />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicList from '@/components/UIElements/List/BasicList';
|
||||
import NestedList from '@/components/UIElements/List/NestedList';
|
||||
import FolderList from '@/components/UIElements/List/FolderList';
|
||||
import ListControls from '@/components/UIElements/List/ListControls';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function List() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>List</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>List</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicList */}
|
||||
<BasicList />
|
||||
|
||||
{/* FolderList */}
|
||||
<FolderList />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* NestedList */}
|
||||
<NestedList />
|
||||
|
||||
{/* ListControls */}
|
||||
<ListControls />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicModal from '@/components/UIElements/Modal/BasicModal';
|
||||
import NestedModal from '@/components/UIElements/Modal/NestedModal';
|
||||
import Transitions from '@/components/UIElements/Modal/Transitions';
|
||||
import SimpleDialog from '@/components/UIElements/Modal/SimpleDialog';
|
||||
import TransitionsDialog from '@/components/UIElements/Modal/TransitionsDialog';
|
||||
import CustomizationDialog from '@/components/UIElements/Modal/CustomizationDialog';
|
||||
import FullScreenDialogs from '@/components/UIElements/Modal/FullScreenDialogs';
|
||||
import ScrollingLongContent from '@/components/UIElements/Modal/ScrollingLongContent';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Modal() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Modal</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Modal</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicModal */}
|
||||
<BasicModal />
|
||||
|
||||
{/* Transitions */}
|
||||
<Transitions />
|
||||
|
||||
{/* TransitionsDialog */}
|
||||
<TransitionsDialog />
|
||||
|
||||
{/* FullScreenDialogs */}
|
||||
<FullScreenDialogs />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* NestedModal */}
|
||||
<NestedModal />
|
||||
|
||||
{/* SimpleDialog */}
|
||||
<SimpleDialog />
|
||||
|
||||
{/* CustomizationDialog */}
|
||||
<CustomizationDialog />
|
||||
|
||||
{/* ScrollingLongContent */}
|
||||
<ScrollingLongContent />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicPagination from '@/components/UIElements/Pagination/BasicPagination';
|
||||
import OutlinedPagination from '@/components/UIElements/Pagination/OutlinedPagination';
|
||||
import RoundedPagination from '@/components/UIElements/Pagination/RoundedPagination';
|
||||
import PaginationSize from '@/components/UIElements/Pagination/PaginationSize';
|
||||
import CustomIcons from '@/components/UIElements/Pagination/CustomIcons';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Pagination() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Pagination</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Pagination</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicPagination */}
|
||||
<BasicPagination />
|
||||
|
||||
{/* RoundedPagination */}
|
||||
<RoundedPagination />
|
||||
|
||||
{/* CustomIcons */}
|
||||
<CustomIcons />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* OutlinedPagination */}
|
||||
<OutlinedPagination />
|
||||
|
||||
{/* PaginationSize */}
|
||||
<PaginationSize />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Circular from '@/components/UIElements/Progress/Circular';
|
||||
import CircularDeterminate from '@/components/UIElements/Progress/CircularDeterminate';
|
||||
import InteractiveIntegration from '@/components/UIElements/Progress/InteractiveIntegration';
|
||||
import CircularWithLabel from '@/components/UIElements/Progress/CircularWithLabel';
|
||||
import LinearIndeterminate from '@/components/UIElements/Progress/LinearIndeterminate';
|
||||
import Customization from '@/components/UIElements/Progress/Customization';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Progress() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Progress</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Progress</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Circular */}
|
||||
<Circular />
|
||||
|
||||
{/* InteractiveIntegration */}
|
||||
<InteractiveIntegration />
|
||||
|
||||
{/* LinearIndeterminate */}
|
||||
<LinearIndeterminate />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* CircularDeterminate */}
|
||||
<CircularDeterminate />
|
||||
|
||||
{/* CircularWithLabel */}
|
||||
<CircularWithLabel />
|
||||
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Group from '@/components/UIElements/Radio/Group';
|
||||
import Direction from '@/components/UIElements/Radio/Direction';
|
||||
import Controlled from '@/components/UIElements/Radio/Controlled';
|
||||
import Size from '@/components/UIElements/Radio/Size';
|
||||
import Color from '@/components/UIElements/Radio/Color';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Radio() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Radio</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Radio</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Group */}
|
||||
<Group />
|
||||
|
||||
{/* Controlled */}
|
||||
<Controlled />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Direction */}
|
||||
<Direction />
|
||||
|
||||
{/* Size */}
|
||||
<Size />
|
||||
|
||||
{/* Color */}
|
||||
<Color />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Rating/Basic';
|
||||
import RatingPrecision from '@/components/UIElements/Rating/RatingPrecision';
|
||||
import HoverFeedback from '@/components/UIElements/Rating/HoverFeedback';
|
||||
import Sizes from '@/components/UIElements/Rating/Sizes';
|
||||
import Customization from '@/components/UIElements/Rating/Customization';
|
||||
import RadioGroup from '@/components/UIElements/Rating/RadioGroup';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Rating() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Rating</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Rating</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* RatingPrecision */}
|
||||
<RatingPrecision />
|
||||
|
||||
{/* HoverFeedback */}
|
||||
<HoverFeedback />
|
||||
|
||||
{/* Sizes */}
|
||||
<Sizes />
|
||||
|
||||
{/* RadioGroup */}
|
||||
<RadioGroup />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Select/Basic';
|
||||
import AutoWidth from '@/components/UIElements/Select/AutoWidth';
|
||||
import Customization from '@/components/UIElements/Select/Customization';
|
||||
import MultipleSelectDefault from '@/components/UIElements/Select/MultipleSelectDefault';
|
||||
import MultipleSelectCheckmarks from '@/components/UIElements/Select/MultipleSelectCheckmarks';
|
||||
import MultipleSelectChip from '@/components/UIElements/Select/MultipleSelectChip';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Select() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Select</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Select</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
|
||||
{/* MultipleSelectDefault */}
|
||||
<MultipleSelectDefault />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* AutoWidth */}
|
||||
<AutoWidth />
|
||||
|
||||
{/* MultipleSelectCheckmarks */}
|
||||
<MultipleSelectCheckmarks />
|
||||
|
||||
{/* MultipleSelectChip */}
|
||||
<MultipleSelectChip />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Variants from '@/components/UIElements/Skeleton/Variants';
|
||||
import Animations from '@/components/UIElements/Skeleton/Animations';
|
||||
import PulsateExample from '@/components/UIElements/Skeleton/PulsateExample';
|
||||
import WaveExample from '@/components/UIElements/Skeleton/WaveExample';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Skeleton() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Skeleton</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Skeleton</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Variants */}
|
||||
<Variants />
|
||||
|
||||
{/* Animations */}
|
||||
<Animations />
|
||||
|
||||
{/* WaveExample */}
|
||||
<WaveExample />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* PulsateExample */}
|
||||
<PulsateExample />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Continuous from '@/components/UIElements/Slider/Continuous';
|
||||
import Sizes from '@/components/UIElements/Slider/Sizes';
|
||||
import Discrete from '@/components/UIElements/Slider/Discrete';
|
||||
import SmallSteps from '@/components/UIElements/Slider/SmallSteps';
|
||||
import CustomMarks from '@/components/UIElements/Slider/CustomMarks';
|
||||
import RestrictedValues from '@/components/UIElements/Slider/RestrictedValues';
|
||||
import LabelAlwaysVisible from '@/components/UIElements/Slider/LabelAlwaysVisible';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Slider() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Slider</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Slider</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={6} lg={6} xl={6}>
|
||||
{/* Continuous */}
|
||||
<Continuous />
|
||||
|
||||
{/* Discrete */}
|
||||
<Discrete />
|
||||
|
||||
{/* CustomMarks */}
|
||||
<CustomMarks />
|
||||
|
||||
{/* LabelAlwaysVisible */}
|
||||
<LabelAlwaysVisible />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={6}>
|
||||
{/* Sizes */}
|
||||
<Sizes />
|
||||
|
||||
{/* SmallSteps */}
|
||||
<SmallSteps />
|
||||
|
||||
{/* RestrictedValues */}
|
||||
<RestrictedValues />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import SimpleSnackbars from '@/components/UIElements/Snackbar/SimpleSnackbars';
|
||||
import Customization from '@/components/UIElements/Snackbar/Customization';
|
||||
import PositionedSnackbars from '@/components/UIElements/Snackbar/PositionedSnackbars';
|
||||
import ComplementaryProjects from '@/components/UIElements/Snackbar/ComplementaryProjects';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Snackbar() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Snackbar</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Snackbar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* SimpleSnackbars */}
|
||||
<SimpleSnackbars />
|
||||
|
||||
{/* PositionedSnackbars */}
|
||||
<PositionedSnackbars />
|
||||
|
||||
{/* ComplementaryProjects */}
|
||||
<ComplementaryProjects />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* Customization */}
|
||||
<Customization />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import HorizontalStepper from '@/components/UIElements/Stepper/HorizontalStepper';
|
||||
import NonLinear from '@/components/UIElements/Stepper/NonLinear';
|
||||
import AlternativeLabel from '@/components/UIElements/Stepper/AlternativeLabel';
|
||||
import ErrorStep from '@/components/UIElements/Stepper/ErrorStep';
|
||||
import CustomizedHorizontalStepper from '@/components/UIElements/Stepper/CustomizedHorizontalStepper';
|
||||
import VerticalStepper from '@/components/UIElements/Stepper/VerticalStepper';
|
||||
import MobileStepperText from '@/components/UIElements/Stepper/MobileStepperText';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Stepper() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Stepper</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Stepper</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* HorizontalStepper */}
|
||||
<HorizontalStepper />
|
||||
|
||||
{/* AlternativeLabel */}
|
||||
<AlternativeLabel />
|
||||
|
||||
{/* CustomizedHorizontalStepper */}
|
||||
<CustomizedHorizontalStepper />
|
||||
|
||||
{/* MobileStepper */}
|
||||
<MobileStepperText />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* NonLinear */}
|
||||
<NonLinear />
|
||||
|
||||
{/* ErrorStep */}
|
||||
<ErrorStep />
|
||||
|
||||
{/* VerticalStepper */}
|
||||
<VerticalStepper />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Default from '@/components/UIElements/SwiperSlider/Default';
|
||||
import NavigationSlider from '@/components/UIElements/SwiperSlider/NavigationSlider';
|
||||
import PaginationSlider from '@/components/UIElements/SwiperSlider/PaginationSlider';
|
||||
import PaginationDynamic from '@/components/UIElements/SwiperSlider/PaginationDynamic';
|
||||
import PaginationProgress from '@/components/UIElements/SwiperSlider/PaginationProgress';
|
||||
import AutoplaySlider from '@/components/UIElements/SwiperSlider/AutoplaySlider';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function SwiperSlider() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Swiper Slider</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Swiper Slider</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* Default */}
|
||||
<Default />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* PaginationDynamic */}
|
||||
<PaginationDynamic />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* NavigationSlider */}
|
||||
<NavigationSlider />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* PaginationProgress */}
|
||||
<PaginationProgress />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* PaginationSlider */}
|
||||
<PaginationSlider />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={4}>
|
||||
{/* AutoplaySlider */}
|
||||
<AutoplaySlider />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Basic from '@/components/UIElements/Switch/Basic';
|
||||
import Label from '@/components/UIElements/Switch/Label';
|
||||
import Size from '@/components/UIElements/Switch/Size';
|
||||
import Color from '@/components/UIElements/Switch/Color';
|
||||
import Controlled from '@/components/UIElements/Switch/Controlled';
|
||||
import SwitchesWithFormGroup from '@/components/UIElements/Switch/SwitchesWithFormGroup';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Switch() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Switch</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Switch</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={6} xl={6}>
|
||||
{/* Basic */}
|
||||
<Basic />
|
||||
|
||||
{/* Size */}
|
||||
<Size />
|
||||
|
||||
{/* SwitchesWithFormGroup */}
|
||||
<SwitchesWithFormGroup />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6} xl={6}>
|
||||
{/* Label */}
|
||||
<Label />
|
||||
|
||||
{/* Color */}
|
||||
<Color />
|
||||
|
||||
{/* Controlled */}
|
||||
<Controlled />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicTable from '@/components/UIElements/Table/BasicTable';
|
||||
import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders";
|
||||
import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList";
|
||||
import BrowserUsedAndTrafficReports from "@/components/Dashboard/Analytics/BrowserUsedAndTrafficReports";
|
||||
import MyTasks from '@/components/Dashboard/ProjectManagement/MyTasks';
|
||||
import AllProjects from '@/components/Dashboard/ProjectManagement/AllProjects';
|
||||
import DataTable from '@/components/UIElements/Table/DataTable';
|
||||
import DenseTable from '@/components/UIElements/Table/DenseTable';
|
||||
import SortingSelectingTable from '@/components/UIElements/Table/SortingSelectingTable';
|
||||
import CustomizationTable from '@/components/UIElements/Table/CustomizationTable';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Table() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Table</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Table</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* BasicTable */}
|
||||
<BasicTable />
|
||||
|
||||
{/* RecentOrders */}
|
||||
<RecentOrders />
|
||||
|
||||
{/* TeamMembersList */}
|
||||
<TeamMembersList />
|
||||
|
||||
{/* BrowserUsedAndTrafficReports */}
|
||||
<BrowserUsedAndTrafficReports />
|
||||
|
||||
{/* MyTasks */}
|
||||
<MyTasks />
|
||||
|
||||
{/* AllProjects */}
|
||||
<AllProjects />
|
||||
|
||||
{/* DataTable */}
|
||||
<DataTable />
|
||||
|
||||
{/* DenseTable */}
|
||||
<DenseTable />
|
||||
|
||||
{/* SortingSelectingTable */}
|
||||
<SortingSelectingTable />
|
||||
|
||||
{/* CustomizationTable */}
|
||||
<CustomizationTable />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import BasicTabs from '@/components/UIElements/Tabs/BasicTabs';
|
||||
import ExperimentalAPI from '@/components/UIElements/Tabs/ExperimentalAPI';
|
||||
import VerticalTabs from '@/components/UIElements/Tabs/VerticalTabs';
|
||||
import IconTabs from '@/components/UIElements/Tabs/IconTabs';
|
||||
import IconPosition from '@/components/UIElements/Tabs/IconPosition';
|
||||
import Link from 'next/link';
|
||||
import styles from '@/styles/PageTitle.module.css';
|
||||
|
||||
export default function Tabs() {
|
||||
return (
|
||||
<>
|
||||
{/* Page title */}
|
||||
<div className={styles.pageTitle}>
|
||||
<h1>Tabs</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/">Dashboard</Link>
|
||||
</li>
|
||||
<li>Tabs</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* BasicTabs */}
|
||||
<BasicTabs />
|
||||
|
||||
{/* FixedTabs */}
|
||||
<VerticalTabs />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={12} xl={6}>
|
||||
{/* ExperimentalAPI */}
|
||||
<ExperimentalAPI />
|
||||
|
||||
{/* IconTabs */}
|
||||
<IconTabs />
|
||||
|
||||
{/* IconPosition */}
|
||||
<IconPosition />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user