update,

tsc1877/task1/aws/workspace/admin/src/views/account-settings/TabAccount.js

@@ -0,0 +1,164 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import Alert from '@mui/material/Alert';
+import Select from '@mui/material/Select';
+import { styled } from '@mui/material/styles';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import InputLabel from '@mui/material/InputLabel';
+import AlertTitle from '@mui/material/AlertTitle';
+import IconButton from '@mui/material/IconButton';
+import CardContent from '@mui/material/CardContent';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+
+// ** Icons Imports
+import Close from 'mdi-material-ui/Close';
+
+const ImgStyled = styled('img')(({ theme }) => ({
+  width: 120,
+  height: 120,
+  marginRight: theme.spacing(6.25),
+  borderRadius: theme.shape.borderRadius,
+}));
+
+const ButtonStyled = styled(Button)(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    width: '100%',
+    textAlign: 'center',
+  },
+}));
+
+const ResetButtonStyled = styled(Button)(({ theme }) => ({
+  marginLeft: theme.spacing(4.5),
+  [theme.breakpoints.down('sm')]: {
+    width: '100%',
+    marginLeft: 0,
+    textAlign: 'center',
+    marginTop: theme.spacing(4),
+  },
+}));
+
+const TabAccount = () => {
+  // ** State
+  const [openAlert, setOpenAlert] = useState(true);
+  const [imgSrc, setImgSrc] = useState('/images/avatars/1.png');
+
+  const onChange = file => {
+    const reader = new FileReader();
+    const { files } = file.target;
+    if (files && files.length !== 0) {
+      reader.onload = () => setImgSrc(reader.result);
+      reader.readAsDataURL(files[0]);
+    }
+  };
+
+  return (
+    <CardContent>
+      <form>
+        <Grid container spacing={7}>
+          <Grid item xs={12} sx={{ marginTop: 4.8, marginBottom: 3 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <ImgStyled src={imgSrc} alt="Profile Pic" />
+              <Box>
+                <ButtonStyled component="label" variant="contained" htmlFor="account-settings-upload-image">
+                  Upload New Photo
+                  <input
+                    hidden
+                    type="file"
+                    onChange={onChange}
+                    accept="image/png, image/jpeg"
+                    id="account-settings-upload-image"
+                  />
+                </ButtonStyled>
+                <ResetButtonStyled color="error" variant="outlined" onClick={() => setImgSrc('/images/avatars/1.png')}>
+                  Reset
+                </ResetButtonStyled>
+                <Typography variant="body2" sx={{ marginTop: 5 }}>
+                  Allowed PNG or JPEG. Max size of 800K.
+                </Typography>
+              </Box>
+            </Box>
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <TextField fullWidth label="Username" placeholder="johnDoe" defaultValue="johnDoe" />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField fullWidth label="Name" placeholder="John Doe" defaultValue="John Doe" />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              fullWidth
+              type="email"
+              label="Email"
+              placeholder="johnDoe@example.com"
+              defaultValue="johnDoe@example.com"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <FormControl fullWidth>
+              <InputLabel>Role</InputLabel>
+              <Select label="Role" defaultValue="admin">
+                <MenuItem value="admin">Admin</MenuItem>
+                <MenuItem value="author">Author</MenuItem>
+                <MenuItem value="editor">Editor</MenuItem>
+                <MenuItem value="maintainer">Maintainer</MenuItem>
+                <MenuItem value="subscriber">Subscriber</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <FormControl fullWidth>
+              <InputLabel>Status</InputLabel>
+              <Select label="Status" defaultValue="active">
+                <MenuItem value="active">Active</MenuItem>
+                <MenuItem value="inactive">Inactive</MenuItem>
+                <MenuItem value="pending">Pending</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField fullWidth label="Company" placeholder="ABC Pvt. Ltd." defaultValue="ABC Pvt. Ltd." />
+          </Grid>
+
+          {openAlert ? (
+            <Grid item xs={12} sx={{ mb: 3 }}>
+              <Alert
+                severity="warning"
+                sx={{ '& a': { fontWeight: 400 } }}
+                action={
+                  <IconButton size="small" color="inherit" aria-label="close" onClick={() => setOpenAlert(false)}>
+                    <Close fontSize="inherit" />
+                  </IconButton>
+                }
+              >
+                <AlertTitle>Your email is not confirmed. Please check your inbox.</AlertTitle>
+                <Link href="/" onClick={e => e.preventDefault()}>
+                  Resend Confirmation
+                </Link>
+              </Alert>
+            </Grid>
+          ) : null}
+
+          <Grid item xs={12}>
+            <Button variant="contained" sx={{ marginRight: 3.5 }}>
+              Save Changes
+            </Button>
+            <Button type="reset" variant="outlined" color="secondary">
+              Reset
+            </Button>
+          </Grid>
+        </Grid>
+      </form>
+    </CardContent>
+  );
+};
+
+export default TabAccount;

tsc1877/task1/aws/workspace/admin/src/views/account-settings/TabInfo.js

@@ -0,0 +1,126 @@
+// ** React Imports
+import { forwardRef, useState } from 'react';
+
+// ** MUI Imports
+import Grid from '@mui/material/Grid';
+import Radio from '@mui/material/Radio';
+import Select from '@mui/material/Select';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import FormLabel from '@mui/material/FormLabel';
+import InputLabel from '@mui/material/InputLabel';
+import RadioGroup from '@mui/material/RadioGroup';
+import CardContent from '@mui/material/CardContent';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+// ** Third Party Imports
+import DatePicker from 'react-datepicker';
+
+// ** Styled Components
+import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker';
+
+const CustomInput = forwardRef((props, ref) => {
+  return <TextField inputRef={ref} label="Birth Date" fullWidth {...props} />;
+});
+
+const TabInfo = () => {
+  // ** State
+  const [date, setDate] = useState(null);
+
+  return (
+    <CardContent>
+      <form>
+        <Grid container spacing={7}>
+          <Grid item xs={12} sx={{ marginTop: 4.8 }}>
+            <TextField
+              fullWidth
+              multiline
+              label="Bio"
+              minRows={2}
+              placeholder="Bio"
+              defaultValue="The name’s John Deo. I am a tireless seeker of knowledge, occasional purveyor of wisdom and also, coincidentally, a graphic designer. Algolia helps businesses across industries quickly create relevant 😎, scalable 😀, and lightning 😍 fast search and discovery experiences."
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <DatePickerWrapper>
+              <DatePicker
+                selected={date}
+                showYearDropdown
+                showMonthDropdown
+                id="account-settings-date"
+                placeholderText="MM-DD-YYYY"
+                customInput={<CustomInput />}
+                onChange={date => setDate(date)}
+              />
+            </DatePickerWrapper>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField fullWidth type="number" label="Phone" placeholder="(123) 456-7890" />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              fullWidth
+              label="Website"
+              placeholder="https://example.com/"
+              defaultValue="https://themeselection.com/"
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <FormControl fullWidth>
+              <InputLabel>Country</InputLabel>
+              <Select label="Country" defaultValue="USA">
+                <MenuItem value="USA">USA</MenuItem>
+                <MenuItem value="UK">UK</MenuItem>
+                <MenuItem value="Australia">Australia</MenuItem>
+                <MenuItem value="Germany">Germany</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <FormControl fullWidth>
+              <InputLabel id="form-layouts-separator-multiple-select-label">Languages</InputLabel>
+              <Select
+                multiple
+                defaultValue={['English']}
+                id="account-settings-multiple-select"
+                labelId="account-settings-multiple-select-label"
+                input={<OutlinedInput label="Languages" id="select-multiple-language" />}
+              >
+                <MenuItem value="English">English</MenuItem>
+                <MenuItem value="French">French</MenuItem>
+                <MenuItem value="Spanish">Spanish</MenuItem>
+                <MenuItem value="Portuguese">Portuguese</MenuItem>
+                <MenuItem value="Italian">Italian</MenuItem>
+                <MenuItem value="German">German</MenuItem>
+                <MenuItem value="Arabic">Arabic</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <FormControl>
+              <FormLabel sx={{ fontSize: '0.875rem' }}>Gender</FormLabel>
+              <RadioGroup row defaultValue="male" aria-label="gender" name="account-settings-info-radio">
+                <FormControlLabel value="male" label="Male" control={<Radio />} />
+                <FormControlLabel value="female" label="Female" control={<Radio />} />
+                <FormControlLabel value="other" label="Other" control={<Radio />} />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12}>
+            <Button variant="contained" sx={{ marginRight: 3.5 }}>
+              Save Changes
+            </Button>
+            <Button type="reset" variant="outlined" color="secondary" onClick={() => setDate(null)}>
+              Reset
+            </Button>
+          </Grid>
+        </Grid>
+      </form>
+    </CardContent>
+  );
+};
+
+export default TabInfo;

tsc1877/task1/aws/workspace/admin/src/views/account-settings/TabSecurity.js

@@ -0,0 +1,220 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import InputLabel from '@mui/material/InputLabel';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputAdornment from '@mui/material/InputAdornment';
+
+// ** Icons Imports
+import EyeOutline from 'mdi-material-ui/EyeOutline';
+import KeyOutline from 'mdi-material-ui/KeyOutline';
+import EyeOffOutline from 'mdi-material-ui/EyeOffOutline';
+import LockOpenOutline from 'mdi-material-ui/LockOpenOutline';
+
+const TabSecurity = () => {
+  // ** States
+  const [values, setValues] = useState({
+    newPassword: '',
+    currentPassword: '',
+    showNewPassword: false,
+    confirmNewPassword: '',
+    showCurrentPassword: false,
+    showConfirmNewPassword: false,
+  });
+
+  // Handle Current Password
+  const handleCurrentPasswordChange = prop => event => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleClickShowCurrentPassword = () => {
+    setValues({ ...values, showCurrentPassword: !values.showCurrentPassword });
+  };
+
+  const handleMouseDownCurrentPassword = event => {
+    event.preventDefault();
+  };
+
+  // Handle New Password
+  const handleNewPasswordChange = prop => event => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleClickShowNewPassword = () => {
+    setValues({ ...values, showNewPassword: !values.showNewPassword });
+  };
+
+  const handleMouseDownNewPassword = event => {
+    event.preventDefault();
+  };
+
+  // Handle Confirm New Password
+  const handleConfirmNewPasswordChange = prop => event => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleClickShowConfirmNewPassword = () => {
+    setValues({ ...values, showConfirmNewPassword: !values.showConfirmNewPassword });
+  };
+
+  const handleMouseDownConfirmNewPassword = event => {
+    event.preventDefault();
+  };
+
+  return (
+    <form>
+      <CardContent sx={{ paddingBottom: 0 }}>
+        <Grid container spacing={5}>
+          <Grid item xs={12} sm={6}>
+            <Grid container spacing={5}>
+              <Grid item xs={12} sx={{ marginTop: 4.75 }}>
+                <FormControl fullWidth>
+                  <InputLabel htmlFor="account-settings-current-password">Current Password</InputLabel>
+                  <OutlinedInput
+                    label="Current Password"
+                    value={values.currentPassword}
+                    id="account-settings-current-password"
+                    type={values.showCurrentPassword ? 'text' : 'password'}
+                    onChange={handleCurrentPasswordChange('currentPassword')}
+                    endAdornment={
+                      <InputAdornment position="end">
+                        <IconButton
+                          edge="end"
+                          aria-label="toggle password visibility"
+                          onClick={handleClickShowCurrentPassword}
+                          onMouseDown={handleMouseDownCurrentPassword}
+                        >
+                          {values.showCurrentPassword ? <EyeOutline /> : <EyeOffOutline />}
+                        </IconButton>
+                      </InputAdornment>
+                    }
+                  />
+                </FormControl>
+              </Grid>
+
+              <Grid item xs={12} sx={{ marginTop: 6 }}>
+                <FormControl fullWidth>
+                  <InputLabel htmlFor="account-settings-new-password">New Password</InputLabel>
+                  <OutlinedInput
+                    label="New Password"
+                    value={values.newPassword}
+                    id="account-settings-new-password"
+                    onChange={handleNewPasswordChange('newPassword')}
+                    type={values.showNewPassword ? 'text' : 'password'}
+                    endAdornment={
+                      <InputAdornment position="end">
+                        <IconButton
+                          edge="end"
+                          onClick={handleClickShowNewPassword}
+                          aria-label="toggle password visibility"
+                          onMouseDown={handleMouseDownNewPassword}
+                        >
+                          {values.showNewPassword ? <EyeOutline /> : <EyeOffOutline />}
+                        </IconButton>
+                      </InputAdornment>
+                    }
+                  />
+                </FormControl>
+              </Grid>
+
+              <Grid item xs={12}>
+                <FormControl fullWidth>
+                  <InputLabel htmlFor="account-settings-confirm-new-password">Confirm New Password</InputLabel>
+                  <OutlinedInput
+                    label="Confirm New Password"
+                    value={values.confirmNewPassword}
+                    id="account-settings-confirm-new-password"
+                    type={values.showConfirmNewPassword ? 'text' : 'password'}
+                    onChange={handleConfirmNewPasswordChange('confirmNewPassword')}
+                    endAdornment={
+                      <InputAdornment position="end">
+                        <IconButton
+                          edge="end"
+                          aria-label="toggle password visibility"
+                          onClick={handleClickShowConfirmNewPassword}
+                          onMouseDown={handleMouseDownConfirmNewPassword}
+                        >
+                          {values.showConfirmNewPassword ? <EyeOutline /> : <EyeOffOutline />}
+                        </IconButton>
+                      </InputAdornment>
+                    }
+                  />
+                </FormControl>
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Grid
+            item
+            sm={6}
+            xs={12}
+            sx={{ display: 'flex', marginTop: [7.5, 2.5], alignItems: 'center', justifyContent: 'center' }}
+          >
+            <img width={183} alt="avatar" height={256} src="/images/pages/pose-m-1.png" />
+          </Grid>
+        </Grid>
+      </CardContent>
+
+      <Divider sx={{ margin: 0 }} />
+
+      <CardContent>
+        <Box sx={{ mt: 1.75, display: 'flex', alignItems: 'center' }}>
+          <KeyOutline sx={{ marginRight: 3 }} />
+          <Typography variant="h6">Two-factor authentication</Typography>
+        </Box>
+
+        <Box sx={{ mt: 5.75, display: 'flex', justifyContent: 'center' }}>
+          <Box
+            sx={{
+              maxWidth: 368,
+              display: 'flex',
+              textAlign: 'center',
+              alignItems: 'center',
+              flexDirection: 'column',
+            }}
+          >
+            <Avatar
+              variant="rounded"
+              sx={{ width: 48, height: 48, color: 'common.white', backgroundColor: 'primary.main' }}
+            >
+              <LockOpenOutline sx={{ fontSize: '1.75rem' }} />
+            </Avatar>
+            <Typography sx={{ fontWeight: 600, marginTop: 3.5, marginBottom: 3.5 }}>
+              Two factor authentication is not enabled yet.
+            </Typography>
+            <Typography variant="body2">
+              Two-factor authentication adds an additional layer of security to your account by requiring more than just
+              a password to log in. Learn more.
+            </Typography>
+          </Box>
+        </Box>
+
+        <Box sx={{ mt: 11 }}>
+          <Button variant="contained" sx={{ marginRight: 3.5 }}>
+            Save Changes
+          </Button>
+          <Button
+            type="reset"
+            variant="outlined"
+            color="secondary"
+            onClick={() => setValues({ ...values, currentPassword: '', newPassword: '', confirmNewPassword: '' })}
+          >
+            Reset
+          </Button>
+        </Box>
+      </CardContent>
+    </form>
+  );
+};
+
+export default TabSecurity;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardAppleWatch.js

@@ -0,0 +1,28 @@
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+const CardAppleWatch = () => {
+  return (
+    <Card>
+      <CardMedia sx={{ height: '9.375rem' }} image="/images/cards/watch-on-hand.jpg" />
+      <CardContent sx={{ padding: theme => `${theme.spacing(3, 5.25, 4)} !important` }}>
+        <Typography variant="h6" sx={{ marginBottom: 2 }}>
+          Apple Watch
+        </Typography>
+        <Typography sx={{ marginBottom: 2 }}>$249.40</Typography>
+        <Typography variant="body2">
+          3.1GHz 6-core 10th-generation Intel Core i5 processor, Turbo Boost up to 4.5GHz
+        </Typography>
+      </CardContent>
+      <Button variant="contained" sx={{ py: 2.5, width: '100%', borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
+        Add To Cart
+      </Button>
+    </Card>
+  );
+};
+
+export default CardAppleWatch;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardFacebook.js

@@ -0,0 +1,55 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+// ** Icons Imports
+import Heart from 'mdi-material-ui/Heart';
+import Facebook from 'mdi-material-ui/Facebook';
+import ShareVariant from 'mdi-material-ui/ShareVariant';
+
+const CardFacebook = () => {
+  return (
+    <Card sx={{ border: 0, boxShadow: 0, color: 'common.white', backgroundColor: 'primary.main' }}>
+      <CardContent sx={{ padding: theme => `${theme.spacing(3.25, 5, 4.5)} !important` }}>
+        <Typography
+          variant="h6"
+          sx={{ display: 'flex', marginBottom: 2.75, alignItems: 'center', color: 'common.white' }}
+        >
+          <Facebook sx={{ marginRight: 2.5 }} />
+          Facebook Card
+        </Typography>
+        <Typography variant="body2" sx={{ marginBottom: 3, color: 'common.white' }}>
+          You’ve read about the importance of being courageous, rebellious and imaginative. These are all vital
+          ingredients in an effective.
+        </Typography>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
+            <Avatar alt="Eugene Clarke" src="/images/avatars/1.png" sx={{ width: 34, height: 34, marginRight: 2.75 }} />
+            <Typography variant="body2" sx={{ color: 'common.white' }}>
+              Eugene Clarke
+            </Typography>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mr: 3.5 }}>
+              <Heart sx={{ marginRight: 1.25 }} />
+              <Typography variant="body2" sx={{ color: 'common.white' }}>
+                3.2k
+              </Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <ShareVariant sx={{ marginRight: 1.25 }} />
+              <Typography variant="body2" sx={{ color: 'common.white' }}>
+                49
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CardFacebook;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardHorizontalRatings.js

@@ -0,0 +1,80 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Rating from '@mui/material/Rating';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Grid from '@mui/material/Grid';
+
+// Styled Grid component
+const StyledGrid1 = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  [theme.breakpoints.down('md')]: {
+    paddingTop: '0 !important',
+  },
+  '& .MuiCardContent-root': {
+    padding: theme.spacing(3, 4.75),
+    [theme.breakpoints.down('md')]: {
+      paddingTop: 0,
+    },
+  },
+}));
+
+// Styled Grid component
+const StyledGrid2 = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  [theme.breakpoints.up('md')]: {
+    paddingLeft: '0 !important',
+  },
+  [theme.breakpoints.down('md')]: {
+    order: -1,
+  },
+}));
+
+// Styled component for the image
+const Img = styled('img')(({ theme }) => ({
+  height: '11rem',
+  borderRadius: theme.shape.borderRadius,
+}));
+
+const CardHorizontalRatings = () => {
+  return (
+    <Card>
+      <Grid container spacing={6}>
+        <StyledGrid1 item xs={12} md={6} lg={7}>
+          <CardContent>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              Stumptown Roasters
+            </Typography>
+            <Box sx={{ mb: 4.75, display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
+              <Rating readOnly value={5} name="read-only" sx={{ marginRight: 2 }} />
+              <Typography variant="body2">5 Star | 98 reviews</Typography>
+            </Box>
+            <Typography variant="body2" sx={{ marginBottom: 4 }}>
+              Before there was a United States of America, there were coffee houses, because how are you supposed to
+              build.
+            </Typography>
+          </CardContent>
+          <CardActions className="card-action-dense" sx={{ width: '100%' }}>
+            <Button>Location</Button>
+            <Button>Reviews</Button>
+          </CardActions>
+        </StyledGrid1>
+        <StyledGrid2 item xs={12} md={6} lg={5}>
+          <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Img alt="Stumptown Roasters" src="/images/cards/analog-clock.jpg" />
+          </CardContent>
+        </StyledGrid2>
+      </Grid>
+    </Card>
+  );
+};
+
+export default CardHorizontalRatings;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardImgTop.js

@@ -0,0 +1,24 @@
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+const CardImgTop = () => {
+  return (
+    <Card>
+      <CardMedia sx={{ height: '14.5625rem' }} image="/images/cards/glass-house.png" />
+      <CardContent>
+        <Typography variant="h6" sx={{ marginBottom: 2 }}>
+          Influencing The Influencer
+        </Typography>
+        <Typography variant="body2">
+          Cancun is back, better than ever! Over a hundred Mexico resorts have reopened and the state tourism minister
+          predicts Cancun will draw as many visitors in 2006 as it did two years ago.
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CardImgTop;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardInfluencer.js

@@ -0,0 +1,31 @@
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+
+const CardInfluencer = () => {
+  return (
+    <Card>
+      <CardHeader title="Influencing The Influencer" />
+      <CardContent>
+        <Typography variant="body2" sx={{ marginBottom: 3.25 }}>
+          Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in
+          front of their desktops, while delivery people scan bar codes with handhelds and workers in the field stay in
+          touch.
+        </Typography>
+        <Typography variant="body2">
+          If you’re in the market for new desktops, notebooks, or PDAs, there are a myriad of choices. Here’s a rundown
+          of some of the best systems available.
+        </Typography>
+      </CardContent>
+      <CardActions className="card-action-dense">
+        <Button>Read More</Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default CardInfluencer;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardLinkedIn.js

@@ -0,0 +1,55 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+// ** Icons Imports
+import Heart from 'mdi-material-ui/Heart';
+import Linkedin from 'mdi-material-ui/Linkedin';
+import ShareVariant from 'mdi-material-ui/ShareVariant';
+
+const CardLinkedIn = () => {
+  return (
+    <Card sx={{ border: 0, boxShadow: 0, color: 'common.white', backgroundColor: 'success.main' }}>
+      <CardContent sx={{ padding: theme => `${theme.spacing(3.25, 5, 4.5)} !important` }}>
+        <Typography
+          variant="h6"
+          sx={{ display: 'flex', marginBottom: 2.75, alignItems: 'center', color: 'common.white' }}
+        >
+          <Linkedin sx={{ marginRight: 2.5 }} />
+          LinkedIn Card
+        </Typography>
+        <Typography variant="body2" sx={{ marginBottom: 3, color: 'common.white' }}>
+          With the Internet spreading like wildfire and reaching every part of our daily life, more and more traffic is
+          directed.
+        </Typography>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
+            <Avatar alt="Anne Burke" src="/images/avatars/8.png" sx={{ width: 34, height: 34, marginRight: 2.75 }} />
+            <Typography variant="body2" sx={{ color: 'common.white' }}>
+              Anne Burke
+            </Typography>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mr: 3.5 }}>
+              <Heart sx={{ marginRight: 1.25 }} />
+              <Typography variant="body2" sx={{ color: 'common.white' }}>
+                1.1k
+              </Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <ShareVariant sx={{ marginRight: 1.25 }} />
+              <Typography variant="body2" sx={{ color: 'common.white' }}>
+                67
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CardLinkedIn;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardMembership.js

@@ -0,0 +1,104 @@
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import CardContent from '@mui/material/CardContent';
+
+// ** Icons Imports
+import TrendingUp from 'mdi-material-ui/TrendingUp';
+import StarOutline from 'mdi-material-ui/StarOutline';
+import AccountOutline from 'mdi-material-ui/AccountOutline';
+import LockOpenOutline from 'mdi-material-ui/LockOpenOutline';
+
+// Styled Box component
+const StyledBox = styled(Box)(({ theme }) => ({
+  [theme.breakpoints.up('sm')]: {
+    borderRight: `1px solid ${theme.palette.divider}`,
+  },
+}));
+
+const CardMembership = () => {
+  return (
+    <Card>
+      <Grid container spacing={6}>
+        <Grid item xs={12} sm={7}>
+          <CardContent sx={{ padding: theme => `${theme.spacing(3.25, 5.75, 6.25)} !important` }}>
+            <Typography variant="h6" sx={{ marginBottom: 3.5 }}>
+              Lifetime Membership
+            </Typography>
+            <Typography variant="body2">
+              Here, I focus on a range of items and features that we use in life without giving them a second thought
+              such as Coca Cola, body muscles and holding ones own breath. Though, most of these notes are not
+              fundamentally necessary, they are such that you can use them for a good laugh, at a drinks party or for
+              picking up women or men.
+            </Typography>
+            <Divider sx={{ marginTop: 6.5, marginBottom: 6.75 }} />
+            <Grid container spacing={4}>
+              <Grid item xs={12} sm={5}>
+                <StyledBox>
+                  <Box sx={{ mb: 6.75, display: 'flex', alignItems: 'center' }}>
+                    <LockOpenOutline sx={{ color: 'primary.main', marginRight: 2.75 }} fontSize="small" />
+                    <Typography variant="body2">Full Access</Typography>
+                  </Box>
+                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                    <AccountOutline sx={{ color: 'primary.main', marginRight: 2.75 }} fontSize="small" />
+                    <Typography variant="body2">15 Members</Typography>
+                  </Box>
+                </StyledBox>
+              </Grid>
+              <Grid item xs={12} sm={7}>
+                <Box sx={{ mb: 6.75, display: 'flex', alignItems: 'center' }}>
+                  <StarOutline sx={{ color: 'primary.main', marginRight: 2.75 }} fontSize="small" />
+                  <Typography variant="body2">Access all Features</Typography>
+                </Box>
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <TrendingUp sx={{ color: 'primary.main', marginRight: 2.75 }} fontSize="small" />
+                  <Typography variant="body2">Lifetime Free Update</Typography>
+                </Box>
+              </Grid>
+            </Grid>
+          </CardContent>
+        </Grid>
+        <Grid
+          item
+          sm={5}
+          xs={12}
+          sx={{ paddingTop: ['0 !important', '1.5rem !important'], paddingLeft: ['1.5rem !important', '0 !important'] }}
+        >
+          <CardContent
+            sx={{
+              height: '100%',
+              display: 'flex',
+              textAlign: 'center',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: 'action.hover',
+              padding: theme => `${theme.spacing(18, 5, 16)} !important`,
+            }}
+          >
+            <Box>
+              <Box sx={{ mb: 3.5, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
+                <Typography variant="h6">$</Typography>
+                <Typography variant="h6" sx={{ lineHeight: 1, fontWeight: 600, fontSize: '3.75rem !important' }}>
+                  899
+                </Typography>
+                <Typography variant="h6">USD</Typography>
+              </Box>
+              <Typography variant="body2" sx={{ mb: 13.75, display: 'flex', flexDirection: 'column' }}>
+                <span>5 Tips For Offshore</span>
+                <span>Software Development</span>
+              </Typography>
+              <Button variant="contained">Contact Now</Button>
+            </Box>
+          </CardContent>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};
+
+export default CardMembership;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardMobile.js

@@ -0,0 +1,113 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Menu from '@mui/material/Menu';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Grid from '@mui/material/Grid';
+
+// ** Icons Imports
+import Twitter from 'mdi-material-ui/Twitter';
+import CartPlus from 'mdi-material-ui/CartPlus';
+import Facebook from 'mdi-material-ui/Facebook';
+import Linkedin from 'mdi-material-ui/Linkedin';
+import GooglePlus from 'mdi-material-ui/GooglePlus';
+import ShareVariant from 'mdi-material-ui/ShareVariant';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+// Styled Grid component
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  [theme.breakpoints.down('md')]: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  [theme.breakpoints.up('md')]: {
+    borderRight: `1px solid ${theme.palette.divider}`,
+  },
+}));
+
+const CardMobile = ({ i }) => {
+  let router = useRouter();
+
+  // ** State
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Card>
+      <Grid container spacing={6}>
+        <StyledGrid item md={5} xs={12}>
+          <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                minWidth: '100px',
+                minHeight: '100px',
+                backgroundImage: `url('/images/cards/iPhone-11-pro.png')`,
+                backgroundSize: 'contain',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
+              }}
+            />
+          </CardContent>
+        </StyledGrid>
+        <Grid
+          item
+          xs={12}
+          md={7}
+          sx={{
+            paddingTop: ['0 !important', '0 !important', '1.5rem !important'],
+            paddingLeft: ['1.5rem !important', '1.5rem !important', '0 !important'],
+          }}
+        >
+          <CardContent>
+            <Typography variant="caption" sx={{ marginBottom: 2 }}>
+              {'Apple iPhone 11 Pro ' + i}
+            </Typography>
+
+            <Typography variant="caption" sx={{ fontWeight: 500, marginBottom: 3 }}>
+              Price:{' '}
+              <Box component="span" sx={{ fontWeight: 'bold' }}>
+                $899
+              </Box>
+            </Typography>
+          </CardContent>
+          <CardActions className="card-action-dense">
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+              <Button
+                size="small"
+                onClick={() => {
+                  router.push('/shopfront/product/1');
+                }}
+              >
+                See Details
+              </Button>
+            </Box>
+          </CardActions>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};
+
+export default CardMobile;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardMobileSamsung.js

@@ -0,0 +1,139 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Menu from '@mui/material/Menu';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Grid from '@mui/material/Grid';
+
+// ** Icons Imports
+import Twitter from 'mdi-material-ui/Twitter';
+import CartPlus from 'mdi-material-ui/CartPlus';
+import Facebook from 'mdi-material-ui/Facebook';
+import Linkedin from 'mdi-material-ui/Linkedin';
+import GooglePlus from 'mdi-material-ui/GooglePlus';
+import ShareVariant from 'mdi-material-ui/ShareVariant';
+
+// Styled Grid component
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  [theme.breakpoints.down('md')]: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  [theme.breakpoints.up('md')]: {
+    borderRight: `1px solid ${theme.palette.divider}`,
+  },
+}));
+
+const CardMobileSamsung = ({ i }) => {
+  // ** State
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Card>
+      <Grid container spacing={6}>
+        <StyledGrid item md={5} xs={12}>
+          <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                minWidth: '100px',
+                minHeight: '100px',
+                backgroundImage: `url('/images/cards/samsung.webp')`,
+                backgroundSize: 'contain',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
+              }}
+            />
+          </CardContent>
+        </StyledGrid>
+        <Grid
+          item
+          xs={12}
+          md={7}
+          sx={{
+            paddingTop: ['0 !important', '0 !important', '1.5rem !important'],
+            paddingLeft: ['1.5rem !important', '1.5rem !important', '0 !important'],
+          }}
+        >
+          <CardContent>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              {'Apple iPhone 11 Pro ' + i}
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 3.5 }}>
+              Apple iPhone 11 Pro smartphone. Announced Sep 2019. Features 5.8″ display Apple A13 Bionic
+            </Typography>
+            <Typography sx={{ fontWeight: 500, marginBottom: 3 }}>
+              Price:{' '}
+              <Box component="span" sx={{ fontWeight: 'bold' }}>
+                $899
+              </Box>
+            </Typography>
+          </CardContent>
+          <CardActions className="card-action-dense">
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+              <Button>
+                <CartPlus fontSize="small" sx={{ marginRight: 2 }} />
+                Add to Card
+              </Button>
+              <IconButton
+                id="long-button"
+                aria-label="share"
+                aria-haspopup="true"
+                onClick={handleClick}
+                aria-controls="long-menu"
+                aria-expanded={open ? 'true' : undefined}
+              >
+                <ShareVariant fontSize="small" />
+              </IconButton>
+              <Menu
+                open={open}
+                id="long-menu"
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                MenuListProps={{
+                  'aria-labelledby': 'long-button',
+                }}
+              >
+                <MenuItem onClick={handleClose}>
+                  <Facebook />
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                  <Twitter />
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                  <Linkedin />
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                  <GooglePlus />
+                </MenuItem>
+              </Menu>
+            </Box>
+          </CardActions>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};
+
+export default CardMobileSamsung;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardMobileVisionPro.js

