@canmingir/link 1.1.0

package/minimal/src/sections/home/home-pricing.jsx

@@ -0,0 +1,266 @@
+import { m } from 'framer-motion';
+import PropTypes from 'prop-types';
+import { useState, useCallback } from 'react';
+
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import { alpha } from '@mui/material/styles';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+
+import { paths } from 'src/routes/paths';
+
+import { useResponsive } from 'src/hooks/use-responsive';
+
+import { _homePlans } from 'src/_mock';
+
+import Iconify from 'src/components/iconify';
+import { varFade, MotionViewport } from 'src/components/animate';
+
+// ----------------------------------------------------------------------
+
+export default function HomePricing() {
+  const mdUp = useResponsive('up', 'md');
+
+  const [currentTab, setCurrentTab] = useState('Standard');
+
+  const handleChangeTab = useCallback((event, newValue) => {
+    setCurrentTab(newValue);
+  }, []);
+
+  const renderDescription = (
+    <Stack spacing={3} sx={{ mb: 10, textAlign: 'center' }}>
+      <m.div variants={varFade().inUp}>
+        <Typography component="div" variant="overline" sx={{ mb: 2, color: 'text.disabled' }}>
+          pricing plans
+        </Typography>
+      </m.div>
+
+      <m.div variants={varFade().inDown}>
+        <Typography variant="h2">
+          The right plan for <br /> your business
+        </Typography>
+      </m.div>
+
+      <m.div variants={varFade().inDown}>
+        <Typography sx={{ color: 'text.secondary' }}>
+          Choose the perfect plan for your needs. Always flexible to grow
+        </Typography>
+      </m.div>
+    </Stack>
+  );
+
+  const renderContent = (
+    <>
+      {mdUp ? (
+        <Box
+          display="grid"
+          gridTemplateColumns="repeat(3, 1fr)"
+          sx={{
+            borderRadius: 2,
+            border: (theme) => `dashed 1px ${theme.palette.divider}`,
+          }}
+        >
+          {_homePlans.map((plan) => (
+            <m.div key={plan.license} variants={varFade().in}>
+              <PlanCard key={plan.license} plan={plan} />
+            </m.div>
+          ))}
+        </Box>
+      ) : (
+        <>
+          <Stack alignItems="center" sx={{ mb: 5 }}>
+            <Tabs value={currentTab} onChange={handleChangeTab}>
+              {_homePlans.map((tab) => (
+                <Tab key={tab.license} value={tab.license} label={tab.license} />
+              ))}
+            </Tabs>
+          </Stack>
+
+          <Box
+            sx={{
+              borderRadius: 2,
+              border: (theme) => `dashed 1px ${theme.palette.divider}`,
+            }}
+          >
+            {_homePlans.map(
+              (tab) =>
+                tab.license === currentTab && (
+                  <PlanCard
+                    key={tab.license}
+                    plan={tab}
+                    sx={{
+                      borderLeft: (theme) => `dashed 1px ${theme.palette.divider}`,
+                    }}
+                  />
+                )
+            )}
+          </Box>
+        </>
+      )}
+
+      <m.div variants={varFade().in}>
+        <Box
+          sx={{
+            textAlign: 'center',
+            mt: {
+              xs: 5,
+              md: 10,
+            },
+          }}
+        >
+          <m.div variants={varFade().inDown}>
+            <Typography variant="h4">Still have questions?</Typography>
+          </m.div>
+
+          <m.div variants={varFade().inDown}>
+            <Typography sx={{ mt: 2, mb: 5, color: 'text.secondary' }}>
+              Please describe your case to receive the most accurate advice.
+            </Typography>
+          </m.div>
+
+          <m.div variants={varFade().inUp}>
+            <Button
+              color="inherit"
+              size="large"
+              variant="contained"
+              href="mailto:support@minimals.cc?subject=[Feedback] from Customer"
+            >
+              Contact us
+            </Button>
+          </m.div>
+        </Box>
+      </m.div>
+    </>
+  );
+
+  return (
+    <Box
+      sx={{
+        py: { xs: 10, md: 15 },
+        bgcolor: (theme) => alpha(theme.palette.grey[500], 0.04),
+      }}
+    >
+      <Container component={MotionViewport}>
+        {renderDescription}
+
+        {renderContent}
+      </Container>
+    </Box>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function PlanCard({ plan, sx, ...other }) {
+  const { license, commons, options, icons } = plan;
+
+  const standardLicense = license === 'Standard';
+
+  const plusLicense = license === 'Standard Plus';
+
+  return (
+    <Stack
+      spacing={5}
+      sx={{
+        p: 5,
+        pt: 10,
+        ...(plusLicense && {
+          borderLeft: (theme) => `dashed 1px ${theme.palette.divider}`,
+          borderRight: (theme) => `dashed 1px ${theme.palette.divider}`,
+          ...sx,
+        }),
+      }}
+      {...other}
+    >
+      <Stack spacing={2}>
+        <Typography variant="overline" component="div" sx={{ color: 'text.disabled' }}>
+          License
+        </Typography>
+
+        <Box sx={{ position: 'relative' }}>
+          <Typography variant="h4">{license}</Typography>
+          <Box
+            sx={{
+              left: 0,
+              bottom: 4,
+              width: 40,
+              height: 8,
+              opacity: 0.48,
+              bgcolor: 'error.main',
+              position: 'absolute',
+              ...(standardLicense && { bgcolor: 'primary.main' }),
+              ...(plusLicense && { bgcolor: 'warning.main' }),
+            }}
+          />
+        </Box>
+      </Stack>
+
+      {standardLicense ? (
+        <Box component="img" alt={icons[1]} src={icons[1]} sx={{ width: 20, height: 20 }} />
+      ) : (
+        <Stack direction="row" spacing={2}>
+          {icons.map((icon) => (
+            <Box component="img" key={icon} alt={icon} src={icon} sx={{ width: 20, height: 20 }} />
+          ))}
+        </Stack>
+      )}
+
+      <Stack spacing={2.5}>
+        {commons.map((option) => (
+          <Stack key={option} spacing={1} direction="row" alignItems="center">
+            <Iconify icon="eva:checkmark-fill" width={16} />
+            <Typography variant="body2">{option}</Typography>
+          </Stack>
+        ))}
+
+        <Divider sx={{ borderStyle: 'dashed' }} />
+
+        {options.map((option, optionIndex) => {
+          const disabled =
+            (standardLicense && optionIndex === 1) ||
+            (standardLicense && optionIndex === 2) ||
+            (standardLicense && optionIndex === 3) ||
+            (plusLicense && optionIndex === 3);
+
+          return (
+            <Stack
+              spacing={1}
+              direction="row"
+              alignItems="center"
+              sx={{
+                ...(disabled && { color: 'text.disabled' }),
+              }}
+              key={option}
+            >
+              <Iconify icon={disabled ? 'mingcute:close-line' : 'eva:checkmark-fill'} width={16} />
+              <Typography variant="body2">{option}</Typography>
+            </Stack>
+          );
+        })}
+      </Stack>
+
+      <Stack alignItems="flex-end">
+        <Button
+          color="inherit"
+          size="small"
+          target="_blank"
+          rel="noopener"
+          href={paths.minimalUI}
+          endIcon={<Iconify icon="eva:arrow-ios-forward-fill" />}
+        >
+          Learn more
+        </Button>
+      </Stack>
+    </Stack>
+  );
+}
+
+PlanCard.propTypes = {
+  plan: PropTypes.object,
+  sx: PropTypes.object,
+};

package/minimal/src/sections/home/view/home-view.jsx

@@ -0,0 +1,83 @@
+import { useScroll } from 'framer-motion';
+
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+
+import ScrollProgress from 'src/components/scroll-progress';
+
+import HomeHero from '../home-hero';
+import HomeMinimal from '../home-minimal';
+import HomePricing from '../home-pricing';
+import HomeDarkMode from '../home-dark-mode';
+import HomeLookingFor from '../home-looking-for';
+import HomeForDesigner from '../home-for-designer';
+import HomeColorPresets from '../home-color-presets';
+import HomeAdvertisement from '../home-advertisement';
+import HomeCleanInterfaces from '../home-clean-interfaces';
+import HomeHugePackElements from '../home-hugepack-elements';
+
+// ----------------------------------------------------------------------
+
+const StyledPolygon = styled('div')(({ anchor = 'top', theme }) => ({
+  left: 0,
+  zIndex: 9,
+  height: 80,
+  width: '100%',
+  position: 'absolute',
+  clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',
+  backgroundColor: theme.palette.background.default,
+  display: 'block',
+  lineHeight: 0,
+  ...(anchor === 'top' && {
+    top: -1,
+    transform: 'scale(-1, -1)',
+  }),
+  ...(anchor === 'bottom' && {
+    bottom: -1,
+    backgroundColor: theme.palette.grey[900],
+  }),
+}));
+
+// ----------------------------------------------------------------------
+
+export default function HomeView() {
+  const { scrollYProgress } = useScroll();
+
+  return (
+    <>
+      <ScrollProgress scrollYProgress={scrollYProgress} />
+
+      <HomeHero />
+
+      <Box
+        sx={{
+          overflow: 'hidden',
+          position: 'relative',
+          bgcolor: 'background.default',
+        }}
+      >
+        <HomeMinimal />
+
+        <HomeHugePackElements />
+
+        <Box sx={{ position: 'relative' }}>
+          <StyledPolygon />
+          <HomeForDesigner />
+          <StyledPolygon anchor="bottom" />
+        </Box>
+
+        <HomeDarkMode />
+
+        <HomeColorPresets />
+
+        <HomeCleanInterfaces />
+
+        <HomePricing />
+
+        <HomeLookingFor />
+
+        <HomeAdvertisement />
+      </Box>
+    </>
+  );
+}

package/minimal/src/sections/home/view/index.js

@@ -0,0 +1 @@
+export { default as HomeView } from './home-view';

package/minimal/src/sections/invoice/invoice-analytic.jsx

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { alpha } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
+
+import { fCurrency, fShortenNumber } from 'src/utils/format-number';
+
+import Iconify from 'src/components/iconify';
+
+// ----------------------------------------------------------------------
+
+export default function InvoiceAnalytic({ title, total, icon, color, percent, price }) {
+  return (
+    <Stack
+      spacing={2.5}
+      direction="row"
+      alignItems="center"
+      justifyContent="center"
+      sx={{ width: 1, minWidth: 200 }}
+    >
+      <Stack alignItems="center" justifyContent="center" sx={{ position: 'relative' }}>
+        <Iconify icon={icon} width={32} sx={{ color, position: 'absolute' }} />
+
+        <CircularProgress
+          variant="determinate"
+          value={percent}
+          size={56}
+          thickness={2}
+          sx={{ color, opacity: 0.48 }}
+        />
+
+        <CircularProgress
+          variant="determinate"
+          value={100}
+          size={56}
+          thickness={3}
+          sx={{
+            top: 0,
+            left: 0,
+            opacity: 0.48,
+            position: 'absolute',
+            color: (theme) => alpha(theme.palette.grey[500], 0.16),
+          }}
+        />
+      </Stack>
+
+      <Stack spacing={0.5}>
+        <Typography variant="subtitle1">{title}</Typography>
+
+        <Box component="span" sx={{ color: 'text.disabled', typography: 'body2' }}>
+          {fShortenNumber(total)} invoices
+        </Box>
+
+        <Typography variant="subtitle2">{fCurrency(price)}</Typography>
+      </Stack>
+    </Stack>
+  );
+}
+
+InvoiceAnalytic.propTypes = {
+  color: PropTypes.string,
+  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  percent: PropTypes.number,
+  price: PropTypes.number,
+  title: PropTypes.string,
+  total: PropTypes.number,
+};

package/minimal/src/sections/invoice/invoice-details.jsx

@@ -0,0 +1,253 @@
+import PropTypes from 'prop-types';
+import { useState, useCallback } from 'react';
+
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Table from '@mui/material/Table';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import { styled } from '@mui/material/styles';
+import TableRow from '@mui/material/TableRow';
+import TableHead from '@mui/material/TableHead';
+import TableCell from '@mui/material/TableCell';
+import TableBody from '@mui/material/TableBody';
+import Grid from '@mui/material/Unstable_Grid2';
+import Typography from '@mui/material/Typography';
+import TableContainer from '@mui/material/TableContainer';
+
+import { fDate } from 'src/utils/format-time';
+import { fCurrency } from 'src/utils/format-number';
+
+import { INVOICE_STATUS_OPTIONS } from 'src/_mock';
+
+import Label from 'src/components/label';
+import Scrollbar from 'src/components/scrollbar';
+
+import InvoiceToolbar from './invoice-toolbar';
+
+// ----------------------------------------------------------------------
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+  '& td': {
+    textAlign: 'right',
+    borderBottom: 'none',
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+export default function InvoiceDetails({ invoice }) {
+  const [currentStatus, setCurrentStatus] = useState(invoice.status);
+
+  const handleChangeStatus = useCallback((event) => {
+    setCurrentStatus(event.target.value);
+  }, []);
+
+  const renderTotal = (
+    <>
+      <StyledTableRow>
+        <TableCell colSpan={3} />
+        <TableCell sx={{ color: 'text.secondary' }}>
+          <Box sx={{ mt: 2 }} />
+          Subtotal
+        </TableCell>
+        <TableCell width={120} sx={{ typography: 'subtitle2' }}>
+          <Box sx={{ mt: 2 }} />
+          {fCurrency(invoice.subTotal)}
+        </TableCell>
+      </StyledTableRow>
+
+      <StyledTableRow>
+        <TableCell colSpan={3} />
+        <TableCell sx={{ color: 'text.secondary' }}>Shipping</TableCell>
+        <TableCell width={120} sx={{ color: 'error.main', typography: 'body2' }}>
+          {fCurrency(-invoice.shipping)}
+        </TableCell>
+      </StyledTableRow>
+
+      <StyledTableRow>
+        <TableCell colSpan={3} />
+        <TableCell sx={{ color: 'text.secondary' }}>Discount</TableCell>
+        <TableCell width={120} sx={{ color: 'error.main', typography: 'body2' }}>
+          {fCurrency(-invoice.discount)}
+        </TableCell>
+      </StyledTableRow>
+
+      <StyledTableRow>
+        <TableCell colSpan={3} />
+        <TableCell sx={{ color: 'text.secondary' }}>Taxes</TableCell>
+        <TableCell width={120}>{fCurrency(invoice.taxes)}</TableCell>
+      </StyledTableRow>
+
+      <StyledTableRow>
+        <TableCell colSpan={3} />
+        <TableCell sx={{ typography: 'subtitle1' }}>Total</TableCell>
+        <TableCell width={140} sx={{ typography: 'subtitle1' }}>
+          {fCurrency(invoice.totalAmount)}
+        </TableCell>
+      </StyledTableRow>
+    </>
+  );
+
+  const renderFooter = (
+    <Grid container>
+      <Grid xs={12} md={9} sx={{ py: 3 }}>
+        <Typography variant="subtitle2">NOTES</Typography>
+
+        <Typography variant="body2">
+          We appreciate your business. Should you need us to add VAT or extra notes let us know!
+        </Typography>
+      </Grid>
+
+      <Grid xs={12} md={3} sx={{ py: 3, textAlign: 'right' }}>
+        <Typography variant="subtitle2">Have a Question?</Typography>
+
+        <Typography variant="body2">support@minimals.cc</Typography>
+      </Grid>
+    </Grid>
+  );
+
+  const renderList = (
+    <TableContainer sx={{ overflow: 'unset', mt: 5 }}>
+      <Scrollbar>
+        <Table sx={{ minWidth: 960 }}>
+          <TableHead>
+            <TableRow>
+              <TableCell width={40}>#</TableCell>
+
+              <TableCell sx={{ typography: 'subtitle2' }}>Description</TableCell>
+
+              <TableCell>Qty</TableCell>
+
+              <TableCell align="right">Unit price</TableCell>
+
+              <TableCell align="right">Total</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {invoice.items.map((row, index) => (
+              <TableRow key={index}>
+                <TableCell>{index + 1}</TableCell>
+
+                <TableCell>
+                  <Box sx={{ maxWidth: 560 }}>
+                    <Typography variant="subtitle2">{row.title}</Typography>
+
+                    <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
+                      {row.description}
+                    </Typography>
+                  </Box>
+                </TableCell>
+
+                <TableCell>{row.quantity}</TableCell>
+
+                <TableCell align="right">{fCurrency(row.price)}</TableCell>
+
+                <TableCell align="right">{fCurrency(row.price * row.quantity)}</TableCell>
+              </TableRow>
+            ))}
+
+            {renderTotal}
+          </TableBody>
+        </Table>
+      </Scrollbar>
+    </TableContainer>
+  );
+
+  return (
+    <>
+      <InvoiceToolbar
+        invoice={invoice}
+        currentStatus={currentStatus || ''}
+        onChangeStatus={handleChangeStatus}
+        statusOptions={INVOICE_STATUS_OPTIONS}
+      />
+
+      <Card sx={{ pt: 5, px: 5 }}>
+        <Box
+          rowGap={5}
+          display="grid"
+          alignItems="center"
+          gridTemplateColumns={{
+            xs: 'repeat(1, 1fr)',
+            sm: 'repeat(2, 1fr)',
+          }}
+        >
+          <Box
+            component="img"
+            alt="logo"
+            src="/logo/logo_single.svg"
+            sx={{ width: 48, height: 48 }}
+          />
+
+          <Stack spacing={1} alignItems={{ xs: 'flex-start', md: 'flex-end' }}>
+            <Label
+              variant="soft"
+              color={
+                (currentStatus === 'paid' && 'success') ||
+                (currentStatus === 'pending' && 'warning') ||
+                (currentStatus === 'overdue' && 'error') ||
+                'default'
+              }
+            >
+              {currentStatus}
+            </Label>
+
+            <Typography variant="h6">{invoice.invoiceNumber}</Typography>
+          </Stack>
+
+          <Stack sx={{ typography: 'body2' }}>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              Invoice From
+            </Typography>
+            {invoice.invoiceFrom.name}
+            <br />
+            {invoice.invoiceFrom.fullAddress}
+            <br />
+            Phone: {invoice.invoiceFrom.phoneNumber}
+            <br />
+          </Stack>
+
+          <Stack sx={{ typography: 'body2' }}>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              Invoice To
+            </Typography>
+            {invoice.invoiceTo.name}
+            <br />
+            {invoice.invoiceTo.fullAddress}
+            <br />
+            Phone: {invoice.invoiceTo.phoneNumber}
+            <br />
+          </Stack>
+
+          <Stack sx={{ typography: 'body2' }}>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              Date Create
+            </Typography>
+            {fDate(invoice.createDate)}
+          </Stack>
+
+          <Stack sx={{ typography: 'body2' }}>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              Due Date
+            </Typography>
+            {fDate(invoice.dueDate)}
+          </Stack>
+        </Box>
+
+        {renderList}
+
+        <Divider sx={{ mt: 5, borderStyle: 'dashed' }} />
+
+        {renderFooter}
+      </Card>
+    </>
+  );
+}
+
+InvoiceDetails.propTypes = {
+  invoice: PropTypes.object,
+};