From 8bdf3364ff9f3883ab1d2bd1f946ff3bb2137d2d Mon Sep 17 00:00:00 2001 From: ct-vrushti Date: Sat, 18 Jul 2026 12:02:13 +0530 Subject: [PATCH] free version in vite --- .github/workflows/prod.yml | 2 +- vite/.env | 2 +- vite/eslint.config.mjs | 2 +- vite/index.html | 15 +- vite/package.json | 48 +- vite/public/favicon.ico | Bin 0 -> 9662 bytes vite/src/assets/scss/style.scss | 25 + vite/src/layout/Customization/FontFamily.jsx | 2 +- vite/src/layout/MainLayout/Footer.jsx | 32 +- .../NotificationSection/NotificationList.jsx | 23 +- .../Header/NotificationSection/index.jsx | 21 +- .../Header/ProfileSection/UpgradePlanCard.jsx | 2 +- .../Header/ProfileSection/index.jsx | 19 +- .../MainLayout/Header/SearchSection/index.jsx | 17 +- vite/src/layout/MainLayout/Header/index.jsx | 13 +- .../layout/MainLayout/MainContentStyled.js | 14 +- .../MainLayout/MenuList/NavCollapse/index.jsx | 8 +- .../MainLayout/MenuList/NavGroup/index.jsx | 1 - .../MainLayout/MenuList/NavItem/index.jsx | 13 +- .../MainLayout/Sidebar/MenuCard/index.jsx | 31 +- vite/src/serviceWorker.jsx | 8 +- vite/src/store/constant.js | 1 + vite/src/themes/overrides/Alert.jsx | 11 +- vite/src/themes/overrides/Button.jsx | 65 +- vite/src/themes/overrides/Chip.jsx | 65 +- vite/src/themes/overrides/DataGrid.jsx | 23 +- vite/src/themes/overrides/DialogActions.js | 13 + vite/src/themes/overrides/IconButton.js | 74 + vite/src/themes/overrides/InputLabel.js | 18 + vite/src/themes/overrides/ListItemButton.jsx | 6 +- vite/src/themes/overrides/OutlinedInput.jsx | 48 +- vite/src/themes/overrides/Select.jsx | 13 + vite/src/themes/overrides/Slider.jsx | 3 +- vite/src/themes/overrides/Switch.js | 15 + vite/src/themes/overrides/TableCell.jsx | 16 +- vite/src/themes/overrides/index.js | 10 + vite/src/themes/palette.jsx | 70 +- vite/src/themes/theme/default.js | 161 +- .../cards/CardSecondaryAction.jsx | 66 +- vite/src/ui-component/cards/MainCard.jsx | 19 +- vite/src/ui-component/cards/SubCard.jsx | 17 +- .../cards/TotalIncomeDarkCard.jsx | 77 +- .../cards/TotalIncomeLightCard.jsx | 70 +- vite/src/ui-component/extended/Accordion.jsx | 6 +- vite/src/ui-component/extended/AppBar.jsx | 23 +- .../src/ui-component/extended/Breadcrumbs.jsx | 14 +- .../ui-component/extended/Form/AppForm.jsx | 18 + .../extended/Form/CustomFormControl.jsx | 2 +- .../extended/Form/FormAutocomplete.jsx | 151 + .../extended/Form/FormControl.jsx | 4 +- .../extended/Form/FormControlSelect.jsx | 90 - .../ui-component/extended/Form/FormInput.jsx | 66 + .../extended/Form/FormPhoneInput.jsx | 113 + .../ui-component/extended/Form/InputLabel.jsx | 2 + vite/src/ui-component/extended/Form/index.js | 5 + .../dashboard/Default/BajajAreaChartCard.jsx | 4 +- .../views/dashboard/Default/EarningCard.jsx | 30 +- .../views/dashboard/Default/PopularCard.jsx | 181 +- .../dashboard/Default/TotalGrowthBarChart.jsx | 4 +- .../Default/TotalOrderLineChartCard.jsx | 22 +- vite/src/views/utilities/Color.jsx | 186 +- vite/src/views/utilities/Shadow.jsx | 2 +- vite/vite.config.mjs | 101 +- vite/yarn.lock | 2761 +++++++---------- 64 files changed, 2436 insertions(+), 2508 deletions(-) create mode 100644 vite/public/favicon.ico create mode 100644 vite/src/themes/overrides/DialogActions.js create mode 100644 vite/src/themes/overrides/IconButton.js create mode 100644 vite/src/themes/overrides/InputLabel.js create mode 100644 vite/src/themes/overrides/Switch.js create mode 100644 vite/src/ui-component/extended/Form/AppForm.jsx create mode 100644 vite/src/ui-component/extended/Form/FormAutocomplete.jsx delete mode 100644 vite/src/ui-component/extended/Form/FormControlSelect.jsx create mode 100644 vite/src/ui-component/extended/Form/FormInput.jsx create mode 100644 vite/src/ui-component/extended/Form/FormPhoneInput.jsx create mode 100644 vite/src/ui-component/extended/Form/index.js diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml index b0680587b..eca85b3e7 100644 --- a/.github/workflows/prod.yml +++ b/.github/workflows/prod.yml @@ -31,7 +31,7 @@ jobs: run: | cd vite corepack enable - yarn set version 4.10.3 + yarn set version 4.17.1 yarn yarn build diff --git a/vite/.env b/vite/.env index 70d3c4a74..019ddeca7 100644 --- a/vite/.env +++ b/vite/.env @@ -1,4 +1,4 @@ -VITE_APP_VERSION=v5.1.0 +VITE_APP_VERSION=v5.2.0 GENERATE_SOURCEMAP=false ## PUBLIC URL diff --git a/vite/eslint.config.mjs b/vite/eslint.config.mjs index 0627f768d..86914b321 100644 --- a/vite/eslint.config.mjs +++ b/vite/eslint.config.mjs @@ -79,7 +79,7 @@ export default [ } ], - 'prettier/prettier': 'warn', + 'prettier/prettier': 'warn' } }, { diff --git a/vite/index.html b/vite/index.html index f26df0b30..028f4ddf6 100644 --- a/vite/index.html +++ b/vite/index.html @@ -2,22 +2,29 @@ Berry - React Material Free Admin Dashboard Template - + - + - + + + + + + + + diff --git a/vite/package.json b/vite/package.json index eeb22dfba..ea0cef011 100644 --- a/vite/package.json +++ b/vite/package.json @@ -1,33 +1,33 @@ { "name": "berry-material-react-js", - "version": "5.1.0", + "version": "5.2.0", "private": true, "dependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.1", "@fontsource/inter": "5.2.8", "@fontsource/poppins": "5.2.7", - "@fontsource/roboto": "5.2.9", - "@mui/icons-material": "7.3.5", - "@mui/material": "7.3.5", - "@tabler/icons-react": "3.35.0", - "@vitejs/plugin-react": "5.1.1", - "apexcharts": "5.3.6", - "framer-motion": "12.23.25", - "lodash-es": "4.17.21", - "material-ui-popup-state": "5.3.6", - "react": "19.2.0", - "react-apexcharts": "1.9.0", + "@fontsource/roboto": "5.2.10", + "@mui/icons-material": "9.1.1", + "@mui/material": "9.1.2", + "@tabler/icons-react": "3.44.0", + "@vitejs/plugin-react": "6.0.3", + "apexcharts": "5.15.2", + "framer-motion": "12.42.0", + "lodash-es": "4.18.1", + "material-ui-popup-state": "5.3.7", + "react": "19.2.7", + "react-apexcharts": "2.1.1", "react-device-detect": "2.2.3", - "react-dom": "19.2.0", - "react-router": "7.9.6", - "react-router-dom": "7.9.6", + "react-dom": "19.2.7", + "react-router": "7.18.0", + "react-router-dom": "7.18.0", "simplebar-react": "3.3.2", "slick-carousel": "1.8.1", - "swr": "2.3.7", - "vite": "7.2.6", + "swr": "2.4.2", + "vite": "8.1.0", "vite-jsconfig-paths": "2.0.1", - "web-vitals": "5.1.0", + "web-vitals": "5.3.0", "yup": "1.7.1" }, "scripts": { @@ -60,15 +60,15 @@ "@eslint/compat": "2.0.0", "@eslint/eslintrc": "3.3.3", "@eslint/js": "9.39.1", - "eslint": "9.39.1", + "eslint": "10.5.0", "eslint-config-prettier": "10.1.8", "eslint-plugin-jsx-a11y": "6.10.2", - "eslint-plugin-prettier": "5.5.4", + "eslint-plugin-prettier": "5.5.6", "eslint-plugin-react": "7.37.5", - "eslint-plugin-react-hooks": "7.0.1", - "prettier": "3.7.3", + "eslint-plugin-react-hooks": "7.1.1", + "prettier": "3.8.5", "prettier-eslint-cli": "8.0.1", - "sass": "1.94.2" + "sass": "1.101.0" }, - "packageManager": "yarn@4.10.3" + "packageManager": "yarn@4.17.1" } diff --git a/vite/public/favicon.ico b/vite/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..ed2784d0af039bcfa7ba81d6a4d4304bd2c0d8e8 GIT binary patch literal 9662 zcmdT}J#1q|5Z-V|>F%yV6i7*&oOA_65Cu|lCkKSCKuDJs3NTz@=Ndu{l0y}V=F(uF zXwKzH6uIhh90(hw2oi-&K^;daC@At0N5X~WWxm~=_a-mz$Is8Pz^Bdl?at18GdnXo zey7w7{aapE^mkr8y`|J^N~zm4XiAl6VBUO|ESc0_{bc#(S#5FsthUhT)fQSbIyAH! z_}=Q(7oMHh7faxsl-|5@diA9>;1XCh*>FhDO*z~g+oR1M+M8GZxcmR9-=25Ac9;sg z=e5O8lYEOc@SN2PPiXInvzg9ix^^H2NWTaDzye#c`T@4|YK2G627O*DY-W`)4u7v+ z*fF>%M$W&#g|xc#X|8SF+`Cg*yD-)&^OqQD0=AR9wv*XNI=`s>S>{B%G{bs;`NitS z=H6<#v$s;#k%QKruatN8LbgB_&e5C&Re^d(s9IOO#uruPc4USh7+-ZoVsQ@!tG?zhtW?b0SJ7>&{By2l!t4 z!o_=Zj;8xNW?!WxvC)~gNv|jM%Joscqdp=QQ8Ss}_&#H{iqwB)Su|9trV{?S+OwB`8YvkzLo-23FW;7lte*4Lw&0Sx2jfWa?fA9AzC&rk0@X#f4~ zo5#)L$La6<+!b|`J7^yK*l%P<_#bPyGpUDZ zhkZ`{TT|Yr;2rnF@jp)dK&SIfD@i}@%@-@>`xukL&H5OBj{L5ZMS)XO@!Va82;csM>!~97(44%uqL{R%!#;6o{C06bqq)nsB zl6)jHwwJwJhl2ZG%1Ha}eBF_GO1?KeyNstaIZ^BE2jo)Jx~xIC+oE`q=G+-~sJ8mQ z>(X>4$%|SeUnKUjFYj&?$EiKQN$2Z9KKt3lQJ3Z~^z2c%Mx7JCA3LlkX|H`Zl>Gb8 zzncVh$mDlndHUukYptSm_=fDlT$-#&*lBB1Vb`9&iC@HU%M9DU zAg=ARjc=@DP))Wq%GN7C{(0R{*g6e6pab;;F-+K+r1!+(L=S`SO{{@O<~7cd)^P`1 zz%8G#&bCg%=aZB{I9=|><7Zov>hUBo#mSQTab6gFUoplsDrLm!xvF`Jg9gjSeQ1XN zUOV0YY}+L2Hsi=b5y#9=Sg7B$_aMz5GPY4D@lWL4E@K&m`aP6;m%un}?Q!oJ5^|XN zeR@Uz&k<*fALoQ0n8P^Sz2Mg@e?8JBs$-7}UreK}!XEDZfXUBWfs6A3YqACtKh<1Y zcX2OMyzPAWRI|>W@9X@-}%f{l5``yZZm^3vpW8>DxMA%Q_YIdp(Q?4`Y4^vO<|LHd4 zurn`eYd9ao8Mc`3zfMtKT>s~v9og}}!O#9h4MH7tu{AP&JydgAQ{C&USwp+U8AE^7 zT|>89{UX+{t2aQ0chu}0(ZRC1_6W43X10m;N#lW|$3#!JlzJd&kDlMAXVA9&L(slg9T?iL_Mvz1wf2BxP;4Io*RXi-7jWtu z2SbB@TU$HWu5R(0S*-Wft23ZO^|}JpG*dOSq>7HtIeG(hIIk>yMa|-QFk|_=lF_48 W>6*s;)~2I ({ p: 0.75, - bgcolor: fontFamily === item.value ? 'primary.light' : 'grey.50' + bgcolor: fontFamily === item.value ? 'primary.lighter' : 'grey.50' })} > - GitHub + License - Figma UI Kit + Hire us + + + Terms + + + Figma Design System diff --git a/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx b/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx index b94221847..fb7a8ac8c 100644 --- a/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx +++ b/vite/src/layout/MainLayout/Header/NotificationSection/NotificationList.jsx @@ -18,7 +18,10 @@ import Box from '@mui/material/Box'; import { withAlpha } from 'utils/colorUtils'; // assets -import { IconBrandTelegram, IconBuildingStore, IconMailbox, IconPhoto } from '@tabler/icons-react'; +import ImageOutlinedIcon from '@mui/icons-material/ImageOutlined'; +import MarkunreadMailboxOutlinedIcon from '@mui/icons-material/MarkunreadMailboxOutlined'; +import SendOutlinedIcon from '@mui/icons-material/SendOutlined'; +import StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined'; import User1 from 'assets/images/users/user-round.svg'; function ListItemWrapper({ children }) { @@ -84,11 +87,11 @@ export default function NotificationList() { - + Store Verification Done} /> @@ -112,17 +115,17 @@ export default function NotificationList() { - + Check Your Mail.} /> All done! Now check your inbox as you're in for a sweet treat! - @@ -149,9 +152,9 @@ export default function NotificationList() { 21 Jan 2020 - - - + + + demo.jpg diff --git a/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx b/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx index c094c4d6a..e93e37ffb 100644 --- a/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx +++ b/vite/src/layout/MainLayout/Header/NotificationSection/index.jsx @@ -79,7 +79,7 @@ export default function NotificationSection() { }, [open]); const handleChange = (event) => { - event?.target.value && setValue(event?.target.value); + if (event?.target.value) setValue(event?.target.value); }; return ( @@ -91,12 +91,13 @@ export default function NotificationSection() { ...theme.typography.commonAvatar, ...theme.typography.mediumAvatar, transition: 'all .2s ease-in-out', - color: theme.vars.palette.warning.dark, - background: theme.vars.palette.warning.light, + color: theme.vars.palette.warning.main, + background: theme.vars.palette.warning.lighter, '&:hover, &[aria-controls="menu-list-grow"]': { - color: theme.vars.palette.warning.light, - background: theme.vars.palette.warning.dark - } + color: theme.vars.palette.warning.lighter, + background: theme.vars.palette.warning.main + }, + svg: { width: 20, height: 20 } }} ref={anchorRef} aria-controls={open ? 'menu-list-grow' : undefined} @@ -120,12 +121,12 @@ export default function NotificationSection() { - + All Notification - + Mark as all read @@ -153,9 +154,7 @@ export default function NotificationSection() { - + diff --git a/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx b/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx index 1049c29b3..4ca5a688e 100644 --- a/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx +++ b/vite/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.jsx @@ -23,7 +23,7 @@ export default function UpgradePlanCard() { return ( } label={} @@ -115,7 +113,7 @@ export default function ProfileSection() { {open && ( - + @@ -127,18 +125,19 @@ export default function ProfileSection() { Project Admin setValue(e.target.value)} placeholder="Search profile options" startAdornment={ - + } + sx={{ my: 2 }} aria-describedby="search-helper-text" - slotProps={{ input: { 'aria-label': 'weight' } }} + slotProps={{ input: { 'aria-label': 'profile options' } }} /> @@ -154,7 +153,7 @@ export default function ProfileSection() { > - + diff --git a/vite/src/layout/MainLayout/Header/SearchSection/index.jsx b/vite/src/layout/MainLayout/Header/SearchSection/index.jsx index 2237c1169..8ebc84c0a 100644 --- a/vite/src/layout/MainLayout/Header/SearchSection/index.jsx +++ b/vite/src/layout/MainLayout/Header/SearchSection/index.jsx @@ -30,12 +30,11 @@ function HeaderAvatar({ children, ref, ...others }) { sx={{ ...theme.typography.commonAvatar, ...theme.typography.mediumAvatar, - color: theme.vars.palette.secondary.dark, - background: theme.vars.palette.secondary.light, - '&:hover': { - color: theme.vars.palette.secondary.light, - background: theme.vars.palette.secondary.dark - } + color: 'secondary.dark', + bgcolor: 'secondary.lighter', + '&:hover': { color: 'secondary.lighter', bgcolor: 'secondary.dark' }, + + svg: { width: 20, height: 20 } }} {...others} > @@ -71,9 +70,9 @@ function MobileSearch({ value, setValue, popupState }) { sx={{ ...theme.typography.commonAvatar, ...theme.typography.mediumAvatar, - bgcolor: 'orange.light', - color: 'orange.dark', - '&:hover': { bgcolor: 'orange.dark', color: 'orange.light' } + bgcolor: 'error.lighter', + color: 'error.dark', + '&:hover': { bgcolor: 'error.dark', color: 'error.lighter' } }} {...bindToggle(popupState)} > diff --git a/vite/src/layout/MainLayout/Header/index.jsx b/vite/src/layout/MainLayout/Header/index.jsx index c2bf2ae10..4aba2d62d 100644 --- a/vite/src/layout/MainLayout/Header/index.jsx +++ b/vite/src/layout/MainLayout/Header/index.jsx @@ -38,16 +38,15 @@ export default function Header() { ...theme.typography.mediumAvatar, overflow: 'hidden', transition: 'all .2s ease-in-out', - color: theme.vars.palette.secondary.dark, - background: theme.vars.palette.secondary.light, - '&:hover': { - color: theme.vars.palette.secondary.light, - background: theme.vars.palette.secondary.dark - } + bgcolor: 'secondary.lighter', + color: 'secondary.dark', + '&:hover': { color: 'secondary.lighter', bgcolor: 'secondary.dark' }, + + svg: { width: 20, height: 20 } }} onClick={() => handlerDrawerOpen(!drawerOpen)} > - + diff --git a/vite/src/layout/MainLayout/MainContentStyled.js b/vite/src/layout/MainLayout/MainContentStyled.js index a41e3986c..9aa419386 100644 --- a/vite/src/layout/MainLayout/MainContentStyled.js +++ b/vite/src/layout/MainLayout/MainContentStyled.js @@ -2,7 +2,7 @@ import { styled } from '@mui/material/styles'; // project imports -import { drawerWidth } from 'store/constant'; +import { drawerWidth, HEADER_HEIGHT } from 'store/constant'; // ==============================|| MAIN LAYOUT - STYLED ||============================== // @@ -12,10 +12,10 @@ const MainContentStyled = styled('main', { backgroundColor: theme.vars.palette.grey[100], minWidth: '1%', width: '100%', - minHeight: 'calc(100vh - 88px)', + minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`, flexGrow: 1, padding: 20, - marginTop: 88, + marginTop: HEADER_HEIGHT, marginRight: 20, borderRadius: `${borderRadius}px`, borderBottomLeftRadius: 0, @@ -28,7 +28,7 @@ const MainContentStyled = styled('main', { [theme.breakpoints.up('md')]: { marginLeft: -(drawerWidth - 72), width: `calc(100% - ${drawerWidth}px)`, - marginTop: 88 + marginTop: HEADER_HEIGHT } }), ...(open && { @@ -37,16 +37,16 @@ const MainContentStyled = styled('main', { duration: theme.transitions.duration.shorter + 200 }), marginLeft: 0, - marginTop: 88, + marginTop: HEADER_HEIGHT, width: `calc(100% - ${drawerWidth}px)`, [theme.breakpoints.up('md')]: { - marginTop: 88 + marginTop: HEADER_HEIGHT } }), [theme.breakpoints.down('md')]: { marginLeft: 20, padding: 16, - marginTop: 88, + marginTop: HEADER_HEIGHT, ...(!open && { width: `calc(100% - ${drawerWidth}px)` }) diff --git a/vite/src/layout/MainLayout/MenuList/NavCollapse/index.jsx b/vite/src/layout/MainLayout/MenuList/NavCollapse/index.jsx index 81429a494..19bd9f3dd 100644 --- a/vite/src/layout/MainLayout/MenuList/NavCollapse/index.jsx +++ b/vite/src/layout/MainLayout/MenuList/NavCollapse/index.jsx @@ -164,11 +164,11 @@ export default function NavCollapse({ menu, level, parentId }) { height: 46, alignItems: 'center', justifyContent: 'center', - '&:hover': { bgcolor: 'secondary.light' }, + '&:hover': { bgcolor: 'secondary.lighter' }, ...((isSelected || anchorEl) && { - bgcolor: 'secondary.light', - '&:hover': { bgcolor: 'secondary.light' } + bgcolor: 'secondary.lighter', + '&:hover': { bgcolor: 'secondary.lighter' } }) }) }} @@ -278,7 +278,7 @@ export default function NavCollapse({ menu, level, parentId }) { height: '100%', width: '1px', opacity: 1, - bgcolor: 'primary.light' + bgcolor: 'primary.lighter' } }} > diff --git a/vite/src/layout/MainLayout/MenuList/NavGroup/index.jsx b/vite/src/layout/MainLayout/MenuList/NavGroup/index.jsx index 7bcf802dc..87ce3a57c 100644 --- a/vite/src/layout/MainLayout/MenuList/NavGroup/index.jsx +++ b/vite/src/layout/MainLayout/MenuList/NavGroup/index.jsx @@ -145,6 +145,5 @@ NavGroup.propTypes = { lastItem: PropTypes.number, remItems: PropTypes.array, lastItemId: PropTypes.string, - selectedID: PropTypes.oneOfType([PropTypes.any, PropTypes.string]), setSelectedID: PropTypes.oneOfType([PropTypes.any, PropTypes.func]) }; diff --git a/vite/src/layout/MainLayout/MenuList/NavItem/index.jsx b/vite/src/layout/MainLayout/MenuList/NavItem/index.jsx index 7acbde1f5..1528f6f00 100644 --- a/vite/src/layout/MainLayout/MenuList/NavItem/index.jsx +++ b/vite/src/layout/MainLayout/MenuList/NavItem/index.jsx @@ -5,7 +5,6 @@ import { Link, matchPath, useLocation } from 'react-router-dom'; // material-ui import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; -import Avatar from '@mui/material/Avatar'; import ButtonBase from '@mui/material/ButtonBase'; import Chip from '@mui/material/Chip'; import ListItemButton from '@mui/material/ListItemButton'; @@ -106,10 +105,10 @@ export default function NavItem({ item, level, isParents = false, setSelectedID height: 46, alignItems: 'center', justifyContent: 'center', - '&:hover': { bgcolor: 'secondary.light' }, + '&:hover': { bgcolor: 'secondary.lighter' }, ...(isSelected && { - bgcolor: 'secondary.light', - '&:hover': { bgcolor: 'secondary.light' } + bgcolor: 'secondary.lighter', + '&:hover': { bgcolor: 'secondary.lighter' } }) }) }} @@ -164,11 +163,7 @@ export default function NavItem({ item, level, isParents = false, setSelectedID variant={item.chip?.variant} size={item.chip?.size} label={item.chip?.label} - avatar={ - - {item.chip?.avatar} - - } + avatar={item.chip?.avatar} /> diff --git a/vite/src/layout/MainLayout/Sidebar/MenuCard/index.jsx b/vite/src/layout/MainLayout/Sidebar/MenuCard/index.jsx index a09a3f162..e8a2b8ea1 100644 --- a/vite/src/layout/MainLayout/Sidebar/MenuCard/index.jsx +++ b/vite/src/layout/MainLayout/Sidebar/MenuCard/index.jsx @@ -2,7 +2,6 @@ import PropTypes from 'prop-types'; import { memo } from 'react'; // material-ui -import { useTheme } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import Card from '@mui/material/Card'; import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'; @@ -23,12 +22,7 @@ function LinearProgressWithLabel({ value, ...others }) { return ( - + Progress {`${Math.round(value)}%`} @@ -38,17 +32,7 @@ function LinearProgressWithLabel({ value, ...others }) { variant="determinate" value={value} {...others} - sx={{ - height: 10, - borderRadius: 30, - [`&.${linearProgressClasses.colorPrimary}`]: { - bgcolor: 'background.paper' - }, - [`& .${linearProgressClasses.bar}`]: { - borderRadius: 5, - bgcolor: 'primary.dark' - } - }} + sx={{ height: 10, borderRadius: 30, [`& .${linearProgressClasses.bar}`]: { borderRadius: 5 } }} /> ); @@ -57,12 +41,10 @@ function LinearProgressWithLabel({ value, ...others }) { // ==============================|| SIDEBAR - MENU CARD ||============================== // function MenuCard() { - const theme = useTheme(); - return ( - + Get Extra Space diff --git a/vite/src/serviceWorker.jsx b/vite/src/serviceWorker.jsx index 342e5be45..0692da705 100644 --- a/vite/src/serviceWorker.jsx +++ b/vite/src/serviceWorker.jsx @@ -12,10 +12,10 @@ const isLocalhost = Boolean( window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.0/8 are considered localhost for IPv4. - window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.0/8 are considered localhost for IPv4. + window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) ); const publicURL = import.meta.env.PUBLIC_URL || ''; diff --git a/vite/src/store/constant.js b/vite/src/store/constant.js index 75da000c8..70cb4805f 100644 --- a/vite/src/store/constant.js +++ b/vite/src/store/constant.js @@ -2,3 +2,4 @@ export const gridSpacing = 3; export const drawerWidth = 260; export const appDrawerWidth = 320; +export const HEADER_HEIGHT = 80; diff --git a/vite/src/themes/overrides/Alert.jsx b/vite/src/themes/overrides/Alert.jsx index 4bc7dbcd5..c8c2eb286 100644 --- a/vite/src/themes/overrides/Alert.jsx +++ b/vite/src/themes/overrides/Alert.jsx @@ -63,11 +63,16 @@ export default function Alert(theme) { alignItems: 'center', variants: [ { props: { variant: 'standard' }, style: standardVariant }, - { props: { variant: 'outlined' }, style: outlinedVariant }, + { + props: { variant: 'outlined' }, + style: (args) => ({ + ...outlinedVariant(args), + border: '1px dashed' + }) + }, { props: { variant: 'filled' }, style: filledVariant } ] - }, - outlined: { border: '1px dashed' } + } } } }; diff --git a/vite/src/themes/overrides/Button.jsx b/vite/src/themes/overrides/Button.jsx index d3bc0777b..8aecad48c 100644 --- a/vite/src/themes/overrides/Button.jsx +++ b/vite/src/themes/overrides/Button.jsx @@ -1,20 +1,71 @@ +// project imports +import { withAlpha } from 'utils/colorUtils'; + // ==============================|| OVERRIDES - BUTTON ||============================== // export default function Button(theme) { + const disabledButtonBackground = withAlpha(theme.vars.palette.grey[100], 0.5); + return { - MuiSlider: { + MuiButton: { + defaultProps: { + disableElevation: true + }, styleOverrides: { root: { + borderRadius: 8, + '&.Mui-disabled': { - color: theme.vars.palette.grey[300] + cursor: 'not-allowed', + pointerEvents: 'auto', + '&.MuiButton-contained': { + backgroundColor: disabledButtonBackground + }, + '&:hover': { + backgroundColor: 'transparent', + '&.MuiButton-contained': { + backgroundColor: disabledButtonBackground + } + } + }, + + // loading styles + '&.MuiButton-loading': { + '.MuiButton-loadingIndicator': { position: 'relative' }, + + // Styles specific to loadingPositionEnd + '&.MuiButton-loadingPositionEnd': { + '.MuiButton-loadingIndicator': { right: 'unset', marginLeft: 8 }, + '.MuiButton-endIcon': { display: 'none' } + }, + + // Styles specific to loadingPositionStart + '&.MuiButton-loadingPositionStart': { + '.MuiButton-loadingIndicator': { left: 'unset', marginRight: 8 }, + '.MuiButton-startIcon': { display: 'none' } + } } }, - mark: { - backgroundColor: theme.vars.palette.background.paper, - width: '4px' + sizeSmall: { + height: 36, + fontSize: 12, + lineHeight: '20px', + letterSpacing: 0, + padding: '8px 16px' + }, + sizeMedium: { + height: 44, + fontSize: 14, + lineHeight: '20px', + letterSpacing: 0, + padding: '12px 16px' }, - valueLabel: { - color: theme.vars.palette.primary.light + sizeLarge: { + height: 52, + fontSize: 16, + lineHeight: '20px', + letterSpacing: 0, + padding: 16 } } } diff --git a/vite/src/themes/overrides/Chip.jsx b/vite/src/themes/overrides/Chip.jsx index 37fe130dd..50471f271 100644 --- a/vite/src/themes/overrides/Chip.jsx +++ b/vite/src/themes/overrides/Chip.jsx @@ -1,9 +1,6 @@ -// project imports -import { withAlpha } from 'utils/colorUtils'; - // ===============================|| OVERRIDES - CHIP ||=============================== // -export default function Chip(theme) { +export default function Chip() { return { MuiChip: { defaultProps: { @@ -14,9 +11,8 @@ export default function Chip(theme) { root: { variants: [ { - props: { variant: 'light' }, // Variant for light Chip + props: { variant: 'light' }, style: ({ ownerState, theme }) => { - // Make sure color exists and is a key of palette const colorKey = ownerState.color; const paletteColor = theme.vars.palette[colorKey]; @@ -24,45 +20,48 @@ export default function Chip(theme) { return { color: paletteColor.main, - backgroundColor: paletteColor.light, - - ...(ownerState.color === 'error' && { - backgroundColor: withAlpha(paletteColor.light, 0.25) - }), - ...(ownerState.color === 'success' && { - backgroundColor: withAlpha(paletteColor.light, 0.5) - }), - ...((ownerState.color === 'warning' || ownerState.color === 'success') && { - color: paletteColor.dark - }), + backgroundColor: paletteColor.lighter, '&.MuiChip-clickable': { '&:hover': { - color: paletteColor.light, - backgroundColor: paletteColor.dark + color: paletteColor.lighter, + backgroundColor: paletteColor.main } } }; } - }, - { - props: { variant: 'outlined', color: 'warning' }, - style: { - borderColor: theme.vars.palette.warning.dark, - color: theme.vars.palette.warning.dark - } - }, - { - props: { variant: 'outlined', color: 'success' }, - style: { - borderColor: theme.vars.palette.success.dark, - color: theme.vars.palette.success.dark - } } ], '&.MuiChip-deletable .MuiChip-deleteIcon': { color: 'inherit' } + }, + sizeMedium: { + height: 28 + }, + deleteIconMedium: { + fontSize: 20, + marginRight: 4 + }, + labelMedium: ({ ownerState }) => ({ + paddingLeft: ownerState.variant === 'outlined' ? 9 : 10, + paddingRight: ownerState.variant === 'outlined' ? 9 : 10 + }), + avatarMedium: { + width: 20, + height: 20, + fontSize: 10 + }, + avatar: ({ ownerState, theme }) => { + const colorKey = ownerState.color; + const paletteColor = theme.vars.palette[colorKey]; + + if (!paletteColor) return {}; + + return { + backgroundColor: paletteColor.main, + color: theme.vars.palette.common.white + }; } } } diff --git a/vite/src/themes/overrides/DataGrid.jsx b/vite/src/themes/overrides/DataGrid.jsx index 6a9d01ab6..f581567b7 100644 --- a/vite/src/themes/overrides/DataGrid.jsx +++ b/vite/src/themes/overrides/DataGrid.jsx @@ -1,3 +1,6 @@ +// project imports +import { withAlpha } from 'utils/colorUtils'; + // ==============================|| OVERRIDES - DATA GRID ||============================== // export default function DataGrid(theme) { @@ -19,12 +22,16 @@ export default function DataGrid(theme) { }, '& .MuiFormControl-root>.MuiInputBase-root': { - backgroundColor: `${theme.vars.palette.background.default} !important`, + backgroundColor: `${theme.vars.palette.background.default} !important` + }, + + '--DataGrid-rowBorderColor': `${theme.vars.palette.divider} !important`, + '& .MuiDataGrid-filler, & .MuiDataGrid-toolbar': { borderColor: `${theme.vars.palette.divider} !important` } }, withBorderColor: { - borderColor: theme.vars.palette.divider + borderColor: `${withAlpha(theme.vars.palette.divider, 0.5)} !important` }, toolbarContainer: { '& .MuiButton-root': { @@ -34,10 +41,14 @@ export default function DataGrid(theme) { }, columnHeader: { color: theme.vars.palette.grey[600], + borderColor: `${theme.vars.palette.divider} !important`, + paddingLeft: 24, paddingRight: 24 }, footerContainer: { + paddingLeft: 24, + paddingRight: 24, '&.MuiDataGrid-withBorderColor': { borderBottom: 'none' } @@ -54,17 +65,17 @@ export default function DataGrid(theme) { borderWidth: 1, paddingLeft: 24, paddingRight: 24, - borderColor: theme.vars.palette.divider, + borderColor: `${withAlpha(theme.vars.palette.divider, 0.5)} !important`, '&.MuiDataGrid-cell--withRenderer > div': { ' > .high': { - background: theme.vars.palette.success.light + background: theme.vars.palette.success.lighter }, '& > .medium': { - background: theme.vars.palette.warning.light + background: theme.vars.palette.warning.lighter }, '& > .low': { - background: theme.vars.palette.error.light + background: theme.vars.palette.error.lighter } } } diff --git a/vite/src/themes/overrides/DialogActions.js b/vite/src/themes/overrides/DialogActions.js new file mode 100644 index 000000000..da73931c7 --- /dev/null +++ b/vite/src/themes/overrides/DialogActions.js @@ -0,0 +1,13 @@ +// ==============================|| OVERRIDES - DIALOG ACTIONS ||============================== // + +export default function DialogActions() { + return { + MuiDialogActions: { + styleOverrides: { + root: { + padding: 24 + } + } + } + }; +} diff --git a/vite/src/themes/overrides/IconButton.js b/vite/src/themes/overrides/IconButton.js new file mode 100644 index 000000000..463b608f7 --- /dev/null +++ b/vite/src/themes/overrides/IconButton.js @@ -0,0 +1,74 @@ +// project imports +import { withAlpha } from 'utils/colorUtils'; + +const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info']; + +// ==============================|| OVERRIDES - ICON BUTTON ||============================== // + +export default function IconButton(theme) { + const createColorVariant = (color, variant, styleFn, theme) => { + const paletteColor = theme.vars.palette[color]; + return { + props: { variant, color }, + style: styleFn(paletteColor) + }; + }; + + const commonDisabledStyles = { + '&.Mui-disabled': { + backgroundColor: withAlpha(theme.vars.palette.grey[100], 0.5) + }, + '&.Mui-disabled:not(.MuiIconButton-loading)': { + color: theme.vars.palette.action.disabled + } + }; + + const colorContainedVariants = colors.map((color) => + createColorVariant( + color, + 'contained', + (paletteColor) => ({ + color: paletteColor.contrastText, + backgroundColor: paletteColor.main, + '&:hover': { + backgroundColor: paletteColor.dark + }, + ...commonDisabledStyles + }), + theme + ) + ); + + const colorOutlinedVariants = colors.map((color) => + createColorVariant( + color, + 'outlined', + (paletteColor) => ({ + color: paletteColor.main, + border: `1px solid ${paletteColor.main}`, + '&.Mui-disabled': { + borderColor: theme.vars.palette.action.disabledBackground + } + }), + theme + ) + ); + + return { + MuiIconButton: { + styleOverrides: { + root: { + borderRadius: 8, + '&.Mui-disabled': { + pointerEvents: 'auto', + cursor: 'not-allowed' + }, + variants: [...colorContainedVariants, ...colorOutlinedVariants] + }, + sizeSmall: { width: 36, height: 36 }, + sizeMedium: { width: 44, height: 44 }, + sizeLarge: { width: 52, height: 52 } + } + } + }; +} diff --git a/vite/src/themes/overrides/InputLabel.js b/vite/src/themes/overrides/InputLabel.js new file mode 100644 index 000000000..b0ec0e5a1 --- /dev/null +++ b/vite/src/themes/overrides/InputLabel.js @@ -0,0 +1,18 @@ +// ==============================|| OVERRIDES - INPUT LABEL ||============================== // + +export default function InputLabel() { + return { + MuiInputLabel: { + styleOverrides: { + root: { + '.MuiFormControl-root:has(.MuiInputBase-sizeSmall) > &.MuiInputLabel-outlined': { + transform: `translate(14px, 12px) scale(1)` + }, + '.MuiFormControl-root:has(.MuiInputBase-sizeSmall) > &.MuiInputLabel-outlined.MuiInputLabel-shrink': { + transform: `translate(14px, -9px) scale(0.75)` + } + } + } + } + }; +} diff --git a/vite/src/themes/overrides/ListItemButton.jsx b/vite/src/themes/overrides/ListItemButton.jsx index fea9dc8c8..378109420 100644 --- a/vite/src/themes/overrides/ListItemButton.jsx +++ b/vite/src/themes/overrides/ListItemButton.jsx @@ -11,9 +11,9 @@ export default function ListItemButton(theme) { '&.Mui-selected': { color: theme.vars.palette.secondary.dark, - backgroundColor: theme.vars.palette.secondary.light, + backgroundColor: theme.vars.palette.secondary.lighter, '&:hover': { - backgroundColor: theme.vars.palette.secondary.light + backgroundColor: theme.vars.palette.secondary.lighter }, '& .MuiListItemIcon-root': { color: theme.vars.palette.secondary.dark @@ -21,7 +21,7 @@ export default function ListItemButton(theme) { }, '&:hover': { - backgroundColor: theme.vars.palette.secondary.light, + backgroundColor: theme.vars.palette.secondary.lighter, color: theme.vars.palette.secondary.dark, '& .MuiListItemIcon-root': { color: theme.vars.palette.secondary.dark diff --git a/vite/src/themes/overrides/OutlinedInput.jsx b/vite/src/themes/overrides/OutlinedInput.jsx index 844093fd1..56ae98019 100644 --- a/vite/src/themes/overrides/OutlinedInput.jsx +++ b/vite/src/themes/overrides/OutlinedInput.jsx @@ -3,43 +3,37 @@ export default function OutlinedInput(theme, borderRadius, outlinedFilled) { return { MuiOutlinedInput: { + defaultProps: { + size: 'small' + }, styleOverrides: { root: { background: outlinedFilled ? theme.vars.palette.grey[50] : 'transparent', borderRadius: `${borderRadius}px`, + paddingLeft: 14, + paddingRight: 14, - '& .MuiOutlinedInput-notchedOutline': { - borderColor: theme.vars.palette.grey[400] + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: theme.vars.palette.primary.lighter }, - '&:hover $notchedOutline': { - borderColor: theme.vars.palette.primary.light + '&.Mui-disabled': { + cursor: 'not-allowed', + input: { cursor: 'not-allowed' }, + '& .MuiOutlinedInput-notchedOutline': { borderColor: theme.vars.palette.divider } }, - - '&.MuiInputBase-multiline': { - padding: 1 - } - }, - input: { - fontWeight: 500, - background: outlinedFilled ? theme.vars.palette.grey[50] : 'transparent', - padding: '15.5px 14px', - borderRadius: `${borderRadius}px`, - - '&.MuiInputBase-inputSizeSmall': { - padding: '10px 14px', - - '&.MuiInputBase-inputAdornedStart': { - paddingLeft: 0 + variants: [ + { + props: { size: 'small' }, + style: { + '& input': { paddingTop: 12, paddingBottom: 12, height: 20 } + } } - } - }, - inputAdornedStart: { - paddingLeft: 4 + ] }, - notchedOutline: { - borderRadius: `${borderRadius}px` - } + multiline: { padding: `12px 14px` }, + notchedOutline: { borderColor: theme.vars.palette.divider }, + input: { paddingLeft: 0, paddingRight: 0 } } } }; diff --git a/vite/src/themes/overrides/Select.jsx b/vite/src/themes/overrides/Select.jsx index 9e68a9b84..45872de02 100644 --- a/vite/src/themes/overrides/Select.jsx +++ b/vite/src/themes/overrides/Select.jsx @@ -3,8 +3,21 @@ export default function Select() { return { MuiSelect: { + defaultProps: { + size: 'small' + }, styleOverrides: { + root: { + variants: [ + { + props: { size: 'small' }, + style: { '& .MuiSelect-select': { paddingTop: 12, paddingBottom: 12 } } + } + ] + }, select: { + height: 20, + minHeight: `unset`, '&:focus': { backgroundColor: 'transparent' } diff --git a/vite/src/themes/overrides/Slider.jsx b/vite/src/themes/overrides/Slider.jsx index b0be7a951..80d2c8f62 100644 --- a/vite/src/themes/overrides/Slider.jsx +++ b/vite/src/themes/overrides/Slider.jsx @@ -14,7 +14,8 @@ export default function Slider(theme) { width: '4px' }, valueLabel: { - color: theme.vars.palette.primary.light + backgroundColor: theme.vars.palette.grey[700], + color: theme.vars.palette.primary.lighter } } } diff --git a/vite/src/themes/overrides/Switch.js b/vite/src/themes/overrides/Switch.js new file mode 100644 index 000000000..2c0bd00aa --- /dev/null +++ b/vite/src/themes/overrides/Switch.js @@ -0,0 +1,15 @@ +/*************************** OVERRIDES - SWITCH ***************************/ + +export default function Switch(theme) { + return { + MuiSwitch: { + styleOverrides: { + root: { + '& .MuiSwitch-switchBase.Mui-disabled .MuiSwitch-thumb': { + backgroundColor: theme.vars.palette.grey[300] + } + } + } + } + }; +} diff --git a/vite/src/themes/overrides/TableCell.jsx b/vite/src/themes/overrides/TableCell.jsx index 6612c37f7..dbd0577de 100644 --- a/vite/src/themes/overrides/TableCell.jsx +++ b/vite/src/themes/overrides/TableCell.jsx @@ -5,14 +5,16 @@ export default function TableCell(theme) { MuiTableCell: { styleOverrides: { root: { - borderColor: theme.vars.palette.grey[200], - - '&.MuiTableCell-head': { - fontSize: '0.875rem', - color: theme.vars.palette.grey[900], - fontWeight: 500 + borderColor: theme.vars.palette.grey[200] + }, + head: { + color: theme.vars.palette.grey[900], + ':has(.MuiCheckbox-root)': { + paddingTop: 7, + paddingBottom: 7 } - } + }, + body: { paddingTop: 14, paddingBottom: 14 } } } }; diff --git a/vite/src/themes/overrides/index.js b/vite/src/themes/overrides/index.js index 992bdf364..dc904e997 100644 --- a/vite/src/themes/overrides/index.js +++ b/vite/src/themes/overrides/index.js @@ -14,15 +14,20 @@ import DataGrid from './DataGrid'; import DatePicker from './DatePicker'; import Divider from './Divider'; import DateTimePickerToolbar from './DateTimePickerToolbar'; +import DialogActions from './DialogActions'; import Dialog from './Dialog'; import DialogTitle from './DialogTitle'; +import IconButton from './IconButton'; import InputBase from './InputBase'; +import InputLabel from './InputLabel'; import ListItemButton from './ListItemButton'; import ListItemIcon from './ListItemIcon'; import ListItemText from './ListItemText'; +import OutlinedInput from './OutlinedInput'; import Paper from './Paper'; import Select from './Select'; import Slider from './Slider'; +import Switch from './Switch'; import TableCell from './TableCell'; import Tabs from './Tabs'; import Typography from './Typography'; @@ -42,16 +47,21 @@ export default function ComponentsOverrides(theme, borderRadius, outlinedFilled) DataGrid(theme), DatePicker(), DateTimePickerToolbar(), + DialogActions(), Dialog(), DialogTitle(), Divider(theme), + IconButton(theme), InputBase(theme), + InputLabel(), ListItemButton(theme), ListItemIcon(theme), ListItemText(theme), + OutlinedInput(theme, borderRadius, outlinedFilled), Paper(borderRadius), Select(), Slider(theme), + Switch(theme), TableCell(theme), Tabs(theme), Typography(theme) diff --git a/vite/src/themes/palette.jsx b/vite/src/themes/palette.jsx index 5ce312e32..eb9abc279 100644 --- a/vite/src/themes/palette.jsx +++ b/vite/src/themes/palette.jsx @@ -14,75 +14,9 @@ export function buildPalette(presetColor) { colors = defaultColor; } - const lightColors = { - primary: { - light: colors.primaryLight, - main: colors.primaryMain, - dark: colors.primaryDark, - 200: colors.primary200, - 800: colors.primary800 - }, - secondary: { - light: colors.secondaryLight, - main: colors.secondaryMain, - dark: colors.secondaryDark, - 200: colors.secondary200, - 800: colors.secondary800 - }, - error: { - light: colors.errorLight, - main: colors.errorMain, - dark: colors.errorDark - }, - orange: { - light: colors.orangeLight, - main: colors.orangeMain, - dark: colors.orangeDark - }, - warning: { - light: colors.warningLight, - main: colors.warningMain, - dark: colors.warningDark, - contrastText: colors.grey700 - }, - success: { - light: colors.successLight, - 200: colors.success200, - main: colors.successMain, - dark: colors.successDark - }, - grey: { - 50: colors.grey50, - 100: colors.grey100, - 500: colors.grey500, - 600: colors.grey600, - 700: colors.grey700, - 900: colors.grey900 - }, - dark: { - light: colors.darkTextPrimary, - main: colors.darkLevel1, - dark: colors.darkLevel2, - 800: colors.darkBackground, - 900: colors.darkPaper - }, - text: { - primary: colors.grey700, - secondary: colors.grey500, - dark: colors.grey900, - hint: colors.grey100, - heading: colors.grey900 - }, - divider: colors.grey200, - background: { - paper: colors.paper, - default: colors.paper - } - }; - - const commonColor = { common: { black: colors.darkPaper, white: '#fff' } }; + const commonColor = { common: { black: '#111936', white: '#fff' } }; - const extendedLight = extendPaletteWithChannels(lightColors); + const extendedLight = extendPaletteWithChannels(colors.light); const extendedCommon = extendPaletteWithChannels(commonColor); return { diff --git a/vite/src/themes/theme/default.js b/vite/src/themes/theme/default.js index 38b50a2b7..03950f63f 100644 --- a/vite/src/themes/theme/default.js +++ b/vite/src/themes/theme/default.js @@ -1,82 +1,91 @@ // ==============================|| DEFAULT THEME COLORS ||============================== // const defaultColor = { - // paper & background - paper: '#ffffff', - - // primary - primaryLight: '#e3f2fd', - primary200: '#90caf9', - primaryMain: '#2196f3', - primaryDark: '#1e88e5', - primary800: '#1565c0', - - // secondary - secondaryLight: '#ede7f6', - secondary200: '#b39ddb', - secondaryMain: '#673ab7', - secondaryDark: '#5e35b1', - secondary800: '#4527a0', - - // success - successLight: '#b9f6ca', - success200: '#69f0ae', - successMain: '#00e676', - successDark: '#00c853', - - // error - errorLight: '#ef9a9a', - errorMain: '#f44336', - errorDark: '#c62828', - - // orange - orangeLight: '#fbe9e7', - orangeMain: '#ffab91', - orangeDark: '#d84315', - - // warning - warningLight: '#fff8e1', - warningMain: '#ffe57f', - warningDark: '#ffc107', - - // grey - grey50: '#f8fafc', - grey100: '#eef2f6', - grey200: '#e3e8ef', - grey300: '#cdd5df', - grey500: '#697586', - grey600: '#4b5565', - grey700: '#364152', - grey900: '#121926', - - // ==============================|| DARK THEME VARIANTS ||============================== // - - // paper & background - darkPaper: '#111936', - darkBackground: '#1a223f', - - // dark 800 & 900 - darkLevel1: '#29314f', - darkLevel2: '#212946', - - // text variants - darkTextTitle: '#d7dcec', - darkTextPrimary: '#bdc8f0', - darkTextSecondary: '#8492c4', - - // primary dark - darkPrimaryLight: '#e3f2fd', - darkPrimaryMain: '#2196f3', - darkPrimaryDark: '#1e88e5', - darkPrimary200: '#90caf9', - darkPrimary800: '#1565c0', - - // secondary dark - darkSecondaryLight: '#d1c4e9', - darkSecondaryMain: '#7c4dff', - darkSecondaryDark: '#651fff', - darkSecondary200: '#b39ddb', - darkSecondary800: '#6200ea' + light: { + primary: { + lighter: '#E3F2FD', + light: '#90CAF9', + main: '#2196F3', + dark: '#1E88E5', + darker: '#1565C0' + }, + secondary: { + lighter: '#EDE7F6', + light: '#B39DDB', + main: '#673AB7', + dark: '#5E35B1', + darker: '#4527A0' + }, + success: { + lighter: '#D4FFE0', + light: '#61FFB2', + main: '#11C86F', + dark: '#00B44B', + darker: '#04923F', + contrastText: '#FFFFFF' + }, + error: { + lighter: '#FFE3E3', + light: '#EF9A9A', + main: '#F44336', + dark: '#C62828', + darker: '#A21313' + }, + orange: { + lighter: '#FFEBD5', + light: '#FFB266', + main: '#FF8000', + dark: '#CC6600', + darker: '#AE5802' + }, + warning: { + lighter: '#FFF6D7', + light: '#FFE479', + main: '#F8BB05', + dark: '#E6AD00', + darker: '#C29614', + contrastText: '#FFFFFF' + }, + info: { + lighter: '#DFF4F9', + light: '#B0E1ED', + main: '#0AA0C4', + dark: '#08809D', + darker: '#066076' + }, + grey: { + 50: '#F8FAFC', + 100: '#EEF2F6', + 200: '#E3E8EF', + 300: '#C3CCD8', + 400: '#95A4B8', + 500: '#8492A4', + 600: '#697586', + 700: '#4B5565', + 800: '#364152', + 900: '#121926' + }, + dark: { + light: '#BDC8F0', + main: '#29314F', + dark: '#212946', + 800: '#1A223F', + 900: '#111936' + }, + text: { + primary: '#364152', + secondary: '#697586', + dark: '#121926', + hint: '#EEF2F6', + heading: '#121926', + disabled: '#C3CCD8' + }, + divider: '#E3E8EF', + background: { + paper: '#FFFFFF', + default: '#FFFFFF' + } + } }; export default defaultColor; diff --git a/vite/src/ui-component/cards/CardSecondaryAction.jsx b/vite/src/ui-component/cards/CardSecondaryAction.jsx index 3ae8d8f12..cfa30d735 100644 --- a/vite/src/ui-component/cards/CardSecondaryAction.jsx +++ b/vite/src/ui-component/cards/CardSecondaryAction.jsx @@ -2,48 +2,48 @@ import PropTypes from 'prop-types'; // material-ui import { useTheme } from '@mui/material/styles'; -import ButtonBase from '@mui/material/ButtonBase'; +import IconButton from '@mui/material/IconButton'; import Link from '@mui/material/Link'; import Tooltip from '@mui/material/Tooltip'; -// project imports -import Avatar from '../extended/Avatar'; - export default function CardSecondaryAction({ title, link, icon }) { const theme = useTheme(); return ( - - {!icon && ( - - - - - - - - - - - - - - - - )} - {icon && ( - - {icon} - + + {icon || ( + + + + + + + + + + + + + )} - + ); } diff --git a/vite/src/ui-component/cards/MainCard.jsx b/vite/src/ui-component/cards/MainCard.jsx index 82bfdca46..890797523 100644 --- a/vite/src/ui-component/cards/MainCard.jsx +++ b/vite/src/ui-component/cards/MainCard.jsx @@ -14,7 +14,6 @@ const headerStyle = { export default function MainCard({ border = false, - boxShadow, children, content = true, contentClass = '', @@ -22,26 +21,22 @@ export default function MainCard({ headerSX = {}, darkTitle, secondary, - shadow, sx = {}, title, ref, ...others }) { - const defaultShadow = '0 2px 14px 0 rgb(32 40 45 / 8%)'; - return ( ({ - border: border ? '1px solid' : 'none', - borderColor: 'divider', - ':hover': { - boxShadow: boxShadow ? shadow || defaultShadow : 'inherit' + sx={[ + { + border: border ? '1px solid' : 'none', + borderColor: 'divider' }, - ...(typeof sx === 'function' ? sx(theme) : sx || {}) - })} + ...(Array.isArray(sx) ? sx : [sx]) + ]} > {/* card header and action */} {!darkTitle && title && } @@ -65,7 +60,6 @@ export default function MainCard({ MainCard.propTypes = { border: PropTypes.bool, - boxShadow: PropTypes.bool, children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), content: PropTypes.bool, contentClass: PropTypes.string, @@ -73,7 +67,6 @@ MainCard.propTypes = { headerSX: PropTypes.object, darkTitle: PropTypes.bool, secondary: PropTypes.any, - shadow: PropTypes.string, sx: PropTypes.object, title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), ref: PropTypes.object, diff --git a/vite/src/ui-component/cards/SubCard.jsx b/vite/src/ui-component/cards/SubCard.jsx index e460bcc9b..dd714fed1 100644 --- a/vite/src/ui-component/cards/SubCard.jsx +++ b/vite/src/ui-component/cards/SubCard.jsx @@ -24,16 +24,15 @@ export default function SubCard({ actions, ...others }) { - const defaultShadow = '0 2px 14px 0 rgb(32 40 45 / 8%)'; - return ( ({ - border: '1px solid', - borderColor: 'divider', - ':hover': { boxShadow: defaultShadow }, - ...(typeof sx === 'function' ? sx(theme) : sx || {}) - })} + sx={[ + { + border: '1px solid', + borderColor: 'divider' + }, + ...(Array.isArray(sx) ? sx : [sx]) + ]} {...others} > {/* card header and action */} @@ -60,7 +59,7 @@ export default function SubCard({ } SubCard.propTypes = { - children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.any]), + children: PropTypes.oneOfType([PropTypes.string, PropTypes.any, PropTypes.node]), className: PropTypes.string, content: PropTypes.bool, contentClass: PropTypes.string, diff --git a/vite/src/ui-component/cards/TotalIncomeDarkCard.jsx b/vite/src/ui-component/cards/TotalIncomeDarkCard.jsx index dc5d76825..cb6752423 100644 --- a/vite/src/ui-component/cards/TotalIncomeDarkCard.jsx +++ b/vite/src/ui-component/cards/TotalIncomeDarkCard.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; // material-ui -import { styled, useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; @@ -16,34 +16,6 @@ import TotalIncomeCard from 'ui-component/cards/Skeleton/TotalIncomeCard'; // assets import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined'; -// styles -const CardWrapper = styled(MainCard)(({ theme }) => ({ - backgroundColor: theme.vars.palette.primary.dark, - color: theme.vars.palette.primary.light, - overflow: 'hidden', - position: 'relative', - '&:after': { - content: '""', - position: 'absolute', - width: 210, - height: 210, - background: `linear-gradient(210.04deg, ${theme.vars.palette.primary[200]} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, - borderRadius: '50%', - top: -30, - right: -180 - }, - '&:before': { - content: '""', - position: 'absolute', - width: 210, - height: 210, - background: `linear-gradient(140.9deg, ${theme.vars.palette.primary[200]} -14.02%, rgba(144, 202, 249, 0) 77.58%)`, - borderRadius: '50%', - top: -160, - right: -130 - } -})); - export default function TotalIncomeDarkCard({ isLoading }) { const theme = useTheme(); @@ -52,21 +24,42 @@ export default function TotalIncomeDarkCard({ isLoading }) { {isLoading ? ( ) : ( - + - - + + } secondary={ - + Total Income } @@ -89,7 +82,7 @@ export default function TotalIncomeDarkCard({ isLoading }) { - + )} ); diff --git a/vite/src/ui-component/cards/TotalIncomeLightCard.jsx b/vite/src/ui-component/cards/TotalIncomeLightCard.jsx index ddf1810b9..beb8936e1 100644 --- a/vite/src/ui-component/cards/TotalIncomeLightCard.jsx +++ b/vite/src/ui-component/cards/TotalIncomeLightCard.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; // material-ui -import { useTheme, styled } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; @@ -13,33 +13,6 @@ import Box from '@mui/material/Box'; // project imports import MainCard from 'ui-component/cards/MainCard'; import TotalIncomeCard from 'ui-component/cards/Skeleton/TotalIncomeCard'; -import { withAlpha } from 'utils/colorUtils'; - -// styles -const CardWrapper = styled(MainCard)(({ theme }) => ({ - overflow: 'hidden', - position: 'relative', - '&:after': { - content: '""', - position: 'absolute', - width: 210, - height: 210, - background: `linear-gradient(210.04deg, ${theme.vars.palette.warning.dark} -50.94%, rgba(144, 202, 249, 0) 83.49%)`, - borderRadius: '50%', - top: -30, - right: -180 - }, - '&:before': { - content: '""', - position: 'absolute', - width: 210, - height: 210, - background: `linear-gradient(140.9deg, ${theme.vars.palette.warning.dark} -14.02%, rgba(144, 202, 249, 0) 70.50%)`, - borderRadius: '50%', - top: -160, - right: -130 - } -})); export default function TotalIncomeLightCard({ isLoading, total, icon, label }) { const theme = useTheme(); @@ -49,20 +22,39 @@ export default function TotalIncomeLightCard({ isLoading, total, icon, label }) {isLoading ? ( ) : ( - + - + {icon} @@ -78,7 +70,7 @@ export default function TotalIncomeLightCard({ isLoading, total, icon, label }) - + )} ); diff --git a/vite/src/ui-component/extended/Accordion.jsx b/vite/src/ui-component/extended/Accordion.jsx index 876fde81f..622296045 100644 --- a/vite/src/ui-component/extended/Accordion.jsx +++ b/vite/src/ui-component/extended/Accordion.jsx @@ -14,8 +14,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; export default function Accordion({ data, defaultExpandedId = null, expandIcon, square, toggle }) { const [expanded, setExpanded] = useState(null); - const handleChange = (panel) => (event, newExpanded) => { - toggle && setExpanded(newExpanded ? panel : false); + const handleChange = (panel) => (_event, newExpanded) => { + if (toggle) setExpanded(newExpanded ? panel : false); }; useEffect(() => { @@ -50,7 +50,7 @@ export default function Accordion({ data, defaultExpandedId = null, expandIcon, Accordion.propTypes = { data: PropTypes.array, - defaultExpandedId: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.any]), + defaultExpandedId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.any]), expandIcon: PropTypes.node, square: PropTypes.bool, toggle: PropTypes.bool diff --git a/vite/src/ui-component/extended/AppBar.jsx b/vite/src/ui-component/extended/AppBar.jsx index 88e7c70b0..1d2ae72db 100644 --- a/vite/src/ui-component/extended/AppBar.jsx +++ b/vite/src/ui-component/extended/AppBar.jsx @@ -65,16 +65,23 @@ export default function AppBar({ ...others }) { - - - - @@ -87,7 +94,7 @@ export default function AppBar({ ...others }) { - + @@ -95,7 +102,7 @@ export default function AppBar({ ...others }) { - + @@ -103,7 +110,7 @@ export default function AppBar({ ...others }) { - + @@ -111,7 +118,7 @@ export default function AppBar({ ...others }) { - + diff --git a/vite/src/ui-component/extended/Breadcrumbs.jsx b/vite/src/ui-component/extended/Breadcrumbs.jsx index 025248a1a..f5ead38f6 100644 --- a/vite/src/ui-component/extended/Breadcrumbs.jsx +++ b/vite/src/ui-component/extended/Breadcrumbs.jsx @@ -146,8 +146,11 @@ export default function Breadcrumbs({ {title && !titleBottom && } @@ -261,8 +264,11 @@ export default function Breadcrumbs({ {title && !titleBottom && } diff --git a/vite/src/ui-component/extended/Form/AppForm.jsx b/vite/src/ui-component/extended/Form/AppForm.jsx new file mode 100644 index 000000000..6dcc6283f --- /dev/null +++ b/vite/src/ui-component/extended/Form/AppForm.jsx @@ -0,0 +1,18 @@ +import PropTypes from 'prop-types'; + +// third party +import { FormikProvider } from 'formik'; + +// ==============================|| APP FORM WRAPPER ||============================== // + +export default function AppForm({ form, children }) { + return ( + +
+ {children} +
+ + ); +} + +AppForm.propTypes = { form: PropTypes.object, children: PropTypes.node }; diff --git a/vite/src/ui-component/extended/Form/CustomFormControl.jsx b/vite/src/ui-component/extended/Form/CustomFormControl.jsx index b84eab033..81092443f 100644 --- a/vite/src/ui-component/extended/Form/CustomFormControl.jsx +++ b/vite/src/ui-component/extended/Form/CustomFormControl.jsx @@ -12,7 +12,7 @@ const CustomFormControl = styled(FormControl)(() => ({ } }, '& > div > input': { - padding: '30.5px 14px 11.5px !important' + padding: '30.5px 14px 11.5px 0px !important' }, '& legend': { display: 'none' diff --git a/vite/src/ui-component/extended/Form/FormAutocomplete.jsx b/vite/src/ui-component/extended/Form/FormAutocomplete.jsx new file mode 100644 index 000000000..885b1ddc6 --- /dev/null +++ b/vite/src/ui-component/extended/Form/FormAutocomplete.jsx @@ -0,0 +1,151 @@ +import PropTypes from 'prop-types'; +import { useMemo } from 'react'; + +// material-ui +import Autocomplete from '@mui/material/Autocomplete'; +import InputLabel from '@mui/material/InputLabel'; +import Stack from '@mui/material/Stack'; +import TextField from '@mui/material/TextField'; + +// third party +import { useField } from 'formik'; + +// ==============================|| FORM - AUTOCOMPLETE ||============================== // + +export default function FormAutocomplete({ + name, + label, + placeholder, + required, + options, + textFieldProps, + inputLabel, + sx, + id, + inputLabelSx, + onValueChange, + renderInput: renderInputProp, + ...rest +}) { + const [field, meta, helpers] = useField(name); + const fieldId = id ?? name; + + const selected = useMemo(() => { + if (rest.multiple) { + const formikValues = field.value || []; + return options.filter((o) => formikValues.includes(o.value)); + } + + const found = options.find((o) => o.value === field.value); + return found ?? (rest.freeSolo && field.value ? field.value : null); + }, [field.value, options, rest.multiple, rest.freeSolo]); + + const errorState = meta.touched && Boolean(meta.error); + const helperText = meta.touched && meta.error ? meta.error : undefined; + + const input = ( + { + if (option == null) { + return ''; + } + return typeof option === 'string' ? option : option.label; + }} + isOptionEqualToValue={(option, val) => { + if (option == null || val == null) { + return false; + } + const valueToCheck = typeof val === 'string' ? val : val.value; + return option.value === valueToCheck; + }} + onChange={(event, val, reason, details) => { + if (rest.multiple) { + const selectedArray = val || []; + helpers.setValue(selectedArray.map((o) => (typeof o === 'string' ? o : o.value))); + } else { + const newVal = val; + helpers.setValue(typeof newVal === 'string' ? newVal : (newVal?.value ?? '')); + } + onValueChange?.(event, val, reason, details); + }} + onBlur={() => helpers.setTouched(true)} + renderInput={(params) => { + const { InputProps: pInputProps, inputProps: phtmlInputProps, slotProps: pSlotProps, ...otherParams } = params; + const { InputProps: tfInputProps, inputProps: tfhtmlInputProps, slotProps: tfSlotProps, ...otherTfProps } = textFieldProps || {}; + + return renderInputProp ? ( + renderInputProp(params) + ) : ( + + ); + }} + {...rest} + /> + ); + + if (inputLabel) { + return ( + + + {inputLabel} + + {input} + + ); + } + + return input; +} + +FormAutocomplete.propTypes = { + name: PropTypes.string, + label: PropTypes.string, + placeholder: PropTypes.string, + required: PropTypes.bool, + options: PropTypes.any, + textFieldProps: PropTypes.object, + inputLabel: PropTypes.string, + sx: PropTypes.object, + id: PropTypes.any, + inputLabelSx: PropTypes.object, + onValueChange: PropTypes.object, + renderInput: PropTypes.node, + rest: PropTypes.any +}; diff --git a/vite/src/ui-component/extended/Form/FormControl.jsx b/vite/src/ui-component/extended/Form/FormControl.jsx index 75427e773..ab50f5efb 100644 --- a/vite/src/ui-component/extended/Form/FormControl.jsx +++ b/vite/src/ui-component/extended/Form/FormControl.jsx @@ -8,10 +8,10 @@ import MUIFormControl from '@mui/material/FormControl'; export default function FormControl({ captionLabel, formState, iconPrimary, iconSecondary, placeholder, textPrimary, textSecondary }) { const IconPrimary = iconPrimary; - const primaryIcon = iconPrimary ? : null; + const primaryIcon = iconPrimary ? : null; const IconSecondary = iconSecondary; - const secondaryIcon = iconSecondary ? : null; + const secondaryIcon = iconSecondary ? : null; const errorState = formState === 'error'; diff --git a/vite/src/ui-component/extended/Form/FormControlSelect.jsx b/vite/src/ui-component/extended/Form/FormControlSelect.jsx deleted file mode 100644 index a09e6dafb..000000000 --- a/vite/src/ui-component/extended/Form/FormControlSelect.jsx +++ /dev/null @@ -1,90 +0,0 @@ -import PropTypes from 'prop-types'; -import { useState } from 'react'; - -// material-ui -import Divider from '@mui/material/Divider'; -import FormControl from '@mui/material/FormControl'; -import InputAdornment from '@mui/material/InputAdornment'; -import MenuItem from '@mui/material/MenuItem'; -import TextField from '@mui/material/TextField'; - -export default function FormControlSelect({ - captionLabel, - currencies, - formState, - iconPrimary, - iconSecondary, - selected, - textPrimary, - textSecondary -}) { - const IconPrimary = iconPrimary; - const primaryIcon = iconPrimary ? : null; - - const IconSecondary = iconSecondary; - const secondaryIcon = iconSecondary ? : null; - - const errorState = formState === 'error'; - const val = selected || ''; - - const [currency, setCurrency] = useState(val); - const handleChange = (event) => { - event?.target.value && setCurrency(event?.target.value); - }; - - return ( - - - {primaryIcon && {primaryIcon}} - {textPrimary && ( - <> - {textPrimary} - - - )} - - ), - endAdornment: ( - <> - {secondaryIcon && {secondaryIcon}} - {textSecondary && ( - <> - - {textSecondary} - - )} - - ) - } - }} - > - {currencies?.map((option, index) => ( - - {option.label} - - ))} - - - ); -} - -FormControlSelect.propTypes = { - captionLabel: PropTypes.string, - currencies: PropTypes.object, - formState: PropTypes.string, - iconPrimary: PropTypes.any, - iconSecondary: PropTypes.any, - selected: PropTypes.string, - textPrimary: PropTypes.string, - textSecondary: PropTypes.string -}; diff --git a/vite/src/ui-component/extended/Form/FormInput.jsx b/vite/src/ui-component/extended/Form/FormInput.jsx new file mode 100644 index 000000000..68247251d --- /dev/null +++ b/vite/src/ui-component/extended/Form/FormInput.jsx @@ -0,0 +1,66 @@ +import PropTypes from 'prop-types'; +import InputLabel from '@mui/material/InputLabel'; +import Stack from '@mui/material/Stack'; +import TextField from '@mui/material/TextField'; + +// third party +import { useField } from 'formik'; + +// ==============================|| FORM - INPUT ||============================== // + +export default function FormInput({ name, label, inputLabel, sx, inputLabelSx, onChange, helperText, id, required, ...rest }) { + const [field, meta] = useField(name); + const fieldId = id ?? name; + + const input = ( + { + field.onChange(e); + onChange?.(e); + }} + error={meta.touched && Boolean(meta.error)} + helperText={meta.touched && meta.error ? String(meta.error) : helperText} + required={required} + {...rest} + /> + ); + + if (inputLabel) { + return ( + + + {inputLabel} + + {input} + + ); + } + + return input; +} + +FormInput.propTypes = { + name: PropTypes.string, + label: PropTypes.any, + inputLabel: PropTypes.string, + sx: PropTypes.object, + inputLabelSx: PropTypes.object, + onChange: PropTypes.any, + helperText: PropTypes.any, + id: PropTypes.any, + required: PropTypes.any, + rest: PropTypes.any +}; diff --git a/vite/src/ui-component/extended/Form/FormPhoneInput.jsx b/vite/src/ui-component/extended/Form/FormPhoneInput.jsx new file mode 100644 index 000000000..de864d946 --- /dev/null +++ b/vite/src/ui-component/extended/Form/FormPhoneInput.jsx @@ -0,0 +1,113 @@ +import PropTypes from 'prop-types'; +// material-ui +import Divider from '@mui/material/Divider'; +import InputAdornment from '@mui/material/InputAdornment'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Stack from '@mui/material/Stack'; +import TextField from '@mui/material/TextField'; + +// third party +import { useField } from 'formik'; + +// assets +import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined'; + +// ==============================|| FORM - PHONE INPUT ||============================== // + +export default function FormPhoneInput({ + name, + dialCodeName, + dialCodes, + label, + inputLabel, + sx, + inputLabelSx, + onChange, + helperText, + id, + required, + ...rest +}) { + const [field, meta] = useField(name); + const [dialCodeField] = useField(dialCodeName); + + const fieldId = id ?? name; + + const input = ( + { + field.onChange(e); + onChange?.(e); + }} + error={meta.touched && Boolean(meta.error)} + helperText={meta.touched && meta.error ? meta.error : helperText} + required={inputLabel ? false : required} + slotProps={{ + input: { + startAdornment: ( + + + + + ) + } + }} + {...rest} + /> + ); + + if (inputLabel) { + return ( + + + {inputLabel} + + {input} + + ); + } + + return input; +} + +FormPhoneInput.propTypes = { + name: PropTypes.string, + dialCodeName: PropTypes.string, + dialCodes: PropTypes.object, + label: PropTypes.any, + inputLabel: PropTypes.string, + sx: PropTypes.any, + inputLabelSx: PropTypes.any, + onChange: PropTypes.any, + helperText: PropTypes.any, + id: PropTypes.any, + required: PropTypes.any, + rest: PropTypes.any +}; diff --git a/vite/src/ui-component/extended/Form/InputLabel.jsx b/vite/src/ui-component/extended/Form/InputLabel.jsx index 2b96e75b9..8c8992256 100644 --- a/vite/src/ui-component/extended/Form/InputLabel.jsx +++ b/vite/src/ui-component/extended/Form/InputLabel.jsx @@ -11,6 +11,8 @@ const BInputLabel = styled((props) => , { marginBottom: horizontal ? 0 : 8 })); +// ==============================|| FORM - INPUT LABEL ||============================== // + export default function InputLabel({ children, horizontal = false, ...others }) { return ( diff --git a/vite/src/ui-component/extended/Form/index.js b/vite/src/ui-component/extended/Form/index.js new file mode 100644 index 000000000..ef33e95ae --- /dev/null +++ b/vite/src/ui-component/extended/Form/index.js @@ -0,0 +1,5 @@ +export { default as AppForm } from './AppForm'; +export { default as FormInput } from './FormInput'; +export { default as FormSelect } from './FormSelect'; +export { default as FormAutocomplete } from './FormAutocomplete'; +export { default as FormPhoneInput } from './FormPhoneInput'; diff --git a/vite/src/views/dashboard/Default/BajajAreaChartCard.jsx b/vite/src/views/dashboard/Default/BajajAreaChartCard.jsx index d77fcb6a5..e2e24b5cc 100644 --- a/vite/src/views/dashboard/Default/BajajAreaChartCard.jsx +++ b/vite/src/views/dashboard/Default/BajajAreaChartCard.jsx @@ -21,7 +21,7 @@ export default function BajajAreaChartCard() { state: { fontFamily } } = useConfig(); - const secondary800 = theme.vars.palette.secondary[800]; + const secondary800 = theme.vars.palette.secondary['darker']; const [chartOptions, setChartOptions] = useState(bajajChartOptions); const [series] = useState([{ data: [0, 15, 10, 50, 30, 40, 25] }]); @@ -46,7 +46,7 @@ export default function BajajAreaChartCard() { }, [fontFamily, secondary800]); return ( - + diff --git a/vite/src/views/dashboard/Default/EarningCard.jsx b/vite/src/views/dashboard/Default/EarningCard.jsx index b300e4c4e..7cc1c41bd 100644 --- a/vite/src/views/dashboard/Default/EarningCard.jsx +++ b/vite/src/views/dashboard/Default/EarningCard.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React from 'react'; +import { useState } from 'react'; // material-ui import { useTheme } from '@mui/material/styles'; @@ -27,7 +27,7 @@ import ArchiveTwoToneIcon from '@mui/icons-material/ArchiveOutlined'; export default function EarningCard({ isLoading }) { const theme = useTheme(); - const [anchorEl, setAnchorEl] = React.useState(null); + const [anchorEl, setAnchorEl] = useState(null); const handleClick = (event) => { setAnchorEl(event.currentTarget); @@ -55,7 +55,7 @@ export default function EarningCard({ isLoading }) { position: 'absolute', width: 210, height: 210, - background: theme.vars.palette.secondary[800], + bgcolor: theme.vars.palette.secondary.darker, borderRadius: '50%', top: { xs: -85 }, right: { xs: -95 } @@ -65,7 +65,7 @@ export default function EarningCard({ isLoading }) { position: 'absolute', width: 210, height: 210, - background: theme.vars.palette.secondary[800], + bgcolor: theme.vars.palette.secondary.darker, borderRadius: '50%', top: { xs: -125 }, right: { xs: -15 }, @@ -78,28 +78,25 @@ export default function EarningCard({ isLoading }) { - + - + $500.00 - - + + Total Earning diff --git a/vite/src/views/dashboard/Default/PopularCard.jsx b/vite/src/views/dashboard/Default/PopularCard.jsx index bf344a941..fe4655525 100644 --- a/vite/src/views/dashboard/Default/PopularCard.jsx +++ b/vite/src/views/dashboard/Default/PopularCard.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React from 'react'; +import { useState } from 'react'; // material-ui import Avatar from '@mui/material/Avatar'; @@ -26,8 +26,16 @@ import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined'; import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined'; import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined'; +const stockData = [ + { id: 1, company: 'Bajaj Finserv', type: 'Profit', percentage: 10, price: 1839 }, + { id: 2, company: 'TTML', type: 'Loss', percentage: 10, price: 100 }, + { id: 3, company: 'Reliance', type: 'Profit', percentage: 10, price: 200 }, + { id: 4, company: 'TTML', type: 'Loss', percentage: 10, price: 189 }, + { id: 5, company: 'Stolon', type: 'Loss', percentage: 10, price: 189 } +]; + export default function PopularCard({ isLoading }) { - const [anchorEl, setAnchorEl] = React.useState(null); + const [anchorEl, setAnchorEl] = useState(null); const handleClick = (event) => { setAnchorEl(event.currentTarget); @@ -63,7 +71,6 @@ export default function PopularCard({ isLoading }) { keepMounted open={Boolean(anchorEl)} onClose={handleClose} - variant="selectedMenu" anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} transformOrigin={{ vertical: 'top', horizontal: 'right' }} > @@ -74,145 +81,43 @@ export default function PopularCard({ isLoading }) { - - - Bajaj Finery - - - - $1839.00 - - - - - - - - 10% Profit - - - - - TTML - - - - $100.00 - - - - - - - - 10% loss - - - - - Reliance - - - - $200.00 - - - - - - - - 10% Profit - - - - - TTML - - - - $189.00 - - - - - - - - 10% loss - - - - - Stolon - - - - $189.00 - - - - - - - - 10% loss - + {stockData.map((item, index) => ( + + + + + {item.company} + + + {item.percentage}% {item.type} + + + + + ${item.price.toFixed(2)} + + + {item.type === 'Loss' ? ( + + ) : ( + + )} + + + + {index < stockData.length - 1 && } + + ))} - diff --git a/vite/src/views/dashboard/Default/TotalGrowthBarChart.jsx b/vite/src/views/dashboard/Default/TotalGrowthBarChart.jsx index 2c18b174a..7854b843e 100644 --- a/vite/src/views/dashboard/Default/TotalGrowthBarChart.jsx +++ b/vite/src/views/dashboard/Default/TotalGrowthBarChart.jsx @@ -47,10 +47,10 @@ export default function TotalGrowthBarChart({ isLoading }) { const divider = theme.vars.palette.divider; const grey500 = theme.vars.palette.grey[500]; - const primary200 = theme.vars.palette.primary[200]; + const primary200 = theme.vars.palette.primary.light; const primaryDark = theme.vars.palette.primary.dark; const secondaryMain = theme.vars.palette.secondary.main; - const secondaryLight = theme.vars.palette.secondary.light; + const secondaryLight = theme.vars.palette.secondary.lighter; useEffect(() => { setChartOptions({ diff --git a/vite/src/views/dashboard/Default/TotalOrderLineChartCard.jsx b/vite/src/views/dashboard/Default/TotalOrderLineChartCard.jsx index 8fb919672..8dab90b51 100644 --- a/vite/src/views/dashboard/Default/TotalOrderLineChartCard.jsx +++ b/vite/src/views/dashboard/Default/TotalOrderLineChartCard.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, { useState } from 'react'; +import { useState } from 'react'; // material-ui import { useTheme } from '@mui/material/styles'; @@ -29,7 +29,7 @@ const yearlyData = [{ data: [35, 44, 9, 54, 45, 66, 41, 69] }]; export default function TotalOrderLineChartCard({ isLoading }) { const theme = useTheme(); - const [timeValue, setTimeValue] = React.useState(false); + const [timeValue, setTimeValue] = useState(false); const [series, setSeries] = useState(yearlyData); const handleChangeTime = (_event, newValue) => { @@ -63,7 +63,7 @@ export default function TotalOrderLineChartCard({ isLoading }) { position: 'absolute', width: 210, height: 210, - background: theme.vars.palette.primary[800], + bgcolor: theme.vars.palette.primary.darker, borderRadius: '50%', top: { xs: -85 }, right: { xs: -95 } @@ -73,7 +73,7 @@ export default function TotalOrderLineChartCard({ isLoading }) { position: 'absolute', width: 210, height: 210, - background: theme.vars.palette.primary[800], + bgcolor: theme.vars.palette.primary.darker, borderRadius: '50%', top: { xs: -125 }, right: { xs: -15 }, @@ -86,14 +86,12 @@ export default function TotalOrderLineChartCard({ isLoading }) { - +