@@ -0,0 +1,139 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Menu from '@mui/material/Menu';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Grid from '@mui/material/Grid';
+
+// ** Icons Imports
+import Twitter from 'mdi-material-ui/Twitter';
+import CartPlus from 'mdi-material-ui/CartPlus';
+import Facebook from 'mdi-material-ui/Facebook';
+import Linkedin from 'mdi-material-ui/Linkedin';
+import GooglePlus from 'mdi-material-ui/GooglePlus';
+import ShareVariant from 'mdi-material-ui/ShareVariant';
+
+// Styled Grid component
+const StyledGrid = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  [theme.breakpoints.down('md')]: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  [theme.breakpoints.up('md')]: {
+    borderRight: `1px solid ${theme.palette.divider}`,
+  },
+}));
+
+const CardMobileVisionPro = ({ i }) => {
+  // ** State
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Card>
+      <Grid container spacing={6}>
+        <StyledGrid item md={5} xs={12}>
+          <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                minWidth: '100px',
+                minHeight: '100px',
+                backgroundImage: `url('/images/cards/vision_pro.webp')`,
+                backgroundSize: 'contain',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
+              }}
+            />
+          </CardContent>
+        </StyledGrid>
+        <Grid
+          item
+          xs={12}
+          md={7}
+          sx={{
+            paddingTop: ['0 !important', '0 !important', '1.5rem !important'],
+            paddingLeft: ['1.5rem !important', '1.5rem !important', '0 !important'],
+          }}
+        >
+          <CardContent>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              {'Apple iPhone 11 Pro ' + i}
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 3.5 }}>
+              Apple iPhone 11 Pro smartphone. Announced Sep 2019. Features 5.8″ display Apple A13 Bionic
+            </Typography>
+            <Typography sx={{ fontWeight: 500, marginBottom: 3 }}>
+              Price:{' '}
+              <Box component="span" sx={{ fontWeight: 'bold' }}>
+                $899
+              </Box>
+            </Typography>
+          </CardContent>
+          <CardActions className="card-action-dense">
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+              <Button>
+                <CartPlus fontSize="small" sx={{ marginRight: 2 }} />
+                Add to Card
+              </Button>
+              <IconButton
+                id="long-button"
+                aria-label="share"
+                aria-haspopup="true"
+                onClick={handleClick}
+                aria-controls="long-menu"
+                aria-expanded={open ? 'true' : undefined}
+              >
+                <ShareVariant fontSize="small" />
+              </IconButton>
+              <Menu
+                open={open}
+                id="long-menu"
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                MenuListProps={{
+                  'aria-labelledby': 'long-button',
+                }}
+              >
+                <MenuItem onClick={handleClose}>
+                  <Facebook />
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                  <Twitter />
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                  <Linkedin />
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                  <GooglePlus />
+                </MenuItem>
+              </Menu>
+            </Box>
+          </CardActions>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};
+
+export default CardMobileVisionPro;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardNavigation.js

