Complete Landing Page and APi Integration for Dashboard
This commit is contained in:
jaanvi
commit
fed0e9db04
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 |
BIN
public/apple_store.png
Normal file
BIN
public/apple_store.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
BIN
public/dev-bg.png
Normal file
BIN
public/dev-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
public/developer.png
Normal file
BIN
public/developer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
public/google_play.png
Normal file
BIN
public/google_play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
public/iMockup - iPhone.png
Normal file
BIN
public/iMockup - iPhone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
|
|
@ -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
|
||||
|
|
|
|||
BIN
public/vector-arrows.png
Normal file
BIN
public/vector-arrows.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -219,7 +219,7 @@ export default function AddBookingModal({
|
|||
{carNames.map((car, index) => (
|
||||
<MenuItem
|
||||
key={car.id}
|
||||
value={car.id}
|
||||
value={car.name}
|
||||
>
|
||||
{car.name}
|
||||
</MenuItem>
|
||||
|
|
|
|||
|
|
@ -239,7 +239,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
color: "#FFFFFF",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
fontFamily: "Gilroy",
|
||||
}}
|
||||
>
|
||||
{/* Dynamic title based on the page type */}
|
||||
|
|
@ -419,7 +418,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
key={column.id}
|
||||
sx={{
|
||||
color: "#FFFFFF",
|
||||
fontWeight: "bold",
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
{column.label}
|
||||
|
|
@ -440,7 +439,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
<StyledTableCell
|
||||
key={column.id}
|
||||
sx={{
|
||||
color: "#FFFFFF",
|
||||
color: "#D9D8D8",
|
||||
backgroundColor: "#272727",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { useDispatch } from "react-redux";
|
|||
import {
|
||||
updateSlot,
|
||||
fetchAvailableSlots,
|
||||
fetchManagersSlots,
|
||||
} from "../../redux/slices/slotSlice.ts"; // Update with correct action
|
||||
import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Custom styled components
|
||||
import { AppDispatch } from "../../redux/store/store.ts";
|
||||
|
|
@ -86,7 +87,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
|
|||
isAvailable: availabilityStatus,
|
||||
})
|
||||
).unwrap();
|
||||
dispatch(fetchAvailableSlots());
|
||||
dispatch(fetchManagersSlots());
|
||||
handleClose(); // Close modal on success
|
||||
reset(); // Reset form fields after submit
|
||||
} catch (error) {
|
||||
|
|
@ -145,7 +146,6 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
|
|||
|
||||
{/* Input Fields */}
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
|
||||
|
||||
{/* Start Time */}
|
||||
<Box sx={{ flex: "1 1 48%" }}>
|
||||
<Typography variant="body2" fontWeight={500} mb={0.5}>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -4,10 +4,14 @@ import Card from "@mui/material/Card";
|
|||
import CardContent from "@mui/material/CardContent";
|
||||
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 TextField from "@mui/material/TextField";
|
||||
import Button from "@mui/material/Button";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
|
||||
|
||||
function AreaGradient({ color, id }: { color: string; id: string }) {
|
||||
return (
|
||||
<defs>
|
||||
<linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
|
|
@ -18,148 +22,173 @@ function AreaGradient({ color, id }: { color: string; id: string }) {
|
|||
);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
export default function LineChartCard() {
|
||||
const theme = useTheme();
|
||||
const data = getDaysInMonth(4, 2024);
|
||||
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 dispatch = useDispatch<AppDispatch>();
|
||||
const { totalBookings, loading } = useSelector(
|
||||
(state: RootState) => state.dashboardReducer
|
||||
);
|
||||
|
||||
const handleChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
|
||||
setSelectedOption(event.target.value);
|
||||
// States for date range inputs
|
||||
const [startDateBookings, setStartDateBookings] = React.useState("");
|
||||
const [endDateBookings, setEndDateBookings] = React.useState("");
|
||||
|
||||
// Function to fetch data with date filters
|
||||
const handleFetchData = () => {
|
||||
dispatch(fetchDashboardData({ startDateBookings, endDateBookings }));
|
||||
};
|
||||
|
||||
// Generate chart data points (simulated here)
|
||||
const totalPoints = 10; // Divide total bookings into 10 intervals
|
||||
const chartData = Array.from({ length: totalPoints }, (_, i) => ({
|
||||
label: `Day ${i + 1}`,
|
||||
value: Math.round((totalBookings / totalPoints) * (i + 1)),
|
||||
}));
|
||||
|
||||
// Calculate responsive chart dimensions
|
||||
const getChartHeight = () => (isXsScreen ? 200 : isSmScreen ? 220 : 250);
|
||||
const getChartMargin = () =>
|
||||
isXsScreen
|
||||
? { left: 35, right: 10, top: 15, bottom: 15 }
|
||||
: isSmScreen
|
||||
? { left: 40, right: 15, top: 18, bottom: 18 }
|
||||
: { left: 50, right: 20, top: 20 };
|
||||
|
||||
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>
|
||||
<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="left"
|
||||
align={isXsScreen ? "center" : "left"}
|
||||
color="#F2F2F2"
|
||||
sx={{
|
||||
fontFamily: "Gilroy",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
fontSize: { xs: "16px", sm: "17px", md: "18px" },
|
||||
lineHeight: "24px",
|
||||
marginBottom: isXsScreen ? 2 : 0,
|
||||
width: isXsScreen ? "100%" : "auto",
|
||||
}}
|
||||
>
|
||||
Sales Stats
|
||||
Total Bookings 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>
|
||||
|
||||
{/* Input fields for start and end date */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: isXsScreen ? "column" : "row",
|
||||
gap: "16px",
|
||||
marginTop: "16px",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
type="date"
|
||||
label="Start Date"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
InputLabelProps={{ shrink: true }}
|
||||
value={startDateBookings}
|
||||
onChange={(e) => setStartDateBookings(e.target.value)}
|
||||
sx={{
|
||||
backgroundColor: "#202020",
|
||||
borderRadius: "8px",
|
||||
"& .MuiInputBase-input": {
|
||||
color: "#F2F2F2",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
type="date"
|
||||
label="End Date"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
InputLabelProps={{ shrink: true }}
|
||||
value={endDateBookings}
|
||||
onChange={(e) => setEndDateBookings(e.target.value)}
|
||||
sx={{
|
||||
backgroundColor: "#202020",
|
||||
borderRadius: "8px",
|
||||
"& .MuiInputBase-input": {
|
||||
color: "#F2F2F2",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleFetchData}
|
||||
sx={{
|
||||
backgroundColor: "#52ACDF",
|
||||
color: "white",
|
||||
borderRadius: "8px",
|
||||
padding: "10px 20px",
|
||||
|
||||
"&:hover": { backgroundColor: "#3A94C0" },
|
||||
}}
|
||||
>
|
||||
Fetch
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Line Chart */}
|
||||
<LineChart
|
||||
colors={colorPalette}
|
||||
colors={[theme.palette.primary.main]}
|
||||
xAxis={[
|
||||
{
|
||||
scaleType: "point",
|
||||
data,
|
||||
tickInterval: (index, i) => (i + 1) % 5 === 0,
|
||||
data: chartData.map((data) => data.label), // Use intervals as x-axis labels
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
id: "direct",
|
||||
label: "Direct",
|
||||
id: "totalBookings",
|
||||
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",
|
||||
data: chartData.map((data) => data.value), // Use interval data for y-axis
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
]}
|
||||
height={250}
|
||||
margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
|
||||
height={getChartHeight()}
|
||||
margin={getChartMargin()}
|
||||
grid={{ horizontal: true }}
|
||||
sx={{
|
||||
"& .MuiAreaElement-series-direct": {
|
||||
fill: "url('#direct')",
|
||||
},
|
||||
}}
|
||||
slotProps={{
|
||||
legend: {
|
||||
hidden: true,
|
||||
"& .MuiAreaElement-series-totalBookings": {
|
||||
fill: "url('#totalBookings')",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AreaGradient
|
||||
color={theme.palette.primary.light}
|
||||
id="direct"
|
||||
color={theme.palette.primary.main}
|
||||
id="totalBookings"
|
||||
/>
|
||||
</LineChart>
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -7,56 +6,82 @@ import StatCard, { StatCardProps } from "../StatCard/statCard";
|
|||
import ResourcesPieChart from "../ResourcePieChart/resourcePieChart";
|
||||
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",
|
||||
},
|
||||
];
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function MainGrid() {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const {
|
||||
totalAdmins,
|
||||
totalManagers,
|
||||
totalUsers,
|
||||
totalStations,
|
||||
loading,
|
||||
error,
|
||||
} = useSelector((state: RootState) => state.dashboardReducer);
|
||||
|
||||
|
||||
|
||||
const staticData = {
|
||||
totalAdmins: 86,
|
||||
totalManagers: 12,
|
||||
totalUsers: 24,
|
||||
totalStations: 8,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
dispatch(fetchDashboardData());
|
||||
|
||||
}, [dispatch]);
|
||||
|
||||
const data =
|
||||
{ totalAdmins, totalManagers, totalUsers, totalStations }
|
||||
|
||||
|
||||
const statCards = [
|
||||
{ title: "Total Admins", value: data.totalAdmins },
|
||||
{ title: "Total Managers", value: data.totalManagers },
|
||||
{ title: "Total Users", value: data.totalUsers },
|
||||
{ title: "Total Stations", value: data.totalStations },
|
||||
];
|
||||
|
||||
return (
|
||||
<Box sx={{ width: "100%", maxWidth: { sm: "100%", md: "1700px" } }}>
|
||||
{/* cards */}
|
||||
<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>
|
||||
<Grid
|
||||
container
|
||||
spacing={3}
|
||||
columns={12}
|
||||
|
||||
// sx={{ mb: (theme) => theme.spacing(2) }}
|
||||
>
|
||||
{data.map((card, index) => (
|
||||
<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>
|
||||
{/* Grid Layout */}
|
||||
<Grid container spacing={3} columns={12}>
|
||||
{/* Statistic Cards */}
|
||||
{statCards.map((card, index) => (
|
||||
<Grid key={index} item xs={12} sm={6} md={3} lg={3}>
|
||||
<StatCard {...card} />
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
{/* Charts */}
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<SessionsChart />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<ResourcesPieChart />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<RoundedBarChart />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<Grid item xs={12} sm={12} md={6} lg={6}>
|
||||
<LineChartCard />
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -37,12 +37,12 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
},
|
||||
userRole === "superadmin" && {
|
||||
text: "Manager",
|
||||
icon: <ManageAccountsOutlinedIcon />,
|
||||
icon: <PeopleOutlinedIcon />,
|
||||
url: "/panel/all-managers-list",
|
||||
},
|
||||
userRole === "superadmin" && {
|
||||
text: "User",
|
||||
icon: <ManageAccountsOutlinedIcon />,
|
||||
icon: <PeopleOutlinedIcon />,
|
||||
url: "/panel/user-list",
|
||||
},
|
||||
userRole === "superadmin" && {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ 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";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useEffect } from "react";
|
||||
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
|
||||
|
||||
const colorPalette = [
|
||||
"hsla(202, 69%, 60%, 1)",
|
||||
|
|
@ -11,77 +17,160 @@ const colorPalette = [
|
|||
"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] },
|
||||
];
|
||||
|
||||
// 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] },
|
||||
// ];
|
||||
|
||||
export default function ResourcePieChart() {
|
||||
const theme = useTheme();
|
||||
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
|
||||
// // Fetch role and carPortCounts from Redux state
|
||||
// const {user} = useSelector((state: RootState) => state.profileReducer); // Assuming user role is stored in Redux
|
||||
const { carPortCounts } = useSelector(
|
||||
(state: RootState) => state.dashboardReducer
|
||||
);
|
||||
console.log("first",carPortCounts)
|
||||
// Static data for non-superadmin roles
|
||||
// const staticCarPorts = [
|
||||
// { carPort: "240V", count: 5 },
|
||||
// { carPort: "120V", count: 3 },
|
||||
// { carPort: "DCFC", count: 2 },
|
||||
// { carPort: "Other", count: 7 },
|
||||
// ];
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
dispatch(fetchDashboardData());
|
||||
|
||||
}, [dispatch]);
|
||||
|
||||
// console.log("Raw CarPortCounts from API:", carPortCounts);
|
||||
|
||||
const dataToDisplay =carPortCounts
|
||||
|
||||
// const dataToDisplay =
|
||||
// user?.userType === "superadmin"
|
||||
// ? carPortCounts.filter((entry) => entry.count > 0) // Exclude zero counts
|
||||
// : staticCarPorts.filter((entry) => entry.count > 0);
|
||||
// console.log("Filtered Data to Display:", dataToDisplay);
|
||||
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: "12px",
|
||||
gap: { xs: "8px", sm: "10px", md: "12px" },
|
||||
flexGrow: 1,
|
||||
width: "553px",
|
||||
height: "324px",
|
||||
padding: "16px",
|
||||
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>
|
||||
<CardContent
|
||||
sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="subtitle2"
|
||||
color="#F2F2F2"
|
||||
width="84px"
|
||||
height="24px"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
fontSize: { xs: "16px", sm: "17px", md: "18px" },
|
||||
lineHeight: "24px",
|
||||
color: "#FFFFFF",
|
||||
marginBottom: { xs: 1, sm: 1.5, md: 2 },
|
||||
}}
|
||||
>
|
||||
Resources
|
||||
Car Port Usage
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", alignItems: "center" }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<PieChart
|
||||
colors={colorPalette}
|
||||
margin={{
|
||||
left: 60,
|
||||
right: 80,
|
||||
top: 80,
|
||||
bottom: 80,
|
||||
}}
|
||||
margin={dimensions.margin}
|
||||
series={[
|
||||
{
|
||||
data,
|
||||
innerRadius: 50,
|
||||
outerRadius: 100,
|
||||
paddingAngle: 0,
|
||||
data: dataToDisplay.map((entry, index) => ({
|
||||
title: entry.carPort,
|
||||
value: entry.count,
|
||||
color: colorPalette[
|
||||
index % colorPalette.length
|
||||
],
|
||||
})),
|
||||
innerRadius: dimensions.innerRadius,
|
||||
outerRadius: dimensions.outerRadius,
|
||||
paddingAngle: 2,
|
||||
cornerRadius: 8,
|
||||
highlightScope: {
|
||||
faded: "global",
|
||||
highlighted: "item",
|
||||
},
|
||||
},
|
||||
]}
|
||||
height={300}
|
||||
width={300}
|
||||
height={dimensions.height}
|
||||
width={dimensions.width}
|
||||
slotProps={{
|
||||
legend: { hidden: true },
|
||||
}}
|
||||
></PieChart>
|
||||
/>
|
||||
|
||||
<Stack spacing={1}>
|
||||
{data.map((entry, index) => (
|
||||
<Stack
|
||||
spacing={1}
|
||||
sx={{
|
||||
mt: { xs: 2, sm: 0 },
|
||||
ml: { xs: 0, sm: 2 },
|
||||
}}
|
||||
>
|
||||
{dataToDisplay.map((entry, index) => (
|
||||
<Stack
|
||||
key={index}
|
||||
direction="row"
|
||||
|
|
@ -90,19 +179,27 @@ export default function ResourcePieChart() {
|
|||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 16,
|
||||
height: 16,
|
||||
backgroundColor: entry.color,
|
||||
width: { xs: 12, sm: 14, md: 16 },
|
||||
height: { xs: 12, sm: 14, md: 16 },
|
||||
backgroundColor:
|
||||
colorPalette[
|
||||
index % colorPalette.length
|
||||
],
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="body2"
|
||||
width="100px"
|
||||
height="16px"
|
||||
color="#FFFFFF"
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: "12px",
|
||||
sm: "13px",
|
||||
md: "14px",
|
||||
},
|
||||
color: "#FFFFFF",
|
||||
}}
|
||||
>
|
||||
{entry.title}
|
||||
{entry.carPort}
|
||||
</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,16 @@ 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 theme = useTheme();
|
||||
const [selectedStation, setSelectedStation] = React.useState(
|
||||
"Delhi NCR EV Station"
|
||||
);
|
||||
|
||||
const handleChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
|
||||
const handleChange = (event: { target: { value: React.SetStateAction<string> } }) => {
|
||||
setSelectedStation(event.target.value);
|
||||
};
|
||||
|
||||
|
|
@ -21,31 +23,30 @@ export default function SessionsChart() {
|
|||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
width: "553px",
|
||||
height: "324px",
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
minHeight: { xs: "260px", sm: "270px", md: "290px" },
|
||||
gap: "16px",
|
||||
borderRadius: "16px",
|
||||
padding: "20px",
|
||||
padding: { xs: "12px", sm: "16px", md: "20px" },
|
||||
border: "none",
|
||||
"*:where([data-mui-color-scheme='dark']) &": {
|
||||
backgroundColor: "#202020",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<CardContent sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
align="left"
|
||||
color="#F2F2F2"
|
||||
width="132px"
|
||||
height="24px"
|
||||
gap={"12px"}
|
||||
sx={{
|
||||
fontFamily: "Gilroy",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
fontSize: { xs: "16px", sm: "17px", md: "18px" },
|
||||
lineHeight: "24px",
|
||||
letterSpacing: "0%",
|
||||
color: "#FAFAFA",
|
||||
marginBottom: { xs: 1, sm: 1.5, md: 2 },
|
||||
}}
|
||||
>
|
||||
Charging prices
|
||||
|
|
@ -54,38 +55,28 @@ export default function SessionsChart() {
|
|||
{/* Dropdown button */}
|
||||
<FormControl
|
||||
sx={{
|
||||
mt: 2,
|
||||
mb: 2,
|
||||
mt: { xs: 1, sm: 1.5, md: 2 },
|
||||
mb: { xs: 1, sm: 1.5, md: 2 },
|
||||
width: "100%",
|
||||
// backgroundColor: "#202020",
|
||||
border: "1px solid #454545",
|
||||
border: "none",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
|
||||
<Select
|
||||
value={selectedStation}
|
||||
onChange={handleChange}
|
||||
label="Select Station"
|
||||
sx={{
|
||||
//backgroundColor: "#202020",
|
||||
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>
|
||||
<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>
|
||||
|
||||
|
|
@ -94,60 +85,59 @@ export default function SessionsChart() {
|
|||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(2, 1fr)",
|
||||
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: 2 },
|
||||
maxWidth: "750px",
|
||||
gap: { xs: 1, sm: 1.5, md: 2 },
|
||||
width: "100%",
|
||||
mx: "auto",
|
||||
}}
|
||||
>
|
||||
{[1, 2, 3, 4].map((item) => (
|
||||
<Box
|
||||
key={item}
|
||||
sx={{
|
||||
height: "84px",
|
||||
height: { xs: "105px", sm: "115px", md: "128px" },
|
||||
borderRadius: "8px",
|
||||
p: "12px 16px",
|
||||
p: { xs: "10px", sm: "12px", md: "14px" },
|
||||
backgroundColor: "#272727",
|
||||
color: "#D9D8D8",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="body2"
|
||||
width="98px"
|
||||
height="24px"
|
||||
fontWeight={400}
|
||||
fontSize={"14px"}
|
||||
lineHeight={"24px"}
|
||||
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}>
|
||||
<Box display="flex" gap={1} alignItems="center">
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="subtitle2"
|
||||
color="#FFFFFF"
|
||||
width="40px"
|
||||
height={"24px"}
|
||||
fontWeight={500}
|
||||
fontSize="18px"
|
||||
lineHeight="24px"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: { xs: "16px", sm: "17px", md: "18px" },
|
||||
lineHeight: { xs: "20px", md: "24px" },
|
||||
}}
|
||||
gutterBottom
|
||||
>
|
||||
16.83
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
width="71px"
|
||||
height="24px"
|
||||
gap="2px"
|
||||
fontWeight={400}
|
||||
fontSize={"14px"}
|
||||
lineHeight={"24px"}
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: { xs: "12px", sm: "13px", md: "14px" },
|
||||
lineHeight: { xs: "20px", md: "24px" },
|
||||
}}
|
||||
>
|
||||
cents/kWh
|
||||
</Typography>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,77 @@
|
|||
|
||||
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;
|
||||
value: number;
|
||||
};
|
||||
|
||||
export default function StatCard({ title, value }: StatCardProps) {
|
||||
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: "264.5px",
|
||||
height: "90px",
|
||||
padding: "16px",
|
||||
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>
|
||||
<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"
|
||||
width={"118px"}
|
||||
height={"14px"}
|
||||
fontWeight={400}
|
||||
fontSize={"12px"}
|
||||
lineHeight={"14px"}
|
||||
letterSpacing={"0%"}
|
||||
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}
|
||||
|
|
@ -42,13 +79,23 @@ export default function StatCard({ title, value }: StatCardProps) {
|
|||
<Typography
|
||||
component="h1"
|
||||
variant="body1"
|
||||
color="#F2F2F2"
|
||||
width={"36px"}
|
||||
height={"36px"}
|
||||
fontSize={"32px"}
|
||||
fontWeight={600}
|
||||
lineHeight={"36px"}
|
||||
letterSpacing={"0%"}
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -5,125 +5,215 @@ import {
|
|||
CardContent,
|
||||
Typography,
|
||||
Box,
|
||||
Select,
|
||||
MenuItem,
|
||||
FormControl,
|
||||
SelectChangeEvent,
|
||||
TextField,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
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";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
|
||||
|
||||
// Sample Data
|
||||
const data = [
|
||||
{ name: "Jan", v1: 40 },
|
||||
{ name: "Feb", v1: 50 },
|
||||
{ name: "Mar", v1: 80 },
|
||||
{ name: "Apr", v1: 20 },
|
||||
{ name: "May", v1: 60 },
|
||||
{ name: "Jun", v1: 30 },
|
||||
];
|
||||
export default function RoundedBarChart() {
|
||||
const theme = useTheme();
|
||||
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
|
||||
// Chart Configuration
|
||||
const chartSetting = {
|
||||
// Fetch role and topStations from Redux state
|
||||
const { user } = useSelector((state: RootState) => state.profileReducer); // Assuming user role is stored in Redux
|
||||
const { topStations } = useSelector(
|
||||
(state: RootState) => state.dashboardReducer
|
||||
);
|
||||
|
||||
// State for filtering
|
||||
const [startDateStations, setStartDateStations] = React.useState("");
|
||||
const [endDateStations, setEndDateStations] = React.useState("");
|
||||
|
||||
// Handle fetching data with date filters
|
||||
const handleFetchData = () => {
|
||||
|
||||
dispatch(
|
||||
fetchDashboardData({ startDateStations, endDateStations })
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
// Responsive chart settings
|
||||
const getChartSettings = () => {
|
||||
const baseSettings = {
|
||||
yAxis: [
|
||||
{
|
||||
label: "Value",
|
||||
tickFormatter: (value: number) => `${value}`, // Formatting Y-axis ticks
|
||||
label: isXsScreen ? "" : "Count",
|
||||
tickFormatter: (value: number) => `${value}`,
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
dataKey: "name",
|
||||
scaleType: "band" as const,
|
||||
|
||||
},
|
||||
],
|
||||
width: 500,
|
||||
height: 300,
|
||||
sx: {
|
||||
[`.${axisClasses.left} .${axisClasses.label}`]: {
|
||||
transform: "translate(-20px, 0)",
|
||||
transform: "translate(-10px, 0)",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function RoundedBarChart() {
|
||||
const theme = useTheme();
|
||||
const [selectedOption, setSelectedOption] = React.useState("Monthly");
|
||||
|
||||
const handleChange = (event: SelectChangeEvent<string>) => {
|
||||
setSelectedOption(event.target.value);
|
||||
// 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();
|
||||
|
||||
// Data transformation for BarChart
|
||||
const chartData = topStations.map((station) => ({
|
||||
name: station?.ChargingStation?.name,
|
||||
count: parseInt(station.count, 10), // Ensure count is a number
|
||||
}));
|
||||
|
||||
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 } },
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<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
|
||||
Top Stations Stats
|
||||
</Typography>
|
||||
|
||||
<FormControl
|
||||
sx={{
|
||||
mt: 2,
|
||||
ml: "auto",
|
||||
backgroundColor: "#202020",
|
||||
color: "#F2F2F2",
|
||||
width: "149px",
|
||||
height: "44px",
|
||||
padding: "12px 16px",
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
value={selectedOption}
|
||||
onChange={handleChange}
|
||||
sx={{
|
||||
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>
|
||||
</Box>
|
||||
|
||||
{/* Date Filters */}
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection={isXsScreen ? "column" : "row"}
|
||||
gap={2}
|
||||
mt={2}
|
||||
>
|
||||
<TextField
|
||||
type="date"
|
||||
label="Start Date"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
InputLabelProps={{ shrink: true }}
|
||||
value={startDateStations}
|
||||
onChange={(e) => setStartDateStations(e.target.value)}
|
||||
sx={{
|
||||
backgroundColor: "#202020",
|
||||
borderRadius: "8px",
|
||||
"& .MuiInputBase-input": {
|
||||
color: "#F2F2F2",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
type="date"
|
||||
label="End Date"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
InputLabelProps={{ shrink: true }}
|
||||
value={endDateStations}
|
||||
onChange={(e) => setEndDateStations(e.target.value)}
|
||||
sx={{
|
||||
backgroundColor: "#202020",
|
||||
borderRadius: "8px",
|
||||
"& .MuiInputBase-input": {
|
||||
color: "#F2F2F2",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
|
||||
onClick={handleFetchData}
|
||||
sx={{
|
||||
backgroundColor: "#52ACDF",
|
||||
color: "white",
|
||||
borderRadius: "8px",
|
||||
width: "117px",
|
||||
"&:hover": { backgroundColor: "#439BC1" },
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Chart */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
mt: 4,
|
||||
}}
|
||||
>
|
||||
<BarChart
|
||||
dataset={data}
|
||||
borderRadius={0}
|
||||
dataset={chartData}
|
||||
series={[
|
||||
{
|
||||
dataKey: "v1",
|
||||
label: "Value",
|
||||
color: "skyblue",
|
||||
dataKey: "count",
|
||||
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();
|
||||
|
|
@ -49,14 +50,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
|
|||
};
|
||||
|
||||
const togglePasswordVisibility = (e: React.MouseEvent) => {
|
||||
e.preventDefault(); // Prevent focus loss
|
||||
e.preventDefault();
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
|
||||
const onSubmit: SubmitHandler<ILoginForm> = async (data: ILoginForm) => {
|
||||
const isValid = await trigger(); // This triggers validation for all fields
|
||||
const isValid = await trigger();
|
||||
if (!isValid) {
|
||||
return; // Stop submission if there are errors
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await dispatch(loginUser(data)).unwrap();
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const LandingPage = () => {
|
|||
radial-gradient(circle at 30%, rgb(241, 201, 119) 100%, rgba(255, 204, 102, 0) 50%)
|
||||
`,
|
||||
color: "white",
|
||||
minHeight: "100vh",
|
||||
|
||||
fontFamily: "Inter",
|
||||
//display: "flex", // Ensures the children align correctly
|
||||
//flexDirection: "column",
|
||||
|
|
@ -322,7 +322,7 @@ const LandingPage = () => {
|
|||
<Container
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
minHeight: "100vh",
|
||||
// minHeight: "100vh",
|
||||
textAlign: "center",
|
||||
// width: "1320px",
|
||||
// height: "349.82px",
|
||||
|
|
@ -455,6 +455,374 @@ const LandingPage = () => {
|
|||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
<Container
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
// minHeight: "100vh",
|
||||
textAlign: "center",
|
||||
width: "100%",
|
||||
boxShadow: "0px 8px 20px rgba(166, 210, 235, 0.2)", // Bluish box shadow
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(82, 172, 223, 0.2), rgba(0,0,0,0.3))",
|
||||
borderRadius: "16px",
|
||||
py: 4,
|
||||
px: 3,
|
||||
mt: 10,
|
||||
fontFamily: "Neue Montreal",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4" fontWeight={700} mb={5}>
|
||||
Key Features
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/iMockup - iPhone.png"
|
||||
alt="iMockup - iPhone"
|
||||
style={{
|
||||
width: "60%",
|
||||
maxWidth: "500px",
|
||||
borderRadius: "10px",
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
pointerEvents: "none", // Prevents interaction issues
|
||||
}}
|
||||
>
|
||||
{/* Top Left */}
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "5%",
|
||||
left: "5%",
|
||||
transform: "translate(-5%, -5%)",
|
||||
maxWidth: "200px",
|
||||
}}
|
||||
>
|
||||
{/* Arrow pointing to mockup */}
|
||||
<img
|
||||
src="/vector-arrows.png"
|
||||
alt="Arrow"
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "80px",
|
||||
height: "60px",
|
||||
top: "100%",
|
||||
left: "160%",
|
||||
transform:
|
||||
"translate(-50%, -50%) rotate(-20deg)",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight={400}
|
||||
color="#FFFFFF"
|
||||
fontSize={"20px"}
|
||||
lineHeight={"30px"}
|
||||
>
|
||||
Seamless Navigation
|
||||
</Typography>
|
||||
<Typography variant="body2" color="#D9D8D8">
|
||||
Effortlessly locate and access EV charging
|
||||
stations with our intuitive map integration.
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Top Right */}
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "1%",
|
||||
right: "5%",
|
||||
transform: "translate(5%, -5%)",
|
||||
maxWidth: "200px",
|
||||
textAlign: "right",
|
||||
}}
|
||||
>
|
||||
{/* Arrow pointing to mockup */}
|
||||
<img
|
||||
src="/vector-arrows.png"
|
||||
alt="Arrow"
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "80px",
|
||||
height: "50px",
|
||||
top: "90%",
|
||||
right: "110%",
|
||||
transform:
|
||||
"translate(50%, -50%) rotate(120deg)",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight={400}
|
||||
color="#FFFFFF"
|
||||
fontSize={"20px"}
|
||||
lineHeight={"30px"}
|
||||
>
|
||||
Live Availability
|
||||
</Typography>
|
||||
<Typography variant="body2" color="#D9D8D8">
|
||||
View real-time charger availability to plan your
|
||||
trips efficiently.
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Bottom Left */}
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: "5%",
|
||||
left: "5%",
|
||||
transform: "translate(-5%, 5%)",
|
||||
maxWidth: "200px",
|
||||
}}
|
||||
>
|
||||
{/* Arrow pointing to mockup */}
|
||||
<img
|
||||
src="/vector-arrows.png"
|
||||
alt="Arrow"
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "80px",
|
||||
height: "60px",
|
||||
bottom: "80%",
|
||||
left: "120%",
|
||||
transform:
|
||||
"translate(-50%, 50%) rotate(300deg)",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight={400}
|
||||
color="#FFFFFF"
|
||||
fontSize={"20px"}
|
||||
lineHeight={"30px"}
|
||||
>
|
||||
Smart Recommendations
|
||||
</Typography>
|
||||
<Typography variant="body2" color="#D9D8D8">
|
||||
Get personalized station suggestions based on
|
||||
your location and usage patterns.
|
||||
</Typography>
|
||||
</Box>
|
||||
{/* Bottom Right */}
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: "5%",
|
||||
right: "5%",
|
||||
transform: "translate(5%, 5%)",
|
||||
maxWidth: "200px",
|
||||
textAlign: "right",
|
||||
}}
|
||||
>
|
||||
{/* Arrow pointing to mockup */}
|
||||
<img
|
||||
src="/vector-arrows.png"
|
||||
alt="Arrow"
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "80px",
|
||||
height: "60px",
|
||||
bottom: "100%",
|
||||
right: "200%",
|
||||
transform:
|
||||
"translate(50%, 50%) rotate(-200deg)",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight={400}
|
||||
color="#FFFFFF"
|
||||
fontSize={"20px"}
|
||||
lineHeight={"30px"}
|
||||
>
|
||||
Secure Payments
|
||||
</Typography>
|
||||
<Typography variant="body2" color="#D9D8D8">
|
||||
Make hassle-free transactions with our secure
|
||||
payment gateway.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
{/* Footer */}
|
||||
<Container
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
width: "100%",
|
||||
boxShadow: "0px 8px 20px rgba(166, 210, 235, 0.2)", // Bluish box shadow
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(82, 172, 223, 0.2), rgba(0,0,0,0.3))",
|
||||
borderRadius: "16px",
|
||||
py: 4,
|
||||
px: 3,
|
||||
mt: 10,
|
||||
fontFamily: "Neue Montreal",
|
||||
height: "261px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
// minHeight: "100vh",
|
||||
textAlign: "center",
|
||||
|
||||
py: 4,
|
||||
px: 3,
|
||||
mt: 2,
|
||||
fontFamily: "Neue Montreal",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{/* Primary Image */}
|
||||
<img
|
||||
src="/dev-bg.png"
|
||||
alt="Developer"
|
||||
style={{
|
||||
width: "80px",
|
||||
marginRight: "20px",
|
||||
position: "relative",
|
||||
zIndex: 1, // Ensure it's layered on top
|
||||
}}
|
||||
/>
|
||||
{/* Overlapping Image */}
|
||||
<img
|
||||
src="/developer.png"
|
||||
alt="developer"
|
||||
style={{
|
||||
width: "80px",
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
left: "20px",
|
||||
zIndex: 2,
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
fontFamily={"Inter"}
|
||||
fontWeight={500}
|
||||
fontSize={"40px"}
|
||||
lineHeight={"100%"}
|
||||
color="#FFFFFF"
|
||||
>
|
||||
Get your application developed by our certified
|
||||
experts today!
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: "#52ACDF",
|
||||
color: "white",
|
||||
borderRadius: "8px",
|
||||
width: "160px",
|
||||
height: "54px",
|
||||
fontFamily: "Neue Montreal",
|
||||
textTransform: "none",
|
||||
fontWeight: 500,
|
||||
fontSize: "18px",
|
||||
lineHeight: "100%",
|
||||
|
||||
"&:hover": { backgroundColor: "#439BC1" },
|
||||
}}
|
||||
>
|
||||
Schedule a Call
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
<Container
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
width: "100%",
|
||||
boxShadow: "0px 8px 20px rgba(166, 210, 235, 0.2)", // Bluish box shadow
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(82, 172, 223, 0.2), rgba(0,0,0,0.3))",
|
||||
borderRadius: "16px",
|
||||
py: 4,
|
||||
px: 3,
|
||||
mt: 10,
|
||||
fontFamily: "Neue Montreal",
|
||||
height: "auto", // Dynamically adjust height to content
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
py: 4,
|
||||
px: 3,
|
||||
mt: 2,
|
||||
fontFamily: "Neue Montreal",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h5"
|
||||
fontWeight={600}
|
||||
fontFamily={"Inter"}
|
||||
fontSize={"40px"}
|
||||
lineHeight={"100%"}
|
||||
>
|
||||
Your{" "}
|
||||
<span style={{ color: "#52ACDF" }}>
|
||||
Perfect Experience
|
||||
</span>
|
||||
, Just a Tap Away!
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
my: 2,
|
||||
fontFamily: "Inter",
|
||||
fontWeight: 400,
|
||||
fontSize: "20px",
|
||||
color: "#FFFFFF",
|
||||
}}
|
||||
>
|
||||
Discover the smartest way to charge your electric
|
||||
vehicle. DigiEV's cutting-edge platform empowers you
|
||||
with effortless access to EV charging stations,
|
||||
real-time availability updates, and powerful tools to
|
||||
plan your journey. Make every drive electric, efficient,
|
||||
and extraordinary.
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/google_play.png"
|
||||
alt="Google Play"
|
||||
style={{ width: "120px" }}
|
||||
/>
|
||||
<img
|
||||
src="/apple_store.png"
|
||||
alt="App Store"
|
||||
style={{ width: "120px" }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import managerReducer from "../redux/slices/managerSlice.ts";
|
|||
import stationReducer from "../redux/slices/stationSlice.ts";
|
||||
import slotReducer from "../redux/slices/slotSlice.ts";
|
||||
import bookReducer from "../redux/slices/bookSlice.ts";
|
||||
|
||||
import dashboardReducer from "../redux/slices/dashboardSlice.ts";
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
authReducer,
|
||||
|
|
@ -23,7 +23,8 @@ const rootReducer = combineReducers({
|
|||
stationReducer,
|
||||
slotReducer,
|
||||
bookReducer,
|
||||
// Add other reducers here...
|
||||
dashboardReducer,
|
||||
|
||||
});
|
||||
|
||||
export type RootState = ReturnType<typeof rootReducer>;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ interface Booking {
|
|||
startTime: string;
|
||||
endTime: string;
|
||||
carDetails: CarDetails;
|
||||
carNames: string[]; // For car names
|
||||
carPorts: string[]; // For car ports
|
||||
}
|
||||
|
||||
interface BookingState {
|
||||
|
|
|
|||
94
src/redux/slices/dashboardSlice.ts
Normal file
94
src/redux/slices/dashboardSlice.ts
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||
import http from "../../lib/https";
|
||||
import { toast } from "sonner";
|
||||
|
||||
// Define interfaces for the dashboard data structure
|
||||
interface CarPortCount {
|
||||
carPort: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface TopStation {
|
||||
stationId: number;
|
||||
count: string;
|
||||
ChargingStation: {
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface DashboardState {
|
||||
totalAdmins: number;
|
||||
totalManagers: number;
|
||||
totalUsers: number;
|
||||
totalStations: number;
|
||||
carPortCounts: CarPortCount[];
|
||||
topStations: TopStation[];
|
||||
totalBookings: number;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
const initialState: DashboardState = {
|
||||
totalAdmins: 0,
|
||||
totalManagers: 0,
|
||||
totalUsers: 0,
|
||||
totalStations: 0,
|
||||
carPortCounts: [],
|
||||
topStations: [],
|
||||
totalBookings: 0,
|
||||
loading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
// Async thunk for fetching dashboard data
|
||||
export const fetchDashboardData = createAsyncThunk<
|
||||
DashboardState,
|
||||
{ startDateBookings?: string; endDateBookings?: string; startDateStations?: string; endDateStations?: string}, // Accept startDate and endDate as optional parameters
|
||||
{ rejectValue: string }
|
||||
>("dashboard/fetchDashboardData", async (params, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.get("/dashboard", { params }); // Pass startDate and endDate as query params
|
||||
return response.data;
|
||||
} catch (error: any) {
|
||||
toast.error("Error Fetching Dashboard Data: " + error.message);
|
||||
return rejectWithValue(
|
||||
error?.response?.data?.message || "An error occurred"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Redux slice for the dashboard
|
||||
const dashboardSlice = createSlice({
|
||||
name: "dashboard",
|
||||
initialState,
|
||||
reducers: {},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(fetchDashboardData.pending, (state) => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(
|
||||
fetchDashboardData.fulfilled,
|
||||
(state, action: PayloadAction<DashboardState>) => {
|
||||
state.loading = false;
|
||||
state.totalAdmins = action.payload.totalAdmins;
|
||||
state.totalManagers = action.payload.totalManagers;
|
||||
state.totalUsers = action.payload.totalUsers;
|
||||
state.totalStations = action.payload.totalStations;
|
||||
state.carPortCounts = action.payload.carPortCounts;
|
||||
state.topStations = action.payload.topStations;
|
||||
state.totalBookings = action.payload.totalBookings;
|
||||
}
|
||||
|
||||
)
|
||||
.addCase(fetchDashboardData.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error =
|
||||
action.payload || "Failed to fetch dashboard data";
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export default dashboardSlice.reducer;
|
||||
|
|
@ -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