mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
SPRINT-18: removed all non working or bad demo stuff from ui, removed console.logs, deleted some non qqq stuff
This commit is contained in:
Tim Chamberlain
368
package-lock.json
generated
368
package-lock.json
generated
@ -17,9 +17,9 @@
|
|||||||
"@fullcalendar/interaction": "5.10.0",
|
"@fullcalendar/interaction": "5.10.0",
|
||||||
"@fullcalendar/react": "5.10.0",
|
"@fullcalendar/react": "5.10.0",
|
||||||
"@fullcalendar/timegrid": "5.10.0",
|
"@fullcalendar/timegrid": "5.10.0",
|
||||||
"@kingsrook/qqq-frontend-core": "1.0.38",
|
"@kingsrook/qqq-frontend-core": "1.0.39",
|
||||||
"@mui/icons-material": "5.4.1",
|
"@mui/icons-material": "5.4.1",
|
||||||
"@mui/material": "5.4.1",
|
"@mui/material": "5.11.1",
|
||||||
"@mui/styled-engine": "5.4.1",
|
"@mui/styled-engine": "5.4.1",
|
||||||
"@mui/styles": "5.10.7",
|
"@mui/styles": "5.10.7",
|
||||||
"@mui/system": "5.10.14",
|
"@mui/system": "5.10.14",
|
||||||
@ -3164,9 +3164,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@kingsrook/qqq-frontend-core": {
|
"node_modules/@kingsrook/qqq-frontend-core": {
|
||||||
"version": "1.0.38",
|
"version": "1.0.39",
|
||||||
"resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.38/38d5f26bafb713d2f27ffd1d91253fe80ab87028",
|
"resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.39/833263d6596029a396125dccb5ab0ac908b15c36",
|
||||||
"integrity": "sha512-BpKCLsd8FhxKb0FZTRm1V8wC/jEYjpmOJg50ZaerVDkHkhb02xcMiy++a9AELEaq6KxYFRTpQHiBMJbyop83cQ==",
|
"integrity": "sha512-S9V5zhri30jvNTzMqlbeD2c+zeon+3j+JqM/wt/qsSPys4Pnp6kJDf86dF7QzeFsuzbXJDqVgcQ3AbDrTa0skA==",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "0.27.2",
|
"axios": "0.27.2",
|
||||||
@ -3179,17 +3179,18 @@
|
|||||||
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
|
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
|
||||||
},
|
},
|
||||||
"node_modules/@mui/base": {
|
"node_modules/@mui/base": {
|
||||||
"version": "5.0.0-alpha.68",
|
"version": "5.0.0-alpha.111",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.68.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.111.tgz",
|
||||||
"integrity": "sha512-q+3gX6EHuM/AyOn8fkoANQxSzIHBeuNsrGgb7SPP0y7NuM+4ZHG/b9882+OfHcilaSqPDWUQoLbphcBpw/m/RA==",
|
"integrity": "sha512-2wfIPpl97S4dPzD0QOM3UIzQ/EuXCYQvHmXxTpfKxev/cfkzOe7Ik/McoYUBbtM1bSOqH3W276R/L2LF9cyXqQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.17.0",
|
"@babel/runtime": "^7.20.6",
|
||||||
"@emotion/is-prop-valid": "^1.1.1",
|
"@emotion/is-prop-valid": "^1.2.0",
|
||||||
"@mui/utils": "^5.4.1",
|
"@mui/types": "^7.2.3",
|
||||||
"@popperjs/core": "^2.4.4",
|
"@mui/utils": "^5.11.1",
|
||||||
"clsx": "^1.1.1",
|
"@popperjs/core": "^2.11.6",
|
||||||
"prop-types": "^15.7.2",
|
"clsx": "^1.2.1",
|
||||||
"react-is": "^17.0.2"
|
"prop-types": "^15.8.1",
|
||||||
|
"react-is": "^18.2.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12.0.0"
|
"node": ">=12.0.0"
|
||||||
@ -3199,9 +3200,9 @@
|
|||||||
"url": "https://opencollective.com/mui"
|
"url": "https://opencollective.com/mui"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@types/react": "^16.8.6 || ^17.0.0",
|
"@types/react": "^17.0.0 || ^18.0.0",
|
||||||
"react": "^17.0.0",
|
"react": "^17.0.0 || ^18.0.0",
|
||||||
"react-dom": "^17.0.0"
|
"react-dom": "^17.0.0 || ^18.0.0"
|
||||||
},
|
},
|
||||||
"peerDependenciesMeta": {
|
"peerDependenciesMeta": {
|
||||||
"@types/react": {
|
"@types/react": {
|
||||||
@ -3209,6 +3210,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@mui/base/node_modules/react-is": {
|
||||||
|
"version": "18.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||||
|
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||||
|
},
|
||||||
|
"node_modules/@mui/core-downloads-tracker": {
|
||||||
|
"version": "5.11.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.1.tgz",
|
||||||
|
"integrity": "sha512-QVqVNlZ2K+LqUDE5kFgYd0r4KekR/dv2cNYbAutQWbfOA8VPVUVrDz0ELrEcoe8TjM/CwnsmGvaDh/YSNl/ALA==",
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/mui"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@mui/icons-material": {
|
"node_modules/@mui/icons-material": {
|
||||||
"version": "5.4.1",
|
"version": "5.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.4.1.tgz",
|
||||||
@ -3235,22 +3250,22 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/material": {
|
"node_modules/@mui/material": {
|
||||||
"version": "5.4.1",
|
"version": "5.11.1",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.1.tgz",
|
||||||
"integrity": "sha512-SxAT43UAjFTBBpJrN+oGrv40xP1uCa5Z49NfHt3m93xYeFzbxKOk0V9IKU7zlUjbsaVQ0i+o24yF5GULZmynlA==",
|
"integrity": "sha512-yaZiXvcrl2vgUK+VO24780BWRgwdAMmAyuMVZnRTts1Yu0tWd6PjIYq2ZtaOlpj6/LbaSS+Q2kSfxYnDQ20CEQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.17.0",
|
"@babel/runtime": "^7.20.6",
|
||||||
"@mui/base": "5.0.0-alpha.68",
|
"@mui/base": "5.0.0-alpha.111",
|
||||||
"@mui/system": "^5.4.1",
|
"@mui/core-downloads-tracker": "^5.11.1",
|
||||||
"@mui/types": "^7.1.1",
|
"@mui/system": "^5.11.1",
|
||||||
"@mui/utils": "^5.4.1",
|
"@mui/types": "^7.2.3",
|
||||||
"@types/react-transition-group": "^4.4.4",
|
"@mui/utils": "^5.11.1",
|
||||||
"clsx": "^1.1.1",
|
"@types/react-transition-group": "^4.4.5",
|
||||||
"csstype": "^3.0.10",
|
"clsx": "^1.2.1",
|
||||||
"hoist-non-react-statics": "^3.3.2",
|
"csstype": "^3.1.1",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.8.1",
|
||||||
"react-is": "^17.0.2",
|
"react-is": "^18.2.0",
|
||||||
"react-transition-group": "^4.4.2"
|
"react-transition-group": "^4.4.5"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12.0.0"
|
"node": ">=12.0.0"
|
||||||
@ -3262,9 +3277,9 @@
|
|||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@emotion/react": "^11.5.0",
|
"@emotion/react": "^11.5.0",
|
||||||
"@emotion/styled": "^11.3.0",
|
"@emotion/styled": "^11.3.0",
|
||||||
"@types/react": "^16.8.6 || ^17.0.0",
|
"@types/react": "^17.0.0 || ^18.0.0",
|
||||||
"react": "^17.0.0",
|
"react": "^17.0.0 || ^18.0.0",
|
||||||
"react-dom": "^17.0.0"
|
"react-dom": "^17.0.0 || ^18.0.0"
|
||||||
},
|
},
|
||||||
"peerDependenciesMeta": {
|
"peerDependenciesMeta": {
|
||||||
"@emotion/react": {
|
"@emotion/react": {
|
||||||
@ -3278,13 +3293,115 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/private-theming": {
|
"node_modules/@mui/material/node_modules/@emotion/cache": {
|
||||||
"version": "5.10.16",
|
"version": "11.10.5",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.16.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
|
||||||
"integrity": "sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==",
|
"integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.20.1",
|
"@emotion/memoize": "^0.8.0",
|
||||||
"@mui/utils": "^5.10.16",
|
"@emotion/sheet": "^1.2.1",
|
||||||
|
"@emotion/utils": "^1.2.0",
|
||||||
|
"@emotion/weak-memoize": "^0.3.0",
|
||||||
|
"stylis": "4.1.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@mui/material/node_modules/@emotion/memoize": {
|
||||||
|
"version": "0.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
|
||||||
|
"integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
|
||||||
|
},
|
||||||
|
"node_modules/@mui/material/node_modules/@emotion/weak-memoize": {
|
||||||
|
"version": "0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
|
||||||
|
"integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
|
||||||
|
},
|
||||||
|
"node_modules/@mui/material/node_modules/@mui/styled-engine": {
|
||||||
|
"version": "5.11.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.0.tgz",
|
||||||
|
"integrity": "sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.20.6",
|
||||||
|
"@emotion/cache": "^11.10.5",
|
||||||
|
"csstype": "^3.1.1",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/mui"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emotion/react": "^11.4.1",
|
||||||
|
"@emotion/styled": "^11.3.0",
|
||||||
|
"react": "^17.0.0 || ^18.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@emotion/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@emotion/styled": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@mui/material/node_modules/@mui/system": {
|
||||||
|
"version": "5.11.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.1.tgz",
|
||||||
|
"integrity": "sha512-BEA2S0hay8n8CcZftkeAVsi0nsb5ZjdnZRCahv5lX7QJYwDjO4ucJ6lnvxHe2v/9Te1LLjTO7ojxu/qM6CE5Cg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.20.6",
|
||||||
|
"@mui/private-theming": "^5.11.1",
|
||||||
|
"@mui/styled-engine": "^5.11.0",
|
||||||
|
"@mui/types": "^7.2.3",
|
||||||
|
"@mui/utils": "^5.11.1",
|
||||||
|
"clsx": "^1.2.1",
|
||||||
|
"csstype": "^3.1.1",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/mui"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emotion/react": "^11.5.0",
|
||||||
|
"@emotion/styled": "^11.3.0",
|
||||||
|
"@types/react": "^17.0.0 || ^18.0.0",
|
||||||
|
"react": "^17.0.0 || ^18.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@emotion/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@emotion/styled": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@mui/material/node_modules/react-is": {
|
||||||
|
"version": "18.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||||
|
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||||
|
},
|
||||||
|
"node_modules/@mui/material/node_modules/stylis": {
|
||||||
|
"version": "4.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
|
||||||
|
"integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
|
||||||
|
},
|
||||||
|
"node_modules/@mui/private-theming": {
|
||||||
|
"version": "5.11.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.1.tgz",
|
||||||
|
"integrity": "sha512-nnHg7kA5RwFRhy0wiDYe59sLCVGORpPypL1JcEdhv0+N0Zbmc2E/y4z2zqMRZ62MAEscpro7cQbvv244ThA84A==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.20.6",
|
||||||
|
"@mui/utils": "^5.11.1",
|
||||||
"prop-types": "^15.8.1"
|
"prop-types": "^15.8.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
@ -3472,9 +3589,9 @@
|
|||||||
"integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
|
"integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
|
||||||
},
|
},
|
||||||
"node_modules/@mui/types": {
|
"node_modules/@mui/types": {
|
||||||
"version": "7.2.2",
|
"version": "7.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz",
|
||||||
"integrity": "sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA==",
|
"integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==",
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
},
|
},
|
||||||
@ -3485,11 +3602,11 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/utils": {
|
"node_modules/@mui/utils": {
|
||||||
"version": "5.10.16",
|
"version": "5.11.1",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.1.tgz",
|
||||||
"integrity": "sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==",
|
"integrity": "sha512-lMAPgIJoil8V9ZxsMbEflMsvZmWcHbRVMc4JDY9jPO9V4welpF43h/O267b1RqlcRnC5MEbVQV605GYkTZY29Q==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.20.1",
|
"@babel/runtime": "^7.20.6",
|
||||||
"@types/prop-types": "^15.7.5",
|
"@types/prop-types": "^15.7.5",
|
||||||
"@types/react-is": "^16.7.1 || ^17.0.0",
|
"@types/react-is": "^16.7.1 || ^17.0.0",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
@ -21062,9 +21179,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@kingsrook/qqq-frontend-core": {
|
"@kingsrook/qqq-frontend-core": {
|
||||||
"version": "1.0.38",
|
"version": "1.0.39",
|
||||||
"resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.38/38d5f26bafb713d2f27ffd1d91253fe80ab87028",
|
"resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.39/833263d6596029a396125dccb5ab0ac908b15c36",
|
||||||
"integrity": "sha512-BpKCLsd8FhxKb0FZTRm1V8wC/jEYjpmOJg50ZaerVDkHkhb02xcMiy++a9AELEaq6KxYFRTpQHiBMJbyop83cQ==",
|
"integrity": "sha512-S9V5zhri30jvNTzMqlbeD2c+zeon+3j+JqM/wt/qsSPys4Pnp6kJDf86dF7QzeFsuzbXJDqVgcQ3AbDrTa0skA==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"axios": "0.27.2",
|
"axios": "0.27.2",
|
||||||
"form-data": "4.0.0"
|
"form-data": "4.0.0"
|
||||||
@ -21076,18 +21193,31 @@
|
|||||||
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
|
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
|
||||||
},
|
},
|
||||||
"@mui/base": {
|
"@mui/base": {
|
||||||
"version": "5.0.0-alpha.68",
|
"version": "5.0.0-alpha.111",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.68.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.111.tgz",
|
||||||
"integrity": "sha512-q+3gX6EHuM/AyOn8fkoANQxSzIHBeuNsrGgb7SPP0y7NuM+4ZHG/b9882+OfHcilaSqPDWUQoLbphcBpw/m/RA==",
|
"integrity": "sha512-2wfIPpl97S4dPzD0QOM3UIzQ/EuXCYQvHmXxTpfKxev/cfkzOe7Ik/McoYUBbtM1bSOqH3W276R/L2LF9cyXqQ==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@babel/runtime": "^7.17.0",
|
"@babel/runtime": "^7.20.6",
|
||||||
"@emotion/is-prop-valid": "^1.1.1",
|
"@emotion/is-prop-valid": "^1.2.0",
|
||||||
"@mui/utils": "^5.4.1",
|
"@mui/types": "^7.2.3",
|
||||||
"@popperjs/core": "^2.4.4",
|
"@mui/utils": "^5.11.1",
|
||||||
"clsx": "^1.1.1",
|
"@popperjs/core": "^2.11.6",
|
||||||
"prop-types": "^15.7.2",
|
"clsx": "^1.2.1",
|
||||||
"react-is": "^17.0.2"
|
"prop-types": "^15.8.1",
|
||||||
|
"react-is": "^18.2.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react-is": {
|
||||||
|
"version": "18.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||||
|
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@mui/core-downloads-tracker": {
|
||||||
|
"version": "5.11.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.1.tgz",
|
||||||
|
"integrity": "sha512-QVqVNlZ2K+LqUDE5kFgYd0r4KekR/dv2cNYbAutQWbfOA8VPVUVrDz0ELrEcoe8TjM/CwnsmGvaDh/YSNl/ALA=="
|
||||||
},
|
},
|
||||||
"@mui/icons-material": {
|
"@mui/icons-material": {
|
||||||
"version": "5.4.1",
|
"version": "5.4.1",
|
||||||
@ -21098,31 +21228,91 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@mui/material": {
|
"@mui/material": {
|
||||||
"version": "5.4.1",
|
"version": "5.11.1",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.1.tgz",
|
||||||
"integrity": "sha512-SxAT43UAjFTBBpJrN+oGrv40xP1uCa5Z49NfHt3m93xYeFzbxKOk0V9IKU7zlUjbsaVQ0i+o24yF5GULZmynlA==",
|
"integrity": "sha512-yaZiXvcrl2vgUK+VO24780BWRgwdAMmAyuMVZnRTts1Yu0tWd6PjIYq2ZtaOlpj6/LbaSS+Q2kSfxYnDQ20CEQ==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@babel/runtime": "^7.17.0",
|
"@babel/runtime": "^7.20.6",
|
||||||
"@mui/base": "5.0.0-alpha.68",
|
"@mui/base": "5.0.0-alpha.111",
|
||||||
"@mui/system": "^5.4.1",
|
"@mui/core-downloads-tracker": "^5.11.1",
|
||||||
"@mui/types": "^7.1.1",
|
"@mui/system": "^5.11.1",
|
||||||
"@mui/utils": "^5.4.1",
|
"@mui/types": "^7.2.3",
|
||||||
"@types/react-transition-group": "^4.4.4",
|
"@mui/utils": "^5.11.1",
|
||||||
"clsx": "^1.1.1",
|
"@types/react-transition-group": "^4.4.5",
|
||||||
"csstype": "^3.0.10",
|
"clsx": "^1.2.1",
|
||||||
"hoist-non-react-statics": "^3.3.2",
|
"csstype": "^3.1.1",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.8.1",
|
||||||
"react-is": "^17.0.2",
|
"react-is": "^18.2.0",
|
||||||
"react-transition-group": "^4.4.2"
|
"react-transition-group": "^4.4.5"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@emotion/cache": {
|
||||||
|
"version": "11.10.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
|
||||||
|
"integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
|
||||||
|
"requires": {
|
||||||
|
"@emotion/memoize": "^0.8.0",
|
||||||
|
"@emotion/sheet": "^1.2.1",
|
||||||
|
"@emotion/utils": "^1.2.0",
|
||||||
|
"@emotion/weak-memoize": "^0.3.0",
|
||||||
|
"stylis": "4.1.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@emotion/memoize": {
|
||||||
|
"version": "0.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
|
||||||
|
"integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
|
||||||
|
},
|
||||||
|
"@emotion/weak-memoize": {
|
||||||
|
"version": "0.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
|
||||||
|
"integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
|
||||||
|
},
|
||||||
|
"@mui/styled-engine": {
|
||||||
|
"version": "5.11.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.0.tgz",
|
||||||
|
"integrity": "sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.20.6",
|
||||||
|
"@emotion/cache": "^11.10.5",
|
||||||
|
"csstype": "^3.1.1",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@mui/system": {
|
||||||
|
"version": "5.11.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.1.tgz",
|
||||||
|
"integrity": "sha512-BEA2S0hay8n8CcZftkeAVsi0nsb5ZjdnZRCahv5lX7QJYwDjO4ucJ6lnvxHe2v/9Te1LLjTO7ojxu/qM6CE5Cg==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.20.6",
|
||||||
|
"@mui/private-theming": "^5.11.1",
|
||||||
|
"@mui/styled-engine": "^5.11.0",
|
||||||
|
"@mui/types": "^7.2.3",
|
||||||
|
"@mui/utils": "^5.11.1",
|
||||||
|
"clsx": "^1.2.1",
|
||||||
|
"csstype": "^3.1.1",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-is": {
|
||||||
|
"version": "18.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||||
|
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||||
|
},
|
||||||
|
"stylis": {
|
||||||
|
"version": "4.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
|
||||||
|
"integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@mui/private-theming": {
|
"@mui/private-theming": {
|
||||||
"version": "5.10.16",
|
"version": "5.11.1",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.16.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.1.tgz",
|
||||||
"integrity": "sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==",
|
"integrity": "sha512-nnHg7kA5RwFRhy0wiDYe59sLCVGORpPypL1JcEdhv0+N0Zbmc2E/y4z2zqMRZ62MAEscpro7cQbvv244ThA84A==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@babel/runtime": "^7.20.1",
|
"@babel/runtime": "^7.20.6",
|
||||||
"@mui/utils": "^5.10.16",
|
"@mui/utils": "^5.11.1",
|
||||||
"prop-types": "^15.8.1"
|
"prop-types": "^15.8.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -21216,16 +21406,16 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@mui/types": {
|
"@mui/types": {
|
||||||
"version": "7.2.2",
|
"version": "7.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz",
|
||||||
"integrity": "sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA=="
|
"integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw=="
|
||||||
},
|
},
|
||||||
"@mui/utils": {
|
"@mui/utils": {
|
||||||
"version": "5.10.16",
|
"version": "5.11.1",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.1.tgz",
|
||||||
"integrity": "sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==",
|
"integrity": "sha512-lMAPgIJoil8V9ZxsMbEflMsvZmWcHbRVMc4JDY9jPO9V4welpF43h/O267b1RqlcRnC5MEbVQV605GYkTZY29Q==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@babel/runtime": "^7.20.1",
|
"@babel/runtime": "^7.20.6",
|
||||||
"@types/prop-types": "^15.7.5",
|
"@types/prop-types": "^15.7.5",
|
||||||
"@types/react-is": "^16.7.1 || ^17.0.0",
|
"@types/react-is": "^16.7.1 || ^17.0.0",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
"@fullcalendar/timegrid": "5.10.0",
|
"@fullcalendar/timegrid": "5.10.0",
|
||||||
"@kingsrook/qqq-frontend-core": "1.0.39",
|
"@kingsrook/qqq-frontend-core": "1.0.39",
|
||||||
"@mui/icons-material": "5.4.1",
|
"@mui/icons-material": "5.4.1",
|
||||||
"@mui/material": "5.4.1",
|
"@mui/material": "5.11.1",
|
||||||
"@mui/styled-engine": "5.4.1",
|
"@mui/styled-engine": "5.4.1",
|
||||||
"@mui/styles": "5.10.7",
|
"@mui/styles": "5.10.7",
|
||||||
"@mui/system": "5.10.14",
|
"@mui/system": "5.10.14",
|
||||||
|
|||||||
29
src/App.tsx
29
src/App.tsx
@ -26,6 +26,7 @@ import {QAppTreeNode} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QApp
|
|||||||
import {QAuthenticationMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAuthenticationMetaData";
|
import {QAuthenticationMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAuthenticationMetaData";
|
||||||
import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
|
import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
|
||||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||||
|
import Avatar from "@mui/material/Avatar";
|
||||||
import CssBaseline from "@mui/material/CssBaseline";
|
import CssBaseline from "@mui/material/CssBaseline";
|
||||||
import Icon from "@mui/material/Icon";
|
import Icon from "@mui/material/Icon";
|
||||||
import {ThemeProvider} from "@mui/material/styles";
|
import {ThemeProvider} from "@mui/material/styles";
|
||||||
@ -34,13 +35,10 @@ import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} f
|
|||||||
import {useCookies} from "react-cookie";
|
import {useCookies} from "react-cookie";
|
||||||
import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
|
import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
|
||||||
import {Md5} from "ts-md5/dist/md5";
|
import {Md5} from "ts-md5/dist/md5";
|
||||||
|
import {number} from "yup";
|
||||||
import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
|
import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "context";
|
||||||
import Settings from "layouts/pages/account/settings";
|
|
||||||
import ProfileOverview from "layouts/pages/profile/profile-overview";
|
|
||||||
import QContext from "QContext";
|
import QContext from "QContext";
|
||||||
import Sidenav from "qqq/components/Sidenav";
|
import Sidenav from "qqq/components/Sidenav";
|
||||||
import Configurator from "qqq/components/Temporary/Configurator";
|
|
||||||
import MDAvatar from "qqq/components/Temporary/MDAvatar";
|
|
||||||
import MDBox from "qqq/components/Temporary/MDBox";
|
import MDBox from "qqq/components/Temporary/MDBox";
|
||||||
import theme from "qqq/components/Temporary/Theme";
|
import theme from "qqq/components/Temporary/Theme";
|
||||||
import AppHome from "qqq/pages/app-home";
|
import AppHome from "qqq/pages/app-home";
|
||||||
@ -390,27 +388,13 @@ export default function App()
|
|||||||
type: "collapse",
|
type: "collapse",
|
||||||
name: user?.name,
|
name: user?.name,
|
||||||
key: "username",
|
key: "username",
|
||||||
icon: <MDAvatar src={profilePicture} alt="{user?.name}" size="sm" />,
|
noCollapse: true,
|
||||||
collapse: [
|
icon: <Avatar src={profilePicture} alt="{user?.name}" />,
|
||||||
{
|
|
||||||
name: "My Profile",
|
|
||||||
key: "my-profile",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
component: <ProfileOverview />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Settings",
|
|
||||||
key: "profile-settings",
|
|
||||||
route: "/pages/account/settings",
|
|
||||||
component: <Settings />,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
setProfileRoutes(profileRoutes);
|
setProfileRoutes(profileRoutes);
|
||||||
|
|
||||||
const sideNavAppList = [] as any[];
|
const sideNavAppList = [] as any[];
|
||||||
const appRoutesList = [] as any[];
|
const appRoutesList = [] as any[];
|
||||||
const mainDashboardsApp = {} as any;
|
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////////////
|
||||||
// iterate throught the list to find the 'main dashboard so we can put it first' //
|
// iterate throught the list to find the 'main dashboard so we can put it first' //
|
||||||
@ -565,8 +549,6 @@ export default function App()
|
|||||||
}}>
|
}}>
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
<CssBaseline />
|
<CssBaseline />
|
||||||
{layout === "dashboard" && (
|
|
||||||
<>
|
|
||||||
<Sidenav
|
<Sidenav
|
||||||
color={sidenavColor}
|
color={sidenavColor}
|
||||||
icon={branding.icon}
|
icon={branding.icon}
|
||||||
@ -576,9 +558,6 @@ export default function App()
|
|||||||
onMouseEnter={handleOnMouseEnter}
|
onMouseEnter={handleOnMouseEnter}
|
||||||
onMouseLeave={handleOnMouseLeave}
|
onMouseLeave={handleOnMouseLeave}
|
||||||
/>
|
/>
|
||||||
<Configurator />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="*" element={<Navigate to="/dashboards/overview" />} />
|
<Route path="*" element={<Navigate to="/dashboards/overview" />} />
|
||||||
{appRoutes && getRoutes(appRoutes)}
|
{appRoutes && getRoutes(appRoutes)}
|
||||||
|
|||||||
@ -1,95 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useEffect, ReactNode } from "react";
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Grid from "@mui/material/Grid";
|
|
||||||
import AppBar from "@mui/material/AppBar";
|
|
||||||
import Tabs from "@mui/material/Tabs";
|
|
||||||
import Tab from "@mui/material/Tab";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS Base Styles
|
|
||||||
import breakpoints from "assets/theme/base/breakpoints";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS examples components
|
|
||||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
|
||||||
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
|
|
||||||
import Footer from "examples/Footer";
|
|
||||||
|
|
||||||
// Declaring props types for BaseLayout
|
|
||||||
interface Props {
|
|
||||||
stickyNavbar?: boolean;
|
|
||||||
children: ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
function BaseLayout({ stickyNavbar, children }: Props): JSX.Element {
|
|
||||||
const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal");
|
|
||||||
const [tabValue, setTabValue] = useState<number>(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// A function that sets the orientation state of the tabs.
|
|
||||||
function handleTabsOrientation() {
|
|
||||||
return window.innerWidth < breakpoints.values.sm
|
|
||||||
? setTabsOrientation("vertical")
|
|
||||||
: setTabsOrientation("horizontal");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
The event listener that's calling the handleTabsOrientation function when resizing the window.
|
|
||||||
*/
|
|
||||||
window.addEventListener("resize", handleTabsOrientation);
|
|
||||||
|
|
||||||
// Call the handleTabsOrientation function to set the state with the initial value.
|
|
||||||
handleTabsOrientation();
|
|
||||||
|
|
||||||
// Remove event listener on cleanup
|
|
||||||
return () => window.removeEventListener("resize", handleTabsOrientation);
|
|
||||||
}, [tabsOrientation]);
|
|
||||||
|
|
||||||
const handleSetTabValue = (event: any, newValue: number) => setTabValue(newValue);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardLayout>
|
|
||||||
<DashboardNavbar absolute={!stickyNavbar} isMini />
|
|
||||||
<MDBox mt={stickyNavbar ? 3 : 10}>
|
|
||||||
<Grid container>
|
|
||||||
<Grid item xs={12} sm={8} lg={4}>
|
|
||||||
<AppBar position="static">
|
|
||||||
<Tabs orientation={tabsOrientation} value={tabValue} onChange={handleSetTabValue}>
|
|
||||||
<Tab label="Messages" />
|
|
||||||
<Tab label="Social" />
|
|
||||||
<Tab label="Notifications" />
|
|
||||||
<Tab label="Backup" />
|
|
||||||
</Tabs>
|
|
||||||
</AppBar>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
{children}
|
|
||||||
</MDBox>
|
|
||||||
<Footer />
|
|
||||||
</DashboardLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Declaring default props for BaseLayout
|
|
||||||
BaseLayout.defaultProps = {
|
|
||||||
stickyNavbar: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BaseLayout;
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDInput from "components/MDInput";
|
|
||||||
|
|
||||||
// Declaring props types for FormField
|
|
||||||
interface Props {
|
|
||||||
label?: string;
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
function FormField({ label, ...rest }: Props): JSX.Element {
|
|
||||||
return (
|
|
||||||
<MDInput
|
|
||||||
variant="standard"
|
|
||||||
label={label}
|
|
||||||
fullWidth
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Declaring default props for FormField
|
|
||||||
FormField.defaultProps = {
|
|
||||||
label: " ",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FormField;
|
|
||||||
@ -1,273 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Icon from "@mui/material/Icon";
|
|
||||||
import Switch from "@mui/material/Switch";
|
|
||||||
import Tooltip from "@mui/material/Tooltip";
|
|
||||||
import Divider from "@mui/material/Divider";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
import MDAvatar from "components/MDAvatar";
|
|
||||||
import MDInput from "components/MDInput";
|
|
||||||
import MDButton from "components/MDButton";
|
|
||||||
|
|
||||||
// Images
|
|
||||||
import logoSlack from "assets/images/small-logos/logo-slack.svg";
|
|
||||||
import logoSpotify from "assets/images/small-logos/logo-spotify.svg";
|
|
||||||
import logoAtlassian from "assets/images/small-logos/logo-atlassian.svg";
|
|
||||||
import logoAsana from "assets/images/small-logos/logo-asana.svg";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import { useMaterialUIController } from "context";
|
|
||||||
|
|
||||||
function Accounts(): JSX.Element {
|
|
||||||
const [controller] = useMaterialUIController();
|
|
||||||
const { darkMode } = controller;
|
|
||||||
|
|
||||||
const [slack2FA, setSlack2FA] = useState<boolean>(true);
|
|
||||||
const [spotify2FA, setSpotify2FA] = useState<boolean>(true);
|
|
||||||
const [atlassian2FA, setAtlassian2FA] = useState<boolean>(true);
|
|
||||||
const [asana2FA, setAsana2FA] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const handleSetSlack2FA = () => setSlack2FA(!slack2FA);
|
|
||||||
const handleSetSpotify2FA = () => setSpotify2FA(!spotify2FA);
|
|
||||||
const handleSetAtlassian2FA = () => setAtlassian2FA(!atlassian2FA);
|
|
||||||
const handleSetAsana2FA = () => setAsana2FA(!asana2FA);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card id="accounts">
|
|
||||||
<MDBox p={3} lineHeight={1}>
|
|
||||||
<MDBox mb={1}>
|
|
||||||
<MDTypography variant="h5">Accounts</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
Here you can setup and manage your integration settings.
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox pt={2} pb={3} px={3}>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDBox display="flex" alignItems="center">
|
|
||||||
<MDAvatar src={logoSlack} alt="Slack logo" variant="rounded" />
|
|
||||||
<MDBox ml={2}>
|
|
||||||
<MDTypography variant="h5" fontWeight="medium">
|
|
||||||
Slack
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox display="flex" alignItems="flex-end">
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
Show less
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="button" color="text" sx={{ lineHeight: 0 }}>
|
|
||||||
<Icon fontSize="small">expand_less</Icon>
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="flex-end"
|
|
||||||
width={{ xs: "100%", sm: "auto" }}
|
|
||||||
mt={{ xs: 1, sm: 0 }}
|
|
||||||
>
|
|
||||||
<MDBox lineHeight={0} mx={2}>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
{slack2FA ? "Enabled" : "Disabled"}
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox mr={1}>
|
|
||||||
<Switch checked={slack2FA} onChange={handleSetSlack2FA} />
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox ml={2} pl={6} pt={2} lineHeight={1}>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
You haven't added your Slack yet or you aren't authorized. Please add our
|
|
||||||
Slack Bot to your account by clicking on here. When you've added the bot, send your
|
|
||||||
verification code that you have received.
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox
|
|
||||||
bgColor={darkMode ? "grey-900" : "grey-100"}
|
|
||||||
borderRadius="lg"
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
my={3}
|
|
||||||
py={1}
|
|
||||||
pl={{ xs: 1, sm: 2 }}
|
|
||||||
pr={1}
|
|
||||||
>
|
|
||||||
<MDTypography variant="button" fontWeight="medium" color="text">
|
|
||||||
Verification Code
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox width={{ xs: "100%", sm: "25%", md: "15%" }} mt={{ xs: 1, sm: 0 }}>
|
|
||||||
<Tooltip title="Copy" placement="top">
|
|
||||||
<MDInput size="small" value="1172913" />
|
|
||||||
</Tooltip>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox
|
|
||||||
bgColor={darkMode ? "grey-900" : "grey-100"}
|
|
||||||
borderRadius="lg"
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
my={3}
|
|
||||||
py={1}
|
|
||||||
pl={{ xs: 1, sm: 2 }}
|
|
||||||
pr={1}
|
|
||||||
>
|
|
||||||
<MDTypography variant="button" fontWeight="medium" color="text">
|
|
||||||
Connected account
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDBox mr={2} mb={{ xs: 1, sm: 0 }} lineHeight={0}>
|
|
||||||
<MDTypography variant="button" fontWeight="medium">
|
|
||||||
hello@creative-tim.com
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDButton variant="gradient" color="dark" size="small">
|
|
||||||
delete
|
|
||||||
</MDButton>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<Divider />
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDBox display="flex" alignItems="center">
|
|
||||||
<MDAvatar src={logoSpotify} alt="Slack logo" variant="rounded" />
|
|
||||||
<MDBox ml={2} lineHeight={0}>
|
|
||||||
<MDTypography variant="h5" fontWeight="medium">
|
|
||||||
Spotify
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
Music
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="flex-end"
|
|
||||||
alignItems="center"
|
|
||||||
width={{ xs: "100%", sm: "auto" }}
|
|
||||||
mt={{ xs: 1, sm: 0 }}
|
|
||||||
>
|
|
||||||
<MDBox lineHeight={0} mx={2}>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
{spotify2FA ? "Enabled" : "Disabled"}
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox mr={1}>
|
|
||||||
<Switch checked={spotify2FA} onChange={handleSetSpotify2FA} />
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<Divider />
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDBox display="flex" alignItems="center">
|
|
||||||
<MDAvatar src={logoAtlassian} alt="Slack logo" variant="rounded" />
|
|
||||||
<MDBox ml={2} lineHeight={0}>
|
|
||||||
<MDTypography variant="h5" fontWeight="medium">
|
|
||||||
Atlassian
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
Payment vendor
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="flex-end"
|
|
||||||
alignItems="center"
|
|
||||||
width={{ xs: "100%", sm: "auto" }}
|
|
||||||
mt={{ xs: 1, sm: 0 }}
|
|
||||||
>
|
|
||||||
<MDBox lineHeight={0} mx={2}>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
{atlassian2FA ? "Enabled" : "Disabled"}
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox mr={1}>
|
|
||||||
<Switch checked={atlassian2FA} onChange={handleSetAtlassian2FA} />
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<Divider />
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDBox display="flex" alignItems="center">
|
|
||||||
<MDAvatar src={logoAsana} alt="Slack logo" variant="rounded" />
|
|
||||||
<MDBox ml={2} lineHeight={0}>
|
|
||||||
<MDTypography variant="h5" fontWeight="medium">
|
|
||||||
Asana
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
Organize your team
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="flex-end"
|
|
||||||
width={{ xs: "100%", sm: "auto" }}
|
|
||||||
mt={{ xs: 1, sm: 0 }}
|
|
||||||
>
|
|
||||||
<MDBox lineHeight={0} mx={2}>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
{asana2FA ? "Enabled" : "Disabled"}
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox mr={1}>
|
|
||||||
<Switch checked={asana2FA} onChange={handleSetAsana2FA} />
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Accounts;
|
|
||||||
@ -1,113 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Divider from "@mui/material/Divider";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
import MDButton from "components/MDButton";
|
|
||||||
import MDBadge from "components/MDBadge";
|
|
||||||
|
|
||||||
function Authentication(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<Card id="2fa" sx={{ overflow: "visible" }}>
|
|
||||||
<MDBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
|
|
||||||
<MDTypography variant="h5">Two-factor authentication</MDTypography>
|
|
||||||
<MDBadge variant="contained" color="success" badgeContent="enabled" container />
|
|
||||||
</MDBox>
|
|
||||||
<MDBox p={3}>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDTypography variant="body2" color="text">
|
|
||||||
Security keys
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
|
|
||||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
|
||||||
No Security keys
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDButton variant="outlined" color="dark" size="small">
|
|
||||||
add
|
|
||||||
</MDButton>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<Divider />
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDTypography variant="body2" color="text">
|
|
||||||
SMS number
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
|
|
||||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
|
||||||
+3012374423
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDButton variant="outlined" color="dark" size="small">
|
|
||||||
edit
|
|
||||||
</MDButton>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<Divider />
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDTypography variant="body2" color="text">
|
|
||||||
Authenticator app
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDBox mx={{ xs: 0, sm: 2 }} mb={{ xs: 1, sm: 0 }}>
|
|
||||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
|
||||||
Not Configured
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDButton variant="outlined" color="dark" size="small">
|
|
||||||
set up
|
|
||||||
</MDButton>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Authentication;
|
|
||||||
@ -1,193 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const selectData = {
|
|
||||||
gender: ["Male", "Female"],
|
|
||||||
birthDate: [
|
|
||||||
"January",
|
|
||||||
"February",
|
|
||||||
"March",
|
|
||||||
"April",
|
|
||||||
"May",
|
|
||||||
"June",
|
|
||||||
"July",
|
|
||||||
"August",
|
|
||||||
"September",
|
|
||||||
"October",
|
|
||||||
"November",
|
|
||||||
"December",
|
|
||||||
],
|
|
||||||
days: [
|
|
||||||
"1",
|
|
||||||
"2",
|
|
||||||
"3",
|
|
||||||
"4",
|
|
||||||
"5",
|
|
||||||
"6",
|
|
||||||
"7",
|
|
||||||
"8",
|
|
||||||
"9",
|
|
||||||
"10",
|
|
||||||
"11",
|
|
||||||
"12",
|
|
||||||
"13",
|
|
||||||
"14",
|
|
||||||
"15",
|
|
||||||
"16",
|
|
||||||
"17",
|
|
||||||
"18",
|
|
||||||
"19",
|
|
||||||
"20",
|
|
||||||
"21",
|
|
||||||
"22",
|
|
||||||
"23",
|
|
||||||
"24",
|
|
||||||
"25",
|
|
||||||
"26",
|
|
||||||
"27",
|
|
||||||
"28",
|
|
||||||
"29",
|
|
||||||
"30",
|
|
||||||
],
|
|
||||||
years: [
|
|
||||||
"1900",
|
|
||||||
"1901",
|
|
||||||
"1902",
|
|
||||||
"1903",
|
|
||||||
"1904",
|
|
||||||
"1905",
|
|
||||||
"1906",
|
|
||||||
"1907",
|
|
||||||
"1908",
|
|
||||||
"1909",
|
|
||||||
"1910",
|
|
||||||
"1911",
|
|
||||||
"1912",
|
|
||||||
"1913",
|
|
||||||
"1914",
|
|
||||||
"1915",
|
|
||||||
"1915",
|
|
||||||
"1915",
|
|
||||||
"1916",
|
|
||||||
"1917",
|
|
||||||
"1918",
|
|
||||||
"1919",
|
|
||||||
"1920",
|
|
||||||
"1921",
|
|
||||||
"1922",
|
|
||||||
"1923",
|
|
||||||
"1924",
|
|
||||||
"1925",
|
|
||||||
"1926",
|
|
||||||
"1927",
|
|
||||||
"1928",
|
|
||||||
"1929",
|
|
||||||
"1930",
|
|
||||||
"1931",
|
|
||||||
"1932",
|
|
||||||
"1933",
|
|
||||||
"1934",
|
|
||||||
"1935",
|
|
||||||
"1936",
|
|
||||||
"1937",
|
|
||||||
"1938",
|
|
||||||
"1939",
|
|
||||||
"1940",
|
|
||||||
"1941",
|
|
||||||
"1942",
|
|
||||||
"1943",
|
|
||||||
"1944",
|
|
||||||
"1945",
|
|
||||||
"1946",
|
|
||||||
"1947",
|
|
||||||
"1948",
|
|
||||||
"1949",
|
|
||||||
"1950",
|
|
||||||
"1951",
|
|
||||||
"1952",
|
|
||||||
"1953",
|
|
||||||
"1954",
|
|
||||||
"1955",
|
|
||||||
"1956",
|
|
||||||
"1957",
|
|
||||||
"1958",
|
|
||||||
"1959",
|
|
||||||
"1960",
|
|
||||||
"1961",
|
|
||||||
"1962",
|
|
||||||
"1963",
|
|
||||||
"1964",
|
|
||||||
"1965",
|
|
||||||
"1966",
|
|
||||||
"1967",
|
|
||||||
"1968",
|
|
||||||
"1969",
|
|
||||||
"1970",
|
|
||||||
"1971",
|
|
||||||
"1972",
|
|
||||||
"1973",
|
|
||||||
"1974",
|
|
||||||
"1975",
|
|
||||||
"1976",
|
|
||||||
"1977",
|
|
||||||
"1978",
|
|
||||||
"1979",
|
|
||||||
"1980",
|
|
||||||
"1981",
|
|
||||||
"1982",
|
|
||||||
"1983",
|
|
||||||
"1984",
|
|
||||||
"1985",
|
|
||||||
"1986",
|
|
||||||
"1987",
|
|
||||||
"1988",
|
|
||||||
"1989",
|
|
||||||
"1990",
|
|
||||||
"1991",
|
|
||||||
"1992",
|
|
||||||
"1993",
|
|
||||||
"1994",
|
|
||||||
"1995",
|
|
||||||
"1996",
|
|
||||||
"1997",
|
|
||||||
"1998",
|
|
||||||
"1999",
|
|
||||||
"2000",
|
|
||||||
"2001",
|
|
||||||
"2002",
|
|
||||||
"2003",
|
|
||||||
"2004",
|
|
||||||
"2005",
|
|
||||||
"2006",
|
|
||||||
"2007",
|
|
||||||
"2008",
|
|
||||||
"2009",
|
|
||||||
"2010",
|
|
||||||
"2011",
|
|
||||||
"2012",
|
|
||||||
"2013",
|
|
||||||
"2014",
|
|
||||||
"2015",
|
|
||||||
"2016",
|
|
||||||
"2017",
|
|
||||||
"2018",
|
|
||||||
"2019",
|
|
||||||
"2020",
|
|
||||||
"2021",
|
|
||||||
],
|
|
||||||
skills: ["react", "vue", "angular", "svelte", "javascript"],
|
|
||||||
};
|
|
||||||
|
|
||||||
export default selectData;
|
|
||||||
@ -1,134 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @material-ui core components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Grid from "@mui/material/Grid";
|
|
||||||
import Autocomplete from "@mui/material/Autocomplete";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
|
|
||||||
// Settings page components
|
|
||||||
import FormField from "layouts/pages/account/components/FormField";
|
|
||||||
|
|
||||||
// Data
|
|
||||||
import selectData from "layouts/pages/account/settings/components/BasicInfo/data/selectData";
|
|
||||||
|
|
||||||
function BasicInfo(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<Card id="basic-info" sx={{ overflow: "visible" }}>
|
|
||||||
<MDBox p={3}>
|
|
||||||
<MDTypography variant="h5">Basic Info</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox component="form" pb={3} px={3}>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<FormField label="First Name" placeholder="Alec" />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<FormField label="Last Name" placeholder="Thompson" />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid item xs={12} sm={4}>
|
|
||||||
<Autocomplete
|
|
||||||
defaultValue="Male"
|
|
||||||
options={selectData.gender}
|
|
||||||
renderInput={(params) => (
|
|
||||||
<FormField {...params} label="I'm" InputLabelProps={{ shrink: true }} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={8}>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid item xs={12} sm={5}>
|
|
||||||
<Autocomplete
|
|
||||||
defaultValue="February"
|
|
||||||
options={selectData.birthDate}
|
|
||||||
renderInput={(params) => (
|
|
||||||
<FormField
|
|
||||||
{...params}
|
|
||||||
label="Birth Date"
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={4}>
|
|
||||||
<Autocomplete
|
|
||||||
defaultValue="1"
|
|
||||||
options={selectData.days}
|
|
||||||
renderInput={(params) => (
|
|
||||||
<FormField {...params} InputLabelProps={{ shrink: true }} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={3}>
|
|
||||||
<Autocomplete
|
|
||||||
defaultValue="2021"
|
|
||||||
options={selectData.years}
|
|
||||||
renderInput={(params) => (
|
|
||||||
<FormField {...params} InputLabelProps={{ shrink: true }} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<FormField
|
|
||||||
label="Email"
|
|
||||||
placeholder="example@email.com"
|
|
||||||
inputProps={{ type: "email" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<FormField
|
|
||||||
label="confirmation email"
|
|
||||||
placeholder="example@email.com"
|
|
||||||
inputProps={{ type: "email" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<FormField label="your location" placeholder="Sydney, A" />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<FormField
|
|
||||||
label="Phone Number"
|
|
||||||
placeholder="+40 735 631 620"
|
|
||||||
inputProps={{ type: "number" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6}>
|
|
||||||
<FormField label="Language" placeholder="English" />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6}>
|
|
||||||
<Autocomplete
|
|
||||||
multiple
|
|
||||||
defaultValue={["react", "angular"]}
|
|
||||||
options={selectData.skills}
|
|
||||||
renderInput={(params) => <FormField {...params} InputLabelProps={{ shrink: true }} />}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BasicInfo;
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Grid from "@mui/material/Grid";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
import MDButton from "components/MDButton";
|
|
||||||
import MDInput from "components/MDInput";
|
|
||||||
|
|
||||||
function ChangePassword(): JSX.Element {
|
|
||||||
const passwordRequirements = [
|
|
||||||
"One special characters",
|
|
||||||
"Min 6 characters",
|
|
||||||
"One number (2 are recommended)",
|
|
||||||
"Change it often",
|
|
||||||
];
|
|
||||||
|
|
||||||
const renderPasswordRequirements = passwordRequirements.map((item, key) => {
|
|
||||||
const itemKey = `element-${key}`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MDBox key={itemKey} component="li" color="text" fontSize="1.25rem" lineHeight={1}>
|
|
||||||
<MDTypography variant="button" color="text" fontWeight="regular" verticalAlign="middle">
|
|
||||||
{item}
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card id="change-password">
|
|
||||||
<MDBox p={3}>
|
|
||||||
<MDTypography variant="h5">Change Password</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox component="form" pb={3} px={3}>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<MDInput
|
|
||||||
fullWidth
|
|
||||||
label="Current Password"
|
|
||||||
inputProps={{ type: "password", autoComplete: "" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<MDInput
|
|
||||||
fullWidth
|
|
||||||
label="New Password"
|
|
||||||
inputProps={{ type: "password", autoComplete: "" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<MDInput
|
|
||||||
fullWidth
|
|
||||||
label="Confirm New Password"
|
|
||||||
inputProps={{ type: "password", autoComplete: "" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<MDBox mt={6} mb={1}>
|
|
||||||
<MDTypography variant="h5">Password requirements</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox mb={1}>
|
|
||||||
<MDTypography variant="body2" color="text">
|
|
||||||
Please follow this guide for a strong password
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" justifyContent="space-between" alignItems="flex-end" flexWrap="wrap">
|
|
||||||
<MDBox component="ul" m={0} pl={3.25} mb={{ xs: 8, sm: 0 }}>
|
|
||||||
{renderPasswordRequirements}
|
|
||||||
</MDBox>
|
|
||||||
<MDBox ml="auto">
|
|
||||||
<MDButton variant="gradient" color="dark" size="small">
|
|
||||||
update password
|
|
||||||
</MDButton>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ChangePassword;
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
import MDButton from "components/MDButton";
|
|
||||||
|
|
||||||
function DeleteAccount(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<Card id="delete-account">
|
|
||||||
<MDBox
|
|
||||||
pr={3}
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
|
||||||
flexDirection={{ xs: "column", sm: "row" }}
|
|
||||||
>
|
|
||||||
<MDBox p={3} lineHeight={1}>
|
|
||||||
<MDBox mb={1}>
|
|
||||||
<MDTypography variant="h5">Delete Account</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
Once you delete your account, there is no going back. Please be certain.
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" flexDirection={{ xs: "column", sm: "row" }}>
|
|
||||||
<MDButton variant="outlined" color="secondary">
|
|
||||||
deactivate
|
|
||||||
</MDButton>
|
|
||||||
<MDBox ml={{ xs: 0, sm: 1 }} mt={{ xs: 1, sm: 0 }}>
|
|
||||||
<MDButton variant="gradient" color="error" sx={{ height: "100%" }}>
|
|
||||||
delete account
|
|
||||||
</MDButton>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DeleteAccount;
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Grid from "@mui/material/Grid";
|
|
||||||
import Switch from "@mui/material/Switch";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
import MDAvatar from "components/MDAvatar";
|
|
||||||
|
|
||||||
// Images
|
|
||||||
import burceMars from "assets/images/bruce-mars.jpg";
|
|
||||||
|
|
||||||
function Header(): JSX.Element {
|
|
||||||
const [visible, setVisible] = useState<boolean>(true);
|
|
||||||
|
|
||||||
const handleSetVisible = () => setVisible(!visible);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card id="profile">
|
|
||||||
<MDBox p={2}>
|
|
||||||
<Grid container spacing={3} alignItems="center">
|
|
||||||
<Grid item>
|
|
||||||
<MDAvatar src={burceMars} alt="profile-image" size="xl" shadow="sm" />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<MDBox height="100%" mt={0.5} lineHeight={1}>
|
|
||||||
<MDTypography variant="h5" fontWeight="medium">
|
|
||||||
Alex Thompson
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="button" color="text" fontWeight="medium">
|
|
||||||
CEO / Co-Founder
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6} lg={3} sx={{ ml: "auto" }}>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent={{ md: "flex-end" }}
|
|
||||||
alignItems="center"
|
|
||||||
lineHeight={1}
|
|
||||||
>
|
|
||||||
<MDTypography variant="caption" fontWeight="regular">
|
|
||||||
Switch to {visible ? "invisible" : "visible"}
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox ml={1}>
|
|
||||||
<Switch checked={visible} onChange={handleSetVisible} />
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@ -1,149 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Table from "@mui/material/Table";
|
|
||||||
import TableRow from "@mui/material/TableRow";
|
|
||||||
import TableBody from "@mui/material/TableBody";
|
|
||||||
import Switch from "@mui/material/Switch";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
|
|
||||||
// Setting pages components
|
|
||||||
import TableCell from "layouts/pages/account/settings/components/TableCell";
|
|
||||||
|
|
||||||
function Notifications(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<Card id="notifications">
|
|
||||||
<MDBox p={3} lineHeight={1}>
|
|
||||||
<MDBox mb={1}>
|
|
||||||
<MDTypography variant="h5">Notifications</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
Choose how you receive notifications. These notification settings apply to the things
|
|
||||||
you’re watching.
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox pb={3} px={3}>
|
|
||||||
<MDBox minWidth="auto" sx={{ overflow: "scroll" }}>
|
|
||||||
<Table sx={{ minWidth: "36rem" }}>
|
|
||||||
<MDBox component="thead">
|
|
||||||
<TableRow>
|
|
||||||
<TableCell width="100%" padding={[1.5, 3, 1.5, 0.5]}>
|
|
||||||
Activity
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
|
|
||||||
Email
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
|
|
||||||
Push
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1.5, 6, 1.5, 6]}>
|
|
||||||
SMS
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</MDBox>
|
|
||||||
<TableBody>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell padding={[1, 1, 1, 0.5]}>
|
|
||||||
<MDBox lineHeight={1.4}>
|
|
||||||
<MDTypography display="block" variant="button" fontWeight="regular">
|
|
||||||
Mentions
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
|
||||||
Notify when another user mentions you in a comment
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
|
||||||
<Switch />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
|
||||||
<Switch />
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell padding={[1, 1, 1, 0.5]}>
|
|
||||||
<MDBox lineHeight={1.4}>
|
|
||||||
<MDTypography display="block" variant="button" fontWeight="regular">
|
|
||||||
Comments
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
|
||||||
Notify when another user comments your item.
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
|
||||||
<Switch />
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell padding={[1, 1, 1, 0.5]}>
|
|
||||||
<MDBox lineHeight={1.4}>
|
|
||||||
<MDTypography display="block" variant="button" fontWeight="regular">
|
|
||||||
Follows
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
|
||||||
Notify when another user follows you.
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
|
||||||
<Switch />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]}>
|
|
||||||
<Switch />
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell padding={[1, 1, 1, 0.5]} noBorder>
|
|
||||||
<MDTypography display="block" variant="button" color="text">
|
|
||||||
Log in from a new device
|
|
||||||
</MDTypography>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell align="center" padding={[1, 1, 1, 0.5]} noBorder>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Notifications;
|
|
||||||
@ -1,172 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Icon from "@mui/material/Icon";
|
|
||||||
import Divider from "@mui/material/Divider";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
import MDBadge from "components/MDBadge";
|
|
||||||
|
|
||||||
function Sessions(): JSX.Element {
|
|
||||||
const actionButtonStyles = {
|
|
||||||
"& .material-icons-round": {
|
|
||||||
transform: `translateX(0)`,
|
|
||||||
transition: "all 200ms cubic-bezier(0.34,1.61,0.7,1.3)",
|
|
||||||
},
|
|
||||||
|
|
||||||
"&:hover .material-icons-round, &:focus .material-icons-round": {
|
|
||||||
transform: `translateX(4px)`,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card id="sessions">
|
|
||||||
<MDBox p={3} lineHeight={1}>
|
|
||||||
<MDBox mb={1}>
|
|
||||||
<MDTypography variant="h5">Sessions</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
|
||||||
This is a list of devices that have logged into your account. Remove those that you do not
|
|
||||||
recognize.
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox pb={3} px={3} sx={{ overflow: "auto" }}>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems="center"
|
|
||||||
width={{ xs: "max-content", sm: "100%" }}
|
|
||||||
>
|
|
||||||
<MDBox display="flex" alignItems="center">
|
|
||||||
<MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
|
|
||||||
<Icon>desktop_windows</Icon>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox height="100%" ml={2} lineHeight={1} mr={2}>
|
|
||||||
<MDTypography display="block" variant="button" fontWeight="regular" color="text">
|
|
||||||
Bucharest 68.133.163.201
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="caption" color="text">
|
|
||||||
Your current session
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" alignItems="center">
|
|
||||||
<MDBadge
|
|
||||||
variant="contained"
|
|
||||||
size="xs"
|
|
||||||
badgeContent="active"
|
|
||||||
color="success"
|
|
||||||
container
|
|
||||||
/>
|
|
||||||
<MDBox mx={2} lineHeight={1}>
|
|
||||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
|
||||||
EU
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDTypography
|
|
||||||
component="a"
|
|
||||||
href="#"
|
|
||||||
variant="button"
|
|
||||||
color="info"
|
|
||||||
fontWeight="regular"
|
|
||||||
sx={actionButtonStyles}
|
|
||||||
>
|
|
||||||
See more
|
|
||||||
<Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<Divider />
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems="center"
|
|
||||||
width={{ xs: "max-content", sm: "100%" }}
|
|
||||||
>
|
|
||||||
<MDBox display="flex" alignItems="center" mr={2}>
|
|
||||||
<MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
|
|
||||||
<Icon>desktop_windows</Icon>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox ml={2}>
|
|
||||||
<MDTypography display="block" variant="body2" fontWeight="regular" color="text">
|
|
||||||
Chrome on macOS
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" alignItems="center">
|
|
||||||
<MDBox mx={2} lineHeight={1}>
|
|
||||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
|
||||||
US
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDTypography
|
|
||||||
component="a"
|
|
||||||
href="#"
|
|
||||||
variant="button"
|
|
||||||
color="info"
|
|
||||||
fontWeight="regular"
|
|
||||||
sx={actionButtonStyles}
|
|
||||||
>
|
|
||||||
See more
|
|
||||||
<Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<Divider />
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems="center"
|
|
||||||
width={{ xs: "max-content", sm: "100%" }}
|
|
||||||
>
|
|
||||||
<MDBox display="flex" alignItems="center" mr={2}>
|
|
||||||
<MDBox textAlign="center" color="text" px={{ xs: 0, md: 1.5 }} opacity={0.6}>
|
|
||||||
<Icon>phone_iphone</Icon>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox ml={2}>
|
|
||||||
<MDTypography display="block" variant="body2" fontWeight="regular" color="text">
|
|
||||||
Safari on iPhone
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" alignItems="center">
|
|
||||||
<MDBox mx={2} lineHeight={1}>
|
|
||||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
|
||||||
US
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDTypography
|
|
||||||
component="a"
|
|
||||||
href="#"
|
|
||||||
variant="button"
|
|
||||||
color="info"
|
|
||||||
fontWeight="regular"
|
|
||||||
sx={actionButtonStyles}
|
|
||||||
>
|
|
||||||
See more
|
|
||||||
<Icon sx={{ fontWeight: "bold", verticalAlign: "middle" }}>arrow_forward</Icon>
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Sessions;
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Icon from "@mui/material/Icon";
|
|
||||||
import { Theme } from "@mui/material/styles";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React context
|
|
||||||
import { useMaterialUIController } from "context";
|
|
||||||
|
|
||||||
function Sidenav(): JSX.Element {
|
|
||||||
const [controller] = useMaterialUIController();
|
|
||||||
const { darkMode } = controller;
|
|
||||||
|
|
||||||
const sidenavItems = [
|
|
||||||
{ icon: "person", label: "profile", href: "profile" },
|
|
||||||
{ icon: "receipt_long", label: "basic info", href: "basic-info" },
|
|
||||||
{ icon: "lock", label: "change password", href: "change-password" },
|
|
||||||
{ icon: "security", label: "2FA", href: "2fa" },
|
|
||||||
{ icon: "badge", label: "accounts", href: "accounts" },
|
|
||||||
{ icon: "campaign", label: "notifications", href: "notifications" },
|
|
||||||
{ icon: "settings_applications", label: "sessions", href: "sessions" },
|
|
||||||
{ icon: "delete", label: "delete account", href: "delete-account" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const renderSidenavItems = sidenavItems.map(({ icon, label, href }, key) => {
|
|
||||||
const itemKey = `item-${key}`;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MDBox key={itemKey} component="li" pt={key === 0 ? 0 : 1}>
|
|
||||||
<MDTypography
|
|
||||||
component="a"
|
|
||||||
href={`#${href}`}
|
|
||||||
variant="button"
|
|
||||||
fontWeight="regular"
|
|
||||||
textTransform="capitalize"
|
|
||||||
sx={({
|
|
||||||
borders: { borderRadius },
|
|
||||||
functions: { pxToRem },
|
|
||||||
palette: { light },
|
|
||||||
transitions,
|
|
||||||
}: Theme) => ({
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
borderRadius: borderRadius.md,
|
|
||||||
padding: `${pxToRem(10)} ${pxToRem(16)}`,
|
|
||||||
transition: transitions.create("background-color", {
|
|
||||||
easing: transitions.easing.easeInOut,
|
|
||||||
duration: transitions.duration.shorter,
|
|
||||||
}),
|
|
||||||
|
|
||||||
"&:hover": {
|
|
||||||
backgroundColor: light.main,
|
|
||||||
},
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<MDBox mr={1.5} lineHeight={1} color={darkMode ? "white" : "dark"}>
|
|
||||||
<Icon fontSize="small">{icon}</Icon>
|
|
||||||
</MDBox>
|
|
||||||
{label}
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
borderRadius: ({ borders: { borderRadius } }) => borderRadius.lg,
|
|
||||||
position: "sticky",
|
|
||||||
top: "1%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MDBox
|
|
||||||
component="ul"
|
|
||||||
display="flex"
|
|
||||||
flexDirection="column"
|
|
||||||
p={2}
|
|
||||||
m={0}
|
|
||||||
sx={{ listStyle: "none" }}
|
|
||||||
>
|
|
||||||
{renderSidenavItems}
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Sidenav;
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { ReactNode } from "react";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
|
|
||||||
// Declaring props types for TableCell
|
|
||||||
interface Props {
|
|
||||||
width?: string;
|
|
||||||
children: ReactNode;
|
|
||||||
align?: string | any;
|
|
||||||
padding?: number[];
|
|
||||||
noBorder?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
function TableCell({ width, align, padding, noBorder, children }: Props): JSX.Element {
|
|
||||||
return (
|
|
||||||
<MDBox
|
|
||||||
component="th"
|
|
||||||
width={width}
|
|
||||||
pt={padding[0]}
|
|
||||||
pr={padding[1]}
|
|
||||||
pb={padding[2]}
|
|
||||||
pl={padding[3]}
|
|
||||||
textAlign={align}
|
|
||||||
sx={{
|
|
||||||
border: ({ borders: { borderWidth }, palette: { light } }) =>
|
|
||||||
noBorder ? 0 : `${borderWidth[1]} solid ${light.main}`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MDTypography component="div" variant="body2" color="text">
|
|
||||||
{children}
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Declaring default props for TableCell
|
|
||||||
TableCell.defaultProps = {
|
|
||||||
width: "auto",
|
|
||||||
align: "left",
|
|
||||||
padding: [],
|
|
||||||
noBorder: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TableCell;
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Grid from "@mui/material/Grid";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
|
|
||||||
// Settings page components
|
|
||||||
import BaseLayout from "layouts/pages/account/components/BaseLayout";
|
|
||||||
import Sidenav from "layouts/pages/account/settings/components/Sidenav";
|
|
||||||
import Header from "layouts/pages/account/settings/components/Header";
|
|
||||||
import BasicInfo from "layouts/pages/account/settings/components/BasicInfo";
|
|
||||||
import ChangePassword from "layouts/pages/account/settings/components/ChangePassword";
|
|
||||||
import Authentication from "layouts/pages/account/settings/components/Authentication";
|
|
||||||
import Accounts from "layouts/pages/account/settings/components/Accounts";
|
|
||||||
import Notifications from "layouts/pages/account/settings/components/Notifications";
|
|
||||||
import Sessions from "layouts/pages/account/settings/components/Sessions";
|
|
||||||
import DeleteAccount from "layouts/pages/account/settings/components/DeleteAccount";
|
|
||||||
|
|
||||||
function Settings(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<BaseLayout>
|
|
||||||
<MDBox mt={4}>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid item xs={12} lg={3}>
|
|
||||||
<Sidenav />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} lg={9}>
|
|
||||||
<MDBox mb={3}>
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Header />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<BasicInfo />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<ChangePassword />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Authentication />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Accounts />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Notifications />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Sessions />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<DeleteAccount />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MDBox>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MDBox>
|
|
||||||
</BaseLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Settings;
|
|
||||||
@ -1,148 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState, useEffect, ReactNode } from "react";
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Grid from "@mui/material/Grid";
|
|
||||||
import AppBar from "@mui/material/AppBar";
|
|
||||||
import Tabs from "@mui/material/Tabs";
|
|
||||||
import Tab from "@mui/material/Tab";
|
|
||||||
import Icon from "@mui/material/Icon";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
import MDAvatar from "components/MDAvatar";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS Base Styles
|
|
||||||
import breakpoints from "assets/theme/base/breakpoints";
|
|
||||||
|
|
||||||
// Images
|
|
||||||
import burceMars from "assets/images/bruce-mars.jpg";
|
|
||||||
import backgroundImage from "assets/images/bg-profile.jpeg";
|
|
||||||
|
|
||||||
function Header({ children }: { children?: ReactNode }): JSX.Element {
|
|
||||||
const [tabsOrientation, setTabsOrientation] = useState<"horizontal" | "vertical">("horizontal");
|
|
||||||
const [tabValue, setTabValue] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// A function that sets the orientation state of the tabs.
|
|
||||||
function handleTabsOrientation() {
|
|
||||||
return window.innerWidth < breakpoints.values.sm
|
|
||||||
? setTabsOrientation("vertical")
|
|
||||||
: setTabsOrientation("horizontal");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
The event listener that's calling the handleTabsOrientation function when resizing the window.
|
|
||||||
*/
|
|
||||||
window.addEventListener("resize", handleTabsOrientation);
|
|
||||||
|
|
||||||
// Call the handleTabsOrientation function to set the state with the initial value.
|
|
||||||
handleTabsOrientation();
|
|
||||||
|
|
||||||
// Remove event listener on cleanup
|
|
||||||
return () => window.removeEventListener("resize", handleTabsOrientation);
|
|
||||||
}, [tabsOrientation]);
|
|
||||||
|
|
||||||
const handleSetTabValue = (event: any, newValue: any) => setTabValue(newValue);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<MDBox position="relative" mb={5}>
|
|
||||||
<MDBox
|
|
||||||
display="flex"
|
|
||||||
alignItems="center"
|
|
||||||
position="relative"
|
|
||||||
minHeight="18.75rem"
|
|
||||||
borderRadius="xl"
|
|
||||||
sx={{
|
|
||||||
backgroundImage: ({ functions: { rgba, linearGradient }, palette: { gradients } }) =>
|
|
||||||
`${linearGradient(
|
|
||||||
rgba(gradients.info.main, 0.6),
|
|
||||||
rgba(gradients.info.state, 0.6)
|
|
||||||
)}, url(${backgroundImage})`,
|
|
||||||
backgroundSize: "cover",
|
|
||||||
backgroundPosition: "50%",
|
|
||||||
overflow: "hidden",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Card
|
|
||||||
sx={{
|
|
||||||
position: "relative",
|
|
||||||
mt: -8,
|
|
||||||
mx: 3,
|
|
||||||
py: 2,
|
|
||||||
px: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Grid container spacing={3} alignItems="center">
|
|
||||||
<Grid item>
|
|
||||||
<MDAvatar src={burceMars} alt="profile-image" size="xl" shadow="sm" />
|
|
||||||
</Grid>
|
|
||||||
<Grid item>
|
|
||||||
<MDBox height="100%" mt={0.5} lineHeight={1}>
|
|
||||||
<MDTypography variant="h5" fontWeight="medium">
|
|
||||||
Richard Davis
|
|
||||||
</MDTypography>
|
|
||||||
<MDTypography variant="button" color="text" fontWeight="regular">
|
|
||||||
CEO / Co-Founder
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6} lg={4} sx={{ ml: "auto" }}>
|
|
||||||
<AppBar position="static">
|
|
||||||
<Tabs orientation={tabsOrientation} value={tabValue} onChange={handleSetTabValue}>
|
|
||||||
<Tab
|
|
||||||
label="App"
|
|
||||||
icon={
|
|
||||||
<Icon fontSize="small" sx={{ mt: -0.25 }}>
|
|
||||||
home
|
|
||||||
</Icon>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Tab
|
|
||||||
label="Message"
|
|
||||||
icon={
|
|
||||||
<Icon fontSize="small" sx={{ mt: -0.25 }}>
|
|
||||||
email
|
|
||||||
</Icon>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Tab
|
|
||||||
label="Settings"
|
|
||||||
icon={
|
|
||||||
<Icon fontSize="small" sx={{ mt: -0.25 }}>
|
|
||||||
settings
|
|
||||||
</Icon>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Tabs>
|
|
||||||
</AppBar>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
{children}
|
|
||||||
</Card>
|
|
||||||
</MDBox>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Declaring default props for Header
|
|
||||||
Header.defaultProps = {
|
|
||||||
children: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Card from "@mui/material/Card";
|
|
||||||
import Switch from "@mui/material/Switch";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
|
|
||||||
function PlatformSettings(): JSX.Element {
|
|
||||||
const [followsMe, setFollowsMe] = useState<boolean>(true);
|
|
||||||
const [answersPost, setAnswersPost] = useState<boolean>(false);
|
|
||||||
const [mentionsMe, setMentionsMe] = useState<boolean>(true);
|
|
||||||
const [newLaunches, setNewLaunches] = useState<boolean>(false);
|
|
||||||
const [productUpdate, setProductUpdate] = useState<boolean>(true);
|
|
||||||
const [newsletter, setNewsletter] = useState<boolean>(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card sx={{ boxShadow: "none" }}>
|
|
||||||
<MDBox p={2}>
|
|
||||||
<MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
|
|
||||||
platform settings
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox pt={1} pb={2} px={2} lineHeight={1.25}>
|
|
||||||
<MDTypography variant="caption" fontWeight="bold" color="text" textTransform="uppercase">
|
|
||||||
account
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox display="flex" alignItems="center" mb={0.5} ml={-1.5}>
|
|
||||||
<MDBox mt={0.5}>
|
|
||||||
<Switch checked={followsMe} onChange={() => setFollowsMe(!followsMe)} />
|
|
||||||
</MDBox>
|
|
||||||
<MDBox width="80%" ml={0.5}>
|
|
||||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
|
||||||
Email me when someone follows me
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" alignItems="center" mb={0.5} ml={-1.5}>
|
|
||||||
<MDBox mt={0.5}>
|
|
||||||
<Switch checked={answersPost} onChange={() => setAnswersPost(!answersPost)} />
|
|
||||||
</MDBox>
|
|
||||||
<MDBox width="80%" ml={0.5}>
|
|
||||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
|
||||||
Email me when someone answers on my post
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" alignItems="center" mb={0.5} ml={-1.5}>
|
|
||||||
<MDBox mt={0.5}>
|
|
||||||
<Switch checked={mentionsMe} onChange={() => setMentionsMe(!mentionsMe)} />
|
|
||||||
</MDBox>
|
|
||||||
<MDBox width="80%" ml={0.5}>
|
|
||||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
|
||||||
Email me when someone mentions me
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox mt={3}>
|
|
||||||
<MDTypography variant="caption" fontWeight="bold" color="text" textTransform="uppercase">
|
|
||||||
application
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" alignItems="center" mb={0.5} ml={-1.5}>
|
|
||||||
<MDBox mt={0.5}>
|
|
||||||
<Switch checked={newLaunches} onChange={() => setNewLaunches(!newLaunches)} />
|
|
||||||
</MDBox>
|
|
||||||
<MDBox width="80%" ml={0.5}>
|
|
||||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
|
||||||
New launches and projects
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" alignItems="center" mb={0.5} ml={-1.5}>
|
|
||||||
<MDBox mt={0.5}>
|
|
||||||
<Switch checked={productUpdate} onChange={() => setProductUpdate(!productUpdate)} />
|
|
||||||
</MDBox>
|
|
||||||
<MDBox width="80%" ml={0.5}>
|
|
||||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
|
||||||
Monthly product updates
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox display="flex" alignItems="center" mb={0.5} ml={-1.5}>
|
|
||||||
<MDBox mt={0.5}>
|
|
||||||
<Switch checked={newsletter} onChange={() => setNewsletter(!newsletter)} />
|
|
||||||
</MDBox>
|
|
||||||
<MDBox width="80%" ml={0.5}>
|
|
||||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
|
||||||
Subscribe to newsletter
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PlatformSettings;
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Images
|
|
||||||
import kal from "assets/images/kal-visuals-square.jpg";
|
|
||||||
import marie from "assets/images/marie.jpg";
|
|
||||||
import ivana from "assets/images/ivana-square.jpg";
|
|
||||||
import team3 from "assets/images/team-3.jpg";
|
|
||||||
import team4 from "assets/images/team-4.jpg";
|
|
||||||
|
|
||||||
// types
|
|
||||||
type Types = any;
|
|
||||||
|
|
||||||
const profileListData: Types = [
|
|
||||||
{
|
|
||||||
image: kal,
|
|
||||||
name: "Sophie B.",
|
|
||||||
description: "Hi! I need more information..",
|
|
||||||
action: {
|
|
||||||
type: "internal",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
color: "info",
|
|
||||||
label: "reply",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: marie,
|
|
||||||
name: "Anne Marie",
|
|
||||||
description: "Awesome work, can you..",
|
|
||||||
action: {
|
|
||||||
type: "internal",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
color: "info",
|
|
||||||
label: "reply",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: ivana,
|
|
||||||
name: "Ivanna",
|
|
||||||
description: "About files I can..",
|
|
||||||
action: {
|
|
||||||
type: "internal",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
color: "info",
|
|
||||||
label: "reply",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: team4,
|
|
||||||
name: "Peterson",
|
|
||||||
description: "Have a great afternoon..",
|
|
||||||
action: {
|
|
||||||
type: "internal",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
color: "info",
|
|
||||||
label: "reply",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: team3,
|
|
||||||
name: "Nick Daniel",
|
|
||||||
description: "Hi! I need more information..",
|
|
||||||
action: {
|
|
||||||
type: "internal",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
color: "info",
|
|
||||||
label: "reply",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default profileListData;
|
|
||||||
@ -1,203 +0,0 @@
|
|||||||
/**
|
|
||||||
=========================================================
|
|
||||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
|
||||||
|
|
||||||
Coded by www.creative-tim.com
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// @mui material components
|
|
||||||
import Grid from "@mui/material/Grid";
|
|
||||||
import Divider from "@mui/material/Divider";
|
|
||||||
|
|
||||||
// @mui icons
|
|
||||||
import FacebookIcon from "@mui/icons-material/Facebook";
|
|
||||||
import TwitterIcon from "@mui/icons-material/Twitter";
|
|
||||||
import InstagramIcon from "@mui/icons-material/Instagram";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS components
|
|
||||||
import MDBox from "components/MDBox";
|
|
||||||
import MDTypography from "components/MDTypography";
|
|
||||||
|
|
||||||
// Material Dashboard 2 PRO React TS examples components
|
|
||||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
|
||||||
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
|
|
||||||
import Footer from "examples/Footer";
|
|
||||||
import ProfileInfoCard from "examples/Cards/InfoCards/ProfileInfoCard";
|
|
||||||
import ProfilesList from "examples/Lists/ProfilesList";
|
|
||||||
import DefaultProjectCard from "examples/Cards/ProjectCards/DefaultProjectCard";
|
|
||||||
|
|
||||||
// Overview page components
|
|
||||||
import Header from "layouts/pages/profile/components/Header";
|
|
||||||
import PlatformSettings from "layouts/pages/profile/profile-overview/components/PlatformSettings";
|
|
||||||
|
|
||||||
// Data
|
|
||||||
import profilesListData from "layouts/pages/profile/profile-overview/data/profilesListData";
|
|
||||||
|
|
||||||
// Images
|
|
||||||
import homeDecor1 from "assets/images/home-decor-1.jpg";
|
|
||||||
import homeDecor2 from "assets/images/home-decor-2.jpg";
|
|
||||||
import homeDecor3 from "assets/images/home-decor-3.jpg";
|
|
||||||
import homeDecor4 from "assets/images/home-decor-4.jpeg";
|
|
||||||
import team1 from "assets/images/team-1.jpg";
|
|
||||||
import team2 from "assets/images/team-2.jpg";
|
|
||||||
import team3 from "assets/images/team-3.jpg";
|
|
||||||
import team4 from "assets/images/team-4.jpg";
|
|
||||||
|
|
||||||
function Overview(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<DashboardLayout>
|
|
||||||
<DashboardNavbar />
|
|
||||||
<MDBox mb={2} />
|
|
||||||
<Header>
|
|
||||||
<MDBox mt={5} mb={3}>
|
|
||||||
<Grid container spacing={1}>
|
|
||||||
<Grid item xs={12} md={6} xl={4}>
|
|
||||||
<PlatformSettings />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6} xl={4} sx={{ display: "flex" }}>
|
|
||||||
<Divider orientation="vertical" sx={{ ml: -2, mr: 1 }} />
|
|
||||||
<ProfileInfoCard
|
|
||||||
title="profile information"
|
|
||||||
description="Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality)."
|
|
||||||
info={{
|
|
||||||
fullName: "Alec M. Thompson",
|
|
||||||
mobile: "(44) 123 1234 123",
|
|
||||||
email: "alecthompson@mail.com",
|
|
||||||
location: "USA",
|
|
||||||
}}
|
|
||||||
social={[
|
|
||||||
{
|
|
||||||
link: "https://www.facebook.com/CreativeTim/",
|
|
||||||
icon: <FacebookIcon />,
|
|
||||||
color: "facebook",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
link: "https://twitter.com/creativetim",
|
|
||||||
icon: <TwitterIcon />,
|
|
||||||
color: "twitter",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
link: "https://www.instagram.com/creativetimofficial/",
|
|
||||||
icon: <InstagramIcon />,
|
|
||||||
color: "instagram",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
action={{ route: "", tooltip: "Edit Profile" }}
|
|
||||||
shadow={false}
|
|
||||||
/>
|
|
||||||
<Divider orientation="vertical" sx={{ mx: 0 }} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} xl={4}>
|
|
||||||
<ProfilesList title="conversations" profiles={profilesListData} shadow={false} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox pt={2} px={2} lineHeight={1.25}>
|
|
||||||
<MDTypography variant="h6" fontWeight="medium">
|
|
||||||
Projects
|
|
||||||
</MDTypography>
|
|
||||||
<MDBox mb={1}>
|
|
||||||
<MDTypography variant="button" color="text">
|
|
||||||
Architects design houses
|
|
||||||
</MDTypography>
|
|
||||||
</MDBox>
|
|
||||||
</MDBox>
|
|
||||||
<MDBox p={2}>
|
|
||||||
<Grid container spacing={6}>
|
|
||||||
<Grid item xs={12} md={6} xl={3}>
|
|
||||||
<DefaultProjectCard
|
|
||||||
image={homeDecor1}
|
|
||||||
label="project #2"
|
|
||||||
title="modern"
|
|
||||||
description="As Uber works through a huge amount of internal management turmoil."
|
|
||||||
action={{
|
|
||||||
type: "internal",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
color: "info",
|
|
||||||
label: "view project",
|
|
||||||
}}
|
|
||||||
authors={[
|
|
||||||
{ image: team1, name: "Elena Morison" },
|
|
||||||
{ image: team2, name: "Ryan Milly" },
|
|
||||||
{ image: team3, name: "Nick Daniel" },
|
|
||||||
{ image: team4, name: "Peterson" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6} xl={3}>
|
|
||||||
<DefaultProjectCard
|
|
||||||
image={homeDecor2}
|
|
||||||
label="project #1"
|
|
||||||
title="scandinavian"
|
|
||||||
description="Music is something that everyone has their own specific opinion about."
|
|
||||||
action={{
|
|
||||||
type: "internal",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
color: "info",
|
|
||||||
label: "view project",
|
|
||||||
}}
|
|
||||||
authors={[
|
|
||||||
{ image: team3, name: "Nick Daniel" },
|
|
||||||
{ image: team4, name: "Peterson" },
|
|
||||||
{ image: team1, name: "Elena Morison" },
|
|
||||||
{ image: team2, name: "Ryan Milly" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6} xl={3}>
|
|
||||||
<DefaultProjectCard
|
|
||||||
image={homeDecor3}
|
|
||||||
label="project #3"
|
|
||||||
title="minimalist"
|
|
||||||
description="Different people have different taste, and various types of music."
|
|
||||||
action={{
|
|
||||||
type: "internal",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
color: "info",
|
|
||||||
label: "view project",
|
|
||||||
}}
|
|
||||||
authors={[
|
|
||||||
{ image: team4, name: "Peterson" },
|
|
||||||
{ image: team3, name: "Nick Daniel" },
|
|
||||||
{ image: team2, name: "Ryan Milly" },
|
|
||||||
{ image: team1, name: "Elena Morison" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6} xl={3}>
|
|
||||||
<DefaultProjectCard
|
|
||||||
image={homeDecor4}
|
|
||||||
label="project #4"
|
|
||||||
title="gothic"
|
|
||||||
description="Why would anyone pick blue over pink? Pink is obviously a better color."
|
|
||||||
action={{
|
|
||||||
type: "internal",
|
|
||||||
route: "/pages/profile/profile-overview",
|
|
||||||
color: "info",
|
|
||||||
label: "view project",
|
|
||||||
}}
|
|
||||||
authors={[
|
|
||||||
{ image: team4, name: "Peterson" },
|
|
||||||
{ image: team3, name: "Nick Daniel" },
|
|
||||||
{ image: team2, name: "Ryan Milly" },
|
|
||||||
{ image: team1, name: "Elena Morison" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</MDBox>
|
|
||||||
</Header>
|
|
||||||
<Footer />
|
|
||||||
</DashboardLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Overview;
|
|
||||||
@ -104,7 +104,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
|||||||
{
|
{
|
||||||
widgetData[i] = await qController.widget(widgetMetaDataList[i].name, getQueryParams(null));
|
widgetData[i] = await qController.widget(widgetMetaDataList[i].name, getQueryParams(null));
|
||||||
setWidgetCounter(widgetCounter + 1);
|
setWidgetCounter(widgetCounter + 1);
|
||||||
console.log(`widget data: ${JSON.stringify(widgetData[i])}`)
|
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
})();
|
})();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,23 +19,25 @@
|
|||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import {Popper} from "@mui/material";
|
||||||
import AppBar from "@mui/material/AppBar";
|
import AppBar from "@mui/material/AppBar";
|
||||||
|
import Autocomplete from "@mui/material/Autocomplete";
|
||||||
|
import Badge from "@mui/material/Badge";
|
||||||
|
import Box from "@mui/material/Box";
|
||||||
import Icon from "@mui/material/Icon";
|
import Icon from "@mui/material/Icon";
|
||||||
import IconButton from "@mui/material/IconButton";
|
import IconButton from "@mui/material/IconButton";
|
||||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||||
import Menu from "@mui/material/Menu";
|
import Menu from "@mui/material/Menu";
|
||||||
import MenuItem from "@mui/material/MenuItem";
|
import TextField from "@mui/material/TextField";
|
||||||
import Toolbar from "@mui/material/Toolbar";
|
import Toolbar from "@mui/material/Toolbar";
|
||||||
import React, {useState, useEffect} from "react";
|
import React, {useEffect, useState} from "react";
|
||||||
import {useLocation, useNavigate} from "react-router-dom";
|
import {useLocation, useNavigate} from "react-router-dom";
|
||||||
import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context";
|
import {boolean} from "yup";
|
||||||
import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles";
|
import {setTransparentNavbar, useMaterialUIController,} from "context";
|
||||||
|
import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/Navbar/styles";
|
||||||
import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
|
import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
|
||||||
import MDBadge from "qqq/components/Temporary/MDBadge";
|
|
||||||
import MDBox from "qqq/components/Temporary/MDBox";
|
|
||||||
import MDInput from "qqq/components/Temporary/MDInput";
|
|
||||||
import NotificationItem from "qqq/components/Temporary/NotificationItem";
|
import NotificationItem from "qqq/components/Temporary/NotificationItem";
|
||||||
import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
|
import HistoryUtils from "qqq/utils/HistoryUtils";
|
||||||
|
|
||||||
// Declaring prop types for Navbar
|
// Declaring prop types for Navbar
|
||||||
interface Props
|
interface Props
|
||||||
@ -45,15 +47,21 @@ interface Props
|
|||||||
isMini?: boolean;
|
isMini?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface HistoryEntry {
|
||||||
|
id: number;
|
||||||
|
path: string;
|
||||||
|
label: string;
|
||||||
|
iconName?: string;
|
||||||
|
}
|
||||||
|
|
||||||
function Navbar({absolute, light, isMini}: Props): JSX.Element
|
function Navbar({absolute, light, isMini}: Props): JSX.Element
|
||||||
{
|
{
|
||||||
const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
|
const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
|
||||||
const [controller, dispatch] = useMaterialUIController();
|
const [controller, dispatch] = useMaterialUIController();
|
||||||
const {
|
const {transparentNavbar, fixedNavbar, darkMode,} = controller;
|
||||||
miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode,
|
|
||||||
} = controller;
|
|
||||||
const [openMenu, setOpenMenu] = useState<any>(false);
|
const [openMenu, setOpenMenu] = useState<any>(false);
|
||||||
const [openHistory, setOpenHistory] = useState<any>(false);
|
const [history, setHistory] = useState<any>([] as HistoryEntry[]);
|
||||||
|
const [autocompleteValue, setAutocompleteValue] = useState<any>(null);
|
||||||
const route = useLocation().pathname.split("/").slice(1);
|
const route = useLocation().pathname.split("/").slice(1);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
@ -84,59 +92,84 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
|
|||||||
// Call the handleTransparentNavbar function to set the state with the initial value.
|
// Call the handleTransparentNavbar function to set the state with the initial value.
|
||||||
handleTransparentNavbar();
|
handleTransparentNavbar();
|
||||||
|
|
||||||
|
buildHistoryEntries();
|
||||||
|
|
||||||
|
const history = HistoryUtils.get();
|
||||||
|
setHistory([ {label: "The Godfather", id: 1}, {label: "Pulp Fiction", id: 2}]);
|
||||||
|
const options = [] as any;
|
||||||
|
history.entries.reverse().forEach((entry, index) =>
|
||||||
|
options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
|
||||||
|
)
|
||||||
|
setHistory(options);
|
||||||
|
|
||||||
// Remove event listener on cleanup
|
// Remove event listener on cleanup
|
||||||
return () => window.removeEventListener("scroll", handleTransparentNavbar);
|
return () => window.removeEventListener("scroll", handleTransparentNavbar);
|
||||||
}, [dispatch, fixedNavbar]);
|
}, [dispatch, fixedNavbar]);
|
||||||
|
|
||||||
const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
|
const goToHistory = (path: string) =>
|
||||||
const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
|
{
|
||||||
|
navigate(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildHistoryEntries()
|
||||||
|
{
|
||||||
|
const history = HistoryUtils.get();
|
||||||
|
const options = [] as any;
|
||||||
|
history.entries.reverse().forEach((entry, index) =>
|
||||||
|
options.push({label: entry.label, id: index, key: index, path: entry.path, iconName: entry.iconName})
|
||||||
|
)
|
||||||
|
setHistory(options);
|
||||||
|
}
|
||||||
|
|
||||||
const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget);
|
const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget);
|
||||||
const handleCloseMenu = () => setOpenMenu(false);
|
const handleCloseMenu = () => setOpenMenu(false);
|
||||||
|
|
||||||
const handleHistory = (event: any) =>
|
const handleAutocompleteOnChange = (event: any, value: any, reason: any, details: any) =>
|
||||||
{
|
{
|
||||||
setOpenHistory(event.currentTarget);
|
if(value)
|
||||||
|
{
|
||||||
|
goToHistory(value.path);
|
||||||
|
}
|
||||||
|
setAutocompleteValue(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleCloseHistory = () =>
|
const CustomPopper = function (props: any)
|
||||||
{
|
{
|
||||||
setOpenHistory(false);
|
return (<Popper
|
||||||
}
|
{...props}
|
||||||
|
style={{whiteSpace: "nowrap", width: "auto"}}
|
||||||
const goToHistory = (entry: QHistoryEntry) =>
|
placement="bottom-end"
|
||||||
{
|
/>)
|
||||||
navigate(entry.path);
|
|
||||||
handleCloseHistory();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderHistory = () =>
|
const renderHistory = () =>
|
||||||
{
|
{
|
||||||
const history = HistoryUtils.get();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Menu
|
<Autocomplete
|
||||||
anchorEl={openHistory}
|
disablePortal
|
||||||
anchorReference={null}
|
id="recently-viewed-combo-box"
|
||||||
anchorOrigin={{
|
size="small"
|
||||||
vertical: "bottom",
|
value={autocompleteValue}
|
||||||
horizontal: "left",
|
options={history}
|
||||||
}}
|
autoHighlight
|
||||||
open={Boolean(openHistory)}
|
blurOnSelect
|
||||||
onClose={handleCloseHistory}
|
style={{width: "200px"}}
|
||||||
sx={{mt: 1, "& ul": {maxWidth: "500px"}}}
|
onOpen={buildHistoryEntries}
|
||||||
>
|
onChange={handleAutocompleteOnChange}
|
||||||
<MenuItem sx={{px: "8px"}} disabled><h3 style={{color: "black"}}>Recently Viewed Records</h3></MenuItem>
|
PopperComponent={CustomPopper}
|
||||||
{history.entries.reverse().map((entry) =>
|
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||||
(
|
renderInput={(params) => <TextField {...params} label="Recently Viewed Records" />}
|
||||||
<MenuItem sx={{px: "8px", whiteSpace: "normal"}} key={entry.path} onClick={() => goToHistory(entry)}>
|
renderOption={(props, option: HistoryEntry) => (
|
||||||
<ListItemIcon sx={{minWidth: "24px !important"}}><Icon>{entry.iconName}</Icon></ListItemIcon>
|
<Box {...props} component="li" key={option.id} sx={{width: "auto"}}>
|
||||||
{entry.label}
|
<Box sx={{width: "auto", px: "8px", whiteSpace: "overflow"}} key={option.id}>
|
||||||
</MenuItem>
|
<ListItemIcon sx={{minWidth: "24px !important"}}><Icon>{option.iconName}</Icon></ListItemIcon>
|
||||||
)
|
{option.label}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Menu>
|
/>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
|
|
||||||
// Render the notifications menu
|
// Render the notifications menu
|
||||||
@ -192,63 +225,28 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
|
|||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<Toolbar sx={navbarContainer}>
|
<Toolbar sx={navbarContainer}>
|
||||||
<MDBox color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
|
<Box color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
|
||||||
<QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
|
<QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
|
||||||
<IconButton sx={navbarDesktopMenu} onClick={handleMiniSidenav} size="small" disableRipple>
|
</Box>
|
||||||
<Icon fontSize="medium" sx={iconsStyle}>
|
|
||||||
{miniSidenav ? "menu_open" : "menu"}
|
|
||||||
</Icon>
|
|
||||||
</IconButton>
|
|
||||||
</MDBox>
|
|
||||||
{isMini ? null : (
|
{isMini ? null : (
|
||||||
<MDBox sx={(theme) => navbarRow(theme, {isMini})}>
|
<Box sx={(theme) => navbarRow(theme, {isMini})}>
|
||||||
<MDBox pr={1}>
|
<Box pr={1}>
|
||||||
<MDInput label="Search here" />
|
|
||||||
</MDBox>
|
|
||||||
<MDBox color={light ? "white" : "inherit"}>
|
|
||||||
<IconButton
|
|
||||||
size="small"
|
|
||||||
disableRipple
|
|
||||||
color="inherit"
|
|
||||||
sx={navbarMobileMenu}
|
|
||||||
onClick={handleMiniSidenav}
|
|
||||||
>
|
|
||||||
<Icon sx={iconsStyle} fontSize="medium">
|
|
||||||
{miniSidenav ? "menu_open" : "menu"}
|
|
||||||
</Icon>
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
|
||||||
size="small"
|
|
||||||
disableRipple
|
|
||||||
color="inherit"
|
|
||||||
sx={navbarIconButton}
|
|
||||||
onClick={handleHistory}
|
|
||||||
>
|
|
||||||
<Icon sx={iconsStyle}>history</Icon>
|
|
||||||
</IconButton>
|
|
||||||
{renderHistory()}
|
{renderHistory()}
|
||||||
<IconButton
|
</Box>
|
||||||
size="small"
|
<Box color={light ? "white" : "inherit"}>
|
||||||
disableRipple
|
|
||||||
color="inherit"
|
|
||||||
sx={navbarIconButton}
|
|
||||||
onClick={handleConfiguratorOpen}
|
|
||||||
>
|
|
||||||
<Icon sx={iconsStyle}>settings</Icon>
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
<IconButton
|
||||||
size="small"
|
size="small"
|
||||||
color="inherit"
|
color="inherit"
|
||||||
sx={navbarIconButton}
|
sx={navbarIconButton}
|
||||||
onClick={handleOpenMenu}
|
onClick={handleOpenMenu}
|
||||||
>
|
>
|
||||||
<MDBadge badgeContent={0} color="error" size="xs" circular>
|
<Badge badgeContent={0} color="error" variant="dot">
|
||||||
<Icon sx={iconsStyle}>notifications</Icon>
|
<Icon sx={iconsStyle}>notifications</Icon>
|
||||||
</MDBadge>
|
</Badge>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
{renderMenu()}
|
{renderMenu()}
|
||||||
</MDBox>
|
</Box>
|
||||||
</MDBox>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</AppBar>
|
</AppBar>
|
||||||
|
|||||||
@ -66,7 +66,8 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
|
|||||||
const [ options, setOptions ] = useState<readonly QPossibleValue[]>([]);
|
const [ options, setOptions ] = useState<readonly QPossibleValue[]>([]);
|
||||||
const [ searchTerm, setSearchTerm ] = useState(null);
|
const [ searchTerm, setSearchTerm ] = useState(null);
|
||||||
const [ firstRender, setFirstRender ] = useState(true);
|
const [ firstRender, setFirstRender ] = useState(true);
|
||||||
const [defaultValue, _] = useState(initialValue && initialDisplayValue ? {id: initialValue, label: initialDisplayValue} : null);
|
// @ts-ignore
|
||||||
|
const [defaultValue, _] = useState(initialValue && initialDisplayValue ? [{id: initialValue, label: initialDisplayValue}] : null);
|
||||||
// const loading = open && options.length === 0;
|
// const loading = open && options.length === 0;
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [ switchChecked, setSwitchChecked ] = useState(false);
|
const [ switchChecked, setSwitchChecked ] = useState(false);
|
||||||
@ -224,7 +225,7 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
|
|||||||
setOpen(false);
|
setOpen(false);
|
||||||
}}
|
}}
|
||||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||||
getOptionLabel={(option) => option.label}
|
getOptionLabel={(option) => (option as QPossibleValue).label}
|
||||||
options={options}
|
options={options}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
onInputChange={inputChanged}
|
onInputChange={inputChanged}
|
||||||
|
|||||||
@ -253,7 +253,8 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
|
|||||||
icon={icon}
|
icon={icon}
|
||||||
active={key === collapseName}
|
active={key === collapseName}
|
||||||
open={openCollapse === key}
|
open={openCollapse === key}
|
||||||
onClick={() => (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key))}
|
noCollapse={noCollapse}
|
||||||
|
onClick={() => (! noCollapse ? (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key)) : null) }
|
||||||
>
|
>
|
||||||
{collapse ? renderCollapse(collapse) : null}
|
{collapse ? renderCollapse(collapse) : null}
|
||||||
</SidenavCollapse>
|
</SidenavCollapse>
|
||||||
|
|||||||
@ -207,9 +207,9 @@ function DataTable({
|
|||||||
disableClearable
|
disableClearable
|
||||||
value={pageSize.toString()}
|
value={pageSize.toString()}
|
||||||
options={entries}
|
options={entries}
|
||||||
onChange={(event, newValue) =>
|
onChange={(event, newValues) =>
|
||||||
{
|
{
|
||||||
setEntriesPerPage(parseInt(newValue, 10));
|
setEntriesPerPage(parseInt(newValues[0], 10));
|
||||||
}}
|
}}
|
||||||
size="small"
|
size="small"
|
||||||
sx={{width: "5rem"}}
|
sx={{width: "5rem"}}
|
||||||
|
|||||||
@ -1,96 +0,0 @@
|
|||||||
/*
|
|
||||||
* QQQ - Low-code Application Framework for Engineers.
|
|
||||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
|
||||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
|
||||||
* contact@kingsrook.com
|
|
||||||
* https://github.com/Kingsrook/
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import Avatar from "@mui/material/Avatar";
|
|
||||||
import {styled, Theme} from "@mui/material/styles";
|
|
||||||
|
|
||||||
export default styled(Avatar)(({theme, ownerState}: { theme?: Theme | any; ownerState: any }) =>
|
|
||||||
{
|
|
||||||
const {palette, functions, typography, boxShadows} = theme;
|
|
||||||
const {shadow, bgColor, size} = ownerState;
|
|
||||||
|
|
||||||
const {gradients, transparent, white} = palette;
|
|
||||||
const {pxToRem, linearGradient} = functions;
|
|
||||||
const {size: fontSize, fontWeightRegular} = typography;
|
|
||||||
|
|
||||||
// backgroundImage value
|
|
||||||
const backgroundValue =
|
|
||||||
bgColor === "transparent"
|
|
||||||
? transparent.main
|
|
||||||
: linearGradient(gradients[bgColor].main, gradients[bgColor].state);
|
|
||||||
|
|
||||||
// size value
|
|
||||||
let sizeValue;
|
|
||||||
|
|
||||||
switch (size)
|
|
||||||
{
|
|
||||||
case "xs":
|
|
||||||
sizeValue = {
|
|
||||||
width: pxToRem(24),
|
|
||||||
height: pxToRem(24),
|
|
||||||
fontSize: fontSize.xs,
|
|
||||||
};
|
|
||||||
break;
|
|
||||||
case "sm":
|
|
||||||
sizeValue = {
|
|
||||||
width: pxToRem(36),
|
|
||||||
height: pxToRem(36),
|
|
||||||
fontSize: fontSize.sm,
|
|
||||||
};
|
|
||||||
break;
|
|
||||||
case "lg":
|
|
||||||
sizeValue = {
|
|
||||||
width: pxToRem(58),
|
|
||||||
height: pxToRem(58),
|
|
||||||
fontSize: fontSize.sm,
|
|
||||||
};
|
|
||||||
break;
|
|
||||||
case "xl":
|
|
||||||
sizeValue = {
|
|
||||||
width: pxToRem(74),
|
|
||||||
height: pxToRem(74),
|
|
||||||
fontSize: fontSize.md,
|
|
||||||
};
|
|
||||||
break;
|
|
||||||
case "xxl":
|
|
||||||
sizeValue = {
|
|
||||||
width: pxToRem(110),
|
|
||||||
height: pxToRem(110),
|
|
||||||
fontSize: fontSize.md,
|
|
||||||
};
|
|
||||||
break;
|
|
||||||
default: {
|
|
||||||
sizeValue = {
|
|
||||||
width: pxToRem(48),
|
|
||||||
height: pxToRem(48),
|
|
||||||
fontSize: fontSize.md,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
background: backgroundValue,
|
|
||||||
color: white.main,
|
|
||||||
fontWeight: fontWeightRegular,
|
|
||||||
boxShadow: boxShadows[shadow],
|
|
||||||
...sizeValue,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
/*
|
|
||||||
* QQQ - Low-code Application Framework for Engineers.
|
|
||||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
|
||||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
|
||||||
* contact@kingsrook.com
|
|
||||||
* https://github.com/Kingsrook/
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import {AvatarProps} from "@mui/material";
|
|
||||||
import {FC, forwardRef} from "react";
|
|
||||||
import MDAvatarRoot from "qqq/components/Temporary/MDAvatar/MDAvatarRoot";
|
|
||||||
|
|
||||||
// declare props types for MDAvatar
|
|
||||||
interface Props extends AvatarProps {
|
|
||||||
bgColor?:
|
|
||||||
| "transparent"
|
|
||||||
| "primary"
|
|
||||||
| "secondary"
|
|
||||||
| "info"
|
|
||||||
| "success"
|
|
||||||
| "warning"
|
|
||||||
| "error"
|
|
||||||
| "light"
|
|
||||||
| "dark";
|
|
||||||
size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
|
|
||||||
shadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "inset";
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MDAvatar: FC<Props> = forwardRef(({bgColor, size, shadow, ...rest}, ref) => (
|
|
||||||
<MDAvatarRoot ref={ref} ownerState={{shadow, bgColor, size}} {...rest} />
|
|
||||||
));
|
|
||||||
|
|
||||||
// Declaring default props for MDAvatar
|
|
||||||
MDAvatar.defaultProps = {
|
|
||||||
bgColor: "transparent",
|
|
||||||
size: "md",
|
|
||||||
shadow: "none",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default MDAvatar;
|
|
||||||
@ -70,8 +70,6 @@ function USMapWidget(props: Props, ): JSX.Element
|
|||||||
})();
|
})();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
console.log(JSON.stringify(props))
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid container>
|
<Grid container>
|
||||||
<Grid item xs={12} sx={{height: props.data?.height}}>
|
<Grid item xs={12} sx={{height: props.data?.height}}>
|
||||||
|
|||||||
Reference in New Issue
Block a user