@@ -0,0 +1,67 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Tab from '@mui/material/Tab';
+import Card from '@mui/material/Card';
+import TabList from '@mui/lab/TabList';
+import TabPanel from '@mui/lab/TabPanel';
+import Button from '@mui/material/Button';
+import TabContext from '@mui/lab/TabContext';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+const CardNavigation = () => {
+  // ** State
+  const [value, setValue] = useState('1');
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Card>
+      <TabContext value={value}>
+        <TabList onChange={handleChange} aria-label="card navigation example">
+          <Tab value="1" label="Item One" />
+          <Tab value="2" label="Item Two" />
+          <Tab value="3" label="Item Three" />
+        </TabList>
+        <CardContent>
+          <TabPanel value="1" sx={{ p: 0 }}>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              Header One
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 4 }}>
+              Pudding tiramisu caramels. Gingerbread gummies danish chocolate bar toffee marzipan. Wafer wafer cake
+              powder danish oat cake.
+            </Typography>
+            <Button variant="contained">Button One</Button>
+          </TabPanel>
+          <TabPanel value="2" sx={{ p: 0 }}>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              Header Two
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 4 }}>
+              Dragée chupa chups soufflé cheesecake jelly tootsie roll cupcake marzipan. Carrot cake sweet roll gummi
+              bears caramels jelly beans.
+            </Typography>
+            <Button variant="contained">Button Two</Button>
+          </TabPanel>
+          <TabPanel value="3" sx={{ p: 0 }}>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              Header Three
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 4 }}>
+              Icing cake macaroon macaroon jelly chocolate bar. Chupa chups dessert dessert soufflé chocolate bar
+              jujubes gummi bears lollipop.
+            </Typography>
+            <Button variant="contained">Button Three</Button>
+          </TabPanel>
+        </CardContent>
+      </TabContext>
+    </Card>
+  );
+};
+
+export default CardNavigation;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardNavigationCenter.js

@@ -0,0 +1,67 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Tab from '@mui/material/Tab';
+import Card from '@mui/material/Card';
+import TabList from '@mui/lab/TabList';
+import TabPanel from '@mui/lab/TabPanel';
+import Button from '@mui/material/Button';
+import TabContext from '@mui/lab/TabContext';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+const CardNavigationCenter = () => {
+  // ** State
+  const [value, setValue] = useState('1');
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Card>
+      <TabContext value={value}>
+        <TabList centered onChange={handleChange} aria-label="card navigation example">
+          <Tab value="1" label="Item One" />
+          <Tab value="2" label="Item Two" />
+          <Tab value="3" label="Item Three" />
+        </TabList>
+        <CardContent sx={{ textAlign: 'center' }}>
+          <TabPanel value="1" sx={{ p: 0 }}>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              Header One
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 4 }}>
+              Pudding tiramisu caramels. Gingerbread gummies danish chocolate bar toffee marzipan. Wafer wafer cake
+              powder danish oat cake.
+            </Typography>
+            <Button variant="contained">Button One</Button>
+          </TabPanel>
+          <TabPanel value="2" sx={{ p: 0 }}>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              Header Two
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 4 }}>
+              Dragée chupa chups soufflé cheesecake jelly tootsie roll cupcake marzipan. Carrot cake sweet roll gummi
+              bears caramels jelly beans.
+            </Typography>
+            <Button variant="contained">Button Two</Button>
+          </TabPanel>
+          <TabPanel value="3" sx={{ p: 0 }}>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              Header Three
+            </Typography>
+            <Typography variant="body2" sx={{ marginBottom: 4 }}>
+              Icing cake macaroon macaroon jelly chocolate bar. Chupa chups dessert dessert soufflé chocolate bar
+              jujubes gummi bears lollipop.
+            </Typography>
+            <Button variant="contained">Button Three</Button>
+          </TabPanel>
+        </CardContent>
+      </TabContext>
+    </Card>
+  );
+};
+
+export default CardNavigationCenter;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardSupport.js

