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:
368
package-lock.json
generated
368
package-lock.json
generated
@ -17,9 +17,9 @@
|
||||
"@fullcalendar/interaction": "5.10.0",
|
||||
"@fullcalendar/react": "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/material": "5.4.1",
|
||||
"@mui/material": "5.11.1",
|
||||
"@mui/styled-engine": "5.4.1",
|
||||
"@mui/styles": "5.10.7",
|
||||
"@mui/system": "5.10.14",
|
||||
@ -3164,9 +3164,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@kingsrook/qqq-frontend-core": {
|
||||
"version": "1.0.38",
|
||||
"resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.38/38d5f26bafb713d2f27ffd1d91253fe80ab87028",
|
||||
"integrity": "sha512-BpKCLsd8FhxKb0FZTRm1V8wC/jEYjpmOJg50ZaerVDkHkhb02xcMiy++a9AELEaq6KxYFRTpQHiBMJbyop83cQ==",
|
||||
"version": "1.0.39",
|
||||
"resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.39/833263d6596029a396125dccb5ab0ac908b15c36",
|
||||
"integrity": "sha512-S9V5zhri30jvNTzMqlbeD2c+zeon+3j+JqM/wt/qsSPys4Pnp6kJDf86dF7QzeFsuzbXJDqVgcQ3AbDrTa0skA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"axios": "0.27.2",
|
||||
@ -3179,17 +3179,18 @@
|
||||
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
|
||||
},
|
||||
"node_modules/@mui/base": {
|
||||
"version": "5.0.0-alpha.68",
|
||||
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.68.tgz",
|
||||
"integrity": "sha512-q+3gX6EHuM/AyOn8fkoANQxSzIHBeuNsrGgb7SPP0y7NuM+4ZHG/b9882+OfHcilaSqPDWUQoLbphcBpw/m/RA==",
|
||||
"version": "5.0.0-alpha.111",
|
||||
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.111.tgz",
|
||||
"integrity": "sha512-2wfIPpl97S4dPzD0QOM3UIzQ/EuXCYQvHmXxTpfKxev/cfkzOe7Ik/McoYUBbtM1bSOqH3W276R/L2LF9cyXqQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.0",
|
||||
"@emotion/is-prop-valid": "^1.1.1",
|
||||
"@mui/utils": "^5.4.1",
|
||||
"@popperjs/core": "^2.4.4",
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^17.0.2"
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@emotion/is-prop-valid": "^1.2.0",
|
||||
"@mui/types": "^7.2.3",
|
||||
"@mui/utils": "^5.11.1",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
"clsx": "^1.2.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^18.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
@ -3199,9 +3200,9 @@
|
||||
"url": "https://opencollective.com/mui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8.6 || ^17.0.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
"@types/react": "^17.0.0 || ^18.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@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": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.4.1.tgz",
|
||||
@ -3235,22 +3250,22 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.1.tgz",
|
||||
"integrity": "sha512-SxAT43UAjFTBBpJrN+oGrv40xP1uCa5Z49NfHt3m93xYeFzbxKOk0V9IKU7zlUjbsaVQ0i+o24yF5GULZmynlA==",
|
||||
"version": "5.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.1.tgz",
|
||||
"integrity": "sha512-yaZiXvcrl2vgUK+VO24780BWRgwdAMmAyuMVZnRTts1Yu0tWd6PjIYq2ZtaOlpj6/LbaSS+Q2kSfxYnDQ20CEQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.0",
|
||||
"@mui/base": "5.0.0-alpha.68",
|
||||
"@mui/system": "^5.4.1",
|
||||
"@mui/types": "^7.1.1",
|
||||
"@mui/utils": "^5.4.1",
|
||||
"@types/react-transition-group": "^4.4.4",
|
||||
"clsx": "^1.1.1",
|
||||
"csstype": "^3.0.10",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^17.0.2",
|
||||
"react-transition-group": "^4.4.2"
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@mui/base": "5.0.0-alpha.111",
|
||||
"@mui/core-downloads-tracker": "^5.11.1",
|
||||
"@mui/system": "^5.11.1",
|
||||
"@mui/types": "^7.2.3",
|
||||
"@mui/utils": "^5.11.1",
|
||||
"@types/react-transition-group": "^4.4.5",
|
||||
"clsx": "^1.2.1",
|
||||
"csstype": "^3.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^18.2.0",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
@ -3262,9 +3277,9 @@
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.5.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@types/react": "^16.8.6 || ^17.0.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
"@types/react": "^17.0.0 || ^18.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
@ -3278,13 +3293,115 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/private-theming": {
|
||||
"version": "5.10.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.16.tgz",
|
||||
"integrity": "sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==",
|
||||
"node_modules/@mui/material/node_modules/@emotion/cache": {
|
||||
"version": "11.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
|
||||
"integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@mui/utils": "^5.10.16",
|
||||
"@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"
|
||||
}
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"engines": {
|
||||
@ -3472,9 +3589,9 @@
|
||||
"integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
|
||||
},
|
||||
"node_modules/@mui/types": {
|
||||
"version": "7.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz",
|
||||
"integrity": "sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA==",
|
||||
"version": "7.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz",
|
||||
"integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*"
|
||||
},
|
||||
@ -3485,11 +3602,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/utils": {
|
||||
"version": "5.10.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz",
|
||||
"integrity": "sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==",
|
||||
"version": "5.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.1.tgz",
|
||||
"integrity": "sha512-lMAPgIJoil8V9ZxsMbEflMsvZmWcHbRVMc4JDY9jPO9V4welpF43h/O267b1RqlcRnC5MEbVQV605GYkTZY29Q==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/react-is": "^16.7.1 || ^17.0.0",
|
||||
"prop-types": "^15.8.1",
|
||||
@ -21062,9 +21179,9 @@
|
||||
}
|
||||
},
|
||||
"@kingsrook/qqq-frontend-core": {
|
||||
"version": "1.0.38",
|
||||
"resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.38/38d5f26bafb713d2f27ffd1d91253fe80ab87028",
|
||||
"integrity": "sha512-BpKCLsd8FhxKb0FZTRm1V8wC/jEYjpmOJg50ZaerVDkHkhb02xcMiy++a9AELEaq6KxYFRTpQHiBMJbyop83cQ==",
|
||||
"version": "1.0.39",
|
||||
"resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.39/833263d6596029a396125dccb5ab0ac908b15c36",
|
||||
"integrity": "sha512-S9V5zhri30jvNTzMqlbeD2c+zeon+3j+JqM/wt/qsSPys4Pnp6kJDf86dF7QzeFsuzbXJDqVgcQ3AbDrTa0skA==",
|
||||
"requires": {
|
||||
"axios": "0.27.2",
|
||||
"form-data": "4.0.0"
|
||||
@ -21076,19 +21193,32 @@
|
||||
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
|
||||
},
|
||||
"@mui/base": {
|
||||
"version": "5.0.0-alpha.68",
|
||||
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.68.tgz",
|
||||
"integrity": "sha512-q+3gX6EHuM/AyOn8fkoANQxSzIHBeuNsrGgb7SPP0y7NuM+4ZHG/b9882+OfHcilaSqPDWUQoLbphcBpw/m/RA==",
|
||||
"version": "5.0.0-alpha.111",
|
||||
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.111.tgz",
|
||||
"integrity": "sha512-2wfIPpl97S4dPzD0QOM3UIzQ/EuXCYQvHmXxTpfKxev/cfkzOe7Ik/McoYUBbtM1bSOqH3W276R/L2LF9cyXqQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.17.0",
|
||||
"@emotion/is-prop-valid": "^1.1.1",
|
||||
"@mui/utils": "^5.4.1",
|
||||
"@popperjs/core": "^2.4.4",
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^17.0.2"
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@emotion/is-prop-valid": "^1.2.0",
|
||||
"@mui/types": "^7.2.3",
|
||||
"@mui/utils": "^5.11.1",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
"clsx": "^1.2.1",
|
||||
"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": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.4.1.tgz",
|
||||
@ -21098,31 +21228,91 @@
|
||||
}
|
||||
},
|
||||
"@mui/material": {
|
||||
"version": "5.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.4.1.tgz",
|
||||
"integrity": "sha512-SxAT43UAjFTBBpJrN+oGrv40xP1uCa5Z49NfHt3m93xYeFzbxKOk0V9IKU7zlUjbsaVQ0i+o24yF5GULZmynlA==",
|
||||
"version": "5.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.1.tgz",
|
||||
"integrity": "sha512-yaZiXvcrl2vgUK+VO24780BWRgwdAMmAyuMVZnRTts1Yu0tWd6PjIYq2ZtaOlpj6/LbaSS+Q2kSfxYnDQ20CEQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.17.0",
|
||||
"@mui/base": "5.0.0-alpha.68",
|
||||
"@mui/system": "^5.4.1",
|
||||
"@mui/types": "^7.1.1",
|
||||
"@mui/utils": "^5.4.1",
|
||||
"@types/react-transition-group": "^4.4.4",
|
||||
"clsx": "^1.1.1",
|
||||
"csstype": "^3.0.10",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^17.0.2",
|
||||
"react-transition-group": "^4.4.2"
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@mui/base": "5.0.0-alpha.111",
|
||||
"@mui/core-downloads-tracker": "^5.11.1",
|
||||
"@mui/system": "^5.11.1",
|
||||
"@mui/types": "^7.2.3",
|
||||
"@mui/utils": "^5.11.1",
|
||||
"@types/react-transition-group": "^4.4.5",
|
||||
"clsx": "^1.2.1",
|
||||
"csstype": "^3.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^18.2.0",
|
||||
"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": {
|
||||
"version": "5.10.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.16.tgz",
|
||||
"integrity": "sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==",
|
||||
"version": "5.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.1.tgz",
|
||||
"integrity": "sha512-nnHg7kA5RwFRhy0wiDYe59sLCVGORpPypL1JcEdhv0+N0Zbmc2E/y4z2zqMRZ62MAEscpro7cQbvv244ThA84A==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@mui/utils": "^5.10.16",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@mui/utils": "^5.11.1",
|
||||
"prop-types": "^15.8.1"
|
||||
}
|
||||
},
|
||||
@ -21216,16 +21406,16 @@
|
||||
}
|
||||
},
|
||||
"@mui/types": {
|
||||
"version": "7.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz",
|
||||
"integrity": "sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA=="
|
||||
"version": "7.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz",
|
||||
"integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw=="
|
||||
},
|
||||
"@mui/utils": {
|
||||
"version": "5.10.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz",
|
||||
"integrity": "sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==",
|
||||
"version": "5.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.1.tgz",
|
||||
"integrity": "sha512-lMAPgIJoil8V9ZxsMbEflMsvZmWcHbRVMc4JDY9jPO9V4welpF43h/O267b1RqlcRnC5MEbVQV605GYkTZY29Q==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.20.1",
|
||||
"@babel/runtime": "^7.20.6",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/react-is": "^16.7.1 || ^17.0.0",
|
||||
"prop-types": "^15.8.1",
|
||||
|
@ -15,7 +15,7 @@
|
||||
"@fullcalendar/timegrid": "5.10.0",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.39",
|
||||
"@mui/icons-material": "5.4.1",
|
||||
"@mui/material": "5.4.1",
|
||||
"@mui/material": "5.11.1",
|
||||
"@mui/styled-engine": "5.4.1",
|
||||
"@mui/styles": "5.10.7",
|
||||
"@mui/system": "5.10.14",
|
||||
|
47
src/App.tsx
47
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 {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import CssBaseline from "@mui/material/CssBaseline";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {ThemeProvider} from "@mui/material/styles";
|
||||
@ -34,13 +35,10 @@ import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} f
|
||||
import {useCookies} from "react-cookie";
|
||||
import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
|
||||
import {Md5} from "ts-md5/dist/md5";
|
||||
import {number} from "yup";
|
||||
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 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 theme from "qqq/components/Temporary/Theme";
|
||||
import AppHome from "qqq/pages/app-home";
|
||||
@ -390,27 +388,13 @@ export default function App()
|
||||
type: "collapse",
|
||||
name: user?.name,
|
||||
key: "username",
|
||||
icon: <MDAvatar src={profilePicture} alt="{user?.name}" size="sm" />,
|
||||
collapse: [
|
||||
{
|
||||
name: "My Profile",
|
||||
key: "my-profile",
|
||||
route: "/pages/profile/profile-overview",
|
||||
component: <ProfileOverview />,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
key: "profile-settings",
|
||||
route: "/pages/account/settings",
|
||||
component: <Settings />,
|
||||
},
|
||||
],
|
||||
noCollapse: true,
|
||||
icon: <Avatar src={profilePicture} alt="{user?.name}" />,
|
||||
};
|
||||
setProfileRoutes(profileRoutes);
|
||||
|
||||
const sideNavAppList = [] 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' //
|
||||
@ -565,20 +549,15 @@ export default function App()
|
||||
}}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
{layout === "dashboard" && (
|
||||
<>
|
||||
<Sidenav
|
||||
color={sidenavColor}
|
||||
icon={branding.icon}
|
||||
logo={branding.logo}
|
||||
companyName={branding.companyName}
|
||||
routes={sideNavRoutes}
|
||||
onMouseEnter={handleOnMouseEnter}
|
||||
onMouseLeave={handleOnMouseLeave}
|
||||
/>
|
||||
<Configurator />
|
||||
</>
|
||||
)}
|
||||
<Sidenav
|
||||
color={sidenavColor}
|
||||
icon={branding.icon}
|
||||
logo={branding.logo}
|
||||
companyName={branding.companyName}
|
||||
routes={sideNavRoutes}
|
||||
onMouseEnter={handleOnMouseEnter}
|
||||
onMouseLeave={handleOnMouseLeave}
|
||||
/>
|
||||
<Routes>
|
||||
<Route path="*" element={<Navigate to="/dashboards/overview" />} />
|
||||
{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));
|
||||
setWidgetCounter(widgetCounter + 1);
|
||||
console.log(`widget data: ${JSON.stringify(widgetData[i])}`)
|
||||
forceUpdate();
|
||||
})();
|
||||
}
|
||||
|
@ -19,23 +19,25 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {Popper} from "@mui/material";
|
||||
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 IconButton from "@mui/material/IconButton";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
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 React, {useState, useEffect} from "react";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {useLocation, useNavigate} from "react-router-dom";
|
||||
import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context";
|
||||
import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles";
|
||||
import {boolean} from "yup";
|
||||
import {setTransparentNavbar, useMaterialUIController,} from "context";
|
||||
import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/Navbar/styles";
|
||||
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 HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
|
||||
import HistoryUtils from "qqq/utils/HistoryUtils";
|
||||
|
||||
// Declaring prop types for Navbar
|
||||
interface Props
|
||||
@ -45,15 +47,21 @@ interface Props
|
||||
isMini?: boolean;
|
||||
}
|
||||
|
||||
interface HistoryEntry {
|
||||
id: number;
|
||||
path: string;
|
||||
label: string;
|
||||
iconName?: string;
|
||||
}
|
||||
|
||||
function Navbar({absolute, light, isMini}: Props): JSX.Element
|
||||
{
|
||||
const [navbarType, setNavbarType] = useState<"fixed" | "absolute" | "relative" | "static" | "sticky">();
|
||||
const [controller, dispatch] = useMaterialUIController();
|
||||
const {
|
||||
miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode,
|
||||
} = controller;
|
||||
const {transparentNavbar, fixedNavbar, darkMode,} = controller;
|
||||
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 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.
|
||||
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
|
||||
return () => window.removeEventListener("scroll", handleTransparentNavbar);
|
||||
}, [dispatch, fixedNavbar]);
|
||||
|
||||
const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
|
||||
const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
|
||||
const goToHistory = (path: string) =>
|
||||
{
|
||||
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 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);
|
||||
}
|
||||
|
||||
const goToHistory = (entry: QHistoryEntry) =>
|
||||
{
|
||||
navigate(entry.path);
|
||||
handleCloseHistory();
|
||||
return (<Popper
|
||||
{...props}
|
||||
style={{whiteSpace: "nowrap", width: "auto"}}
|
||||
placement="bottom-end"
|
||||
/>)
|
||||
}
|
||||
|
||||
const renderHistory = () =>
|
||||
{
|
||||
const history = HistoryUtils.get();
|
||||
|
||||
return (
|
||||
<Menu
|
||||
anchorEl={openHistory}
|
||||
anchorReference={null}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "left",
|
||||
}}
|
||||
open={Boolean(openHistory)}
|
||||
onClose={handleCloseHistory}
|
||||
sx={{mt: 1, "& ul": {maxWidth: "500px"}}}
|
||||
>
|
||||
<MenuItem sx={{px: "8px"}} disabled><h3 style={{color: "black"}}>Recently Viewed Records</h3></MenuItem>
|
||||
{history.entries.reverse().map((entry) =>
|
||||
(
|
||||
<MenuItem sx={{px: "8px", whiteSpace: "normal"}} key={entry.path} onClick={() => goToHistory(entry)}>
|
||||
<ListItemIcon sx={{minWidth: "24px !important"}}><Icon>{entry.iconName}</Icon></ListItemIcon>
|
||||
{entry.label}
|
||||
</MenuItem>
|
||||
)
|
||||
<Autocomplete
|
||||
disablePortal
|
||||
id="recently-viewed-combo-box"
|
||||
size="small"
|
||||
value={autocompleteValue}
|
||||
options={history}
|
||||
autoHighlight
|
||||
blurOnSelect
|
||||
style={{width: "200px"}}
|
||||
onOpen={buildHistoryEntries}
|
||||
onChange={handleAutocompleteOnChange}
|
||||
PopperComponent={CustomPopper}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
renderInput={(params) => <TextField {...params} label="Recently Viewed Records" />}
|
||||
renderOption={(props, option: HistoryEntry) => (
|
||||
<Box {...props} component="li" key={option.id} sx={{width: "auto"}}>
|
||||
<Box sx={{width: "auto", px: "8px", whiteSpace: "overflow"}} key={option.id}>
|
||||
<ListItemIcon sx={{minWidth: "24px !important"}}><Icon>{option.iconName}</Icon></ListItemIcon>
|
||||
{option.label}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Menu>
|
||||
/>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// Render the notifications menu
|
||||
@ -192,63 +225,28 @@ function Navbar({absolute, light, isMini}: Props): JSX.Element
|
||||
})}
|
||||
>
|
||||
<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} />
|
||||
<IconButton sx={navbarDesktopMenu} onClick={handleMiniSidenav} size="small" disableRipple>
|
||||
<Icon fontSize="medium" sx={iconsStyle}>
|
||||
{miniSidenav ? "menu_open" : "menu"}
|
||||
</Icon>
|
||||
</IconButton>
|
||||
</MDBox>
|
||||
</Box>
|
||||
{isMini ? null : (
|
||||
<MDBox sx={(theme) => navbarRow(theme, {isMini})}>
|
||||
<MDBox 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>
|
||||
<Box sx={(theme) => navbarRow(theme, {isMini})}>
|
||||
<Box pr={1}>
|
||||
{renderHistory()}
|
||||
<IconButton
|
||||
size="small"
|
||||
disableRipple
|
||||
color="inherit"
|
||||
sx={navbarIconButton}
|
||||
onClick={handleConfiguratorOpen}
|
||||
>
|
||||
<Icon sx={iconsStyle}>settings</Icon>
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box color={light ? "white" : "inherit"}>
|
||||
<IconButton
|
||||
size="small"
|
||||
color="inherit"
|
||||
sx={navbarIconButton}
|
||||
onClick={handleOpenMenu}
|
||||
>
|
||||
<MDBadge badgeContent={0} color="error" size="xs" circular>
|
||||
<Badge badgeContent={0} color="error" variant="dot">
|
||||
<Icon sx={iconsStyle}>notifications</Icon>
|
||||
</MDBadge>
|
||||
</Badge>
|
||||
</IconButton>
|
||||
{renderMenu()}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
@ -66,7 +66,8 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
|
||||
const [ options, setOptions ] = useState<readonly QPossibleValue[]>([]);
|
||||
const [ searchTerm, setSearchTerm ] = useState(null);
|
||||
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, setLoading] = useState(false);
|
||||
const [ switchChecked, setSwitchChecked ] = useState(false);
|
||||
@ -224,7 +225,7 @@ function QDynamicSelect({tableName, fieldName, fieldLabel, inForm, initialValue,
|
||||
setOpen(false);
|
||||
}}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
getOptionLabel={(option) => option.label}
|
||||
getOptionLabel={(option) => (option as QPossibleValue).label}
|
||||
options={options}
|
||||
loading={loading}
|
||||
onInputChange={inputChanged}
|
||||
|
@ -253,7 +253,8 @@ function Sidenav({color, icon, logo, companyName, routes, ...rest}: Props): JSX.
|
||||
icon={icon}
|
||||
active={key === collapseName}
|
||||
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}
|
||||
</SidenavCollapse>
|
||||
|
@ -207,9 +207,9 @@ function DataTable({
|
||||
disableClearable
|
||||
value={pageSize.toString()}
|
||||
options={entries}
|
||||
onChange={(event, newValue) =>
|
||||
onChange={(event, newValues) =>
|
||||
{
|
||||
setEntriesPerPage(parseInt(newValue, 10));
|
||||
setEntriesPerPage(parseInt(newValues[0], 10));
|
||||
}}
|
||||
size="small"
|
||||
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 (
|
||||
<Grid container>
|
||||
<Grid item xs={12} sx={{height: props.data?.height}}>
|
||||
|
Reference in New Issue
Block a user