mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
updates to prepare for demo
This commit is contained in:
Tim Chamberlain
@ -1,273 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Divider from "@mui/material/Divider";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Images
|
||||
import logoSlack from "assets/images/small-logos/logo-slack.svg";
|
||||
import logoSpotify from "assets/images/small-logos/logo-spotify.svg";
|
||||
import logoAtlassian from "assets/images/small-logos/logo-atlassian.svg";
|
||||
import logoAsana from "assets/images/small-logos/logo-asana.svg";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
function Accounts(): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const [slack2FA, setSlack2FA] = useState<boolean>(true);
|
||||
const [spotify2FA, setSpotify2FA] = useState<boolean>(true);
|
||||
const [atlassian2FA, setAtlassian2FA] = useState<boolean>(true);
|
||||
const [asana2FA, setAsana2FA] = useState<boolean>(false);
|
||||
|
||||
const handleSetSlack2FA = () => setSlack2FA(!slack2FA);
|
||||
const handleSetSpotify2FA = () => setSpotify2FA(!spotify2FA);
|
||||
const handleSetAtlassian2FA = () => setAtlassian2FA(!atlassian2FA);
|
||||
const handleSetAsana2FA = () => setAsana2FA(!asana2FA);
|
||||
|
||||
return (
|
||||
<Card id="accounts">
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5">Accounts</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="button" color="text">
|
||||
Here you can setup and manage your integration settings.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pt={2} pb={3} px={3}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDAvatar src={logoSlack} alt="Slack logo" variant="rounded" />
|
||||
<MDBox ml={2}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Slack
|
||||
</MDTypography>
|
||||
<MDBox display="flex" alignItems="flex-end">
|
||||
<MDTypography variant="button" color="text">
|
||||
Show less
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text" sx={{ lineHeight: 0 }}>
|
||||
<Icon fontSize="small">expand_less</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
width={{ xs: "100%", sm: "auto" }}
|
||||
mt={{ xs: 1, sm: 0 }}
|
||||
>
|
||||
<MDBox lineHeight={0} mx={2}>
|
||||
<MDTypography variant="button" color="text">
|
||||
{slack2FA ? "Enabled" : "Disabled"}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mr={1}>
|
||||
<Switch checked={slack2FA} onChange={handleSetSlack2FA} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox ml={2} pl={6} pt={2} lineHeight={1}>
|
||||
<MDTypography variant="button" color="text">
|
||||
You haven't added your Slack yet or you aren't authorized. Please add our
|
||||
Slack Bot to your account by clicking on here. When you've added the bot, send your
|
||||
verification code that you have received.
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
bgColor={darkMode ? "grey-900" : "grey-100"}
|
||||
borderRadius="lg"
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
my={3}
|
||||
py={1}
|
||||
pl={{ xs: 1, sm: 2 }}
|
||||
pr={1}
|
||||
>
|
||||
<MDTypography variant="button" fontWeight="medium" color="text">
|
||||
Verification Code
|
||||
</MDTypography>
|
||||
<MDBox width={{ xs: "100%", sm: "25%", md: "15%" }} mt={{ xs: 1, sm: 0 }}>
|
||||
<Tooltip title="Copy" placement="top">
|
||||
<MDInput size="small" value="1172913" />
|
||||
</Tooltip>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
bgColor={darkMode ? "grey-900" : "grey-100"}
|
||||
borderRadius="lg"
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
my={3}
|
||||
py={1}
|
||||
pl={{ xs: 1, sm: 2 }}
|
||||
pr={1}
|
||||
>
|
||||
<MDTypography variant="button" fontWeight="medium" color="text">
|
||||
Connected account
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox mr={2} mb={{ xs: 1, sm: 0 }} lineHeight={0}>
|
||||
<MDTypography variant="button" fontWeight="medium">
|
||||
hello@creative-tim.com
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDButton variant="gradient" color="dark" size="small">
|
||||
delete
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDAvatar src={logoSpotify} alt="Slack logo" variant="rounded" />
|
||||
<MDBox ml={2} lineHeight={0}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Spotify
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text">
|
||||
Music
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
alignItems="center"
|
||||
width={{ xs: "100%", sm: "auto" }}
|
||||
mt={{ xs: 1, sm: 0 }}
|
||||
>
|
||||
<MDBox lineHeight={0} mx={2}>
|
||||
<MDTypography variant="button" color="text">
|
||||
{spotify2FA ? "Enabled" : "Disabled"}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mr={1}>
|
||||
<Switch checked={spotify2FA} onChange={handleSetSpotify2FA} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDAvatar src={logoAtlassian} alt="Slack logo" variant="rounded" />
|
||||
<MDBox ml={2} lineHeight={0}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Atlassian
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text">
|
||||
Payment vendor
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
alignItems="center"
|
||||
width={{ xs: "100%", sm: "auto" }}
|
||||
mt={{ xs: 1, sm: 0 }}
|
||||
>
|
||||
<MDBox lineHeight={0} mx={2}>
|
||||
<MDTypography variant="button" color="text">
|
||||
{atlassian2FA ? "Enabled" : "Disabled"}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mr={1}>
|
||||
<Switch checked={atlassian2FA} onChange={handleSetAtlassian2FA} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDAvatar src={logoAsana} alt="Slack logo" variant="rounded" />
|
||||
<MDBox ml={2} lineHeight={0}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Asana
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text">
|
||||
Organize your team
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
width={{ xs: "100%", sm: "auto" }}
|
||||
mt={{ xs: 1, sm: 0 }}
|
||||
>
|
||||
<MDBox lineHeight={0} mx={2}>
|
||||
<MDTypography variant="button" color="text">
|
||||
{asana2FA ? "Enabled" : "Disabled"}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mr={1}>
|
||||
<Switch checked={asana2FA} onChange={handleSetAsana2FA} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Accounts;
|
||||
@ -1,113 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
import MDBadge from "components/MDBadge";
|
||||
|
||||
function Authentication(): JSX.Element {
|
||||
return (
|
||||
<Card id="2fa" sx={{ overflow: "visible" }}>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
|
||||
<MDTypography variant="h5">Two-factor authentication</MDTypography>
|
||||
<MDBadge variant="contained" color="success" badgeContent="enabled" container />
|
||||
</MDBox>
|
||||
<MDBox p={3}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDTypography variant="body2" color="text">
|
||||
Security keys
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
||||
No Security keys
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDButton variant="outlined" color="dark" size="small">
|
||||
add
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDTypography variant="body2" color="text">
|
||||
SMS number
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
||||
+3012374423
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDButton variant="outlined" color="dark" size="small">
|
||||
edit
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDTypography variant="body2" color="text">
|
||||
Authenticator app
|
||||
</MDTypography>
|
||||
<MDBox
|
||||
display="flex"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
||||
Not Configured
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDButton variant="outlined" color="dark" size="small">
|
||||
set up
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Authentication;
|
||||
@ -1,98 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
import MDInput from "components/MDInput";
|
||||
|
||||
function ChangePassword(): JSX.Element {
|
||||
const passwordRequirements = [
|
||||
"One special characters",
|
||||
"Min 6 characters",
|
||||
"One number (2 are recommended)",
|
||||
"Change it often",
|
||||
];
|
||||
|
||||
const renderPasswordRequirements = passwordRequirements.map((item, key) => {
|
||||
const itemKey = `element-${key}`;
|
||||
|
||||
return (
|
||||
<MDBox key={itemKey} component="li" color="text" fontSize="1.25rem" lineHeight={1}>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular" verticalAlign="middle">
|
||||
{item}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<Card id="change-password">
|
||||
<MDBox p={3}>
|
||||
<MDTypography variant="h5">Change Password</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox component="form" pb={3} px={3}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<MDInput
|
||||
fullWidth
|
||||
label="Current Password"
|
||||
inputProps={{ type: "password", autoComplete: "" }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<MDInput
|
||||
fullWidth
|
||||
label="New Password"
|
||||
inputProps={{ type: "password", autoComplete: "" }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<MDInput
|
||||
fullWidth
|
||||
label="Confirm New Password"
|
||||
inputProps={{ type: "password", autoComplete: "" }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<MDBox mt={6} mb={1}>
|
||||
<MDTypography variant="h5">Password requirements</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="body2" color="text">
|
||||
Please follow this guide for a strong password
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="flex-end" flexWrap="wrap">
|
||||
<MDBox component="ul" m={0} pl={3.25} mb={{ xs: 8, sm: 0 }}>
|
||||
{renderPasswordRequirements}
|
||||
</MDBox>
|
||||
<MDBox ml="auto">
|
||||
<MDButton variant="gradient" color="dark" size="small">
|
||||
update password
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChangePassword;
|
||||
@ -1,193 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
const selectData = {
|
||||
gender: ["Male", "Female"],
|
||||
birthDate: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
],
|
||||
days: [
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15",
|
||||
"16",
|
||||
"17",
|
||||
"18",
|
||||
"19",
|
||||
"20",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
"24",
|
||||
"25",
|
||||
"26",
|
||||
"27",
|
||||
"28",
|
||||
"29",
|
||||
"30",
|
||||
],
|
||||
years: [
|
||||
"1900",
|
||||
"1901",
|
||||
"1902",
|
||||
"1903",
|
||||
"1904",
|
||||
"1905",
|
||||
"1906",
|
||||
"1907",
|
||||
"1908",
|
||||
"1909",
|
||||
"1910",
|
||||
"1911",
|
||||
"1912",
|
||||
"1913",
|
||||
"1914",
|
||||
"1915",
|
||||
"1915",
|
||||
"1915",
|
||||
"1916",
|
||||
"1917",
|
||||
"1918",
|
||||
"1919",
|
||||
"1920",
|
||||
"1921",
|
||||
"1922",
|
||||
"1923",
|
||||
"1924",
|
||||
"1925",
|
||||
"1926",
|
||||
"1927",
|
||||
"1928",
|
||||
"1929",
|
||||
"1930",
|
||||
"1931",
|
||||
"1932",
|
||||
"1933",
|
||||
"1934",
|
||||
"1935",
|
||||
"1936",
|
||||
"1937",
|
||||
"1938",
|
||||
"1939",
|
||||
"1940",
|
||||
"1941",
|
||||
"1942",
|
||||
"1943",
|
||||
"1944",
|
||||
"1945",
|
||||
"1946",
|
||||
"1947",
|
||||
"1948",
|
||||
"1949",
|
||||
"1950",
|
||||
"1951",
|
||||
"1952",
|
||||
"1953",
|
||||
"1954",
|
||||
"1955",
|
||||
"1956",
|
||||
"1957",
|
||||
"1958",
|
||||
"1959",
|
||||
"1960",
|
||||
"1961",
|
||||
"1962",
|
||||
"1963",
|
||||
"1964",
|
||||
"1965",
|
||||
"1966",
|
||||
"1967",
|
||||
"1968",
|
||||
"1969",
|
||||
"1970",
|
||||
"1971",
|
||||
"1972",
|
||||
"1973",
|
||||
"1974",
|
||||
"1975",
|
||||
"1976",
|
||||
"1977",
|
||||
"1978",
|
||||
"1979",
|
||||
"1980",
|
||||
"1981",
|
||||
"1982",
|
||||
"1983",
|
||||
"1984",
|
||||
"1985",
|
||||
"1986",
|
||||
"1987",
|
||||
"1988",
|
||||
"1989",
|
||||
"1990",
|
||||
"1991",
|
||||
"1992",
|
||||
"1993",
|
||||
"1994",
|
||||
"1995",
|
||||
"1996",
|
||||
"1997",
|
||||
"1998",
|
||||
"1999",
|
||||
"2000",
|
||||
"2001",
|
||||
"2002",
|
||||
"2003",
|
||||
"2004",
|
||||
"2005",
|
||||
"2006",
|
||||
"2007",
|
||||
"2008",
|
||||
"2009",
|
||||
"2010",
|
||||
"2011",
|
||||
"2012",
|
||||
"2013",
|
||||
"2014",
|
||||
"2015",
|
||||
"2016",
|
||||
"2017",
|
||||
"2018",
|
||||
"2019",
|
||||
"2020",
|
||||
"2021",
|
||||
],
|
||||
skills: ["react", "vue", "angular", "svelte", "javascript"],
|
||||
};
|
||||
|
||||
export default selectData;
|
||||
@ -1,106 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable spaced-comment */
|
||||
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
// @material-ui core components
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Settings page components
|
||||
import FormField from "layouts/pages/account/components/FormField";
|
||||
|
||||
// qqq imports
|
||||
import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import { QController } from "qqq-frontend-core/lib/controllers/QController";
|
||||
import { useState } from "react";
|
||||
import MDButton from "../../../../../components/MDButton";
|
||||
// import React, { useState } from "react";
|
||||
|
||||
const qController = new QController("http://localhost:8000");
|
||||
console.log(qController);
|
||||
|
||||
function CreateForm(): JSX.Element {
|
||||
const { tableName } = useParams();
|
||||
const [formFields, setFormFields] = useState([] as JSX.Element[]);
|
||||
const defaultValues: { [key: string]: string } = {};
|
||||
const [formValues, setFormValues] = useState(defaultValues);
|
||||
|
||||
const handleInputChange = (e: { target: { name: any; value: any } }) => {
|
||||
const { name, value } = e.target;
|
||||
formValues[name] = value;
|
||||
};
|
||||
|
||||
const handleSubmit = (event: { preventDefault: () => void }) => {
|
||||
event.preventDefault();
|
||||
qController.create(tableName, formValues);
|
||||
};
|
||||
|
||||
const tableMetaData = new QTableMetaData(tableName);
|
||||
if (formFields.length === 0) {
|
||||
(async () => {
|
||||
await qController.loadTableMetaData(tableName).then((tableMetaData) => {
|
||||
const formFields = [] as JSX.Element[];
|
||||
const fields = new Map(Object.entries(tableMetaData.fields));
|
||||
fields.forEach((fieldMetaData) => {
|
||||
//formValues[fieldMetaData.name] = "";
|
||||
formFields.push(
|
||||
<Grid item xs={12} sm={4}>
|
||||
<FormField
|
||||
key={fieldMetaData.name}
|
||||
name={fieldMetaData.name}
|
||||
id={fieldMetaData.name}
|
||||
label={fieldMetaData.label}
|
||||
value={formValues[fieldMetaData.name]}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
});
|
||||
|
||||
setFormFields(formFields);
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
return (
|
||||
<Card id="basic-info" sx={{ overflow: "visible" }}>
|
||||
<MDBox p={3}>
|
||||
<MDTypography variant="h5">Create {tableMetaData.label}</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox component="form" pb={3} px={3} onSubmit={handleSubmit}>
|
||||
<Grid container spacing={3}>
|
||||
{formFields}
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<MDBox ml="auto">
|
||||
<MDButton type="submit" variant="gradient" color="dark" size="small">
|
||||
create {tableMetaData.label}
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateForm;
|
||||
@ -1,57 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
function DeleteAccount(): JSX.Element {
|
||||
return (
|
||||
<Card id="delete-account">
|
||||
<MDBox
|
||||
pr={3}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
>
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5">Delete Account</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="button" color="text">
|
||||
Once you delete your account, there is no going back. Please be certain.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox display="flex" flexDirection={{ xs: "column", sm: "row" }}>
|
||||
<MDButton variant="outlined" color="secondary">
|
||||
deactivate
|
||||
</MDButton>
|
||||
<MDBox ml={{ xs: 0, sm: 1 }} mt={{ xs: 1, sm: 0 }}>
|
||||
<MDButton variant="gradient" color="error" sx={{ height: "100%" }}>
|
||||
delete account
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeleteAccount;
|
||||
@ -1,74 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
|
||||
// Images
|
||||
import burceMars from "assets/images/bruce-mars.jpg";
|
||||
|
||||
function Header(): JSX.Element {
|
||||
const [visible, setVisible] = useState<boolean>(true);
|
||||
|
||||
const handleSetVisible = () => setVisible(!visible);
|
||||
|
||||
return (
|
||||
<Card id="profile">
|
||||
<MDBox p={2}>
|
||||
<Grid container spacing={3} alignItems="center">
|
||||
<Grid item>
|
||||
<MDAvatar src={burceMars} alt="profile-image" size="xl" shadow="sm" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<MDBox height="100%" mt={0.5} lineHeight={1}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Alex Thompson
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text" fontWeight="medium">
|
||||
CEO / Co-Founder
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={3} sx={{ ml: "auto" }}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent={{ md: "flex-end" }}
|
||||
alignItems="center"
|
||||
lineHeight={1}
|
||||
>
|
||||
<MDTypography variant="caption" fontWeight="regular">
|
||||
Switch to {visible ? "invisible" : "visible"}
|
||||
</MDTypography>
|
||||
<MDBox ml={1}>
|
||||
<Switch checked={visible} onChange={handleSetVisible} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,149 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Table from "@mui/material/Table";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Setting pages components
|
||||
import TableCell from "layouts/pages/account/settings/components/TableCell";
|
||||
|
||||
function Notifications(): JSX.Element {
|
||||
return (
|
||||
<Card id="notifications">
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5">Notifications</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="button" color="text">
|
||||
Choose how you receive notifications. These notification settings apply to the things
|
||||
you’re watching.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pb={3} px={3}>
|
||||
<MDBox minWidth="auto" sx={{ overflow: "scroll" }}>
|
||||
<Table sx={{ minWidth: "36rem" }}>
|
||||
<MDBox component="thead">
|
||||
<TableRow>
|
||||
<TableCell width="100%" padding={[1.5, 3, 1.5, 0.5]}>
|
||||
Activity
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
|
||||
Email
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
|
||||
Push
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
|
||||
SMS
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</MDBox>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell padding={[1, 1, 1, 0.5]}>
|
||||
<MDBox lineHeight={1.4}>
|
||||
<MDTypography display="block" variant="button" fontWeight="regular">
|
||||
Mentions
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
||||
Notify when another user mentions you in a comment
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell padding={[1, 1, 1, 0.5]}>
|
||||
<MDBox lineHeight={1.4}>
|
||||
<MDTypography display="block" variant="button" fontWeight="regular">
|
||||
Comments
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
||||
Notify when another user comments your item.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell padding={[1, 1, 1, 0.5]}>
|
||||
<MDBox lineHeight={1.4}>
|
||||
<MDTypography display="block" variant="button" fontWeight="regular">
|
||||
Follows
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
||||
Notify when another user follows you.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell padding={[1, 1, 1, 0.5]} noBorder>
|
||||
<MDTypography display="block" variant="button" color="text">
|
||||
Log in from a new device
|
||||
</MDTypography>
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
<TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
|
||||
<Switch defaultChecked />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Notifications;
|
||||
@ -1,172 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Divider from "@mui/material/Divider";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDBadge from "components/MDBadge";
|
||||
|
||||
function Sessions(): JSX.Element {
|
||||
const actionButtonStyles = {
|
||||
"& .material-icons-round": {
|
||||
transform: `translateX(0)`,
|
||||
transition: "all 200ms cubic-bezier(0.34,1.61,0.7,1.3)",
|
||||
},
|
||||
|
||||
"&:hover .material-icons-round, &:focus .material-icons-round": {
|
||||
transform: `translateX(4px)`,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Card id="sessions">
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5">Sessions</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
||||
This is a list of devices that have logged into your account. Remove those that you do not
|
||||
recognize.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pb={3} px={3} sx={{ overflow: "auto" }}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
width={{ xs: "max-content", sm: "100%" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
|
||||
<Icon>desktop_windows</Icon>
|
||||
</MDBox>
|
||||
<MDBox height="100%" ml={2} lineHeight={1} mr={2}>
|
||||
<MDTypography display="block" variant="button" fontWeight="regular" color="text">
|
||||
Bucharest 68.133.163.201
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text">
|
||||
Your current session
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBadge
|
||||
variant="contained"
|
||||
size="xs"
|
||||
badgeContent="active"
|
||||
color="success"
|
||||
container
|
||||
/>
|
||||
<MDBox mx={2} lineHeight={1}>
|
||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
||||
EU
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href="#"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="regular"
|
||||
sx={actionButtonStyles}
|
||||
>
|
||||
See more
|
||||
<Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
width={{ xs: "max-content", sm: "100%" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center" mr={2}>
|
||||
<MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
|
||||
<Icon>desktop_windows</Icon>
|
||||
</MDBox>
|
||||
<MDBox ml={2}>
|
||||
<MDTypography display="block" variant="body2" fontWeight="regular" color="text">
|
||||
Chrome on macOS
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox mx={2} lineHeight={1}>
|
||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
||||
US
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href="#"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="regular"
|
||||
sx={actionButtonStyles}
|
||||
>
|
||||
See more
|
||||
<Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
width={{ xs: "max-content", sm: "100%" }}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center" mr={2}>
|
||||
<MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
|
||||
<Icon>phone_iphone</Icon>
|
||||
</MDBox>
|
||||
<MDBox ml={2}>
|
||||
<MDTypography display="block" variant="body2" fontWeight="regular" color="text">
|
||||
Safari on iPhone
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox mx={2} lineHeight={1}>
|
||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
||||
US
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href="#"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="regular"
|
||||
sx={actionButtonStyles}
|
||||
>
|
||||
See more
|
||||
<Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sessions;
|
||||
@ -1,105 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
function Sidenav(): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const sidenavItems = [
|
||||
{ icon: "person", label: "profile", href: "profile" },
|
||||
{ icon: "receipt_long", label: "basic info", href: "basic-info" },
|
||||
{ icon: "lock", label: "change password", href: "change-password" },
|
||||
{ icon: "security", label: "2FA", href: "2fa" },
|
||||
{ icon: "badge", label: "accounts", href: "accounts" },
|
||||
{ icon: "campaign", label: "notifications", href: "notifications" },
|
||||
{ icon: "settings_applications", label: "sessions", href: "sessions" },
|
||||
{ icon: "delete", label: "delete account", href: "delete-account" },
|
||||
];
|
||||
|
||||
const renderSidenavItems = sidenavItems.map(({ icon, label, href }, key) => {
|
||||
const itemKey = `item-${key}`;
|
||||
|
||||
return (
|
||||
<MDBox key={itemKey} component="li" pt={key === 0 ? 0 : 1}>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href={`#${href}`}
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
textTransform="capitalize"
|
||||
sx={({
|
||||
borders: { borderRadius },
|
||||
functions: { pxToRem },
|
||||
palette: { light },
|
||||
transitions,
|
||||
}: Theme) => ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderRadius: borderRadius.md,
|
||||
padding: `${pxToRem(10)} ${pxToRem(16)}`,
|
||||
transition: transitions.create("background-color", {
|
||||
easing: transitions.easing.easeInOut,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: light.main,
|
||||
},
|
||||
})}
|
||||
>
|
||||
<MDBox mr={1.5} lineHeight={1} color={darkMode ? "white" : "dark"}>
|
||||
<Icon fontSize="small">{icon}</Icon>
|
||||
</MDBox>
|
||||
{label}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: ({ borders: { borderRadius } }) => borderRadius.lg,
|
||||
position: "sticky",
|
||||
top: "1%",
|
||||
}}
|
||||
>
|
||||
<MDBox
|
||||
component="ul"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
p={2}
|
||||
m={0}
|
||||
sx={{ listStyle: "none" }}
|
||||
>
|
||||
{renderSidenavItems}
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidenav;
|
||||
@ -1,61 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for TableCell
|
||||
interface Props {
|
||||
width?: string;
|
||||
children: ReactNode;
|
||||
align?: string | any;
|
||||
padding?: number[];
|
||||
noBorder?: boolean;
|
||||
}
|
||||
|
||||
function TableCell({ width, align, padding, noBorder, children }: Props): JSX.Element {
|
||||
return (
|
||||
<MDBox
|
||||
component="th"
|
||||
width={width}
|
||||
pt={padding[0]}
|
||||
pr={padding[1]}
|
||||
pb={padding[2]}
|
||||
pl={padding[3]}
|
||||
textAlign={align}
|
||||
sx={{
|
||||
border: ({ borders: { borderWidth }, palette: { light } }) =>
|
||||
noBorder ? 0 : `${borderWidth[1]} solid ${light.main}`,
|
||||
}}
|
||||
>
|
||||
<MDTypography component="div" variant="body2" color="text">
|
||||
{children}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for TableCell
|
||||
TableCell.defaultProps = {
|
||||
width: "auto",
|
||||
align: "left",
|
||||
padding: [],
|
||||
noBorder: false,
|
||||
};
|
||||
|
||||
export default TableCell;
|
||||
@ -20,7 +20,7 @@ import Grid from "@mui/material/Grid";
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Settings page components
|
||||
import CreateForm from "qqq/pages/entity-create/components/CreateForm";
|
||||
import CreateForm from "qqq/pages/components/EntityForm";
|
||||
import BaseLayout from "qqq/pages/components/BaseLayout";
|
||||
|
||||
function EntityCreate(): JSX.Element {
|
||||
|
||||
Reference in New Issue
Block a user