@@ -0,0 +1,43 @@
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+// ** Icons Imports
+import HelpCircleOutline from 'mdi-material-ui/HelpCircleOutline';
+
+const CardSupport = () => {
+  return (
+    <Card>
+      <CardContent
+        sx={{
+          display: 'flex',
+          textAlign: 'center',
+          alignItems: 'center',
+          flexDirection: 'column',
+          padding: theme => `${theme.spacing(9.75, 5, 9.25)} !important`,
+        }}
+      >
+        <Avatar
+          sx={{ width: 50, height: 50, marginBottom: 2.25, color: 'common.white', backgroundColor: 'primary.main' }}
+        >
+          <HelpCircleOutline sx={{ fontSize: '2rem' }} />
+        </Avatar>
+        <Typography variant="h6" sx={{ marginBottom: 2.75 }}>
+          Support
+        </Typography>
+        <Typography variant="body2" sx={{ marginBottom: 6 }}>
+          According to us blisters are a very common thing and we come across them very often in our daily lives. It is
+          a very common occurrence like cold or fever depending upon your lifestyle.
+        </Typography>
+        <Button variant="contained" sx={{ padding: theme => theme.spacing(1.75, 5.5) }}>
+          Contact Now
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CardSupport;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardTwitter.js

@@ -0,0 +1,55 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+// ** Icons Imports
+import Heart from 'mdi-material-ui/Heart';
+import Twitter from 'mdi-material-ui/Twitter';
+import ShareVariant from 'mdi-material-ui/ShareVariant';
+
+const CardTwitter = () => {
+  return (
+    <Card sx={{ border: 0, boxShadow: 0, color: 'common.white', backgroundColor: 'info.main' }}>
+      <CardContent sx={{ padding: theme => `${theme.spacing(3.25, 5, 4.5)} !important` }}>
+        <Typography
+          variant="h6"
+          sx={{ display: 'flex', marginBottom: 2.75, alignItems: 'center', color: 'common.white' }}
+        >
+          <Twitter sx={{ marginRight: 2.5 }} />
+          Twitter Card
+        </Typography>
+        <Typography variant="body2" sx={{ marginBottom: 3, color: 'common.white' }}>
+          Turns out semicolon-less style is easier and safer in TS because most gotcha edge cases are type invalid as
+          well.
+        </Typography>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
+            <Avatar alt="Mary Vaughn" src="/images/avatars/4.png" sx={{ width: 34, height: 34, marginRight: 2.75 }} />
+            <Typography variant="body2" sx={{ color: 'common.white' }}>
+              Mary Vaughn
+            </Typography>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', mr: 3.5 }}>
+              <Heart sx={{ marginRight: 1.25 }} />
+              <Typography variant="body2" sx={{ color: 'common.white' }}>
+                1.2k
+              </Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <ShareVariant sx={{ marginRight: 1.25 }} />
+              <Typography variant="body2" sx={{ color: 'common.white' }}>
+                80
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CardTwitter;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardUser.js

@@ -0,0 +1,63 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import Avatar from '@mui/material/Avatar';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+import AvatarGroup from '@mui/material/AvatarGroup';
+
+const CardUser = () => {
+  return (
+    <Card sx={{ position: 'relative' }}>
+      <CardMedia sx={{ height: '12.625rem' }} image="/images/cards/background-user.png" />
+      <Avatar
+        alt="Robert Meyer"
+        src="/images/avatars/1.png"
+        sx={{
+          width: 75,
+          height: 75,
+          left: '1.313rem',
+          top: '10.28125rem',
+          position: 'absolute',
+          border: theme => `0.25rem solid ${theme.palette.common.white}`,
+        }}
+      />
+      <CardContent>
+        <Box
+          sx={{
+            mt: 5.75,
+            mb: 8.75,
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Box sx={{ mr: 2, mb: 1, display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h6">Robert Meyer</Typography>
+            <Typography variant="caption">London, UK</Typography>
+          </Box>
+          <Button variant="contained">Send Request</Button>
+        </Box>
+        <Box sx={{ gap: 2, display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography variant="subtitle2" sx={{ whiteSpace: 'nowrap', color: 'text.primary' }}>
+            18 mutual friends
+          </Typography>
+          <AvatarGroup max={4}>
+            <Avatar src="/images/avatars/8.png" alt="Alice Cobb" />
+            <Avatar src="/images/avatars/7.png" alt="Jeffery Warner" />
+            <Avatar src="/images/avatars/3.png" alt="Howard Lloyd" />
+            <Avatar src="/images/avatars/2.png" alt="Bettie Dunn" />
+            <Avatar src="/images/avatars/4.png" alt="Olivia Sparks" />
+            <Avatar src="/images/avatars/5.png" alt="Jimmy Hanson" />
+            <Avatar src="/images/avatars/6.png" alt="Hallie Richards" />
+          </AvatarGroup>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CardUser;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardVerticalRatings.js

@@ -0,0 +1,37 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Rating from '@mui/material/Rating';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+
+const CardVerticalRatings = () => {
+  return (
+    <Card>
+      <CardHeader title="The Best Answers" />
+      <CardContent>
+        <Box sx={{ mb: 5, display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
+          <Rating readOnly value={5} name="read-only" sx={{ marginRight: 2 }} />
+          <Typography variant="body2">5 Star | 98 reviews</Typography>
+        </Box>
+        <Typography variant="body2" sx={{ marginBottom: 3.25 }}>
+          If you are looking for a new way to promote your business that won’t cost you more money, maybe printing is
+          one of the options you won’t resist.
+        </Typography>
+        <Typography variant="body2">
+          Printing is a widely use process in making printed materials that are used for advertising. It become fast,
+          easy and simple. If you want your promotional material to be an eye-catching.
+        </Typography>
+      </CardContent>
+      <CardActions className="card-action-dense">
+        <Button>Location</Button>
+        <Button>Reviews</Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default CardVerticalRatings;

tsc1877/task1/aws/workspace/admin/src/views/cards/CardWithCollapse.js

@@ -0,0 +1,69 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Collapse from '@mui/material/Collapse';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+
+// ** Icons Imports
+import ChevronUp from 'mdi-material-ui/ChevronUp';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
+
+const CardWithCollapse = () => {
+  // ** State
+  const [collapse, setCollapse] = useState(false);
+
+  const handleClick = () => {
+    setCollapse(!collapse);
+  };
+
+  return (
+    <Card>
+      <CardMedia sx={{ height: '14.5625rem' }} image="/images/cards/paper-boat.png" />
+      <CardContent>
+        <Typography variant="h6" sx={{ marginBottom: 2 }}>
+          Popular Uses Of The Internet
+        </Typography>
+        <Typography variant="body2">
+          Although cards can support multiple actions, UI controls, and an overflow menu.
+        </Typography>
+      </CardContent>
+      <CardActions className="card-action-dense">
+        <Box
+          sx={{
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Button onClick={handleClick}>Details</Button>
+          <IconButton size="small" onClick={handleClick}>
+            {collapse ? <ChevronUp sx={{ fontSize: '1.875rem' }} /> : <ChevronDown sx={{ fontSize: '1.875rem' }} />}
+          </IconButton>
+        </Box>
+      </CardActions>
+      <Collapse in={collapse}>
+        <Divider sx={{ margin: 0 }} />
+        <CardContent>
+          <Typography variant="body2">
+            I&prime;m a thing. But, like most politicians, he promised more than he could deliver. You won&prime;t have
+            time for sleeping, soldier, not with all the bed making you&prime;ll be doing. Then we&prime;ll go with that
+            data file! Hey, you add a one and two zeros to that or we walk! You&prime;re going to do his laundry?
+            I&prime;ve got to find a way to escape.
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default CardWithCollapse;

tsc1877/task1/aws/workspace/admin/src/views/dashboard/DepositWithdraw.js

@@ -0,0 +1,203 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import { styled } from '@mui/material/styles';
+import CardHeader from '@mui/material/CardHeader';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+import MuiDivider from '@mui/material/Divider';
+
+const depositData = [
+  {
+    logoWidth: 28,
+    logoHeight: 29,
+    amount: '+$4,650',
+    subtitle: 'Sell UI Kit',
+    title: 'Gumroad Account',
+    logo: '/images/logos/gumroad.png',
+  },
+  {
+    logoWidth: 38,
+    logoHeight: 38,
+    amount: '+$92,705',
+    title: 'Mastercard',
+    subtitle: 'Wallet deposit',
+    logo: '/images/logos/mastercard-label.png',
+  },
+  {
+    logoWidth: 20,
+    logoHeight: 28,
+    amount: '+$957',
+    title: 'Stripe Account',
+    subtitle: 'iOS Application',
+    logo: '/images/logos/stripe.png',
+  },
+  {
+    logoWidth: 34,
+    logoHeight: 32,
+    amount: '+$6,837',
+    title: 'American Bank',
+    subtitle: 'Bank Transfer',
+    logo: '/images/logos/american-bank.png',
+  },
+  {
+    logoWidth: 33,
+    logoHeight: 22,
+    amount: '+$446',
+    title: 'Bank Account',
+    subtitle: 'Wallet deposit',
+    logo: '/images/logos/citi-bank.png',
+  },
+];
+
+const withdrawData = [
+  {
+    logoWidth: 29,
+    logoHeight: 30,
+    amount: '-$145',
+    title: 'Google Adsense',
+    subtitle: 'Paypal deposit',
+    logo: '/images/logos/google.png',
+  },
+  {
+    logoWidth: 34,
+    logoHeight: 34,
+    amount: '-$1870',
+    title: 'Github Enterprise',
+    logo: '/images/logos/github.png',
+    subtitle: 'Security & compliance',
+  },
+  {
+    logoWidth: 30,
+    logoHeight: 30,
+    amount: '-$450',
+    title: 'Upgrade Slack Plan',
+    subtitle: 'Debit card deposit',
+    logo: '/images/logos/slack.png',
+  },
+  {
+    logoWidth: 30,
+    logoHeight: 30,
+    amount: '-$540',
+    title: 'Digital Ocean',
+    subtitle: 'Cloud Hosting',
+    logo: '/images/logos/digital-ocean.png',
+  },
+  {
+    logoWidth: 36,
+    logoHeight: 21,
+    amount: '-$21',
+    title: 'AWS Account',
+    logo: '/images/logos/aws.png',
+    subtitle: 'Choosing a Cloud Platform',
+  },
+];
+
+// Styled Divider component
+const Divider = styled(MuiDivider)(({ theme }) => ({
+  margin: theme.spacing(5, 0),
+  borderRight: `1px solid ${theme.palette.divider}`,
+  [theme.breakpoints.down('md')]: {
+    borderRight: 'none',
+    margin: theme.spacing(0, 5),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+}));
+
+const DepositWithdraw = () => {
+  return (
+    <Card sx={{ display: 'flex', justifyContent: 'space-between', flexDirection: ['column', 'column', 'row'] }}>
+      <Box sx={{ width: '100%' }}>
+        <CardHeader
+          title="Deposit"
+          sx={{ pt: 5.5, alignItems: 'center', '& .MuiCardHeader-action': { mt: 0.6 } }}
+          action={<Typography variant="caption">View All</Typography>}
+          titleTypographyProps={{
+            variant: 'h6',
+            sx: { lineHeight: '1.6 !important', letterSpacing: '0.15px !important' },
+          }}
+        />
+        <CardContent sx={{ pb: theme => `${theme.spacing(5.5)} !important` }}>
+          {depositData.map((item, index) => {
+            return (
+              <Box
+                key={item.title}
+                sx={{ display: 'flex', alignItems: 'center', mb: index !== depositData.length - 1 ? 6 : 0 }}
+              >
+                <Box sx={{ minWidth: 38, display: 'flex', justifyContent: 'center' }}>
+                  <img src={item.logo} alt={item.title} width={item.logoWidth} height={item.logoHeight} />
+                </Box>
+                <Box
+                  sx={{
+                    ml: 4,
+                    width: '100%',
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <Box sx={{ marginRight: 2, display: 'flex', flexDirection: 'column' }}>
+                    <Typography sx={{ fontWeight: 600, fontSize: '0.875rem' }}>{item.title}</Typography>
+                    <Typography variant="caption">{item.subtitle}</Typography>
+                  </Box>
+                  <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'success.main' }}>
+                    {item.amount}
+                  </Typography>
+                </Box>
+              </Box>
+            );
+          })}
+        </CardContent>
+      </Box>
+
+      <Divider flexItem />
+
+      <Box sx={{ width: '100%' }}>
+        <CardHeader
+          title="Withdraw"
+          sx={{ pt: 5.5, alignItems: 'center', '& .MuiCardHeader-action': { mt: 0.6 } }}
+          action={<Typography variant="caption">View All</Typography>}
+          titleTypographyProps={{
+            variant: 'h6',
+            sx: { lineHeight: '1.6 !important', letterSpacing: '0.15px !important' },
+          }}
+        />
+        <CardContent sx={{ pb: theme => `${theme.spacing(5.5)} !important` }}>
+          {withdrawData.map((item, index) => {
+            return (
+              <Box
+                key={item.title}
+                sx={{ display: 'flex', alignItems: 'center', mb: index !== depositData.length - 1 ? 6 : 0 }}
+              >
+                <Box sx={{ minWidth: 36, display: 'flex', justifyContent: 'center' }}>
+                  <img src={item.logo} alt={item.title} width={item.logoWidth} height={item.logoHeight} />
+                </Box>
+                <Box
+                  sx={{
+                    ml: 4,
+                    width: '100%',
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <Box sx={{ marginRight: 2, display: 'flex', flexDirection: 'column' }}>
+                    <Typography sx={{ fontWeight: 600, fontSize: '0.875rem' }}>{item.title}</Typography>
+                    <Typography variant="caption">{item.subtitle}</Typography>
+                  </Box>
+                  <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'error.main' }}>
+                    {item.amount}
+                  </Typography>
+                </Box>
+              </Box>
+            );
+          })}
+        </CardContent>
+      </Box>
+    </Card>
+  );
+};
+
+export default DepositWithdraw;

tsc1877/task1/aws/workspace/admin/src/views/dashboard/SalesByCountries.js

@@ -0,0 +1,152 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+
+// ** Icons Imports
+import ChevronUp from 'mdi-material-ui/ChevronUp';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
+import DotsVertical from 'mdi-material-ui/DotsVertical';
+
+const data = [
+  {
+    sales: '894k',
+    trendDir: 'up',
+    subtitle: 'USA',
+    title: '$8,656k',
+    avatarText: 'US',
+    trendNumber: '25.8%',
+    avatarColor: 'success',
+    trend: <ChevronUp sx={{ color: 'success.main', fontWeight: 600 }} />,
+  },
+  {
+    sales: '645k',
+    subtitle: 'UK',
+    trendDir: 'down',
+    title: '$2,415k',
+    avatarText: 'UK',
+    trendNumber: '6.2%',
+    avatarColor: 'error',
+    trend: <ChevronDown sx={{ color: 'error.main', fontWeight: 600 }} />,
+  },
+  {
+    sales: '148k',
+    title: '$865k',
+    trendDir: 'up',
+    avatarText: 'IN',
+    subtitle: 'India',
+    trendNumber: '12.4%',
+    avatarColor: 'warning',
+    trend: <ChevronUp sx={{ color: 'success.main', fontWeight: 600 }} />,
+  },
+  {
+    sales: '86k',
+    title: '$745k',
+    trendDir: 'down',
+    avatarText: 'JA',
+    subtitle: 'Japan',
+    trendNumber: '11.9%',
+    avatarColor: 'secondary',
+    trend: <ChevronDown sx={{ color: 'error.main', fontWeight: 600 }} />,
+  },
+  {
+    sales: '42k',
+    title: '$45k',
+    trendDir: 'up',
+    avatarText: 'KO',
+    subtitle: 'Korea',
+    trendNumber: '16.2%',
+    avatarColor: 'error',
+    trend: <ChevronUp sx={{ color: 'success.main', fontWeight: 600 }} />,
+  },
+];
+
+const SalesByCountries = () => {
+  return (
+    <Card>
+      <CardHeader
+        title="Sales by Countries"
+        titleTypographyProps={{ sx: { lineHeight: '1.2 !important', letterSpacing: '0.31px !important' } }}
+        action={
+          <IconButton size="small" aria-label="settings" className="card-more-options" sx={{ color: 'text.secondary' }}>
+            <DotsVertical />
+          </IconButton>
+        }
+      />
+      <CardContent sx={{ pt: theme => `${theme.spacing(2)} !important` }}>
+        {data.map((item, index) => {
+          return (
+            <Box
+              key={item.title}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                ...(index !== data.length - 1 ? { mb: 5.875 } : {}),
+              }}
+            >
+              <Avatar
+                sx={{
+                  width: 38,
+                  height: 38,
+                  marginRight: 3,
+                  fontSize: '1rem',
+                  color: 'common.white',
+                  backgroundColor: `${item.avatarColor}.main`,
+                }}
+              >
+                {item.avatarText}
+              </Avatar>
+
+              <Box
+                sx={{
+                  width: '100%',
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Box sx={{ marginRight: 2, display: 'flex', flexDirection: 'column' }}>
+                  <Box sx={{ display: 'flex' }}>
+                    <Typography sx={{ mr: 0.5, fontWeight: 600, letterSpacing: '0.25px' }}>{item.title}</Typography>
+                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                      {item.trend}
+                      <Typography
+                        variant="caption"
+                        sx={{
+                          fontWeight: 600,
+                          lineHeight: 1.5,
+                          color: item.trendDir === 'down' ? 'error.main' : 'success.main',
+                        }}
+                      >
+                        {item.trendNumber}
+                      </Typography>
+                    </Box>
+                  </Box>
+                  <Typography variant="caption" sx={{ lineHeight: 1.5 }}>
+                    {item.subtitle}
+                  </Typography>
+                </Box>
+
+                <Box sx={{ display: 'flex', textAlign: 'end', flexDirection: 'column' }}>
+                  <Typography sx={{ fontWeight: 600, fontSize: '0.875rem', lineHeight: 1.72, letterSpacing: '0.22px' }}>
+                    {item.sales}
+                  </Typography>
+                  <Typography variant="caption" sx={{ lineHeight: 1.5 }}>
+                    Sales
+                  </Typography>
+                </Box>
+              </Box>
+            </Box>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SalesByCountries;

tsc1877/task1/aws/workspace/admin/src/views/dashboard/StatisticsCard.js

@@ -0,0 +1,106 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import Avatar from '@mui/material/Avatar';
+import CardHeader from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+// ** Icons Imports
+import TrendingUp from 'mdi-material-ui/TrendingUp';
+import CurrencyUsd from 'mdi-material-ui/CurrencyUsd';
+import DotsVertical from 'mdi-material-ui/DotsVertical';
+import CellphoneLink from 'mdi-material-ui/CellphoneLink';
+import AccountOutline from 'mdi-material-ui/AccountOutline';
+
+const salesData = [
+  {
+    stats: '245k',
+    title: 'Sales',
+    color: 'primary',
+    icon: <TrendingUp sx={{ fontSize: '1.75rem' }} />,
+  },
+  {
+    stats: '12.5k',
+    title: 'Customers',
+    color: 'success',
+    icon: <AccountOutline sx={{ fontSize: '1.75rem' }} />,
+  },
+  {
+    stats: '1.54k',
+    color: 'warning',
+    title: 'Products',
+    icon: <CellphoneLink sx={{ fontSize: '1.75rem' }} />,
+  },
+  {
+    stats: '$88k',
+    color: 'info',
+    title: 'Revenue',
+    icon: <CurrencyUsd sx={{ fontSize: '1.75rem' }} />,
+  },
+];
+
+const renderStats = () => {
+  return salesData.map((item, index) => (
+    <Grid item xs={12} sm={3} key={index}>
+      <Box key={index} sx={{ display: 'flex', alignItems: 'center' }}>
+        <Avatar
+          variant="rounded"
+          sx={{
+            mr: 3,
+            width: 44,
+            height: 44,
+            boxShadow: 3,
+            color: 'common.white',
+            backgroundColor: `${item.color}.main`,
+          }}
+        >
+          {item.icon}
+        </Avatar>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <Typography variant="caption">{item.title}</Typography>
+          <Typography variant="h6">{item.stats}</Typography>
+        </Box>
+      </Box>
+    </Grid>
+  ));
+};
+
+const StatisticsCard = () => {
+  return (
+    <Card>
+      <CardHeader
+        title="Statistics Card"
+        action={
+          <IconButton size="small" aria-label="settings" className="card-more-options" sx={{ color: 'text.secondary' }}>
+            <DotsVertical />
+          </IconButton>
+        }
+        subheader={
+          <Typography variant="body2">
+            <Box component="span" sx={{ fontWeight: 600, color: 'text.primary' }}>
+              Total 48.5% growth
+            </Box>{' '}
+            😎 this month
+          </Typography>
+        }
+        titleTypographyProps={{
+          sx: {
+            mb: 2.5,
+            lineHeight: '2rem !important',
+            letterSpacing: '0.15px !important',
+          },
+        }}
+      />
+      <CardContent sx={{ pt: theme => `${theme.spacing(3)} !important` }}>
+        <Grid container spacing={[5, 0]}>
+          {renderStats()}
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default StatisticsCard;

tsc1877/task1/aws/workspace/admin/src/views/dashboard/Table.js

@@ -0,0 +1,145 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Chip from '@mui/material/Chip';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import Typography from '@mui/material/Typography';
+import TableContainer from '@mui/material/TableContainer';
+
+const rows = [
+  {
+    age: 27,
+    status: 'current',
+    date: '09/27/2018',
+    name: 'Sally Quinn',
+    salary: '$19586.23',
+    email: 'eebsworth2m@sbwire.com',
+    designation: 'Human Resources Assistant',
+  },
+  {
+    age: 61,
+    date: '09/23/2016',
+    salary: '$23896.35',
+    status: 'professional',
+    name: 'Margaret Bowers',
+    email: 'kocrevy0@thetimes.co.uk',
+    designation: 'Nuclear Power Engineer',
+  },
+  {
+    age: 59,
+    date: '10/15/2017',
+    name: 'Minnie Roy',
+    status: 'rejected',
+    salary: '$18991.67',
+    email: 'ediehn6@163.com',
+    designation: 'Environmental Specialist',
+  },
+  {
+    age: 30,
+    date: '06/12/2018',
+    status: 'resigned',
+    salary: '$19252.12',
+    name: 'Ralph Leonard',
+    email: 'dfalloona@ifeng.com',
+    designation: 'Sales Representative',
+  },
+  {
+    age: 66,
+    status: 'applied',
+    date: '03/24/2018',
+    salary: '$13076.28',
+    name: 'Annie Martin',
+    designation: 'Operator',
+    email: 'sganderton2@tuttocitta.it',
+  },
+  {
+    age: 33,
+    date: '08/25/2017',
+    salary: '$10909.52',
+    name: 'Adeline Day',
+    status: 'professional',
+    email: 'hnisius4@gnu.org',
+    designation: 'Senior Cost Accountant',
+  },
+  {
+    age: 61,
+    status: 'current',
+    date: '06/01/2017',
+    salary: '$17803.80',
+    name: 'Lora Jackson',
+    designation: 'Geologist',
+    email: 'ghoneywood5@narod.ru',
+  },
+  {
+    age: 22,
+    date: '12/03/2017',
+    salary: '$12336.17',
+    name: 'Rodney Sharp',
+    status: 'professional',
+    designation: 'Cost Accountant',
+    email: 'dcrossman3@google.co.jp',
+  },
+];
+
+const statusObj = {
+  applied: { color: 'info' },
+  rejected: { color: 'error' },
+  current: { color: 'primary' },
+  resigned: { color: 'warning' },
+  professional: { color: 'success' },
+};
+
+const DashboardTable = () => {
+  return (
+    <Card>
+      <TableContainer>
+        <Table sx={{ minWidth: 800 }} aria-label="table in dashboard">
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Email</TableCell>
+              <TableCell>Date</TableCell>
+              <TableCell>Salary</TableCell>
+              <TableCell>Age</TableCell>
+              <TableCell>Status</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map(row => (
+              <TableRow hover key={row.name} sx={{ '&:last-of-type td, &:last-of-type th': { border: 0 } }}>
+                <TableCell sx={{ py: theme => `${theme.spacing(0.5)} !important` }}>
+                  <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                    <Typography sx={{ fontWeight: 500, fontSize: '0.875rem !important' }}>{row.name}</Typography>
+                    <Typography variant="caption">{row.designation}</Typography>
+                  </Box>
+                </TableCell>
+                <TableCell>{row.email}</TableCell>
+                <TableCell>{row.date}</TableCell>
+                <TableCell>{row.salary}</TableCell>
+                <TableCell>{row.age}</TableCell>
+                <TableCell>
+                  <Chip
+                    label={row.status}
+                    color={statusObj[row.status].color}
+                    sx={{
+                      height: 24,
+                      fontSize: '0.75rem',
+                      textTransform: 'capitalize',
+                      '& .MuiChip-label': { fontWeight: 500 },
+                    }}
+                  />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Card>
+  );
+};
+
+export default DashboardTable;

tsc1877/task1/aws/workspace/admin/src/views/dashboard/TotalEarning.js

@@ -0,0 +1,126 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import LinearProgress from '@mui/material/LinearProgress';
+
+// ** Icons Imports
+import MenuUp from 'mdi-material-ui/MenuUp';
+import DotsVertical from 'mdi-material-ui/DotsVertical';
+
+const data = [
+  {
+    progress: 75,
+    imgHeight: 20,
+    title: 'Zipcar',
+    color: 'primary',
+    amount: '$24,895.65',
+    subtitle: 'Vuejs, React & HTML',
+    imgSrc: '/images/cards/logo-zipcar.png',
+  },
+  {
+    progress: 50,
+    color: 'info',
+    imgHeight: 27,
+    title: 'Bitbank',
+    amount: '$8,650.20',
+    subtitle: 'Sketch, Figma & XD',
+    imgSrc: '/images/cards/logo-bitbank.png',
+  },
+  {
+    progress: 20,
+    imgHeight: 20,
+    title: 'Aviato',
+    color: 'secondary',
+    amount: '$1,245.80',
+    subtitle: 'HTML & Angular',
+    imgSrc: '/images/cards/logo-aviato.png',
+  },
+];
+
+const TotalEarning = () => {
+  return (
+    <Card>
+      <CardHeader
+        title="Total Earning"
+        titleTypographyProps={{ sx: { lineHeight: '1.6 !important', letterSpacing: '0.15px !important' } }}
+        action={
+          <IconButton size="small" aria-label="settings" className="card-more-options" sx={{ color: 'text.secondary' }}>
+            <DotsVertical />
+          </IconButton>
+        }
+      />
+      <CardContent sx={{ pt: theme => `${theme.spacing(2.25)} !important` }}>
+        <Box sx={{ mb: 1.5, display: 'flex', alignItems: 'center' }}>
+          <Typography variant="h4" sx={{ fontWeight: 600, fontSize: '2.125rem !important' }}>
+            $24,895
+          </Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', color: 'success.main' }}>
+            <MenuUp sx={{ fontSize: '1.875rem', verticalAlign: 'middle' }} />
+            <Typography variant="body2" sx={{ fontWeight: 600, color: 'success.main' }}>
+              10%
+            </Typography>
+          </Box>
+        </Box>
+
+        <Typography component="p" variant="caption" sx={{ mb: 10 }}>
+          Compared to $84,325 last year
+        </Typography>
+
+        {data.map((item, index) => {
+          return (
+            <Box
+              key={item.title}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                ...(index !== data.length - 1 ? { mb: 8.5 } : {}),
+              }}
+            >
+              <Avatar
+                variant="rounded"
+                sx={{
+                  mr: 3,
+                  width: 40,
+                  height: 40,
+                  backgroundColor: theme => `rgba(${theme.palette.customColors.main}, 0.04)`,
+                }}
+              >
+                <img src={item.imgSrc} alt={item.title} height={item.imgHeight} />
+              </Avatar>
+              <Box
+                sx={{
+                  width: '100%',
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Box sx={{ marginRight: 2, display: 'flex', flexDirection: 'column' }}>
+                  <Typography variant="body2" sx={{ mb: 0.5, fontWeight: 600, color: 'text.primary' }}>
+                    {item.title}
+                  </Typography>
+                  <Typography variant="caption">{item.subtitle}</Typography>
+                </Box>
+
+                <Box sx={{ minWidth: 85, display: 'flex', flexDirection: 'column' }}>
+                  <Typography variant="body2" sx={{ mb: 2, fontWeight: 600, color: 'text.primary' }}>
+                    {item.amount}
+                  </Typography>
+                  <LinearProgress color={item.color} value={item.progress} variant="determinate" />
+                </Box>
+              </Box>
+            </Box>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TotalEarning;

tsc1877/task1/aws/workspace/admin/src/views/dashboard/Trophy.js

@@ -0,0 +1,49 @@
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+import { styled, useTheme } from '@mui/material/styles';
+
+// Styled component for the triangle shaped background image
+const TriangleImg = styled('img')({
+  right: 0,
+  bottom: 0,
+  height: 170,
+  position: 'absolute',
+});
+
+// Styled component for the trophy image
+const TrophyImg = styled('img')({
+  right: 36,
+  bottom: 20,
+  height: 98,
+  position: 'absolute',
+});
+
+const Trophy = () => {
+  // ** Hook
+  const theme = useTheme();
+  const imageSrc = theme.palette.mode === 'light' ? 'triangle-light.png' : 'triangle-dark.png';
+
+  return (
+    <Card sx={{ position: 'relative' }}>
+      <CardContent>
+        <Typography variant="h6">Congratulations John! 🥳</Typography>
+        <Typography variant="body2" sx={{ letterSpacing: '0.25px' }}>
+          Best seller of the month
+        </Typography>
+        <Typography variant="h5" sx={{ my: 4, color: 'primary.main' }}>
+          $42.8k
+        </Typography>
+        <Button size="small" variant="contained">
+          View Sales
+        </Button>
+        <TriangleImg alt="triangle background" src={`/images/misc/${imageSrc}`} />
+        <TrophyImg alt="trophy" src="/images/misc/trophy.png" />
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Trophy;

tsc1877/task1/aws/workspace/admin/src/views/dashboard/WeeklyOverview.js

@@ -0,0 +1,112 @@
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import { useTheme } from '@mui/material/styles';
+import CardHeader from '@mui/material/CardHeader';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+
+// ** Icons Imports
+import DotsVertical from 'mdi-material-ui/DotsVertical';
+
+// ** Custom Components Imports
+import ReactApexcharts from 'src/@core/components/react-apexcharts';
+
+const WeeklyOverview = () => {
+  // ** Hook
+  const theme = useTheme();
+
+  const options = {
+    chart: {
+      parentHeightOffset: 0,
+      toolbar: { show: false },
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: 9,
+        distributed: true,
+        columnWidth: '40%',
+        endingShape: 'rounded',
+        startingShape: 'rounded',
+      },
+    },
+    stroke: {
+      width: 2,
+      colors: [theme.palette.background.paper],
+    },
+    legend: { show: false },
+    grid: {
+      strokeDashArray: 7,
+      padding: {
+        top: -1,
+        right: 0,
+        left: -12,
+        bottom: 5,
+      },
+    },
+    dataLabels: { enabled: false },
+    colors: [
+      theme.palette.background.default,
+      theme.palette.background.default,
+      theme.palette.background.default,
+      theme.palette.primary.main,
+      theme.palette.background.default,
+      theme.palette.background.default,
+    ],
+    states: {
+      hover: {
+        filter: { type: 'none' },
+      },
+      active: {
+        filter: { type: 'none' },
+      },
+    },
+    xaxis: {
+      categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+      tickPlacement: 'on',
+      labels: { show: false },
+      axisTicks: { show: false },
+      axisBorder: { show: false },
+    },
+    yaxis: {
+      show: true,
+      tickAmount: 4,
+      labels: {
+        offsetX: -17,
+        formatter: value => `${value > 999 ? `${(value / 1000).toFixed(0)}` : value}k`,
+      },
+    },
+  };
+
+  return (
+    <Card>
+      <CardHeader
+        title="Weekly Overview"
+        titleTypographyProps={{
+          sx: { lineHeight: '2rem !important', letterSpacing: '0.15px !important' },
+        }}
+        action={
+          <IconButton size="small" aria-label="settings" className="card-more-options" sx={{ color: 'text.secondary' }}>
+            <DotsVertical />
+          </IconButton>
+        }
+      />
+      <CardContent sx={{ '& .apexcharts-xcrosshairs.apexcharts-active': { opacity: 0 } }}>
+        <ReactApexcharts type="bar" height={205} options={options} series={[{ data: [37, 57, 45, 75, 57, 40, 65] }]} />
+        <Box sx={{ mb: 7, display: 'flex', alignItems: 'center' }}>
+          <Typography variant="h5" sx={{ mr: 4 }}>
+            45%
+          </Typography>
+          <Typography variant="body2">Your sales performance is 45% 😎 better compared to last month</Typography>
+        </Box>
+        <Button fullWidth variant="contained">
+          Details
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default WeeklyOverview;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormAddCategories.js

@@ -0,0 +1,126 @@
+// ** MUI Imports
+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 CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import InputAdornment from '@mui/material/InputAdornment';
+
+// ** Icons Imports
+import ShortTextIcon from '@mui/icons-material/ShortText';
+import NotesIcon from '@mui/icons-material/Notes';
+import { Stack } from '@mui/material';
+import { Formik } from 'formik';
+import { useRouter } from 'next/router';
+
+const axios = require('axios');
+
+const FormAddCategories = () => {
+  let router = useRouter();
+  let initialValues = { name: '', description: '' };
+
+  let validate = values => {
+    const errors = {};
+    // if (!values.email) {
+    //   errors.email = 'Required';
+    // } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+    //   errors.email = 'Invalid email address';
+    // }
+    return errors;
+  };
+
+  let onSubmit = async (values, { setSubmitting }) => {
+    const formData = new FormData();
+
+    formData.append('name', values['name']);
+    formData.append('description', values['description']);
+
+    await axios
+      .post('/api/categories/add', formData)
+      .then(response => {
+        router.replace('/admin/categories');
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  };
+
+  return (
+    <Card>
+      <CardHeader title="Add Categories" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
+          {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
+            <form onSubmit={handleSubmit}>
+              <Grid container spacing={5}>
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    label="Name"
+                    placeholder="e.g. Bakery ... "
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <ShortTextIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="name"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.name}
+                  />
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    multiline
+                    minRows={10}
+                    label="description"
+                    placeholder="Category description ... "
+                    sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <NotesIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="description"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.description}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <Stack direction="row" gap="1rem">
+                    <Button type="submit" variant="contained" size="large">
+                      Submit
+                    </Button>
+
+                    <Button
+                      type="reset"
+                      variant="outlined"
+                      size="large"
+                      onClick={() => {
+                        router.push('/admin/categories');
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </Stack>
+                </Grid>
+              </Grid>
+            </form>
+          )}
+        </Formik>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormAddCategories;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormAddProducts.js

@@ -0,0 +1,287 @@
+// ** MUI Imports
+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 CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import InputAdornment from '@mui/material/InputAdornment';
+
+// ** Icons Imports
+import Phone from 'mdi-material-ui/Phone';
+import EmailOutline from 'mdi-material-ui/EmailOutline';
+import AccountOutline from 'mdi-material-ui/AccountOutline';
+import MessageOutline from 'mdi-material-ui/MessageOutline';
+import { Box, FormControl, InputLabel, MenuItem, Select, Stack } from '@mui/material';
+import { Formik } from 'formik';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import AddCircleOutline from '@mui/icons-material/AddCircleOutline';
+import ShortTextIcon from '@mui/icons-material/ShortText';
+import NotesIcon from '@mui/icons-material/Notes';
+import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+import Loading from 'src/components/Loading';
+const axios = require('axios');
+
+const FormAddProducts = () => {
+  let router = useRouter();
+  let initialValues = { name: '', description: '', product_image: '', price: null, cid: 1, clear_image: false };
+  let [local_preview, setLocalPreview] = useState(false);
+  let [local_preview_content, setLocalPrevieContent] = useState(null);
+  let [categories, setCategories] = useState(null);
+
+  let validate = values => {
+    const errors = {};
+    // if (!values.email) {
+    //   errors.email = 'Required';
+    // } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+    //   errors.email = 'Invalid email address';
+    // }
+    return errors;
+  };
+
+  let onSubmit = async (values, { setSubmitting }) => {
+    values['cid'] = parseInt(values['cid']);
+    const formData = new FormData();
+
+    formData.append('name', values['name']);
+    formData.append('description', values['description']);
+    formData.append('cid', values['cid']);
+    formData.append('price', values['price']);
+    formData.append('clear_image', values['clear_image']);
+    formData.append('product_image', values['product_image'][0]);
+
+    await fetch('/api/products/add', { method: 'POST', body: formData })
+      .then(response => {
+        router.replace('/admin/products');
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  };
+
+  const fetchCategory = () => {
+    axios
+      .get('/api/categories/list')
+      .then(function (response) {
+        let { data } = response;
+        let { categories } = data;
+        setCategories(categories);
+      })
+      .catch(function (error) {
+        // handle error
+        console.log(error);
+      })
+      .finally(function () {
+        // always executed
+      });
+  };
+
+  useEffect(() => {
+    fetchCategory();
+    //
+  }, []);
+
+  if (!categories)
+    return (
+      <>
+        <Loading />
+      </>
+    );
+
+  return (
+    <Card>
+      <CardHeader title="Add Products" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
+          {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue }) => (
+            <form onSubmit={handleSubmit}>
+              {values.product_image == '' ? (
+                <>
+                  <Button
+                    style={{ width: '100px', height: '100px', border: '5px dashed gray', borderRadius: '10px' }}
+                    onClick={() => {
+                      document.querySelector('#product_image').click();
+                      setLocalPreview(true);
+                    }}
+                  >
+                    <Box
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <AddCircleOutline style={{ fontSize: '2rem', color: 'gray' }} />
+                    </Box>
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Box>
+                    <div
+                      style={{
+                        width: '100px',
+                        height: '100px',
+                        backgroundSize: 'contain',
+                        backgroundPosition: 'center',
+                        backgroundRepeat: 'no-repeat',
+                        backgroundImage: local_preview
+                          ? local_preview_content
+                          : `url('/api/files/get?dir_prefix=${values.product_image}')`,
+                      }}
+                    ></div>
+                  </Box>
+                  <Button
+                    variant="contained"
+                    onClick={() => {
+                      setFieldValue('product_image', ['']);
+                      setFieldValue('clear_image', true);
+                      document.querySelector('#product_image').value = null;
+                    }}
+                  >
+                    Clear picture
+                  </Button>
+                  <input
+                    type="text"
+                    id="clear_image"
+                    name="clear_image"
+                    value={values['clear_image']}
+                    style={{ display: 'none' }}
+                  />
+                </>
+              )}
+
+              <input
+                type="file"
+                accept="image/jpeg, image/png"
+                id="product_image"
+                name="product_image"
+                multiple
+                onChange={event => {
+                  let input_files = event.target.files;
+                  let different_files_list = [];
+                  setFieldValue('product_image', [...input_files]);
+
+                  const reader = new FileReader();
+                  reader.onload = () => {
+                    setLocalPrevieContent(`url(${reader.result})`);
+                  };
+                  reader.readAsDataURL(input_files[0]);
+                }}
+                style={{ display: 'none' }}
+              />
+
+              <Grid container spacing={5} style={{ marginTop: '2rem' }}>
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    label="Name"
+                    placeholder="e.g. French Baguette ... "
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <ShortTextIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="name"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.name}
+                  />
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    label="Price"
+                    placeholder="e.g. 1.1,2,3 ..."
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <AttachMoneyIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    id="price"
+                    name="price"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.price}
+                  />
+                </Grid>
+
+                <Grid item xs={12}>
+                  <FormControl fullWidth>
+                    <InputLabel>Category</InputLabel>
+                    <Select
+                      name="cid"
+                      id="cid"
+                      label="Category"
+                      defaultValue={values.cid}
+                      onChange={handleChange}
+                      onBlur={handleBlur}
+                      value={values.cid}
+                    >
+                      {categories.map(c => (
+                        <MenuItem value={c.cid}>{c.name}</MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    multiline
+                    minRows={10}
+                    label="Description"
+                    placeholder="Description of product ... "
+                    sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <NotesIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="description"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.description}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <Stack direction="row" gap="1rem">
+                    <Button type="submit" variant="contained" size="large">
+                      Submit
+                    </Button>
+
+                    <Button
+                      type="reset"
+                      variant="outlined"
+                      size="large"
+                      onClick={() => {
+                        router.push('/admin/products');
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </Stack>
+                </Grid>
+              </Grid>
+            </form>
+          )}
+        </Formik>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormAddProducts;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormEditCategory.js

@@ -0,0 +1,117 @@
+// ** MUI Imports
+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 CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import InputAdornment from '@mui/material/InputAdornment';
+
+// ** Icons Imports
+import ShortTextIcon from '@mui/icons-material/ShortText';
+import NotesIcon from '@mui/icons-material/Notes';
+import { Link, Stack } from '@mui/material';
+import { Formik } from 'formik';
+import { useRouter } from 'next/router';
+
+const axios = require('axios');
+
+const FormEditCategories = ({ category }) => {
+  let router = useRouter();
+  let initialValues = category;
+
+  let validate = values => {
+    const errors = {};
+    // if (!values.email) {
+    //   errors.email = 'Required';
+    // } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+    //   errors.email = 'Invalid email address';
+    // }
+    return errors;
+  };
+
+  let onSubmit = async (values, { setSubmitting }) => {
+    await axios
+      .post('/api/categories/update', values)
+      .then(response => {
+        console.log(response.data);
+        router.replace('/admin/categories');
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  };
+
+  return (
+    <Card>
+      <CardHeader title="Edit Categories" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
+          {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
+            <form onSubmit={handleSubmit}>
+              <Grid container spacing={5}>
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    label="Name"
+                    placeholder="e.g. Bakery ... "
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <ShortTextIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="name"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.name}
+                  />
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    multiline
+                    minRows={10}
+                    label="Category detail"
+                    placeholder="Category description ... "
+                    sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <NotesIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="description"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.description}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <Stack direction="row" gap="1rem">
+                    <Button type="submit" variant="contained" size="large">
+                      Save
+                    </Button>
+
+                    <Link href="/admin/categories">
+                      <Button variant="outlined" size="large">
+                        Cancel
+                      </Button>
+                    </Link>
+                  </Stack>
+                </Grid>
+              </Grid>
+            </form>
+          )}
+        </Formik>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormEditCategories;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormEditProduct copy.js

@@ -0,0 +1,253 @@
+// ** MUI Imports
+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 CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import InputAdornment from '@mui/material/InputAdornment';
+
+// ** Icons Imports
+import Phone from 'mdi-material-ui/Phone';
+import EmailOutline from 'mdi-material-ui/EmailOutline';
+import AccountOutline from 'mdi-material-ui/AccountOutline';
+import MessageOutline from 'mdi-material-ui/MessageOutline';
+import { Box, FormControl, InputLabel, Link, MenuItem, Select, Stack } from '@mui/material';
+import { Formik } from 'formik';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+const axios = require('axios');
+
+const FormEditProducts = ({ product }) => {
+  let router = useRouter();
+  let initialValues = product;
+  let [categories, setCategories] = useState(null);
+  let [product_image_src, setProductImageSrc] = useState(null);
+
+  let validate = values => {
+    const errors = {};
+    // if (!values.email) {
+    //   errors.email = 'Required';
+    // } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+    //   errors.email = 'Invalid email address';
+    // }
+    return errors;
+  };
+
+  const fetchCategory = () => {
+    axios
+      .get('/api/categories/list')
+      .then(function (response) {
+        let { data } = response;
+        let { categories } = data;
+        setCategories(categories);
+      })
+      .catch(function (error) {
+        // handle error
+        console.log(error);
+      })
+      .finally(function () {
+        // always executed
+      });
+  };
+
+  let onSubmit = async (values, { setSubmitting }) => {
+    values['cid'] = parseInt(values['cid']);
+    const formData = new FormData();
+
+    formData.append('name', values['name']);
+    formData.append('description', values['description']);
+    formData.append('cid', values['cid']);
+    formData.append('pid', values['pid']);
+    formData.append('price', values['price']);
+    formData.append('product_image', values['product_image'][0]);
+
+    await fetch('/api/products/update', { method: 'POST', body: formData })
+      .then(response => {
+        router.replace('/admin/products');
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  };
+
+  useEffect(() => {
+    fetchCategory();
+    //
+  }, []);
+
+  if (!categories) return <>loading</>;
+
+  return (
+    <Card>
+      <CardHeader title="Edit Products" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
+          {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue }) => (
+            <form onSubmit={handleSubmit} encType="multipart/form-data">
+              <input
+                type="file"
+                id="product_image"
+                name="product_image"
+                multiple
+                onChange={event => {
+                  let input_files = event.target.files;
+                  let different_files_list = [];
+                  setFieldValue('product_image', [...input_files]);
+                  setFieldValue('clear_image', false);
+                }}
+              />
+
+              <Box>Current picture</Box>
+              <div
+                style={{
+                  width: '100px',
+                  height: '100px',
+                  backgroundImage: `url('/api/files/get?dir_prefix=${values.product_image}')`,
+                }}
+              ></div>
+
+              <div
+                style={{
+                  width: '100px',
+                  height: '100px',
+                  backgroundImage: `url('${product_image_src}')`,
+                }}
+              ></div>
+
+              <Box>Preview picture</Box>
+              <div
+                id="previewImage"
+                style={{
+                  width: '100px',
+                  height: '100px',
+                  backgroundImage: ``,
+                }}
+              ></div>
+              <Button variant="contained">Clear picture</Button>
+
+              <input type="file" id="myImage" accept="image/jpeg, image/png" />
+              <button
+                type="button"
+                onClick={() => {
+                  const input = document.getElementById('myImage');
+                  if (input.files && input.files[0]) {
+                    const reader = new FileReader();
+                    reader.onload = function (e) {
+                      document.getElementById('previewImage').src = e.target.result;
+                    };
+                    reader.readAsDataURL(input.files[0]);
+                  }
+                }}
+              >
+                Preview Image
+              </button>
+
+              <Grid container spacing={5}>
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    label="Product Name"
+                    placeholder="food ?"
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <AccountOutline />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="name"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.name}
+                  />
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    label="Product Price"
+                    placeholder="food ?"
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <AccountOutline />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    id="price"
+                    name="price"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.price}
+                  />
+                  change price icon here
+                </Grid>
+
+                <Grid item xs={12}>
+                  <FormControl fullWidth>
+                    <InputLabel>Product Category</InputLabel>
+                    <Select
+                      name="cid"
+                      id="cid"
+                      label="Product Category"
+                      defaultValue={values.cid}
+                      onChange={handleChange}
+                      onBlur={handleBlur}
+                      value={values.cid}
+                    >
+                      {categories.map(c => (
+                        <MenuItem value={c.cid}>{c.name}</MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    multiline
+                    minRows={10}
+                    label="Product detail"
+                    placeholder="Product detail insert here"
+                    sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <MessageOutline />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="description"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.description}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <Stack direction="row" gap="1rem">
+                    <Button type="submit" variant="contained" size="large">
+                      Save
+                    </Button>
+
+                    <Link href="/products">
+                      <Button variant="outlined" size="large">
+                        Cancel
+                      </Button>
+                    </Link>
+                  </Stack>
+                </Grid>
+              </Grid>
+            </form>
+          )}
+        </Formik>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormEditProducts;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormEditProduct.js

@@ -0,0 +1,285 @@
+// ** MUI Imports
+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 CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import InputAdornment from '@mui/material/InputAdornment';
+
+// ** Icons Imports
+import ShortTextIcon from '@mui/icons-material/ShortText';
+import NotesIcon from '@mui/icons-material/Notes';
+import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+
+import MessageOutline from 'mdi-material-ui/MessageOutline';
+import { Box, FormControl, InputLabel, Link, MenuItem, Select, Stack } from '@mui/material';
+import { Formik } from 'formik';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import AddCircleOutline from '@mui/icons-material/AddCircleOutline';
+import Loading from 'src/components/Loading';
+
+const axios = require('axios');
+
+const FormEditProducts = ({ product }) => {
+  let router = useRouter();
+  let initialValues = { ...product, clear_image: false };
+  let [categories, setCategories] = useState(null);
+  let [product_image_src, setProductImageSrc] = useState(null);
+  let [local_preview, setLocalPreview] = useState(false);
+  let [local_preview_content, setLocalPrevieContent] = useState(null);
+
+  let validate = values => {
+    const errors = {};
+    // if (!values.email) {
+    //   errors.email = 'Required';
+    // } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+    //   errors.email = 'Invalid email address';
+    // }
+    return errors;
+  };
+
+  const fetchCategory = () => {
+    axios
+      .get('/api/categories/list')
+      .then(function (response) {
+        let { data } = response;
+        let { categories } = data;
+        setCategories(categories);
+      })
+      .catch(function (error) {
+        // handle error
+        console.log(error);
+      })
+      .finally(function () {
+        // always executed
+      });
+  };
+
+  let onSubmit = async (values, { setSubmitting }) => {
+    values['cid'] = parseInt(values['cid']);
+    const formData = new FormData();
+
+    formData.append('name', values['name']);
+    formData.append('description', values['description']);
+    formData.append('cid', values['cid']);
+    formData.append('pid', values['pid']);
+    formData.append('price', values['price']);
+    formData.append('clear_image', values['clear_image']);
+    formData.append('product_image', values['product_image'][0]);
+
+    await fetch('/api/products/update', { method: 'POST', body: formData })
+      .then(response => {
+        router.replace('/admin/products');
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  };
+
+  useEffect(() => {
+    fetchCategory();
+    //
+  }, []);
+
+  if (!categories)
+    return (
+      <>
+        <Loading />
+      </>
+    );
+
+  return (
+    <Card>
+      <CardHeader title="Edit Products" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
+          {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting, setFieldValue }) => (
+            <form onSubmit={handleSubmit} encType="multipart/form-data">
+              {values.product_image == '' ? (
+                <>
+                  <Button
+                    style={{ width: '100px', height: '100px', border: '5px dashed gray', borderRadius: '10px' }}
+                    onClick={() => {
+                      document.querySelector('#product_image').click();
+                      setLocalPreview(true);
+                    }}
+                  >
+                    <Box
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <AddCircleOutline style={{ fontSize: '2rem', color: 'gray' }} />
+                    </Box>
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Box>
+                    <div
+                      style={{
+                        width: '100px',
+                        height: '100px',
+                        backgroundSize: 'contain',
+                        backgroundPosition: 'center',
+                        backgroundRepeat: 'no-repeat',
+                        backgroundImage: local_preview
+                          ? local_preview_content
+                          : `url('/api/files/get?dir_prefix=${values.product_image}')`,
+                      }}
+                    ></div>
+                  </Box>
+                  <Button
+                    variant="contained"
+                    onClick={() => {
+                      setFieldValue('product_image', ['']);
+                      setFieldValue('clear_image', true);
+                      document.querySelector('#product_image').value = null;
+                    }}
+                  >
+                    Clear picture
+                  </Button>
+
+                  <input
+                    type="text"
+                    id="clear_image"
+                    name="clear_image"
+                    value={values['clear_image']}
+                    style={{ display: 'none' }}
+                  />
+                </>
+              )}
+
+              <input
+                type="file"
+                accept="image/jpeg, image/png"
+                id="product_image"
+                name="product_image"
+                multiple
+                onChange={event => {
+                  let input_files = event.target.files;
+                  let different_files_list = [];
+                  setFieldValue('product_image', [...input_files]);
+
+                  const reader = new FileReader();
+                  reader.onload = () => {
+                    setLocalPrevieContent(`url(${reader.result})`);
+                  };
+                  reader.readAsDataURL(input_files[0]);
+                }}
+                style={{ display: 'none' }}
+              />
+
+              <Grid container spacing={5} style={{ marginTop: '2rem' }}>
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    label="Name"
+                    placeholder="e.g. French Baguette"
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <ShortTextIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="name"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.name}
+                  />
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    label=" Price"
+                    placeholder="e.g. 1.1,2,3 ..."
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <AttachMoneyIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="number"
+                    id="price"
+                    name="price"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.price}
+                  />
+                  change price icon here
+                </Grid>
+
+                <Grid item xs={12}>
+                  <FormControl fullWidth>
+                    <InputLabel>Category</InputLabel>
+                    <Select
+                      name="cid"
+                      id="cid"
+                      label="Category"
+                      defaultValue={values.cid}
+                      onChange={handleChange}
+                      onBlur={handleBlur}
+                      value={values.cid}
+                    >
+                      {categories.map(c => (
+                        <MenuItem value={c.cid}>{c.name}</MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </Grid>
+
+                <Grid item xs={12}>
+                  <TextField
+                    fullWidth
+                    multiline
+                    minRows={10}
+                    label="Description"
+                    placeholder="Description of product ... "
+                    sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <NotesIcon />
+                        </InputAdornment>
+                      ),
+                    }}
+                    type="text"
+                    name="description"
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={values.description}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <Stack direction="row" gap="1rem">
+                    <Button type="submit" variant="contained" size="large">
+                      Save
+                    </Button>
+
+                    <Link href="/admin/products">
+                      <Button variant="outlined" size="large">
+                        Cancel
+                      </Button>
+                    </Link>
+                  </Stack>
+                </Grid>
+              </Grid>
+            </form>
+          )}
+        </Formik>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormEditProducts;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormLayoutsAlignment.js

@@ -0,0 +1,108 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import CardHeader from '@mui/material/CardHeader';
+import Typography from '@mui/material/Typography';
+import InputLabel from '@mui/material/InputLabel';
+import IconButton from '@mui/material/IconButton';
+import CardContent from '@mui/material/CardContent';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputAdornment from '@mui/material/InputAdornment';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+// ** Icons Imports
+import EyeOutline from 'mdi-material-ui/EyeOutline';
+import EyeOffOutline from 'mdi-material-ui/EyeOffOutline';
+
+// Styled component for the form
+const Form = styled('form')(({ theme }) => ({
+  maxWidth: 400,
+  padding: theme.spacing(12),
+  borderRadius: theme.shape.borderRadius,
+  border: `1px solid ${theme.palette.divider}`,
+}));
+
+const FormLayoutsAlignment = () => {
+  // ** State
+  const [values, setValues] = useState({
+    password: '',
+    showPassword: false,
+  });
+
+  // Handle Password
+  const handleChange = prop => event => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleClickShowPassword = () => {
+    setValues({ ...values, showPassword: !values.showPassword });
+  };
+
+  const handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
+  return (
+    <Card>
+      <CardHeader title="Form Alignment" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent sx={{ minHeight: 500, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Form onSubmit={e => e.preventDefault()}>
+          <Grid container spacing={5}>
+            <Grid item xs={12}>
+              <Typography variant="h5">Sign In</Typography>
+            </Grid>
+            <Grid item xs={12}>
+              <TextField fullWidth label="Username" placeholder="carterLeonard" />
+            </Grid>
+            <Grid item xs={12}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="form-layouts-alignment-password">Password</InputLabel>
+                <OutlinedInput
+                  label="Password"
+                  value={values.password}
+                  onChange={handleChange('password')}
+                  id="form-layouts-alignment-password"
+                  type={values.showPassword ? 'text' : 'password'}
+                  endAdornment={
+                    <InputAdornment position="end">
+                      <IconButton
+                        edge="end"
+                        onClick={handleClickShowPassword}
+                        onMouseDown={handleMouseDownPassword}
+                        aria-label="toggle password visibility"
+                      >
+                        {values.showPassword ? <EyeOutline /> : <EyeOffOutline />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                />
+              </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+              <FormControlLabel
+                label="Remember me"
+                control={<Checkbox name="form-layouts-alignment-checkbox" />}
+                sx={{ '& .MuiButtonBase-root': { paddingTop: 0, paddingBottom: 0 } }}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <Button size="large" type="submit" variant="contained" sx={{ width: '100%' }}>
+                Login
+              </Button>
+            </Grid>
+          </Grid>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormLayoutsAlignment;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormLayoutsBasic.js

@@ -0,0 +1,159 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import CardHeader from '@mui/material/CardHeader';
+import InputLabel from '@mui/material/InputLabel';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputAdornment from '@mui/material/InputAdornment';
+import FormHelperText from '@mui/material/FormHelperText';
+
+// ** Icons Imports
+import EyeOutline from 'mdi-material-ui/EyeOutline';
+import EyeOffOutline from 'mdi-material-ui/EyeOffOutline';
+
+const FormLayoutsBasic = () => {
+  // ** States
+  const [values, setValues] = useState({
+    password: '',
+    showPassword: false,
+  });
+
+  const [confirmPassValues, setConfirmPassValues] = useState({
+    password: '',
+    showPassword: false,
+  });
+
+  const handleChange = prop => event => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleConfirmPassChange = prop => event => {
+    setConfirmPassValues({ ...confirmPassValues, [prop]: event.target.value });
+  };
+
+  const handleClickShowPassword = () => {
+    setValues({ ...values, showPassword: !values.showPassword });
+  };
+
+  const handleClickConfirmPassShow = () => {
+    setConfirmPassValues({ ...confirmPassValues, showPassword: !confirmPassValues.showPassword });
+  };
+
+  const handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
+  return (
+    <Card>
+      <CardHeader title="Basic" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <form onSubmit={e => e.preventDefault()}>
+          <Grid container spacing={5}>
+            <Grid item xs={12}>
+              <TextField fullWidth label="Name" placeholder="Leonard Carter" />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                fullWidth
+                type="email"
+                label="Email"
+                placeholder="carterleonard@gmail.com"
+                helperText="You can use letters, numbers & periods"
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="form-layouts-basic-password">Password</InputLabel>
+                <OutlinedInput
+                  label="Password"
+                  value={values.password}
+                  id="form-layouts-basic-password"
+                  onChange={handleChange('password')}
+                  type={values.showPassword ? 'text' : 'password'}
+                  aria-describedby="form-layouts-basic-password-helper"
+                  endAdornment={
+                    <InputAdornment position="end">
+                      <IconButton
+                        edge="end"
+                        onClick={handleClickShowPassword}
+                        onMouseDown={handleMouseDownPassword}
+                        aria-label="toggle password visibility"
+                      >
+                        {values.showPassword ? <EyeOutline /> : <EyeOffOutline />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                />
+                <FormHelperText id="form-layouts-basic-password-helper">
+                  Use 8 or more characters with a mix of letters, numbers & symbols
+                </FormHelperText>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="form-layouts-confirm-password">Confirm Password</InputLabel>
+                <OutlinedInput
+                  label="Confirm Password"
+                  value={confirmPassValues.password}
+                  id="form-layouts-confirm-password"
+                  onChange={handleConfirmPassChange('password')}
+                  aria-describedby="form-layouts-confirm-password-helper"
+                  type={confirmPassValues.showPassword ? 'text' : 'password'}
+                  endAdornment={
+                    <InputAdornment position="end">
+                      <IconButton
+                        edge="end"
+                        onClick={handleClickConfirmPassShow}
+                        onMouseDown={handleMouseDownPassword}
+                        aria-label="toggle password visibility"
+                      >
+                        {confirmPassValues.showPassword ? <EyeOutline /> : <EyeOffOutline />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                />
+                <FormHelperText id="form-layouts-confirm-password-helper">
+                  Make sure to type the same password as above
+                </FormHelperText>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+              <Box
+                sx={{
+                  gap: 5,
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Button type="submit" variant="contained" size="large">
+                  Get Started!
+                </Button>
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Typography sx={{ mr: 2 }}>Already have an account?</Typography>
+                  <Link href="/" onClick={e => e.preventDefault()}>
+                    Log in
+                  </Link>
+                </Box>
+              </Box>
+            </Grid>
+          </Grid>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormLayoutsBasic;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormLayoutsIcons.js

@@ -0,0 +1,97 @@
+// ** MUI Imports
+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 CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import InputAdornment from '@mui/material/InputAdornment';
+
+// ** Icons Imports
+import Phone from 'mdi-material-ui/Phone';
+import EmailOutline from 'mdi-material-ui/EmailOutline';
+import AccountOutline from 'mdi-material-ui/AccountOutline';
+import MessageOutline from 'mdi-material-ui/MessageOutline';
+
+const FormLayoutsIcons = () => {
+  return (
+    <Card>
+      <CardHeader title="Basic with Icons" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <form onSubmit={e => e.preventDefault()}>
+          <Grid container spacing={5}>
+            <Grid item xs={12}>
+              <TextField
+                fullWidth
+                label="Full Name"
+                placeholder="Leonard Carter"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AccountOutline />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                fullWidth
+                type="email"
+                label="Email"
+                placeholder="carterleonard@gmail.com"
+                helperText="You can use letters, numbers & periods"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <EmailOutline />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                fullWidth
+                type="number"
+                label="Phone No."
+                placeholder="+1-123-456-8790"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Phone />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                fullWidth
+                multiline
+                minRows={3}
+                label="Message"
+                placeholder="Bio..."
+                sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <MessageOutline />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <Button type="submit" variant="contained" size="large">
+                Submit
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormLayoutsIcons;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormLayoutsSeparator.js

@@ -0,0 +1,223 @@
+// ** React Imports
+import { forwardRef, useState } from 'react';
+
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import CardHeader from '@mui/material/CardHeader';
+import InputLabel from '@mui/material/InputLabel';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputAdornment from '@mui/material/InputAdornment';
+import Select from '@mui/material/Select';
+
+// ** Third Party Imports
+import DatePicker from 'react-datepicker';
+
+// ** Icons Imports
+import EyeOutline from 'mdi-material-ui/EyeOutline';
+import EyeOffOutline from 'mdi-material-ui/EyeOffOutline';
+
+const CustomInput = forwardRef((props, ref) => {
+  return <TextField fullWidth {...props} inputRef={ref} label="Birth Date" autoComplete="off" />;
+});
+
+const FormLayoutsSeparator = () => {
+  // ** States
+  const [language, setLanguage] = useState([]);
+  const [date, setDate] = useState(null);
+
+  const [values, setValues] = useState({
+    password: '',
+    password2: '',
+    showPassword: false,
+    showPassword2: false,
+  });
+
+  // Handle Password
+  const handlePasswordChange = prop => event => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleClickShowPassword = () => {
+    setValues({ ...values, showPassword: !values.showPassword });
+  };
+
+  const handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
+  // Handle Confirm Password
+  const handleConfirmChange = prop => event => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleClickShowConfirmPassword = () => {
+    setValues({ ...values, showPassword2: !values.showPassword2 });
+  };
+
+  const handleMouseDownConfirmPassword = event => {
+    event.preventDefault();
+  };
+
+  // Handle Select
+  const handleSelectChange = event => {
+    setLanguage(event.target.value);
+  };
+
+  return (
+    <Card>
+      <CardHeader title="Multi Column with Form Separator" titleTypographyProps={{ variant: 'h6' }} />
+      <Divider sx={{ margin: 0 }} />
+      <form onSubmit={e => e.preventDefault()}>
+        <CardContent>
+          <Grid container spacing={5}>
+            <Grid item xs={12}>
+              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                1. Account Details
+              </Typography>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TextField fullWidth label="Username" placeholder="carterLeonard" />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TextField fullWidth type="email" label="Email" placeholder="carterleonard@gmail.com" />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="form-layouts-separator-password">Password</InputLabel>
+                <OutlinedInput
+                  label="Password"
+                  value={values.password}
+                  id="form-layouts-separator-password"
+                  onChange={handlePasswordChange('password')}
+                  type={values.showPassword ? 'text' : 'password'}
+                  endAdornment={
+                    <InputAdornment position="end">
+                      <IconButton
+                        edge="end"
+                        onClick={handleClickShowPassword}
+                        onMouseDown={handleMouseDownPassword}
+                        aria-label="toggle password visibility"
+                      >
+                        {values.showPassword ? <EyeOutline /> : <EyeOffOutline />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                />
+              </FormControl>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="form-layouts-separator-password-2">Confirm Password</InputLabel>
+                <OutlinedInput
+                  value={values.password2}
+                  label="Confirm Password"
+                  id="form-layouts-separator-password-2"
+                  onChange={handleConfirmChange('password2')}
+                  type={values.showPassword2 ? 'text' : 'password'}
+                  endAdornment={
+                    <InputAdornment position="end">
+                      <IconButton
+                        edge="end"
+                        aria-label="toggle password visibility"
+                        onClick={handleClickShowConfirmPassword}
+                        onMouseDown={handleMouseDownConfirmPassword}
+                      >
+                        {values.showPassword2 ? <EyeOutline /> : <EyeOffOutline />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                />
+              </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+              <Divider sx={{ marginBottom: 0 }} />
+            </Grid>
+            <Grid item xs={12}>
+              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                2. Personal Info
+              </Typography>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TextField fullWidth label="First Name" placeholder="Leonard" />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TextField fullWidth label="Last Name" placeholder="Carter" />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <FormControl fullWidth>
+                <InputLabel id="form-layouts-separator-select-label">Country</InputLabel>
+                <Select
+                  label="Country"
+                  defaultValue=""
+                  id="form-layouts-separator-select"
+                  labelId="form-layouts-separator-select-label"
+                >
+                  <MenuItem value="UK">UK</MenuItem>
+                  <MenuItem value="USA">USA</MenuItem>
+                  <MenuItem value="Australia">Australia</MenuItem>
+                  <MenuItem value="Germany">Germany</MenuItem>
+                </Select>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <FormControl fullWidth>
+                <InputLabel id="form-layouts-separator-multiple-select-label">Language</InputLabel>
+                <Select
+                  multiple
+                  value={language}
+                  onChange={handleSelectChange}
+                  id="form-layouts-separator-multiple-select"
+                  labelId="form-layouts-separator-multiple-select-label"
+                  input={<OutlinedInput label="Language" id="select-multiple-language" />}
+                >
+                  <MenuItem value="English">English</MenuItem>
+                  <MenuItem value="French">French</MenuItem>
+                  <MenuItem value="Spanish">Spanish</MenuItem>
+                  <MenuItem value="Portuguese">Portuguese</MenuItem>
+                  <MenuItem value="Italian">Italian</MenuItem>
+                  <MenuItem value="German">German</MenuItem>
+                  <MenuItem value="Arabic">Arabic</MenuItem>
+                </Select>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <DatePicker
+                selected={date}
+                showYearDropdown
+                showMonthDropdown
+                placeholderText="MM-DD-YYYY"
+                customInput={<CustomInput />}
+                id="form-layouts-separator-date"
+                onChange={date => setDate(date)}
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TextField fullWidth label="Phone No." placeholder="+1-123-456-8790" />
+            </Grid>
+          </Grid>
+        </CardContent>
+        <Divider sx={{ margin: 0 }} />
+        <CardActions>
+          <Button size="large" type="submit" sx={{ mr: 2 }} variant="contained">
+            Submit
+          </Button>
+          <Button size="large" color="secondary" variant="outlined">
+            Cancel
+          </Button>
+        </CardActions>
+      </form>
+    </Card>
+  );
+};
+
+export default FormLayoutsSeparator;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormViewCategory.js

@@ -0,0 +1,125 @@
+// ** MUI Imports
+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 CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import InputAdornment from '@mui/material/InputAdornment';
+
+// ** Icons Imports
+import ShortTextIcon from '@mui/icons-material/ShortText';
+import NotesIcon from '@mui/icons-material/Notes';
+import { Link, Typography } from '@mui/material';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import Loading from 'src/components/Loading';
+import fetchCategory from 'src/api/fetchCategory';
+import fetchListByCategory from 'src/api/fetchListByCategory';
+
+const FormViewCategory = () => {
+  let router = useRouter();
+  let { cid } = router.query;
+
+  let [products, setProducts] = useState(null);
+  let [category, setCategory] = useState(null);
+
+  useEffect(() => {
+    const update = async () => {
+      Promise.all([fetchCategory({ cid }), fetchListByCategory({ cid: 1 })])
+        .then(([categoryResponse, productsResponse]) => {
+          let { data: categoryData } = categoryResponse;
+          let { category: fetchedCategory } = categoryData;
+          setCategory(fetchedCategory);
+
+          let { data: productsData } = productsResponse;
+          let { products: fetchedProducts } = productsData;
+          setProducts(fetchedProducts);
+        })
+        .catch(error => {
+          console.error(error);
+        });
+    };
+    if (cid) update();
+  }, [cid]);
+
+  if (!category || !products)
+    return (
+      <>
+        <Loading />
+      </>
+    );
+
+  return (
+    <Card>
+      <CardHeader title="View Categories" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <Grid container spacing={5}>
+          <Grid item xs={12}>
+            <TextField
+              disabled
+              fullWidth
+              label="Name"
+              placeholder="e.g. Bakery ... "
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <ShortTextIcon />
+                  </InputAdornment>
+                ),
+              }}
+              type="text"
+              name="name"
+              value={category.name}
+            />
+          </Grid>
+
+          <Grid item xs={12}>
+            <TextField
+              disabled
+              fullWidth
+              multiline
+              minRows={10}
+              label="Category detail"
+              placeholder="Category description ... "
+              sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <NotesIcon />
+                  </InputAdornment>
+                ),
+              }}
+              type="text"
+              name="description"
+              value={category.description}
+            />
+          </Grid>
+
+          <Grid item xs={12}>
+            <Typography variant="h6">Product in this category</Typography>
+            <ul>
+              {products.map(p => {
+                return (
+                  <li>
+                    {p.name}, {p.description} {p.price}
+                  </li>
+                );
+              })}
+            </ul>
+          </Grid>
+
+          <Grid item xs={12}>
+            <Link href="/admin/categories">
+              <Button variant="contained" size="large">
+                {'<'} Back
+              </Button>
+            </Link>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormViewCategory;

tsc1877/task1/aws/workspace/admin/src/views/form-layouts/FormViewProduct.js

@@ -0,0 +1,93 @@
+// ** MUI Imports
+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 CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import InputAdornment from '@mui/material/InputAdornment';
+
+// ** Icons Imports
+import ShortTextIcon from '@mui/icons-material/ShortText';
+import NotesIcon from '@mui/icons-material/Notes';
+import AccountOutline from 'mdi-material-ui/AccountOutline';
+import MessageOutline from 'mdi-material-ui/MessageOutline';
+import { Link, Stack } from '@mui/material';
+import { Formik } from 'formik';
+import { useRouter } from 'next/router';
+
+const axios = require('axios');
+
+const FormViewProduct = ({ product }) => {
+  return (
+    <Card>
+      <CardHeader title="View Products" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <Grid container spacing={5}>
+          <Grid item xs={12}>
+            <div
+              style={{
+                width: '600px',
+                height: '400px',
+                backgroundImage: `url('/api/files/get?dir_prefix=${product.product_image}')`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                backgroundRepeat: 'no-repeat',
+              }}
+            ></div>
+          </Grid>
+
+          <Grid item xs={12}>
+            <TextField
+              disabled
+              fullWidth
+              label="Name"
+              placeholder="e.g. French Baguette"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <ShortTextIcon />
+                  </InputAdornment>
+                ),
+              }}
+              type="text"
+              name="name"
+              value={product.name}
+            />
+          </Grid>
+
+          <Grid item xs={12}>
+            <TextField
+              disabled
+              fullWidth
+              multiline
+              minRows={10}
+              label="Product detail"
+              placeholder="Product detail insert here"
+              sx={{ '& .MuiOutlinedInput-root': { alignItems: 'baseline' } }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <NotesIcon />
+                  </InputAdornment>
+                ),
+              }}
+              type="text"
+              name="description"
+              value={product.description}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <Link href="/admin/products">
+              <Button variant="contained" size="large">
+                {'<'} Back
+              </Button>
+            </Link>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FormViewProduct;

tsc1877/task1/aws/workspace/admin/src/views/pages/auth/FooterIllustration.js

@@ -0,0 +1,50 @@
+// ** React Imports
+import { Fragment } from 'react';
+
+// ** MUI Components
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { styled, useTheme } from '@mui/material/styles';
+
+// Styled Components
+const MaskImg = styled('img')(() => ({
+  bottom: 0,
+  zIndex: -1,
+  width: '100%',
+  position: 'absolute',
+}));
+
+const Tree1Img = styled('img')(() => ({
+  left: 0,
+  bottom: 0,
+  position: 'absolute',
+}));
+
+const Tree2Img = styled('img')(() => ({
+  right: 0,
+  bottom: 0,
+  position: 'absolute',
+}));
+
+const FooterIllustrationsV1 = props => {
+  // ** Props
+  const { image1, image2 } = props;
+
+  // ** Hook
+  const theme = useTheme();
+
+  // ** Vars
+  const hidden = useMediaQuery(theme.breakpoints.down('md'));
+  if (!hidden) {
+    return (
+      <Fragment>
+        {image1 || <Tree1Img alt="tree" src="/images/pages/auth-v1-tree.png" />}
+        <MaskImg alt="mask" src={`/images/pages/auth-v1-mask-${theme.palette.mode}.png`} />
+        {image2 || <Tree2Img alt="tree-2" src="/images/pages/auth-v1-tree-2.png" />}
+      </Fragment>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default FooterIllustrationsV1;

tsc1877/task1/aws/workspace/admin/src/views/pages/misc/FooterIllustrations.js

@@ -0,0 +1,47 @@
+// ** React Imports
+import { Fragment } from 'react';
+
+// ** MUI Components
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { styled, useTheme } from '@mui/material/styles';
+
+// Styled Components
+const MaskImg = styled('img')(() => ({
+  bottom: 0,
+  zIndex: -1,
+  width: '100%',
+  position: 'absolute',
+}));
+
+const TreeImg = styled('img')(({ theme }) => ({
+  left: '2.25rem',
+  bottom: '4.25rem',
+  position: 'absolute',
+  [theme.breakpoints.down('lg')]: {
+    left: 0,
+    bottom: 0,
+  },
+}));
+
+const FooterIllustrations = props => {
+  // ** Props
+  const { image } = props;
+
+  // ** Hook
+  const theme = useTheme();
+
+  // ** Vars
+  const hidden = useMediaQuery(theme.breakpoints.down('md'));
+  if (!hidden) {
+    return (
+      <Fragment>
+        {image || <TreeImg alt="tree" src="/images/pages/tree-2.png" />}
+        <MaskImg alt="mask" src={`/images/pages/misc-mask-${theme.palette.mode}.png`} />
+      </Fragment>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default FooterIllustrations;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableBasic.js

@@ -0,0 +1,60 @@
+// ** MUI Imports
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+
+const createData = (name, calories, fat, carbs, protein) => {
+  return { name, calories, fat, carbs, protein };
+};
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+const TableBasic = () => {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat (g)</TableCell>
+            <TableCell align="right">Carbs (g)</TableCell>
+            <TableCell align="right">Protein (g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map(row => (
+            <TableRow
+              key={row.name}
+              sx={{
+                '&:last-of-type td, &:last-of-type th': {
+                  border: 0,
+                },
+              }}
+            >
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.calories}</TableCell>
+              <TableCell align="right">{row.fat}</TableCell>
+              <TableCell align="right">{row.carbs}</TableCell>
+              <TableCell align="right">{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TableBasic;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableCategories.js

@@ -0,0 +1,111 @@
+// ** MUI Imports
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+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 { Button, Stack } from '@mui/material';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import Loading from 'src/components/Loading';
+
+const TableCategories = () => {
+  const router = useRouter();
+  const [categories, setCategories] = useState(null);
+
+  const handleViewClick = cid => {
+    router.push(`/admin/categories/${cid}/view`);
+  };
+
+  const fetchCategory = () => {
+    axios
+      .get('/api/categories/list')
+      .then(function (response) {
+        let { data } = response;
+        let { categories } = data;
+        setCategories(categories);
+      })
+      .catch(function (error) {
+        // handle error
+        console.log(error);
+      })
+      .finally(function () {
+        // always executed
+      });
+  };
+
+  const handleEditClick = cid => {
+    router.push(`/admin/categories/${cid}/edit`);
+  };
+
+  const handleDeleteClick = cid => {
+    axios
+      .delete(`/api/categories/delete?cid=${cid}`)
+      .then(res => {
+        fetchCategory();
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  };
+
+  useEffect(() => {
+    fetchCategory();
+  }, []);
+
+  if (!categories)
+    return (
+      <>
+        <Loading />
+      </>
+    );
+
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>id</TableCell>
+            <TableCell align="left">Name</TableCell>
+            <TableCell align="left">Description</TableCell>
+            <TableCell align="right">Action</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {categories.map(c => (
+            <TableRow
+              key={c.name}
+              sx={{
+                '&:last-of-type td, &:last-of-type th': {
+                  border: 0,
+                },
+              }}
+            >
+              <TableCell component="th" scope="row">
+                {c.cid}
+              </TableCell>
+              <TableCell align="left">{c.name}</TableCell>
+              <TableCell align="left">{c.description}</TableCell>
+              <TableCell align="right">
+                <Button variant="outlined" onClick={_ => handleViewClick(c.cid)}>
+                  View
+                </Button>
+                <Button variant="outlined" onClick={_ => handleEditClick(c.cid)}>
+                  Edit
+                </Button>
+                <Button variant="outlined" onClick={_ => handleDeleteClick(c.cid)}>
+                  Delete
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TableCategories;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableCollapsible.js

@@ -0,0 +1,136 @@
+// ** React Imports
+import { useState, Fragment } from 'react';
+
+// ** MUI Imports
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import Collapse from '@mui/material/Collapse';
+import TableRow from '@mui/material/TableRow';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import TableContainer from '@mui/material/TableContainer';
+
+// ** Icons Imports
+import ChevronUp from 'mdi-material-ui/ChevronUp';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
+
+const createData = (name, calories, fat, carbs, protein, price) => {
+  return {
+    name,
+    calories,
+    fat,
+    carbs,
+    protein,
+    price,
+    history: [
+      {
+        date: '2020-01-05',
+        customerId: '11091700',
+        amount: 3,
+      },
+      {
+        date: '2020-01-02',
+        customerId: 'Anonymous',
+        amount: 1,
+      },
+    ],
+  };
+};
+
+const Row = props => {
+  // ** Props
+  const { row } = props;
+
+  // ** State
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Fragment>
+      <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+        <TableCell>
+          <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+            {open ? <ChevronUp /> : <ChevronDown />}
+          </IconButton>
+        </TableCell>
+        <TableCell component="th" scope="row">
+          {row.name}
+        </TableCell>
+        <TableCell align="right">{row.calories}</TableCell>
+        <TableCell align="right">{row.fat}</TableCell>
+        <TableCell align="right">{row.carbs}</TableCell>
+        <TableCell align="right">{row.protein}</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell colSpan={6} sx={{ py: '0 !important' }}>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Box sx={{ m: 2 }}>
+              <Typography variant="h6" gutterBottom component="div">
+                History
+              </Typography>
+              <Table size="small" aria-label="purchases">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Date</TableCell>
+                    <TableCell>Customer</TableCell>
+                    <TableCell align="right">Amount</TableCell>
+                    <TableCell align="right">Total price ($)</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {row.history.map(historyRow => (
+                    <TableRow key={historyRow.date}>
+                      <TableCell component="th" scope="row">
+                        {historyRow.date}
+                      </TableCell>
+                      <TableCell>{historyRow.customerId}</TableCell>
+                      <TableCell align="right">{historyRow.amount}</TableCell>
+                      <TableCell align="right">{Math.round(historyRow.amount * row.price * 100) / 100}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </Box>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </Fragment>
+  );
+};
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
+  createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
+  createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
+  createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
+];
+
+const TableCollapsible = () => {
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="collapsible table">
+        <TableHead>
+          <TableRow>
+            <TableCell />
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat (g)</TableCell>
+            <TableCell align="right">Carbs (g)</TableCell>
+            <TableCell align="right">Protein (g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map(row => (
+            <Row key={row.name} row={row} />
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TableCollapsible;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableCustomized.js

@@ -0,0 +1,75 @@
+// ** MUI Imports
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import { styled } from '@mui/material/styles';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableContainer from '@mui/material/TableContainer';
+import TableRow from '@mui/material/TableRow';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  [`&.${tableCellClasses.head}`]: {
+    color: theme.palette.common.white,
+    backgroundColor: theme.palette.common.black,
+  },
+  [`&.${tableCellClasses.body}`]: {
+    fontSize: 14,
+  },
+}));
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  '&:nth-of-type(odd)': {
+    backgroundColor: theme.palette.action.hover,
+  },
+
+  // hide last border
+  '&:last-of-type td, &:last-of-type th': {
+    border: 0,
+  },
+}));
+
+const createData = (name, calories, fat, carbs, protein) => {
+  return { name, calories, fat, carbs, protein };
+};
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+const TableCustomized = () => {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 700 }} aria-label="customized table">
+        <TableHead>
+          <TableRow>
+            <StyledTableCell>Dessert (100g serving)</StyledTableCell>
+            <StyledTableCell align="right">Calories</StyledTableCell>
+            <StyledTableCell align="right">Fat (g)</StyledTableCell>
+            <StyledTableCell align="right">Carbs (g)</StyledTableCell>
+            <StyledTableCell align="right">Protein (g)</StyledTableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map(row => (
+            <StyledTableRow key={row.name}>
+              <StyledTableCell component="th" scope="row">
+                {row.name}
+              </StyledTableCell>
+              <StyledTableCell align="right">{row.calories}</StyledTableCell>
+              <StyledTableCell align="right">{row.fat}</StyledTableCell>
+              <StyledTableCell align="right">{row.carbs}</StyledTableCell>
+              <StyledTableCell align="right">{row.protein}</StyledTableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TableCustomized;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableDense.js

@@ -0,0 +1,53 @@
+// ** MUI Imports
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+
+const createData = (name, calories, fat, carbs, protein) => {
+  return { name, calories, fat, carbs, protein };
+};
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+const TableDense = () => {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat (g)</TableCell>
+            <TableCell align="right">Carbs (g)</TableCell>
+            <TableCell align="right">Protein (g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map(row => (
+            <TableRow key={row.name} sx={{ '&:last-of-type  td, &:last-of-type  th': { border: 0 } }}>
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.calories}</TableCell>
+              <TableCell align="right">{row.fat}</TableCell>
+              <TableCell align="right">{row.carbs}</TableCell>
+              <TableCell align="right">{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TableDense;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableInventory.js

@@ -0,0 +1,191 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+// ** MUI Imports
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+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 { Box, Button, InputAdornment, Stack, TextField, Typography } from '@mui/material';
+
+import Inventory2Icon from '@mui/icons-material/Inventory2';
+import AddCircleOutline from '@mui/icons-material/AddCircleOutline';
+import fetchProduct from 'src/api/fetchProduct';
+import fetchProducts from 'src/api/fetchProducts';
+import fetchCategories from 'src/api/fetchCategories';
+import Loading from 'src/components/Loading';
+
+const TableInventory = () => {
+  const router = useRouter();
+  const [products, setProducts] = useState(null);
+  const [categories, setCategories] = useState(null);
+
+  const categoriNameLookup = cid => {
+    if (categories && cid) {
+      let result = categories.filter(c => c.cid == cid)[0];
+      if (result) {
+        return result.name;
+      } else {
+        return '--';
+      }
+    }
+  };
+
+  const handleInventoryAddClick = async ({ pid, count }) => {
+    try {
+      let response = await axios.post('/api/inventory/check_in', { pid, count, description: '' });
+      let { data } = await response;
+      alert('item added');
+
+      let result = await fetchProducts();
+      setProducts(result);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    const update = async () => {
+      let result;
+      result = await fetchProducts();
+      setProducts(result);
+
+      result = await fetchCategories();
+      setCategories(result);
+    };
+
+    update();
+  }, []);
+
+  if (!products || !categories)
+    return (
+      <>
+        <Loading />
+      </>
+    );
+
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>id</TableCell>
+            <TableCell align="left">Image</TableCell>
+            <TableCell align="left">Name</TableCell>
+            <TableCell align="left">Category</TableCell>
+            <TableCell align="left">unsold</TableCell>
+            <TableCell align="left">sold</TableCell>
+            <TableCell align="left">Inventory Add</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {products.map((p, idx) => {
+            let category = categories.filter(c => c.cid == p.cid)[0];
+
+            return (
+              <TableRow
+                key={idx}
+                sx={{
+                  '&:last-of-type td, &:last-of-type th': {
+                    border: 0,
+                  },
+                }}
+              >
+                <TableCell component="th" scope="row">
+                  {p.pid}
+                </TableCell>
+
+                <TableCell align="left">
+                  <div
+                    style={{
+                      backgroundImage: `url('/api/files/get?dir_prefix=${p.product_image}')`,
+                      backgroundColor: `lightgrey`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                      backgroundRepeat: 'no-repeat',
+                      height: '100px',
+                      width: '100px',
+                      borderRadius: '5px',
+                    }}
+                  />
+                </TableCell>
+
+                <TableCell align="left">
+                  <Typography variant="paragraph" fontWeight={'bold'}>
+                    {p.name}
+                  </Typography>
+                </TableCell>
+                <TableCell align="left">
+                  <Typography variant="paragraph">{categoriNameLookup(p.cid)}</Typography>
+                </TableCell>
+                <TableCell align="left">{p.unsold_count}</TableCell>
+                <TableCell align="left">{p.sold_count}</TableCell>
+                <TableCell align="left">
+                  <Stack direction="row" spacing="1rem">
+                    <TextField
+                      variant="standard"
+                      placeholder={1}
+                      defaultValue={1}
+                      InputProps={{
+                        min: 1,
+                        max: 50,
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <Inventory2Icon />
+                          </InputAdornment>
+                        ),
+                      }}
+                      type="number"
+                      id={`pid_${p.pid}`}
+                      sx={{ width: '100px' }}
+                      onBlur={e => {
+                        try {
+                          if (e.target.value < 1) {
+                            e.target.value = 1;
+                          }
+                        } catch (error) {
+                          e.target.value = 1;
+                        }
+                      }}
+                    />
+
+                    <Button
+                      size="small"
+                      variant="outlined"
+                      onClick={_ => {
+                        try {
+                          let count_raw = document.querySelector(`#pid_${p.pid}`).value;
+                          let count = parseInt(count_raw);
+
+                          if (count > 0) {
+                            handleInventoryAddClick({ pid: p.pid, count });
+                            document.querySelector(`#pid_${p.pid}`).value = 1;
+                          } else {
+                            alert('please check count');
+                          }
+                        } catch (error) {
+                          console.error(error);
+                        }
+                      }}
+                    >
+                      <Stack direction="row" spacing={'0.2rem'}>
+                        <AddCircleOutline />
+                        <Box>Add</Box>
+                      </Stack>
+                    </Button>
+                  </Stack>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TableInventory;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableOrder.js

@@ -0,0 +1,101 @@
+// ** MUI Imports
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+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 NotesIcon from '@mui/icons-material/Notes';
+import crypto from 'crypto';
+import { Box, Stack, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import fetchCustomerOrders from 'src/api/fetchCustomerOrders';
+import Loading from 'src/components/Loading';
+import fetchAllOrders from 'src/api/fetchAllOrders';
+
+const TableOrder = () => {
+  let [orders, setOrders] = useState(null);
+  useEffect(() => {
+    const fetchOrder = async () => {
+      try {
+        let session_raw = localStorage.getItem('session');
+        let { session } = JSON.parse(session_raw);
+        let fetch_orders = await fetchAllOrders({ session });
+        setOrders(fetch_orders);
+      } catch (error) {
+        console.error('error during fetching orders');
+      }
+    };
+    fetchOrder();
+  }, []);
+
+  if (!orders)
+    return (
+      <>
+        <Loading />
+      </>
+    );
+
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ width: '100%', minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell align="center"></TableCell>
+            {/* <TableCell align="center">custom_id</TableCell> */}
+            {/* <TableCell align="center">username</TableCell> */}
+            <TableCell align="center">invoice_id</TableCell>
+            <TableCell align="center">currency</TableCell>
+            <TableCell align="center">order status</TableCell>
+            <TableCell align="center">username</TableCell>
+            <TableCell align="center">amount</TableCell>
+            <TableCell align="center">items</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {orders.map(row => (
+            <TableRow
+              key={row.name}
+              sx={{
+                '&:last-of-type td, &:last-of-type th': {
+                  border: 0,
+                },
+              }}
+            >
+              <TableCell component="th" scope="row">
+                <NotesIcon />
+              </TableCell>
+              {/* <TableCell align="right">{row.custom_id}</TableCell> */}
+              {/* <TableCell align="right">{row.username}</TableCell> */}
+              <TableCell align="right">{row.invoice_id}</TableCell>
+              <TableCell align="right">{row.currency_code}</TableCell>
+              <TableCell align="right">{row.order_status}</TableCell>
+              <TableCell align="right">{row.username}</TableCell>
+              <TableCell align="right">{parseInt(row.amount).toFixed(2)}</TableCell>
+              <TableCell align="right">
+                {JSON.parse(row.items).map(i => (
+                  <>
+                    <Stack direction="column" spacing={'0.2rem'} alignItems={'flex-start'}>
+                      <Typography variant="caption" fontWeight={'bold'}>
+                        {i.item_name}
+                      </Typography>
+                      <Typography variant="caption" fontWeight={'bold'}>
+                        {'QTY :' + i.quantity}
+                      </Typography>
+                      <Typography variant="caption" fontWeight={'bold'}>
+                        {row.currency_code + ' ' + parseInt(i.unit_price).toFixed(2)}
+                      </Typography>
+                    </Stack>
+                  </>
+                ))}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TableOrder;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableProducts.js

@@ -0,0 +1,134 @@
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+// ** MUI Imports
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+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 { Button, IconButton, Stack } from '@mui/material';
+import fetchProduct from 'src/api/fetchProduct';
+import fetchCategory from 'src/api/fetchCategory';
+import fetchProducts from 'src/api/fetchProducts';
+import fetchCategories from 'src/api/fetchCategories';
+import Loading from 'src/components/Loading';
+
+const TableProducts = () => {
+  const router = useRouter();
+  const [products, setProducts] = useState(null);
+  const [categories, setCategories] = useState(null);
+
+  const handleViewClick = cid => {
+    router.push(`/admin/products/${cid}/view`);
+  };
+
+  const handleEditClick = pid => {
+    router.push(`/admin/products/${pid}/edit`);
+  };
+
+  const handleDeleteClick = async pid => {
+    const test_delete = async () => {
+      try {
+        await axios.delete(`/api/products/delete?pid=${pid}`);
+        let fetch_products = await fetchProducts();
+        setProducts(fetch_products);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    await test_delete();
+  };
+
+  useEffect(() => {
+    const update = async () => {
+      let fetch_products = await fetchProducts();
+      let fetch_categories = await fetchCategories();
+      setProducts(fetch_products);
+      setCategories(fetch_categories);
+    };
+
+    update();
+  }, []);
+
+  if (!products || !categories)
+    return (
+      <>
+        <Loading />
+      </>
+    );
+
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>id</TableCell>
+            <TableCell align="left">Image</TableCell>
+            <TableCell align="left">Name</TableCell>
+            <TableCell align="left">Price</TableCell>
+            <TableCell align="left">Category</TableCell>
+            <TableCell align="left">Description</TableCell>
+            <TableCell align="right">Action</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {products.map(p => {
+            let category = categories.filter(c => c.cid == p.cid)[0];
+
+            return (
+              <TableRow
+                key={p.name}
+                sx={{
+                  '&:last-of-type td, &:last-of-type th': {
+                    border: 0,
+                  },
+                }}
+              >
+                <TableCell component="th" scope="row">
+                  {p.pid}
+                </TableCell>
+
+                <TableCell align="left">
+                  <div
+                    style={{
+                      backgroundImage: `url('/api/files/get?dir_prefix=${p.product_image}')`,
+                      backgroundColor: `lightgrey`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                      backgroundRepeat: 'no-repeat',
+                      height: '100px',
+                      width: '100px',
+                      borderRadius: '5px',
+                    }}
+                  />
+                </TableCell>
+
+                <TableCell align="left">{p.name}</TableCell>
+                <TableCell align="left">{p.price}</TableCell>
+                <TableCell align="left">{category?.name || 'not found'}</TableCell>
+                <TableCell align="left">{p.description}</TableCell>
+                <TableCell align="left">
+                  <Button size="small" variant="outlined" onClick={_ => handleViewClick(p.pid)}>
+                    View
+                  </Button>
+                  <Button size="small" variant="outlined" onClick={_ => handleEditClick(p.pid)}>
+                    Edit
+                  </Button>
+                  <Button size="small" variant="outlined" onClick={_ => handleDeleteClick(p.pid)}>
+                    Del
+                  </Button>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TableProducts;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableSpanning.js

@@ -0,0 +1,86 @@
+// ** MUI Imports
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+import TableHead from '@mui/material/TableHead';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+
+const TAX_RATE = 0.07;
+
+const ccyFormat = num => {
+  return `${num.toFixed(2)}`;
+};
+
+const priceRow = (qty, unit) => {
+  return qty * unit;
+};
+
+const createRow = (desc, qty, unit) => {
+  const price = priceRow(qty, unit);
+
+  return { desc, qty, unit, price };
+};
+
+const subtotal = items => {
+  return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0);
+};
+
+const rows = [
+  createRow('Paperclips (Box)', 100, 1.15),
+  createRow('Paper (Case)', 10, 45.99),
+  createRow('Waste Basket', 2, 17.99),
+];
+const invoiceSubtotal = subtotal(rows);
+const invoiceTaxes = TAX_RATE * invoiceSubtotal;
+const invoiceTotal = invoiceTaxes + invoiceSubtotal;
+
+const TableSpanning = () => {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 700 }} aria-label="spanning table">
+        <TableHead>
+          <TableRow>
+            <TableCell align="center" colSpan={3}>
+              Details
+            </TableCell>
+            <TableCell align="right">Price</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Desc</TableCell>
+            <TableCell align="right">Qty.</TableCell>
+            <TableCell align="right">Unit</TableCell>
+            <TableCell align="right">Sum</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map(row => (
+            <TableRow key={row.desc}>
+              <TableCell>{row.desc}</TableCell>
+              <TableCell align="right">{row.qty}</TableCell>
+              <TableCell align="right">{row.unit}</TableCell>
+              <TableCell align="right">{ccyFormat(row.price)}</TableCell>
+            </TableRow>
+          ))}
+          <TableRow>
+            <TableCell rowSpan={3} />
+            <TableCell colSpan={2}>Subtotal</TableCell>
+            <TableCell align="right">{ccyFormat(invoiceSubtotal)}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Tax</TableCell>
+            <TableCell align="right">{`${(TAX_RATE * 100).toFixed(0)} %`}</TableCell>
+            <TableCell align="right">{ccyFormat(invoiceTaxes)}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell colSpan={2}>Total</TableCell>
+            <TableCell align="right">{ccyFormat(invoiceTotal)}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default TableSpanning;

tsc1877/task1/aws/workspace/admin/src/views/tables/TableStickyHeader.js

@@ -0,0 +1,122 @@
+// ** React Imports
+import { useState } from 'react';
+
+// ** MUI Imports
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+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 TablePagination from '@mui/material/TablePagination';
+
+const columns = [
+  { id: 'name', label: 'Name', minWidth: 170 },
+  { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
+  {
+    id: 'population',
+    label: 'Population',
+    minWidth: 170,
+    align: 'right',
+    format: value => value.toLocaleString('en-US'),
+  },
+  {
+    id: 'size',
+    label: 'Size\u00a0(km\u00b2)',
+    minWidth: 170,
+    align: 'right',
+    format: value => value.toLocaleString('en-US'),
+  },
+  {
+    id: 'density',
+    label: 'Density',
+    minWidth: 170,
+    align: 'right',
+    format: value => value.toFixed(2),
+  },
+];
+function createData(name, code, population, size) {
+  const density = population / size;
+
+  return { name, code, population, size, density };
+}
+
+const rows = [
+  createData('India', 'IN', 1324171354, 3287263),
+  createData('China', 'CN', 1403500365, 9596961),
+  createData('Italy', 'IT', 60483973, 301340),
+  createData('United States', 'US', 327167434, 9833520),
+  createData('Canada', 'CA', 37602103, 9984670),
+  createData('Australia', 'AU', 25475400, 7692024),
+  createData('Germany', 'DE', 83019200, 357578),
+  createData('Ireland', 'IE', 4857000, 70273),
+  createData('Mexico', 'MX', 126577691, 1972550),
+  createData('Japan', 'JP', 126317000, 377973),
+  createData('France', 'FR', 67022000, 640679),
+  createData('United Kingdom', 'GB', 67545757, 242495),
+  createData('Russia', 'RU', 146793744, 17098246),
+  createData('Nigeria', 'NG', 200962417, 923768),
+  createData('Brazil', 'BR', 210147125, 8515767),
+];
+
+const TableStickyHeader = () => {
+  // ** States
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = event => {
+    setRowsPerPage(+event.target.value);
+    setPage(0);
+  };
+
+  return (
+    <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer sx={{ maxHeight: 440 }}>
+        <Table stickyHeader aria-label="sticky table">
+          <TableHead>
+            <TableRow>
+              {columns.map(column => (
+                <TableCell key={column.id} align={column.align} sx={{ minWidth: column.minWidth }}>
+                  {column.label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => {
+              return (
+                <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
+                  {columns.map(column => {
+                    const value = row[column.id];
+
+                    return (
+                      <TableCell key={column.id} align={column.align}>
+                        {column.format && typeof value === 'number' ? column.format(value) : value}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        rowsPerPageOptions={[10, 25, 100]}
+        component="div"
+        count={rows.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+      />
+    </Paper>
+  );
+};
+
+export default TableStickyHeader;

tsc1877/task1/aws/workspace/admin/src/views/typography/TypographyHeadings.js

@@ -0,0 +1,86 @@
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import { styled } from '@mui/material/styles';
+import CardHeader from '@mui/material/CardHeader';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+import Grid from '@mui/material/Grid';
+
+const DemoGrid = styled(Grid)(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    paddingTop: `${theme.spacing(1)} !important`,
+  },
+}));
+
+const TypographyHeadings = () => {
+  return (
+    <Card>
+      <CardHeader title="Headings" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <Grid container spacing={6}>
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>H1</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="h1" sx={{ marginBottom: 2 }}>
+              Heading 1
+            </Typography>
+            <Typography variant="body2">font-size: 96px / line-height: 112px / font-weight: 500</Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>H2</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="h2" sx={{ marginBottom: 2 }}>
+              Heading 2
+            </Typography>
+            <Typography variant="body2">font-size: 60px / line-height: 72px / font-weight: 500</Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>H3</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="h3" sx={{ marginBottom: 2 }}>
+              Heading 3
+            </Typography>
+            <Typography variant="body2">font-size: 48px / line-height: 56px / font-weight: 500</Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>H4</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="h4" sx={{ marginBottom: 2 }}>
+              Heading 4
+            </Typography>
+            <Typography variant="body2">font-size: 32px / line-height: 40px / font-weight: 500</Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>H5</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="h5" sx={{ marginBottom: 2 }}>
+              Heading 5
+            </Typography>
+            <Typography variant="body2">font-size: 24px / line-height: 32px / font-weight: 500</Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>H6</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              Heading 6
+            </Typography>
+            <Typography variant="body2">font-size: 20px / line-height: 32px / font-weight: 500</Typography>
+          </DemoGrid>
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TypographyHeadings;

tsc1877/task1/aws/workspace/admin/src/views/typography/TypographyTexts.js

@@ -0,0 +1,96 @@
+// ** MUI Imports
+import Card from '@mui/material/Card';
+import { styled } from '@mui/material/styles';
+import CardHeader from '@mui/material/CardHeader';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
+import Grid from '@mui/material/Grid';
+
+const DemoGrid = styled(Grid)(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    paddingTop: `${theme.spacing(1)} !important`,
+  },
+}));
+
+const TypographyTexts = () => {
+  return (
+    <Card>
+      <CardHeader title="Texts" titleTypographyProps={{ variant: 'h6' }} />
+      <CardContent>
+        <Grid container spacing={6}>
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>subtitle1</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="subtitle1" sx={{ marginBottom: 2 }}>
+              Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.
+            </Typography>
+            <Typography variant="body2">font-size: 16px / line-height: 28px / font-weight: 400</Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>subtitle2</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="subtitle2" sx={{ marginBottom: 2 }}>
+              Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.
+            </Typography>
+            <Typography variant="body2">font-size: 14px / line-height: 21px / font-weight: 500</Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>body1</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography sx={{ marginBottom: 2 }}>
+              Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.
+            </Typography>
+            <Typography variant="body2">font-size: 16px / line-height: 24px / font-weight: 400</Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>body2</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="body2" sx={{ marginBottom: 2 }}>
+              Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.
+            </Typography>
+            <Typography variant="body2">font-size: 14px / line-height: 21px / font-weight: 400</Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>button</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="button">Button Text</Typography>
+            <Typography variant="body2" sx={{ mt: 2 }}>
+              font-size: 14px / line-height: 17px / font-weight: 500 / text-transform: uppercase
+            </Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>caption</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="caption">Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.</Typography>
+            <Typography variant="body2" sx={{ mt: 2 }}>
+              font-size: 12px / line-height: 15px / font-weight: 400
+            </Typography>
+          </DemoGrid>
+
+          <Grid item xs={12} sm={2} sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>overline</Typography>
+          </Grid>
+          <DemoGrid item xs={12} sm={10}>
+            <Typography variant="overline">Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.</Typography>
+            <Typography variant="body2" sx={{ mt: 1 }}>
+              font-size: 12px / line-height: 15px / font-weight: 400 / text-transform: uppercase
+            </Typography>
+          </DemoGrid>
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TypographyTexts;