Login,Dashboard,Fonts responsiveness done
This commit is contained in:
parent
aafccd9c12
commit
e204aae874
158
pnpm-lock.yaml
158
pnpm-lock.yaml
|
|
@ -21,8 +21,8 @@ importers:
|
|||
specifier: ^6.4.5
|
||||
version: 6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@mui/x-charts':
|
||||
specifier: ^7.27.0
|
||||
version: 7.27.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
specifier: ^7.27.1
|
||||
version: 7.28.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@mui/x-data-grid':
|
||||
specifier: ^7.27.0
|
||||
version: 7.27.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -80,6 +80,9 @@ importers:
|
|||
react-hook-form:
|
||||
specifier: ^7.54.2
|
||||
version: 7.54.2(react@18.3.1)
|
||||
react-minimal-pie-chart:
|
||||
specifier: ^9.1.0
|
||||
version: 9.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
react-redux:
|
||||
specifier: ^9.2.0
|
||||
version: 9.2.0(@types/react@19.0.10)(react@18.3.1)(redux@5.0.1)
|
||||
|
|
@ -89,6 +92,9 @@ importers:
|
|||
react-scripts:
|
||||
specifier: 5.0.1
|
||||
version: 5.0.1(@babel/plugin-syntax-flow@7.26.0(@babel/core@7.26.9))(@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.9))(@types/babel__core@7.20.5)(eslint@8.57.1)(react@18.3.1)(type-fest@0.21.3)(typescript@5.7.3)
|
||||
recharts:
|
||||
specifier: ^2.15.1
|
||||
version: 2.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
sonner:
|
||||
specifier: ^1.7.4
|
||||
version: 1.7.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
|
@ -1203,14 +1209,14 @@ packages:
|
|||
'@mui/x-charts-vendor@7.20.0':
|
||||
resolution: {integrity: sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==}
|
||||
|
||||
'@mui/x-charts@7.27.0':
|
||||
resolution: {integrity: sha512-EIT5zbClc8n14qBvCD7jYSVI4jWAWajY7g8gznf5rggCJuv08IHfmi23q6afax73q6yTAi30qeUmcqttqXV4DQ==}
|
||||
'@mui/x-charts@7.28.0':
|
||||
resolution: {integrity: sha512-TNfq/rQfGKnjTaEITkY6l09NpMxwMwRTgLiDw+JQsS/7gwBBJUmMhEOj67BaFeYTsroFLUYeggiAj+RTSryd4A==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
peerDependencies:
|
||||
'@emotion/react': ^11.9.0
|
||||
'@emotion/styled': ^11.8.1
|
||||
'@mui/material': ^5.15.14 || ^6.0.0
|
||||
'@mui/system': ^5.15.14 || ^6.0.0
|
||||
'@mui/material': ^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta
|
||||
'@mui/system': ^5.15.14 || ^6.0.0 || ^7.0.0 || ^7.0.0-beta
|
||||
react: ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
|
|
@ -1278,6 +1284,12 @@ packages:
|
|||
peerDependencies:
|
||||
react: ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
'@mui/x-internals@7.28.0':
|
||||
resolution: {integrity: sha512-p4GEp/09bLDumktdIMiw+OF4p+pJOOjTG0VUvzNxjbHB9GxbBKoMcHrmyrURqoBnQpWIeFnN/QAoLMFSpfwQbw==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
peerDependencies:
|
||||
react: ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
'@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
|
||||
resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
|
||||
|
||||
|
|
@ -1501,12 +1513,18 @@ packages:
|
|||
'@types/cookie@0.6.0':
|
||||
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
|
||||
|
||||
'@types/d3-array@3.2.1':
|
||||
resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
|
||||
|
||||
'@types/d3-color@3.1.3':
|
||||
resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
|
||||
|
||||
'@types/d3-delaunay@6.0.4':
|
||||
resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
|
||||
|
||||
'@types/d3-ease@3.0.2':
|
||||
resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
|
||||
|
||||
'@types/d3-interpolate@3.0.4':
|
||||
resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
|
||||
|
||||
|
|
@ -1522,6 +1540,9 @@ packages:
|
|||
'@types/d3-time@3.0.4':
|
||||
resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
|
||||
|
||||
'@types/d3-timer@3.0.2':
|
||||
resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
|
||||
|
||||
'@types/eslint-scope@3.7.7':
|
||||
resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
|
||||
|
||||
|
|
@ -2483,6 +2504,10 @@ packages:
|
|||
resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-ease@3.0.1:
|
||||
resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-format@3.1.0:
|
||||
resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
|
||||
engines: {node: '>=12'}
|
||||
|
|
@ -2511,6 +2536,10 @@ packages:
|
|||
resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
d3-timer@3.0.1:
|
||||
resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
damerau-levenshtein@1.0.8:
|
||||
resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
|
||||
|
||||
|
|
@ -2558,6 +2587,9 @@ packages:
|
|||
supports-color:
|
||||
optional: true
|
||||
|
||||
decimal.js-light@2.5.1:
|
||||
resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
|
||||
|
||||
decimal.js@10.5.0:
|
||||
resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
|
||||
|
||||
|
|
@ -2999,6 +3031,10 @@ packages:
|
|||
fast-deep-equal@3.1.3:
|
||||
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
|
||||
|
||||
fast-equals@5.2.2:
|
||||
resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
|
||||
fast-glob@3.3.3:
|
||||
resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
|
||||
engines: {node: '>=8.6.0'}
|
||||
|
|
@ -4934,6 +4970,12 @@ packages:
|
|||
react-is@19.0.0:
|
||||
resolution: {integrity: sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==}
|
||||
|
||||
react-minimal-pie-chart@9.1.0:
|
||||
resolution: {integrity: sha512-JziZXZT0aw+9X+rGSpQwbSG7t3ypsyhzJNpiTUGfVeCqr70YIPbHE5Us3RsCsNRlVHbeLGrp/ibVuzUJT6Gcvw==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17 || ^18 || ^19
|
||||
react-dom: ^16.8.0 || ^17 || ^18 || ^19
|
||||
|
||||
react-redux@9.2.0:
|
||||
resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
|
||||
peerDependencies:
|
||||
|
|
@ -4979,6 +5021,12 @@ packages:
|
|||
typescript:
|
||||
optional: true
|
||||
|
||||
react-smooth@4.0.4:
|
||||
resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
react-transition-group@4.4.5:
|
||||
resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
|
||||
peerDependencies:
|
||||
|
|
@ -5003,6 +5051,16 @@ packages:
|
|||
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
||||
engines: {node: '>=8.10.0'}
|
||||
|
||||
recharts-scale@0.4.5:
|
||||
resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
|
||||
|
||||
recharts@2.15.1:
|
||||
resolution: {integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==}
|
||||
engines: {node: '>=14'}
|
||||
peerDependencies:
|
||||
react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
||||
|
||||
recursive-readdir@2.2.3:
|
||||
resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==}
|
||||
engines: {node: '>=6.0.0'}
|
||||
|
|
@ -5511,6 +5569,10 @@ packages:
|
|||
svg-parser@2.0.4:
|
||||
resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
|
||||
|
||||
svg-partial-circle@1.0.0:
|
||||
resolution: {integrity: sha512-jDWgNzrlpsGo9A7/tdjCy6+1RzeeANYV1a3JtNYC/0ZXI3U+3VMucuNv7JuKti9VVBdyNxNO1CZs/k0xS1lUFA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
svgo@1.3.2:
|
||||
resolution: {integrity: sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==}
|
||||
engines: {node: '>=4.0.0'}
|
||||
|
|
@ -5591,6 +5653,9 @@ packages:
|
|||
thunky@1.1.0:
|
||||
resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
|
||||
|
||||
tiny-invariant@1.3.3:
|
||||
resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
|
||||
|
||||
tmpl@1.0.5:
|
||||
resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
|
||||
|
||||
|
|
@ -5783,6 +5848,9 @@ packages:
|
|||
resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
|
||||
engines: {node: '>= 0.8'}
|
||||
|
||||
victory-vendor@36.9.2:
|
||||
resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
|
||||
|
||||
w3c-hr-time@1.0.2:
|
||||
resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
|
||||
deprecated: Use your platform's native performance.now() and performance.timeOrigin.
|
||||
|
|
@ -7461,14 +7529,14 @@ snapshots:
|
|||
delaunator: 5.0.1
|
||||
robust-predicates: 3.0.2
|
||||
|
||||
'@mui/x-charts@7.27.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
'@mui/x-charts@7.28.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@mui/material@6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.26.9
|
||||
'@mui/material': 6.4.5(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@mui/system': 6.4.3(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1))(@types/react@19.0.10)(react@18.3.1)
|
||||
'@mui/utils': 6.4.3(@types/react@19.0.10)(react@18.3.1)
|
||||
'@mui/x-charts-vendor': 7.20.0
|
||||
'@mui/x-internals': 7.26.0(@types/react@19.0.10)(react@18.3.1)
|
||||
'@mui/x-internals': 7.28.0(@types/react@19.0.10)(react@18.3.1)
|
||||
'@react-spring/rafz': 9.7.5
|
||||
'@react-spring/web': 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
clsx: 2.1.1
|
||||
|
|
@ -7528,6 +7596,14 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
|
||||
'@mui/x-internals@7.28.0(@types/react@19.0.10)(react@18.3.1)':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.26.9
|
||||
'@mui/utils': 6.4.3(@types/react@19.0.10)(react@18.3.1)
|
||||
react: 18.3.1
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
|
||||
'@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
|
||||
dependencies:
|
||||
eslint-scope: 5.1.1
|
||||
|
|
@ -7773,10 +7849,14 @@ snapshots:
|
|||
|
||||
'@types/cookie@0.6.0': {}
|
||||
|
||||
'@types/d3-array@3.2.1': {}
|
||||
|
||||
'@types/d3-color@3.1.3': {}
|
||||
|
||||
'@types/d3-delaunay@6.0.4': {}
|
||||
|
||||
'@types/d3-ease@3.0.2': {}
|
||||
|
||||
'@types/d3-interpolate@3.0.4':
|
||||
dependencies:
|
||||
'@types/d3-color': 3.1.3
|
||||
|
|
@ -7793,6 +7873,8 @@ snapshots:
|
|||
|
||||
'@types/d3-time@3.0.4': {}
|
||||
|
||||
'@types/d3-timer@3.0.2': {}
|
||||
|
||||
'@types/eslint-scope@3.7.7':
|
||||
dependencies:
|
||||
'@types/eslint': 9.6.1
|
||||
|
|
@ -8899,6 +8981,8 @@ snapshots:
|
|||
dependencies:
|
||||
delaunator: 5.0.1
|
||||
|
||||
d3-ease@3.0.1: {}
|
||||
|
||||
d3-format@3.1.0: {}
|
||||
|
||||
d3-interpolate@3.0.1:
|
||||
|
|
@ -8927,6 +9011,8 @@ snapshots:
|
|||
dependencies:
|
||||
d3-array: 3.2.4
|
||||
|
||||
d3-timer@3.0.1: {}
|
||||
|
||||
damerau-levenshtein@1.0.8: {}
|
||||
|
||||
data-urls@2.0.0:
|
||||
|
|
@ -8967,6 +9053,8 @@ snapshots:
|
|||
dependencies:
|
||||
ms: 2.1.3
|
||||
|
||||
decimal.js-light@2.5.1: {}
|
||||
|
||||
decimal.js@10.5.0: {}
|
||||
|
||||
dedent@0.7.0: {}
|
||||
|
|
@ -9570,6 +9658,8 @@ snapshots:
|
|||
|
||||
fast-deep-equal@3.1.3: {}
|
||||
|
||||
fast-equals@5.2.2: {}
|
||||
|
||||
fast-glob@3.3.3:
|
||||
dependencies:
|
||||
'@nodelib/fs.stat': 2.0.5
|
||||
|
|
@ -11779,6 +11869,12 @@ snapshots:
|
|||
|
||||
react-is@19.0.0: {}
|
||||
|
||||
react-minimal-pie-chart@9.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
svg-partial-circle: 1.0.0
|
||||
|
||||
react-redux@9.2.0(@types/react@19.0.10)(react@18.3.1)(redux@5.0.1):
|
||||
dependencies:
|
||||
'@types/use-sync-external-store': 0.0.6
|
||||
|
|
@ -11893,6 +11989,14 @@ snapshots:
|
|||
- webpack-hot-middleware
|
||||
- webpack-plugin-serve
|
||||
|
||||
react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
fast-equals: 5.2.2
|
||||
prop-types: 15.8.1
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
|
||||
react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
'@babel/runtime': 7.26.9
|
||||
|
|
@ -11930,6 +12034,23 @@ snapshots:
|
|||
dependencies:
|
||||
picomatch: 2.3.1
|
||||
|
||||
recharts-scale@0.4.5:
|
||||
dependencies:
|
||||
decimal.js-light: 2.5.1
|
||||
|
||||
recharts@2.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
clsx: 2.1.1
|
||||
eventemitter3: 4.0.7
|
||||
lodash: 4.17.21
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
react-is: 18.3.1
|
||||
react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
recharts-scale: 0.4.5
|
||||
tiny-invariant: 1.3.3
|
||||
victory-vendor: 36.9.2
|
||||
|
||||
recursive-readdir@2.2.3:
|
||||
dependencies:
|
||||
minimatch: 3.1.2
|
||||
|
|
@ -12492,6 +12613,8 @@ snapshots:
|
|||
|
||||
svg-parser@2.0.4: {}
|
||||
|
||||
svg-partial-circle@1.0.0: {}
|
||||
|
||||
svgo@1.3.2:
|
||||
dependencies:
|
||||
chalk: 2.4.2
|
||||
|
|
@ -12601,6 +12724,8 @@ snapshots:
|
|||
|
||||
thunky@1.1.0: {}
|
||||
|
||||
tiny-invariant@1.3.3: {}
|
||||
|
||||
tmpl@1.0.5: {}
|
||||
|
||||
to-regex-range@5.0.1:
|
||||
|
|
@ -12789,6 +12914,23 @@ snapshots:
|
|||
|
||||
vary@1.1.2: {}
|
||||
|
||||
victory-vendor@36.9.2:
|
||||
dependencies:
|
||||
'@types/d3-array': 3.2.1
|
||||
'@types/d3-ease': 3.0.2
|
||||
'@types/d3-interpolate': 3.0.4
|
||||
'@types/d3-scale': 4.0.9
|
||||
'@types/d3-shape': 3.1.7
|
||||
'@types/d3-time': 3.0.4
|
||||
'@types/d3-timer': 3.0.2
|
||||
d3-array: 3.2.4
|
||||
d3-ease: 3.0.1
|
||||
d3-interpolate: 3.0.1
|
||||
d3-scale: 4.0.2
|
||||
d3-shape: 3.2.0
|
||||
d3-time: 3.1.0
|
||||
d3-timer: 3.0.1
|
||||
|
||||
w3c-hr-time@1.0.2:
|
||||
dependencies:
|
||||
browser-process-hrtime: 1.0.0
|
||||
|
|
|
|||
27
public/Login.svg
Normal file
27
public/Login.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 MiB |
|
|
@ -3,6 +3,11 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Gilroy:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../src/index.css">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
|
|
|
|||
|
|
@ -236,7 +236,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
color: "#FFFFFF",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
fontFamily: "Gilroy",
|
||||
}}
|
||||
>
|
||||
{/* Dynamic title based on the page type */}
|
||||
|
|
@ -401,7 +400,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
key={column.id}
|
||||
sx={{
|
||||
color: "#FFFFFF",
|
||||
fontWeight: "bold",
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
{column.label}
|
||||
|
|
@ -422,7 +421,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
<StyledTableCell
|
||||
key={column.id}
|
||||
sx={{
|
||||
color: "#FFFFFF",
|
||||
color: "#D9D8D8",
|
||||
backgroundColor: "#272727",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -28,14 +28,13 @@ export default function Header() {
|
|||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
// height: "84px",
|
||||
// backgroundColor: "#1C1C1C",
|
||||
height: "84px",
|
||||
backgroundColor: "#1C1C1C",
|
||||
padding: { xs: "20px 12px", sm: "20px 24px" },
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
// padding:"0px"
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
|
|
|
|||
|
|
@ -6,163 +6,186 @@ import Typography from "@mui/material/Typography";
|
|||
import { LineChart } from "@mui/x-charts/LineChart";
|
||||
import { FormControl, MenuItem, Select } from "@mui/material";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
function AreaGradient({ color, id }: { color: string; id: string }) {
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
|
||||
return (
|
||||
<defs>
|
||||
<linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
<stop offset="0%" stopColor={color} stopOpacity={0.5} />
|
||||
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
);
|
||||
function AreaGradient({ color, id }: { color: string; id: string }) {
|
||||
return (
|
||||
<defs>
|
||||
<linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
<stop offset="0%" stopColor={color} stopOpacity={0.5} />
|
||||
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
);
|
||||
}
|
||||
|
||||
function getDaysInMonth(month: number, year: number) {
|
||||
const date = new Date(year, month, 0);
|
||||
const monthName = date.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
});
|
||||
const daysInMonth = date.getDate();
|
||||
const days = [];
|
||||
let i = 1;
|
||||
while (days.length < daysInMonth) {
|
||||
days.push(`${monthName} ${i}`);
|
||||
i += 1;
|
||||
}
|
||||
return days;
|
||||
const date = new Date(year, month, 0);
|
||||
const monthName = date.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
});
|
||||
const daysInMonth = date.getDate();
|
||||
const days = [];
|
||||
let i = 1;
|
||||
while (days.length < daysInMonth) {
|
||||
days.push(`${monthName} ${i}`);
|
||||
i += 1;
|
||||
}
|
||||
return days;
|
||||
}
|
||||
|
||||
export default function LineChartCard() {
|
||||
const theme = useTheme();
|
||||
const data = getDaysInMonth(4, 2024);
|
||||
const theme = useTheme();
|
||||
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
|
||||
|
||||
const colorPalette = [theme.palette.primary.light];
|
||||
const [selectedOption, setSelectedOption] = React.useState("Weekly");
|
||||
const data = getDaysInMonth(4, 2024);
|
||||
const colorPalette = [theme.palette.primary.main];
|
||||
const [selectedOption, setSelectedOption] = React.useState("Weekly");
|
||||
|
||||
const handleChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
|
||||
setSelectedOption(event.target.value);
|
||||
};
|
||||
const handleChange = (event: { target: { value: React.SetStateAction<string> } }) => {
|
||||
setSelectedOption(event.target.value);
|
||||
};
|
||||
|
||||
// Calculate responsive dimensions
|
||||
const getChartHeight = () => {
|
||||
if (isXsScreen) return 200;
|
||||
if (isSmScreen) return 220;
|
||||
return 250;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "553px",
|
||||
height: "444px",
|
||||
borderRadius: "16px",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
color: "#F2F2F2",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
align="left"
|
||||
color="#F2F2F2"
|
||||
sx={{
|
||||
fontFamily: "Gilroy",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
}}
|
||||
>
|
||||
Sales Stats
|
||||
</Typography>
|
||||
<FormControl
|
||||
sx={{
|
||||
mt: 2,
|
||||
mb: 2,
|
||||
backgroundColor: "#202020",
|
||||
marginLeft: "auto",
|
||||
marginRight: "16px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
// p: 1.5,
|
||||
color: "#F2F2F2",
|
||||
width: "149px",
|
||||
height: "44px",
|
||||
padding: "12px 16px",
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
value={selectedOption}
|
||||
onChange={handleChange}
|
||||
sx={{
|
||||
//backgroundColor: "#202020",
|
||||
color: "#D9D8D8",
|
||||
".MuiSelect-icon": {
|
||||
color: "#F2F2F2", // Icon color
|
||||
},
|
||||
}}
|
||||
IconComponent={ExpandMoreIcon}
|
||||
>
|
||||
<MenuItem value="Monthly">Monthly</MenuItem>
|
||||
<MenuItem value="Weekly">Weekly</MenuItem>
|
||||
<MenuItem value="Daily">Daily</MenuItem>
|
||||
<MenuItem value="Yearly">Yearly</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
const getChartMargin = () => {
|
||||
if (isXsScreen) return { left: 35, right: 10, top: 15, bottom: 15 };
|
||||
if (isSmScreen) return { left: 40, right: 15, top: 18, bottom: 18 };
|
||||
return { left: 50, right: 20, top: 20, bottom: 20 };
|
||||
};
|
||||
|
||||
<LineChart
|
||||
colors={colorPalette}
|
||||
xAxis={[
|
||||
{
|
||||
scaleType: "point",
|
||||
data,
|
||||
tickInterval: (index, i) => (i + 1) % 5 === 0,
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
id: "direct",
|
||||
label: "Direct",
|
||||
showMark: false,
|
||||
curve: "linear",
|
||||
stack: "total",
|
||||
area: true,
|
||||
stackOrder: "ascending",
|
||||
data: [
|
||||
300, 900, 500, 1200, 1500, 1800, 2400, 2100,
|
||||
2700, 3000, 1800, 3300, 3600, 3900, 4200, 4500,
|
||||
3900, 4800, 5100, 5400, 4500, 5700, 6000, 6300,
|
||||
6600, 6900, 7200, 7500, 7800, 8100,
|
||||
],
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
]}
|
||||
height={250}
|
||||
margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
|
||||
grid={{ horizontal: true }}
|
||||
sx={{
|
||||
"& .MuiAreaElement-series-direct": {
|
||||
fill: "url('#direct')",
|
||||
},
|
||||
}}
|
||||
slotProps={{
|
||||
legend: {
|
||||
hidden: true,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaGradient
|
||||
color={theme.palette.primary.light}
|
||||
id="direct"
|
||||
/>
|
||||
</LineChart>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
minHeight: { xs: "360px", sm: "400px", md: "444px" },
|
||||
borderRadius: "16px",
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ padding: { xs: 2, md: 3 }, "&:last-child": { paddingBottom: { xs: 2, md: 3 } } }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: isXsScreen ? "column" : "row",
|
||||
color: "#F2F2F2",
|
||||
marginBottom: isXsScreen ? 16 : 0,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
align={isXsScreen ? "center" : "left"}
|
||||
color="#F2F2F2"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: { xs: "16px", sm: "17px", md: "18px" },
|
||||
lineHeight: "24px",
|
||||
marginBottom: isXsScreen ? 2 : 0,
|
||||
width: isXsScreen ? "100%" : "auto",
|
||||
}}
|
||||
>
|
||||
Sales Stats
|
||||
</Typography>
|
||||
<FormControl
|
||||
sx={{
|
||||
mt: isXsScreen ? 0 : 2,
|
||||
mb: isXsScreen ? 0 : 2,
|
||||
backgroundColor: "#202020",
|
||||
marginLeft: isXsScreen ? 0 : "auto",
|
||||
marginRight: isXsScreen ? 0 : "16px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
color: "#F2F2F2",
|
||||
width: { xs: "100%", sm: "140px", md: "149px" },
|
||||
height: { xs: "40px", md: "44px" },
|
||||
padding: { xs: "8px 12px", md: "12px 16px" },
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
value={selectedOption}
|
||||
onChange={handleChange}
|
||||
sx={{
|
||||
fontSize: { xs: "14px", md: "16px" },
|
||||
color: "#D9D8D8",
|
||||
".MuiSelect-icon": {
|
||||
color: "#F2F2F2",
|
||||
},
|
||||
}}
|
||||
IconComponent={ExpandMoreIcon}
|
||||
>
|
||||
<MenuItem value="Monthly">Monthly</MenuItem>
|
||||
<MenuItem value="Weekly">Weekly</MenuItem>
|
||||
<MenuItem value="Daily">Daily</MenuItem>
|
||||
<MenuItem value="Yearly">Yearly</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
||||
<LineChart
|
||||
colors={colorPalette}
|
||||
xAxis={[
|
||||
{
|
||||
scaleType: "point",
|
||||
data,
|
||||
tickInterval: (index, i) => isXsScreen
|
||||
? (i + 1) % 10 === 0
|
||||
: isSmScreen
|
||||
? (i + 1) % 7 === 0
|
||||
: (i + 1) % 5 === 0,
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
id: "direct",
|
||||
label: "Direct",
|
||||
showMark: false,
|
||||
curve: "linear",
|
||||
stack: "total",
|
||||
area: true,
|
||||
stackOrder: "ascending",
|
||||
data: [
|
||||
300, 900, 500, 1200, 1500, 1800, 2400, 2100,
|
||||
2700, 3000, 1800, 3300, 3600, 3900, 4200, 4500,
|
||||
3900, 4800, 5100, 5400, 4500, 5700, 6000, 6300,
|
||||
6600, 6900, 7200, 7500, 7800, 8100,
|
||||
],
|
||||
color: "#28ACFF",
|
||||
},
|
||||
]}
|
||||
height={getChartHeight()}
|
||||
margin={getChartMargin()}
|
||||
grid={{ horizontal: true }}
|
||||
sx={{
|
||||
"& .MuiAreaElement-series-direct": {
|
||||
fill: "url('#direct')",
|
||||
},
|
||||
}}
|
||||
slotProps={{
|
||||
legend: {
|
||||
hidden: true,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaGradient
|
||||
color={theme.palette.primary.main}
|
||||
id="direct"
|
||||
/>
|
||||
</LineChart>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
|
||||
import Grid from "@mui/material/Grid2";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import SessionsChart from "../SessionsChart/sessionChart";
|
||||
|
|
@ -9,57 +8,43 @@ import RoundedBarChart from "../barChartCard/barChartCard";
|
|||
import LineChartCard from "../LineChartCard/lineChartCard";
|
||||
|
||||
const data: StatCardProps[] = [
|
||||
{
|
||||
title: "Total Charge Stations",
|
||||
value: "86",
|
||||
},
|
||||
{
|
||||
title: "Charging Completed",
|
||||
value: "12",
|
||||
},
|
||||
{
|
||||
title: "Active Users",
|
||||
value: "24",
|
||||
},
|
||||
{
|
||||
title: "Total Energy Consumed",
|
||||
value: "08",
|
||||
},
|
||||
{ title: "Total Charge Stations", value: "86" },
|
||||
{ title: "Charging Completed", value: "12" },
|
||||
{ title: "Active Users", value: "24" },
|
||||
{ title: "Total Energy Consumed", value: "08" },
|
||||
];
|
||||
|
||||
export default function MainGrid() {
|
||||
return (
|
||||
<Box sx={{ width: "100%", maxWidth: { sm: "100%", md: "1700px" } }}>
|
||||
{/* cards */}
|
||||
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
|
||||
Dashboard
|
||||
</Typography>
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
columns={12}
|
||||
return (
|
||||
<Box sx={{ width: "100%", maxWidth: "1600px", mx: "auto", px: { xs: 2, sm: 1, md: 0 } }}>
|
||||
{/* Dashboard Header */}
|
||||
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
|
||||
Dashboard
|
||||
</Typography>
|
||||
|
||||
// sx={{ mb: (theme) => theme.spacing(2) }}
|
||||
>
|
||||
{data.map((card, index) => (
|
||||
<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>
|
||||
<StatCard {...card} />
|
||||
</Grid>
|
||||
))}
|
||||
{/* Grid Layout */}
|
||||
<Grid container spacing={3} columns={12}>
|
||||
{/* Statistic Cards */}
|
||||
{data.map((card, index) => (
|
||||
<Grid key={index} item xs={12} sm={6} md={3} lg={3}>
|
||||
<StatCard {...card} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<SessionsChart />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<ResourcesPieChart />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<RoundedBarChart />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<LineChartCard />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
{/* Charts */}
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<SessionsChart />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<ResourcesPieChart />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<RoundedBarChart />
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<LineChartCard />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,6 +35,16 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
icon: <ManageAccountsOutlinedIcon />,
|
||||
url: "/panel/admin-list",
|
||||
},
|
||||
userRole === "superadmin" && {
|
||||
text: "Managers",
|
||||
icon: <PeopleOutlinedIcon />,
|
||||
url: "/panel/manager-list",
|
||||
},
|
||||
userRole === "superadmin" && {
|
||||
text: "User",
|
||||
icon: <PeopleOutlinedIcon />,
|
||||
url: "/panel/user-list",
|
||||
},
|
||||
userRole === "superadmin" && {
|
||||
text: "Roles",
|
||||
icon: <AnalyticsOutlinedIcon />,
|
||||
|
|
|
|||
|
|
@ -4,111 +4,160 @@ import Card from "@mui/material/Card";
|
|||
import CardContent from "@mui/material/CardContent";
|
||||
import Box from "@mui/material/Box";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
|
||||
const colorPalette = [
|
||||
"hsla(202, 69%, 60%, 1)",
|
||||
"hsl(204, 48.60%, 72.50%)",
|
||||
"hsl(214, 56.40%, 30.60%)",
|
||||
"hsl(222, 6.80%, 50.80%)",
|
||||
"hsla(202, 69%, 60%, 1)",
|
||||
"hsl(204, 48.60%, 72.50%)",
|
||||
"hsl(214, 56.40%, 30.60%)",
|
||||
"hsl(222, 6.80%, 50.80%)",
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ title: "Total Resources", value: 50, color: colorPalette[0] },
|
||||
{ title: "Total Stations", value: 20, color: colorPalette[1] },
|
||||
{ title: "Station Manager", value: 15, color: colorPalette[2] },
|
||||
{ title: "Total Booth", value: 15, color: colorPalette[3] },
|
||||
{ title: "Total Resources", value: 50, color: colorPalette[0] },
|
||||
{ title: "Total Stations", value: 20, color: colorPalette[1] },
|
||||
{ title: "Station Manager", value: 15, color: colorPalette[2] },
|
||||
{ title: "Total Booth", value: 15, color: colorPalette[3] },
|
||||
];
|
||||
|
||||
export default function ResourcePieChart() {
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "12px",
|
||||
flexGrow: 1,
|
||||
width: "553px",
|
||||
height: "324px",
|
||||
padding: "16px",
|
||||
borderRadius: "16px",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="subtitle2"
|
||||
color="#F2F2F2"
|
||||
width="84px"
|
||||
height="24px"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
color: "#FFFFFF",
|
||||
}}
|
||||
>
|
||||
Resources
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<PieChart
|
||||
colors={colorPalette}
|
||||
margin={{
|
||||
left: 60,
|
||||
right: 80,
|
||||
top: 80,
|
||||
bottom: 80,
|
||||
}}
|
||||
series={[
|
||||
{
|
||||
data,
|
||||
innerRadius: 50,
|
||||
outerRadius: 100,
|
||||
paddingAngle: 0,
|
||||
highlightScope: {
|
||||
faded: "global",
|
||||
highlighted: "item",
|
||||
},
|
||||
},
|
||||
]}
|
||||
height={300}
|
||||
width={300}
|
||||
slotProps={{
|
||||
legend: { hidden: true },
|
||||
}}
|
||||
></PieChart>
|
||||
const theme = useTheme();
|
||||
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
|
||||
|
||||
<Stack spacing={1}>
|
||||
{data.map((entry, index) => (
|
||||
<Stack
|
||||
key={index}
|
||||
direction="row"
|
||||
spacing={1}
|
||||
alignItems="center"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 16,
|
||||
height: 16,
|
||||
backgroundColor: entry.color,
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="body2"
|
||||
width="100px"
|
||||
height="16px"
|
||||
color="#FFFFFF"
|
||||
>
|
||||
{entry.title}
|
||||
</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const getChartDimensions = () => {
|
||||
if (isXsScreen) {
|
||||
return {
|
||||
height: 240,
|
||||
width: 240,
|
||||
innerRadius: 40,
|
||||
outerRadius: 80,
|
||||
margin: { left: 20, right: 20, top: 40, bottom: 40 }
|
||||
};
|
||||
} else if (isSmScreen) {
|
||||
return {
|
||||
height: 260,
|
||||
width: 260,
|
||||
innerRadius: 50,
|
||||
outerRadius: 90,
|
||||
margin: { left: 40, right: 40, top: 60, bottom: 60 }
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
height: 350,
|
||||
width: 350,
|
||||
innerRadius: 55,
|
||||
outerRadius: 110,
|
||||
margin: { left: 60, right: 80, top: 80, bottom: 80 }
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const dimensions = getChartDimensions();
|
||||
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: { xs: "8px", sm: "10px", md: "12px" },
|
||||
flexGrow: 1,
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
minHeight: { xs: "320px", sm: "340px", md: "360px" },
|
||||
padding: { xs: "12px", sm: "14px", md: "16px" },
|
||||
borderRadius: "16px",
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="subtitle2"
|
||||
color="#F2F2F2"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: { xs: "16px", sm: "17px", md: "18px" },
|
||||
lineHeight: "24px",
|
||||
color: "#FFFFFF",
|
||||
marginBottom: { xs: 1, sm: 1.5, md: 2 },
|
||||
}}
|
||||
>
|
||||
Resources
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
<PieChart
|
||||
colors={colorPalette}
|
||||
margin={dimensions.margin}
|
||||
series={[
|
||||
{
|
||||
data,
|
||||
innerRadius: dimensions.innerRadius,
|
||||
outerRadius: dimensions.outerRadius,
|
||||
paddingAngle: 2,
|
||||
cornerRadius: 8,
|
||||
highlightScope: {
|
||||
faded: "global",
|
||||
highlighted: "item",
|
||||
},
|
||||
},
|
||||
]}
|
||||
height={dimensions.height}
|
||||
width={dimensions.width}
|
||||
slotProps={{
|
||||
legend: { hidden: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
<Stack
|
||||
spacing={1}
|
||||
sx={{
|
||||
mt: { xs: 2, sm: 0 },
|
||||
ml: { xs: 0, sm: 2 }
|
||||
}}
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Stack
|
||||
key={index}
|
||||
direction="row"
|
||||
spacing={1}
|
||||
alignItems="center"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: { xs: 12, sm: 14, md: 16 },
|
||||
height: { xs: 12, sm: 14, md: 16 },
|
||||
backgroundColor: entry.color,
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontSize: { xs: "12px", sm: "13px", md: "14px" },
|
||||
color: "#FFFFFF",
|
||||
}}
|
||||
>
|
||||
{entry.title}
|
||||
</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -6,156 +6,146 @@ import Box from "@mui/material/Box";
|
|||
import Select from "@mui/material/Select";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import InputLabel from "@mui/material/InputLabel";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
export default function SessionsChart() {
|
||||
const [selectedStation, setSelectedStation] = React.useState(
|
||||
"Delhi NCR EV Station"
|
||||
);
|
||||
const theme = useTheme();
|
||||
const [selectedStation, setSelectedStation] = React.useState(
|
||||
"Delhi NCR EV Station"
|
||||
);
|
||||
|
||||
const handleChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
|
||||
setSelectedStation(event.target.value);
|
||||
};
|
||||
const handleChange = (event: { target: { value: React.SetStateAction<string> } }) => {
|
||||
setSelectedStation(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "553px",
|
||||
height: "324px",
|
||||
gap: "16px",
|
||||
borderRadius: "16px",
|
||||
padding: "20px",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="h6"
|
||||
align="left"
|
||||
color="#F2F2F2"
|
||||
width="132px"
|
||||
height="24px"
|
||||
gap={"12px"}
|
||||
sx={{
|
||||
fontFamily: "Gilroy",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "0%",
|
||||
color: "#FAFAFA",
|
||||
}}
|
||||
>
|
||||
Charging prices
|
||||
</Typography>
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
minHeight: { xs: "260px", sm: "270px", md: "290px" },
|
||||
gap: "16px",
|
||||
borderRadius: "16px",
|
||||
padding: { xs: "12px", sm: "16px", md: "20px" },
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
align="left"
|
||||
color="#F2F2F2"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: { xs: "16px", sm: "17px", md: "18px" },
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "0%",
|
||||
color: "#FAFAFA",
|
||||
marginBottom: { xs: 1, sm: 1.5, md: 2 },
|
||||
}}
|
||||
>
|
||||
Charging prices
|
||||
</Typography>
|
||||
|
||||
{/* Dropdown button */}
|
||||
<FormControl
|
||||
sx={{
|
||||
mt: 2,
|
||||
mb: 2,
|
||||
width: "100%",
|
||||
// backgroundColor: "#202020",
|
||||
border: "1px solid #454545",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
{/* Dropdown button */}
|
||||
<FormControl
|
||||
sx={{
|
||||
mt: { xs: 1, sm: 1.5, md: 2 },
|
||||
mb: { xs: 1, sm: 1.5, md: 2 },
|
||||
width: "100%",
|
||||
border: "none",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
value={selectedStation}
|
||||
onChange={handleChange}
|
||||
label="Select Station"
|
||||
sx={{
|
||||
color: "#D9D8D8",
|
||||
"& .MuiSvgIcon-root": { color: "#F2F2F2" },
|
||||
fontSize: { xs: "14px", md: "16px" },
|
||||
}}
|
||||
IconComponent={ExpandMoreIcon}
|
||||
>
|
||||
<MenuItem value="Delhi NCR EV Station">Delhi NCR EV Station</MenuItem>
|
||||
<MenuItem value="Mumbai EV Station">Mumbai EV Station</MenuItem>
|
||||
<MenuItem value="Bangalore EV Station">Bangalore EV Station</MenuItem>
|
||||
<MenuItem value="Pune EV Station">Pune EV Station</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<Select
|
||||
value={selectedStation}
|
||||
onChange={handleChange}
|
||||
label="Select Station"
|
||||
sx={{
|
||||
//backgroundColor: "#202020",
|
||||
color: "#D9D8D8",
|
||||
"& .MuiSvgIcon-root": { color: "#F2F2F2" },
|
||||
}}
|
||||
IconComponent={ExpandMoreIcon}
|
||||
>
|
||||
<MenuItem value="Delhi NCR EV Station">
|
||||
Delhi NCR EV Station
|
||||
</MenuItem>
|
||||
<MenuItem value="Mumbai EV Station">
|
||||
Mumbai EV Station
|
||||
</MenuItem>
|
||||
<MenuItem value="Bangalore EV Station">
|
||||
Bangalore EV Station
|
||||
</MenuItem>
|
||||
<MenuItem value="Pune EV Station">
|
||||
Pune EV Station
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* Grid container for the four boxes */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(2, 1fr)",
|
||||
},
|
||||
gap: { xs: 1, sm: 2 },
|
||||
maxWidth: "750px",
|
||||
width: "100%",
|
||||
mx: "auto",
|
||||
}}
|
||||
>
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<Box
|
||||
key={item}
|
||||
sx={{
|
||||
height: "84px",
|
||||
borderRadius: "8px",
|
||||
p: "12px 16px",
|
||||
backgroundColor: "#272727",
|
||||
color: "#D9D8D8",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="body2"
|
||||
width="98px"
|
||||
height="24px"
|
||||
fontWeight={400}
|
||||
fontSize={"14px"}
|
||||
lineHeight={"24px"}
|
||||
gutterBottom
|
||||
>
|
||||
Basic Charging
|
||||
</Typography>
|
||||
<Box display={"flex"} gap={1}>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="subtitle2"
|
||||
color="#FFFFFF"
|
||||
width="40px"
|
||||
height={"24px"}
|
||||
fontWeight={500}
|
||||
fontSize="18px"
|
||||
lineHeight="24px"
|
||||
gutterBottom
|
||||
>
|
||||
16.83
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
width="71px"
|
||||
height="24px"
|
||||
gap="2px"
|
||||
fontWeight={400}
|
||||
fontSize={"14px"}
|
||||
lineHeight={"24px"}
|
||||
>
|
||||
cents/kWh
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
{/* Grid container for the four boxes */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "repeat(1, 1fr)", // 1 column on mobile
|
||||
sm: "repeat(2, 1fr)", // 2 columns on tablets
|
||||
md: "repeat(2, 1fr)", // 2x2 grid on desktop
|
||||
},
|
||||
gap: { xs: 1, sm: 1.5, md: 2 },
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<Box
|
||||
key={item}
|
||||
sx={{
|
||||
height: { xs: "105px", sm: "115px", md: "128px" },
|
||||
borderRadius: "8px",
|
||||
p: { xs: "10px", sm: "12px", md: "14px" },
|
||||
backgroundColor: "#272727",
|
||||
color: "#D9D8D8",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: { xs: "12px", sm: "13px", md: "14px" },
|
||||
lineHeight: { xs: "20px", md: "24px" },
|
||||
marginBottom: "4px",
|
||||
}}
|
||||
gutterBottom
|
||||
>
|
||||
Basic Charging
|
||||
</Typography>
|
||||
<Box display="flex" gap={1} alignItems="center">
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
color="#FFFFFF"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: { xs: "16px", sm: "17px", md: "18px" },
|
||||
lineHeight: { xs: "20px", md: "24px" },
|
||||
}}
|
||||
gutterBottom
|
||||
>
|
||||
16.83
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: { xs: "12px", sm: "13px", md: "14px" },
|
||||
lineHeight: { xs: "20px", md: "24px" },
|
||||
}}
|
||||
>
|
||||
cents/kWh
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,106 @@
|
|||
|
||||
import Card from "@mui/material/Card";
|
||||
import CardContent from "@mui/material/CardContent";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
|
||||
export type StatCardProps = {
|
||||
title: string;
|
||||
value: string;
|
||||
title: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
export default function StatCard({ title, value }: StatCardProps) {
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "264.5px",
|
||||
height: "90px",
|
||||
padding: "16px",
|
||||
borderRadius: "12px",
|
||||
gap: "24px",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="subtitle2"
|
||||
color="#F2F2F2"
|
||||
width={"118px"}
|
||||
height={"14px"}
|
||||
fontWeight={400}
|
||||
fontSize={"12px"}
|
||||
lineHeight={"14px"}
|
||||
letterSpacing={"0%"}
|
||||
gutterBottom
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="body1"
|
||||
color="#F2F2F2"
|
||||
width={"36px"}
|
||||
height={"36px"}
|
||||
fontSize={"32px"}
|
||||
fontWeight={600}
|
||||
lineHeight={"36px"}
|
||||
letterSpacing={"0%"}
|
||||
gutterBottom
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
const theme = useTheme();
|
||||
const isXsScreen = useMediaQuery(theme.breakpoints.only("xs"));
|
||||
const isSmScreen = useMediaQuery(theme.breakpoints.only("sm"));
|
||||
const isMdScreen = useMediaQuery(theme.breakpoints.only("md"));
|
||||
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100px",
|
||||
padding: {
|
||||
xs: "12px",
|
||||
sm: "14px",
|
||||
md: "10px"
|
||||
},
|
||||
borderRadius: "12px",
|
||||
border: "none",
|
||||
gap: "24px",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent
|
||||
sx={{
|
||||
padding: {
|
||||
xs: "8px",
|
||||
sm: "12px",
|
||||
md: "16px"
|
||||
},
|
||||
"&:last-child": {
|
||||
paddingBottom: {
|
||||
xs: "8px",
|
||||
sm: "12px",
|
||||
md: "16px"
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="subtitle2"
|
||||
color="#F2F2F2"
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: {
|
||||
xs: "10px",
|
||||
sm: "11px",
|
||||
md: "12px"
|
||||
},
|
||||
lineHeight: {
|
||||
xs: "12px",
|
||||
sm: "13px",
|
||||
md: "14px"
|
||||
},
|
||||
letterSpacing: "0%",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
marginBottom: { xs: "6px", sm: "8px", md: "10px" }, // Added more spacing
|
||||
|
||||
}}
|
||||
gutterBottom
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="body1"
|
||||
color="#D9D8D8"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: {
|
||||
xs: "24px",
|
||||
sm: "28px",
|
||||
md: "32px"
|
||||
},
|
||||
lineHeight: {
|
||||
xs: "28px",
|
||||
sm: "32px",
|
||||
md: "36px"
|
||||
},
|
||||
letterSpacing: "0%",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
}}
|
||||
gutterBottom
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ import {
|
|||
import { BarChart } from "@mui/x-charts/BarChart";
|
||||
import { axisClasses } from "@mui/x-charts/ChartsAxis";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
|
||||
// Sample Data
|
||||
const data = [
|
||||
|
|
@ -24,59 +25,100 @@ const data = [
|
|||
{ name: "Jun", v1: 30 },
|
||||
];
|
||||
|
||||
// Chart Configuration
|
||||
const chartSetting = {
|
||||
yAxis: [
|
||||
{
|
||||
label: "Value",
|
||||
tickFormatter: (value: number) => `${value}`, // Formatting Y-axis ticks
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
dataKey: "name",
|
||||
scaleType: "band" as const,
|
||||
},
|
||||
],
|
||||
width: 500,
|
||||
height: 300,
|
||||
sx: {
|
||||
[`.${axisClasses.left} .${axisClasses.label}`]: {
|
||||
transform: "translate(-20px, 0)",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function RoundedBarChart() {
|
||||
const theme = useTheme();
|
||||
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
|
||||
const [selectedOption, setSelectedOption] = React.useState("Monthly");
|
||||
|
||||
const handleChange = (event: SelectChangeEvent<string>) => {
|
||||
setSelectedOption(event.target.value);
|
||||
const handleChange = (event: SelectChangeEvent<string>) => {
|
||||
setSelectedOption(event.target.value);
|
||||
};
|
||||
|
||||
// Responsive chart settings
|
||||
const getChartSettings = () => {
|
||||
const baseSettings = {
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
label: isXsScreen ? "" : "Value",
|
||||
tickFormatter: (value: number) => `${value}`,
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
dataKey: "name",
|
||||
scaleType: "band" as const,
|
||||
},
|
||||
],
|
||||
sx: {
|
||||
[`.${axisClasses.left} .${axisClasses.label}`]: {
|
||||
transform: "translate(-10px, 0)",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Screen-specific settings
|
||||
if (isXsScreen) {
|
||||
return {
|
||||
...baseSettings,
|
||||
width: 280,
|
||||
height: 220,
|
||||
};
|
||||
} else if (isSmScreen) {
|
||||
return {
|
||||
...baseSettings,
|
||||
width: 380,
|
||||
height: 260,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...baseSettings,
|
||||
width: 500,
|
||||
height: 280,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const chartSetting = getChartSettings();
|
||||
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "553px",
|
||||
height: "444px",
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
minHeight: { xs: "360px", sm: "400px", md: "444px" },
|
||||
borderRadius: "16px",
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Box display="flex" alignItems="center" color="#F2F2F2">
|
||||
<CardContent
|
||||
sx={{
|
||||
padding: { xs: 2, md: 3 },
|
||||
"&:last-child": { paddingBottom: { xs: 2, md: 3 } },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
color="#F2F2F2"
|
||||
flexDirection={isXsScreen ? "column" : "row"}
|
||||
sx={{ mb: isXsScreen ? 2 : 0 }}
|
||||
>
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="#F2F2F2"
|
||||
align={isXsScreen ? "center" : "left"}
|
||||
sx={{
|
||||
fontFamily: "Gilroy",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
fontSize: { xs: "16px", sm: "17px", md: "18px" },
|
||||
lineHeight: "24px",
|
||||
marginBottom: isXsScreen ? 2 : 0,
|
||||
width: isXsScreen ? "100%" : "auto",
|
||||
}}
|
||||
>
|
||||
Charge Stats
|
||||
|
|
@ -84,13 +126,13 @@ export default function RoundedBarChart() {
|
|||
|
||||
<FormControl
|
||||
sx={{
|
||||
mt: 2,
|
||||
ml: "auto",
|
||||
mt: isXsScreen ? 0 : 2,
|
||||
ml: isXsScreen ? 0 : "auto",
|
||||
backgroundColor: "#202020",
|
||||
color: "#F2F2F2",
|
||||
width: "149px",
|
||||
height: "44px",
|
||||
padding: "12px 16px",
|
||||
width: { xs: "100%", sm: "140px", md: "149px" },
|
||||
height: { xs: "40px", md: "44px" },
|
||||
padding: { xs: "8px 12px", md: "12px 16px" },
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
|
|
@ -98,6 +140,7 @@ export default function RoundedBarChart() {
|
|||
value={selectedOption}
|
||||
onChange={handleChange}
|
||||
sx={{
|
||||
fontSize: { xs: "14px", md: "16px" },
|
||||
color: "#D9D8D8",
|
||||
".MuiSelect-icon": {
|
||||
color: "#F2F2F2",
|
||||
|
|
@ -113,17 +156,28 @@ export default function RoundedBarChart() {
|
|||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<BarChart
|
||||
dataset={data}
|
||||
series={[
|
||||
{
|
||||
dataKey: "v1",
|
||||
label: "Value",
|
||||
color: "skyblue",
|
||||
},
|
||||
]}
|
||||
{...chartSetting}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
<BarChart
|
||||
borderRadius={0}
|
||||
dataset={data}
|
||||
series={[
|
||||
{
|
||||
dataKey: "v1",
|
||||
color: "#52ACDF",
|
||||
},
|
||||
]}
|
||||
layout="vertical"
|
||||
{...chartSetting}
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
|||
8
src/global.d.ts
vendored
Normal file
8
src/global.d.ts
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
declare module "*.css";
|
||||
|
||||
declare module "@mui/styles/defaultTheme" {
|
||||
interface DefaultTheme extends Theme {
|
||||
vars: object;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,14 +1,24 @@
|
|||
body {
|
||||
margin: 0;
|
||||
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif; */
|
||||
font-family: "Gliroy";
|
||||
font-family: "Gilroy";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
.mui-typography {
|
||||
font-family: "Gilroy", sans-serif !important;
|
||||
background-color: rgb(7, 127, 233);
|
||||
}
|
||||
|
||||
.css-1w8ddxu-MuiBarElement-root {
|
||||
width: 19px !important;
|
||||
border-radius: 50px !important;
|
||||
rx: 8;
|
||||
ry: 8
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
|||
flexDirection: "column",
|
||||
height: "100vh",
|
||||
flexGrow: 1,
|
||||
backgroundColor: theme.vars
|
||||
? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
|
||||
: theme.palette.background.default,
|
||||
// backgroundColor: theme.vars
|
||||
// ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
|
||||
// : theme.palette.background.default,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
overflow: "auto",
|
||||
...customStyles,
|
||||
mt: { xs: 8, md: 0 },
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import {
|
|||
TextField,
|
||||
Typography,
|
||||
Grid,
|
||||
|
||||
Link,
|
||||
InputAdornment,
|
||||
} from "@mui/material";
|
||||
|
|
@ -23,6 +22,7 @@ import { Visibility, VisibilityOff } from "@mui/icons-material";
|
|||
import { Card, SignInContainer } from "./styled.css.tsx";
|
||||
import { CustomIconButton } from "../../../components/AddUserModal/styled.css.tsx";
|
||||
import { AppDispatch } from "../../../redux/store/store.ts";
|
||||
|
||||
interface ILoginForm {
|
||||
email: string;
|
||||
password: string;
|
||||
|
|
@ -35,7 +35,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors, isValid },trigger
|
||||
formState: { errors, isValid },
|
||||
trigger,
|
||||
} = useForm<ILoginForm>({ mode: "onChange" });
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const router = useNavigate();
|
||||
|
|
@ -48,16 +49,16 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
setOpen(false);
|
||||
};
|
||||
|
||||
const togglePasswordVisibility = (e: React.MouseEvent) => {
|
||||
e.preventDefault(); // Prevent focus loss
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
const togglePasswordVisibility = (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
|
||||
const onSubmit: SubmitHandler<ILoginForm> = async (data: ILoginForm) => {
|
||||
const isValid = await trigger(); // This triggers validation for all fields
|
||||
if (!isValid) {
|
||||
return; // Stop submission if there are errors
|
||||
}
|
||||
const isValid = await trigger();
|
||||
if (!isValid) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await dispatch(loginUser(data)).unwrap();
|
||||
if (response?.data?.token) {
|
||||
|
|
@ -71,66 +72,90 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
return (
|
||||
<AppTheme {...props}>
|
||||
<SignInContainer direction="column" justifyContent="space-between">
|
||||
<Grid container sx={{ height: "100vh" }}>
|
||||
{/* Image Section */}
|
||||
<Grid container sx={{ minHeight: "100vh" }}>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={0}
|
||||
sm={0}
|
||||
md={7}
|
||||
sx={{
|
||||
background: `url('/mainPageLogo.png') center/cover no-repeat`,
|
||||
// height: { xs: "0%", sm: "50%", md: "100%" },
|
||||
background: `url('/Login.svg') center/cover no-repeat`,
|
||||
backgroundSize: "cover",
|
||||
display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Form Section */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={5}
|
||||
width="408px"
|
||||
height="498px"
|
||||
sx={{
|
||||
backgroundColor: "black",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
padding: { xs: "2rem", md: "3rem", lg: "3rem" },
|
||||
height: "auto",
|
||||
display: { xs: "none", md: "block" },
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
marginBottom: "1rem",
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
display: { xs: "none", md: "block" },
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/evLogo.png"
|
||||
alt="Logo"
|
||||
style={{
|
||||
justifyContent: "center",
|
||||
width: "180px",
|
||||
width: "250px",
|
||||
height: "auto",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Form Section */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={5}
|
||||
sx={{
|
||||
backgroundColor: "black",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
padding: { xs: "1.5rem", sm: "2rem", md: "3rem" },
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: "flex", md: "none" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
mb: 4,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/evLogo.png"
|
||||
alt="Logo"
|
||||
style={{
|
||||
width: "200px",
|
||||
maxWidth: "100%",
|
||||
height: "auto",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="h3"
|
||||
width={"408px"}
|
||||
height={"46px"}
|
||||
sx={{
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
fontSize: {
|
||||
xs: "2rem",
|
||||
xs: "1.8rem",
|
||||
sm: "2.2rem",
|
||||
md: "36px",
|
||||
md: "2.5rem",
|
||||
},
|
||||
width: "100%",
|
||||
mb: { xs: 2, md: 3 },
|
||||
mt: { xs: 0, md: 0 },
|
||||
}}
|
||||
>
|
||||
Welcome Back!
|
||||
|
|
@ -139,11 +164,12 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: { xs: "100%", sm: "300px", lg: "408px" },
|
||||
height:{lg:"428px"},
|
||||
padding: "24px",
|
||||
width: { xs: "100%", sm: "90%", md: "90%", lg: "408px" },
|
||||
maxWidth: "408px",
|
||||
minHeight: { xs: "auto", md: "428px" },
|
||||
padding: { xs: "16px", sm: "20px", md: "24px" },
|
||||
borderRadius: "9px",
|
||||
border: "1px solidrgb(45, 48, 49)",
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#1E1E1E",
|
||||
},
|
||||
|
|
@ -156,7 +182,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 2,
|
||||
gap: { xs: 1.5, md: 2 },
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
|
|
@ -165,8 +191,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
sx={{
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
fontFamily: "Gilroy",
|
||||
fontSize: "24px",
|
||||
fontSize: { xs: "20px", md: "24px" },
|
||||
}}
|
||||
>
|
||||
Login
|
||||
|
|
@ -177,24 +202,24 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
sx={{
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
fontFamily: "Gilroy",
|
||||
fontSize: "16px",
|
||||
fontSize: { xs: "14px", md: "16px" },
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
Log in with your email and password
|
||||
</Typography>
|
||||
|
||||
{/* -------------------------------- Email Field ----------------- */}
|
||||
{/* Email Field */}
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<FormLabel
|
||||
htmlFor="email"
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
xs: "0.875rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
color: "white",
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
mb: 0.5,
|
||||
}}
|
||||
>
|
||||
Email
|
||||
|
|
@ -233,12 +258,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: "50px",
|
||||
height: { xs: "45px", md: "50px" },
|
||||
alignItems: "center",
|
||||
backgroundColor:
|
||||
"#1E1F1F",
|
||||
fontFamily:
|
||||
"Gilroy, sans-serif",
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
|
|
@ -266,7 +289,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
"& input": {
|
||||
color: "white",
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
xs: "0.875rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
fontFamily:
|
||||
|
|
@ -285,17 +308,18 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
/>
|
||||
</FormControl>
|
||||
|
||||
{/* -------------------------------- Password Field ----------------- */}
|
||||
{/* Password Field */}
|
||||
<FormControl sx={{ width: "100%" }}>
|
||||
<FormLabel
|
||||
htmlFor="password"
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
xs: "0.875rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
color: "white",
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
mb: 0.5,
|
||||
}}
|
||||
>
|
||||
Password
|
||||
|
|
@ -342,6 +366,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
: "primary"
|
||||
}
|
||||
InputProps={{
|
||||
sx: {
|
||||
height: { xs: "45px", md: "50px" },
|
||||
},
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<CustomIconButton
|
||||
|
|
@ -384,18 +411,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
"& input": {
|
||||
color: "white",
|
||||
fontSize: {
|
||||
xs: "0.9rem",
|
||||
xs: "0.875rem",
|
||||
sm: "1rem",
|
||||
},
|
||||
fontFamily:
|
||||
"Gilroy, sans-serif",
|
||||
},
|
||||
"& .MuiInputBase-input::placeholder":
|
||||
{
|
||||
color: "white",
|
||||
opacity: 1,
|
||||
fontFamily:
|
||||
"Gilroy, sans-serif",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
|
@ -403,13 +426,16 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
/>
|
||||
</FormControl>
|
||||
|
||||
{/* Remember me and Forgot Password */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
color: "white",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap",
|
||||
flexWrap: { xs: "wrap", sm: "nowrap" },
|
||||
gap: 1,
|
||||
mt: 1,
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
|
|
@ -417,10 +443,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
<Checkbox
|
||||
value="remember"
|
||||
sx={{
|
||||
width: 20,
|
||||
height: 20,
|
||||
fontFamily:
|
||||
"Gilroy, sans-serif",
|
||||
width: { xs: 16, md: 20 },
|
||||
height: { xs: 16, md: 20 },
|
||||
border: "2px solid #4b5255",
|
||||
borderRadius: "4px",
|
||||
backgroundColor:
|
||||
|
|
@ -441,7 +465,19 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
}}
|
||||
/>
|
||||
}
|
||||
label="Remember me"
|
||||
label={
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: "0.75rem",
|
||||
sm: "0.875rem",
|
||||
md: "1rem"
|
||||
}
|
||||
}}
|
||||
>
|
||||
Remember me
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
|
||||
<Link
|
||||
|
|
@ -451,9 +487,13 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
variant="body2"
|
||||
sx={{
|
||||
alignSelf: "center",
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
color: "#01579b",
|
||||
textDecoration: "none",
|
||||
fontSize: {
|
||||
xs: "0.75rem",
|
||||
sm: "0.875rem",
|
||||
md: "1rem"
|
||||
},
|
||||
}}
|
||||
>
|
||||
Forgot password?
|
||||
|
|
@ -463,18 +503,22 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
open={open}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
|
||||
{/* Login Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
disabled={!isValid}
|
||||
sx={{
|
||||
color: "white",
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
color: "#ffffff !important",
|
||||
fontWeight: 500,
|
||||
backgroundColor: "#52ACDF",
|
||||
"&:hover": {
|
||||
backgroundColor: "#52ACDF",
|
||||
opacity: 0.9,
|
||||
},
|
||||
padding: { xs: "8px 0", md: "10px 0" },
|
||||
mt: { xs: 2, md: 3 },
|
||||
fontSize: { xs: "0.875rem", md: "1rem" },
|
||||
}}
|
||||
>
|
||||
Login
|
||||
|
|
|
|||
|
|
@ -245,7 +245,7 @@ export default function SignUp(props: { disableCustomTheme?: boolean }) {
|
|||
<FormLabel htmlFor="phone">Phone Number</FormLabel>
|
||||
<MuiPhoneNumber
|
||||
defaultCountry="in"
|
||||
onChange={handlePhoneChange}
|
||||
onChange={(value) => handlePhoneChange(value as string)}
|
||||
value={control._formValues.phone}
|
||||
required
|
||||
error={!!errors.phone}
|
||||
|
|
|
|||
|
|
@ -6,19 +6,12 @@ import { dataDisplayCustomizations } from "./customizations/dataDisplay";
|
|||
import { feedbackCustomizations } from "./customizations/feedback";
|
||||
import { navigationCustomizations } from "./customizations/navigation";
|
||||
import { surfacesCustomizations } from "./customizations/surfaces";
|
||||
import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
|
||||
import { colorSchemes, shadows, shape } from "./themePrimitives";
|
||||
|
||||
|
||||
declare module "@mui/styles/defaultTheme" {
|
||||
interface DefaultTheme extends Theme {
|
||||
vars: object;
|
||||
}
|
||||
}
|
||||
|
||||
interface AppThemeProps {
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* This is for the docs site. You can ignore it or remove it.
|
||||
*/
|
||||
disableCustomTheme?: boolean;
|
||||
themeComponents?: ThemeOptions["components"];
|
||||
}
|
||||
|
|
@ -30,21 +23,23 @@ export default function AppTheme(props: AppThemeProps) {
|
|||
? {}
|
||||
: createTheme({
|
||||
palette: {
|
||||
mode: "dark", // Enforcing dark mode across the app
|
||||
mode: "dark",
|
||||
background: {
|
||||
default: "#111111", // Dark background color
|
||||
paper: "#1e1e1e", // Darker background for cards, containers, etc.
|
||||
default: "#111111",
|
||||
paper: "#1e1e1e",
|
||||
},
|
||||
text: {
|
||||
primary: "#ffffff", // White text for readability
|
||||
secondary: "#b0b0b0", // Lighter secondary text
|
||||
primary: "#ffffff",
|
||||
secondary: "#b0b0b0",
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
fontFamily: "Gilroy, sans-serif",
|
||||
},
|
||||
cssVariables: {
|
||||
colorSchemeSelector: "data-mui-color-scheme",
|
||||
cssVarPrefix: "template",
|
||||
},
|
||||
typography,
|
||||
shadows,
|
||||
shape,
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -11,10 +11,22 @@
|
|||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"jsx": "react-jsx",
|
||||
"types": ["react", "react-dom"],
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"types": [
|
||||
"react",
|
||||
"react-dom"
|
||||
],
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"resolveJsonModule": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue