feat(styles & scripts & fixes): add and style new components (menu + listGenerator + etc)

-

package-lock.json

@@ -8,9 +8,10 @@
       "name": "work_front",
       "version": "1.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.7.2",
         "axios": "^1.7.9",
         "gatsby": "^5.13.3",
-        "gatsby-plugin-sass": "^3.2.0",
+        "gatsby-plugin-sass": "^6.14.0",
         "react": "^18",
         "react-dom": "^18",
         "react-router-dom": "^7.1.5",
@@ -2129,6 +2130,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@gatsbyjs/parcel-namer-relative-to-cwd": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-2.14.0.tgz",
@@ -4934,6 +4944,19 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/adjust-sourcemap-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz",
+      "integrity": "sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==",
+      "license": "MIT",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "regex-parser": "^2.2.11"
+      },
+      "engines": {
+        "node": ">=8.9"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -5097,6 +5120,12 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/arity-n": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz",
+      "integrity": "sha512-fExL2kFDC1Q2DUOx3whE/9KoN66IzkY4b4zUHUBFM1ojEYjZZYDcUW3bek/ufGionX9giIKDC5redH2IlGqcQQ==",
+      "license": "MIT"
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -5304,6 +5333,18 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/auto-bind": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-4.0.0.tgz",
@@ -6642,6 +6683,15 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
     },
+    "node_modules/compose-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz",
+      "integrity": "sha512-xzhzTJ5eC+gmIzvZq+C3kCJHsp9os6tJkrigDRZclyGtOKINbZtE8n1Tzmeh32jW+BUDPbvZpibwvJHBLGMVwg==",
+      "license": "MIT",
+      "dependencies": {
+        "arity-n": "^1.0.4"
+      }
+    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -6925,6 +6975,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -7054,6 +7116,15 @@
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="
     },
+    "node_modules/css/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -9852,19 +9923,20 @@
       }
     },
     "node_modules/gatsby-plugin-sass": {
-      "version": "3.2.0",
+      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-6.14.0.tgz",
-      "integrity": "sha512-YlQX1Kn1wGcKCgyS8OfD0/W16XIRKvE/5wg6HRnUhJV03MNTB/41eRDsgGe0zLb3jb/aw1bH7leWcBVy0RoClA==",
+      "integrity": "sha512-3AirLeSpzGGqKDZNAGB33nfPXzPuQ6hGv3bYKhEeWMTapDAdaiF2BKLDSgcX+Dx30m2x8ZMlrDH3Krvsl5I5Vw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.12.5",
+        "@babel/runtime": "^7.20.13",
-        "sass-loader": "^10.1.0"
+        "resolve-url-loader": "^3.1.5",
+        "sass-loader": "^10.4.1"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=18.0.0"
       },
       "peerDependencies": {
-        "gatsby": "^2.0.0",
+        "gatsby": "^5.0.0-next",
         "sass": "^1.30.0"
       }
     },
@@ -14597,6 +14669,12 @@
         "@babel/runtime": "^7.8.4"
       }
     },
+    "node_modules/regex-parser": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.3.0.tgz",
+      "integrity": "sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==",
+      "license": "MIT"
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -14814,6 +14892,194 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
+      "deprecated": "https://github.com/lydell/resolve-url#deprecated",
+      "license": "MIT"
+    },
+    "node_modules/resolve-url-loader": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.5.tgz",
+      "integrity": "sha512-mgFMCmrV/tA4738EsFmPFE5/MaqSgUMe8LK971kVEKA/RrNVb7+VqFsg/qmKyythf34eyq476qIobP/gfFBGSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "adjust-sourcemap-loader": "3.0.0",
+        "camelcase": "5.3.1",
+        "compose-function": "3.0.3",
+        "convert-source-map": "1.7.0",
+        "es6-iterator": "2.0.3",
+        "loader-utils": "^1.2.3",
+        "postcss": "7.0.36",
+        "rework": "1.0.1",
+        "rework-visit": "1.0.0",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/chalk/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "license": "MIT"
+    },
+    "node_modules/resolve-url-loader/node_modules/convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "license": "MIT",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/resolve-url-loader/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/responselike": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
@@ -14857,6 +15123,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rework": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rework/-/rework-1.0.1.tgz",
+      "integrity": "sha512-eEjL8FdkdsxApd0yWVZgBGzfCQiT8yqSc2H1p4jpZpQdtz7ohETiDMoje5PlM8I9WgkqkreVxFUKYOiJdVWDXw==",
+      "dependencies": {
+        "convert-source-map": "^0.3.3",
+        "css": "^2.0.0"
+      }
+    },
+    "node_modules/rework-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rework-visit/-/rework-visit-1.0.0.tgz",
+      "integrity": "sha512-W6V2fix7nCLUYX1v6eGPrBOZlc03/faqzP4sUxMAJMBMOPYhfV/RyLegTufn5gJKaOITyi+gvf0LXDZ9NzkHnQ==",
+      "license": "MIT"
+    },
+    "node_modules/rework/node_modules/convert-source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz",
+      "integrity": "sha512-+4nRk0k3oEpwUB7/CalD7xE2z4VmtEnnq0GO2IPTkrooTrAhEsWvuLF5iWP1dXrwluki/azwXV1ve7gtYuPldg==",
+      "license": "MIT"
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -14994,6 +15281,7 @@
       "version": "10.5.2",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.5.2.tgz",
       "integrity": "sha512-vMUoSNOUKJILHpcNCCyD23X34gve1TS7Rjd9uXHeKqhvBG39x6XbswFDtpbTElj6XdMFezoWhkh5vtKudf2cgQ==",
+      "license": "MIT",
       "dependencies": {
         "klona": "^2.0.4",
         "loader-utils": "^2.0.0",
@@ -15578,6 +15866,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
+      "license": "MIT",
+      "dependencies": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -15595,6 +15897,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-url": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
+      "deprecated": "See https://github.com/lydell/source-map-url#deprecated",
+      "license": "MIT"
+    },
     "node_modules/split-on-first": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
@@ -16643,6 +16952,13 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
+      "deprecated": "Please see https://github.com/lydell/urix#deprecated",
+      "license": "MIT"
+    },
     "node_modules/url-loader": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
@@ -18728,6 +19044,11 @@
         }
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA=="
+    },
     "@gatsbyjs/parcel-namer-relative-to-cwd": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-2.14.0.tgz",
@@ -20638,6 +20959,15 @@
       "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
       "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA=="
     },
+    "adjust-sourcemap-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz",
+      "integrity": "sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==",
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "regex-parser": "^2.2.11"
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -20757,6 +21087,11 @@
         "dequal": "^2.0.3"
       }
     },
+    "arity-n": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz",
+      "integrity": "sha512-fExL2kFDC1Q2DUOx3whE/9KoN66IzkY4b4zUHUBFM1ojEYjZZYDcUW3bek/ufGionX9giIKDC5redH2IlGqcQQ=="
+    },
     "array-buffer-byte-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -20910,6 +21245,11 @@
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
     "auto-bind": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-4.0.0.tgz",
@@ -21840,6 +22180,14 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
     },
+    "compose-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz",
+      "integrity": "sha512-xzhzTJ5eC+gmIzvZq+C3kCJHsp9os6tJkrigDRZclyGtOKINbZtE8n1Tzmeh32jW+BUDPbvZpibwvJHBLGMVwg==",
+      "requires": {
+        "arity-n": "^1.0.4"
+      }
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -22064,6 +22412,24 @@
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
     },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -24345,12 +24711,13 @@
       }
     },
     "gatsby-plugin-sass": {
-      "version": "3.2.0",
+      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-6.14.0.tgz",
-      "integrity": "sha512-YlQX1Kn1wGcKCgyS8OfD0/W16XIRKvE/5wg6HRnUhJV03MNTB/41eRDsgGe0zLb3jb/aw1bH7leWcBVy0RoClA==",
+      "integrity": "sha512-3AirLeSpzGGqKDZNAGB33nfPXzPuQ6hGv3bYKhEeWMTapDAdaiF2BKLDSgcX+Dx30m2x8ZMlrDH3Krvsl5I5Vw==",
       "requires": {
-        "@babel/runtime": "^7.12.5",
+        "@babel/runtime": "^7.20.13",
-        "sass-loader": "^10.1.0"
+        "resolve-url-loader": "^3.1.5",
+        "sass-loader": "^10.4.1"
       }
     },
     "gatsby-plugin-typescript": {
@@ -27424,6 +27791,11 @@
         "@babel/runtime": "^7.8.4"
       }
     },
+    "regex-parser": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.3.0.tgz",
+      "integrity": "sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg=="
+    },
     "regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -27579,6 +27951,140 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
       "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
     },
+    "resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg=="
+    },
+    "resolve-url-loader": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.5.tgz",
+      "integrity": "sha512-mgFMCmrV/tA4738EsFmPFE5/MaqSgUMe8LK971kVEKA/RrNVb7+VqFsg/qmKyythf34eyq476qIobP/gfFBGSQ==",
+      "requires": {
+        "adjust-sourcemap-loader": "3.0.0",
+        "camelcase": "5.3.1",
+        "compose-function": "3.0.3",
+        "convert-source-map": "1.7.0",
+        "es6-iterator": "2.0.3",
+        "loader-utils": "^1.2.3",
+        "postcss": "7.0.36",
+        "rework": "1.0.1",
+        "rework-visit": "1.0.0",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+        },
+        "convert-source-map": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+          "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+          "requires": {
+            "safe-buffer": "~5.1.1"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "responselike": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
@@ -27606,6 +28112,27 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rework": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rework/-/rework-1.0.1.tgz",
+      "integrity": "sha512-eEjL8FdkdsxApd0yWVZgBGzfCQiT8yqSc2H1p4jpZpQdtz7ohETiDMoje5PlM8I9WgkqkreVxFUKYOiJdVWDXw==",
+      "requires": {
+        "convert-source-map": "^0.3.3",
+        "css": "^2.0.0"
+      },
+      "dependencies": {
+        "convert-source-map": {
+          "version": "0.3.5",
+          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz",
+          "integrity": "sha512-+4nRk0k3oEpwUB7/CalD7xE2z4VmtEnnq0GO2IPTkrooTrAhEsWvuLF5iWP1dXrwluki/azwXV1ve7gtYuPldg=="
+        }
+      }
+    },
+    "rework-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rework-visit/-/rework-visit-1.0.0.tgz",
+      "integrity": "sha512-W6V2fix7nCLUYX1v6eGPrBOZlc03/faqzP4sUxMAJMBMOPYhfV/RyLegTufn5gJKaOITyi+gvf0LXDZ9NzkHnQ=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -28099,6 +28626,18 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
     },
+    "source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "requires": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0",
+        "resolve-url": "^0.2.1",
+        "source-map-url": "^0.4.0",
+        "urix": "^0.1.0"
+      }
+    },
     "source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -28115,6 +28654,11 @@
         }
       }
     },
+    "source-map-url": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
+    },
     "split-on-first": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
@@ -28861,6 +29405,11 @@
         "punycode": "^2.1.0"
       }
     },
+    "urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg=="
+    },
     "url-loader": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",

package.json

@@ -15,9 +15,10 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "axios": "^1.7.9",
     "gatsby": "^5.13.3",
-    "gatsby-plugin-sass": "^3.2.0",
+    "gatsby-plugin-sass": "^6.14.0",
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^7.1.5",

src/App.js

@@ -2,11 +2,13 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 
-import LoginPage from './pages/user/login';
+import LoginPage from './pages/auth/login';
+import RegisterPage from './pages/auth/register';
+import DashboardPage from './pages/dashboard';
+import LandingPage from './pages/landing';
 
 import FormLogin from './pages/FormLogin';
 import FormRegister from './pages/FormRegister';
-import LandingPage from './pages/Landing';
 import FormModels from './pages/FormModels';
 import FormRenders from './pages/FormRenders';
 import FormAi from './pages/FormAi';
@@ -24,6 +26,9 @@ function App() {
         <Link to="/landing" style={{ marginRight: '10px' }}>
           Offer
         </Link>
+        <Link to="/dashboard" style={{ marginRight: '10px' }}>
+          Dashboard
+        </Link>
         <Link to="/models" style={{ marginRight: '10px' }}>
           Models
         </Link>
@@ -36,10 +41,11 @@ function App() {
       </nav>
 
       <Routes>
-        <Route path="/" element={<FormLogin />} />
+        <Route path="/" element={<LoginPage />} />
         <Route path="/login" element={<LoginPage />} />
-        <Route path="/register" element={<FormRegister />} />
+        <Route path="/register" element={<RegisterPage />} />
         <Route path="/landing" element={<LandingPage />} />
+        <Route path="/dashboard/*" element={<DashboardPage />} />
         <Route path="/models" element={<FormModels />} />
         <Route path="/renders" element={<FormRenders />} />
         <Route path="/ai-tasks" element={<FormAi />} />

src/components/forms/listGenerator.js

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+
+/**
+ * Generic List Generator
+ * 
+ * @param {Array} data - Array of items to display.
+ * @param {ReactElement|Function} create_component - Shown when user clicks "Create +".
+ * @param {ReactElement|Function} update_component - Shown when user clicks "Update".
+ * @param {Function} delete_action - Called when user clicks "Delete".
+ */
+export const ListGenerator = ({
+  data = [],
+  create_component = null,
+  update_component = null,
+  delete_action = null,
+}) => {
+
+  const columns = data.length > 0 ? Object.keys(data[0]) : [];
+
+  var buttons = 0
+
+  if(create_component !== null) {
+    buttons++;
+  }
+  if(update_component !== null) {
+    buttons++;
+  }
+  if(delete_action !== null) {
+    buttons++;
+  }
+
+  const columns_count = 100 / (columns.length + buttons);
+
+  // Controls whether the "create" form is visible
+  const [createVisible, setCreateVisible] = useState(false);
+
+  // Track which item is being updated (store an ID or index, or null if none)
+  const [itemBeingUpdated, setItemBeingUpdated] = useState(null);
+
+  // Toggle the "create" form
+  const handleToggleCreate = () => {
+    setCreateVisible((prev) => !prev);
+    // If user opens the create form, you might also want to close any update forms
+    setItemBeingUpdated(null);
+  };
+
+  // Toggle update form for a specific item
+  const handleToggleUpdate = (itemId) => {
+    setItemBeingUpdated((prev) => (prev === itemId ? null : itemId));
+    // Also close create if it's open
+    setCreateVisible(false);
+  };
+
+  // Handle delete
+  const handleDelete = (item) => {
+    if (typeof delete_action === 'function') {
+      delete_action(item);
+    }
+  };
+
+  // Helper to render a component if it’s a function or a React element
+  const renderComponent = (component, props = {}) => {
+    // If it's a function, call it
+    if (typeof component === 'function') {
+      return component(props);
+    }
+    // If it's a React element, clone it to pass in new props (optional)
+    return React.cloneElement(component, props);
+  };
+
+  return (
+    <div className="list-generator-container">
+
+      {create_component && (
+        <div className="create-section">
+          <button onClick={handleToggleCreate}>
+            {createVisible ? 'Close' : 'Create +'}
+          </button>
+          {createVisible && (
+            <div className="create-form">
+              {renderComponent(create_component)}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="items-columns">
+        {
+            columns.map( 
+                (column) => (
+                
+                    <div 
+                      className="item-column-row" 
+                      style={{
+                        "width": columns_count + "%",
+                      }}
+                    >
+                        {column.toUpperCase()}
+                    </div>
+
+                )
+            )
+        } 
+      </div>
+
+      <div className="items-list">
+
+        {data.map((item) => (
+
+          <div key={item.id} className="item-row">
+
+            {
+                Object.values(item).map((value) => (
+                        <div 
+                          className="item-info"
+                          style={{
+                            "width": columns_count + "%",
+                          }}
+                        >
+                            {value}
+                        </div>
+                    )  
+                )
+            }
+
+            {/* UPDATE BUTTON & FORM */}
+            {update_component && (
+              <>
+                <button
+                  className="update-button" 
+                  onClick={() => handleToggleUpdate(item.id)}
+                >
+                  {itemBeingUpdated === item.id ? 'Close' : 'Update'}
+                </button>
+                {itemBeingUpdated === item.id && (
+                  <div className="update-form">
+                    {renderComponent(update_component, { item })}
+                  </div>
+                )}
+              </>
+            )}
+
+            {/* DELETE BUTTON */}
+            {delete_action && (
+              <button
+                className="delete-button"
+                onClick={() => handleDelete(item)}
+                style={{ marginLeft: '8px' }}
+              >
+                Delete
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+
+    </div>
+  );
+};

src/components/navbar.js

@@ -14,11 +14,11 @@ const NavBarComponent = () => {
                         <SmallCubeComponent />
                     </div>
                 </div>
-                <div className="content">
+                {/* <div className="content">
                     <div className="section">
                         <h4>Menu |||</h4>
                     </div>
-                </div>
+                </div> */}
             </div>
         </div>
     )

src/pages/auth/register.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import '../../styles/general.scss';
+
+import LargeCubeComponent from '../../components/largeCube.js';
+import UserRegisterForm from '../../components/forms/user_auth/userRegister.js';
+import FootComponent from '../../components/foot.js';
+import NavBarComponent from '../../components/navbar.js';
+
+const RegisterPage = () => {
+    return (
+    <>
+        <NavBarComponent />
+        <div className="register-container" style={{"display": "flex"}}>
+            <main className="main-content">
+                <div style={{"padding-left": "200px"}}>
+                    <UserRegisterForm />
+                </div>
+            </main>
+            <main className="main-content">
+                <div style={{"padding-right": "200px"}}>
+                    <LargeCubeComponent />
+                </div>
+            </main>
+        </div>
+        <FootComponent />
+    </>
+    )
+}
+
+
+export default RegisterPage

src/pages/dashboard.js

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import '../styles/general.scss';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
+import FootComponent from '../components/foot.js';
+import NavBarComponent from '../components/navbar.js';
+
+import ModelsDashboard from './dashboards/models.js';
+
+const DashboardPage = () => {
+
+    const icons_size = "fa-2x"
+
+    return (
+    <>
+        <NavBarComponent />
+        <div className="dashboard-container" style={{"display": "flex"}}>   
+            <main className="dashboard-content">
+                <ModelsDashboard/>
+            </main>
+            <main className="large-menu-content">
+                <p>Servers</p>
+                <ol>
+                    <li>
+                        <i className={"fas " + icons_size + " fa-server"}></i> {/* fa-microchip */}
+                        <p>Dashboard</p>
+                    </li>
+                </ol>
+                <p>Rendering</p>
+                <ol>
+                    <li>
+                        <i className={"fas " + icons_size + " fa-cube"}></i>
+                        <p>3D Models</p>
+                    </li>
+                    <li>
+                        <i className={"fas " + icons_size + " fa-paint-brush"}></i>
+                        <p>Rendered Materials</p>
+                    </li>
+                </ol>
+                <p>AI Training</p>
+                <ol>
+                    <li>
+                        <i className={"fas " + icons_size + " fa-robot"}></i>
+                        <p>AI Models</p>
+                    </li>
+                </ol>
+                <p>User</p>
+                <ol>
+                    <li>
+                        <i className={"fas " + icons_size + " fa-user-cog"}></i>
+                        <p>Settings</p>
+                    </li>
+                    <li>
+                        <i className={"fas " + icons_size + " fa-sign-out-alt"}></i>
+                        <p>Log Out</p>
+                    </li>
+                </ol>
+            </main>
+        </div>
+        <FootComponent />
+    </>
+    )
+}
+
+
+export default DashboardPage

src/pages/dashboards/models.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+import { ListGenerator } from '../../components/forms/listGenerator';
+
+const ModelsDashboard = () => {
+
+    const [items, setItems] = useState([
+        { id: 0, name: 'orc.blend' },
+        { id: 1, name: 'palladin.blend' },
+    ]);
+
+    return (
+        <>
+            <div className="list-container">
+                <ListGenerator
+                    data={items}
+                />
+                <div className="element-details">
+
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default ModelsDashboard

src/styles/general.scss

@@ -1,3 +1,5 @@
+// colors
+
 $first-color: rgba(0, 90, 25, 1);
 $secondary-color: white;
 $third-color: #242b2f;
@@ -17,6 +19,14 @@ $border-color: $first-color;
 $input-background: #222;
 $font-family-default: neue-haas-unica, sans-serif;
 
+// sizes
+
+$navbar-height: 110px;
+$footer-height: 300px;
+$content-container-height: calc(100vh - 300px - 110px);
+$content-container-height-without-footer: calc(100vh - 110px);
+
+//definitions
 
 body, html {
     margin: 0 auto;
@@ -46,6 +56,79 @@ body, html {
     }
   }
 
+  .dashboard-container {
+    height: $content-container-height;
+    width: 100%;
+    background-color: $header-background;
+    display: flex;
+
+    .large-menu-content {
+      display: block;
+      height: 100%;
+      width: 300px;
+      color: $secondary-color;
+      background: $form-background;
+
+      p {
+        font-weight: bold;
+        font-size: larger;
+        text-align: left;
+        margin-left: 20px;
+      }
+
+      ol {
+        width: 100%;
+        padding: 0px;
+        list-style-type: none;
+
+        li {
+          display: flex;
+          width: 100%;
+          padding-top: 15px;
+          padding-bottom: 15px;
+          cursor:pointer;
+          transition-duration: 0.2s;
+
+          p {
+            height: 13px;
+            padding-top: 7px;
+            margin-top: 0px;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            font-size: medium;
+            font-weight: bold;
+            text-align: left;
+          }
+
+          i {
+            color: $first-color;
+            height: 33px;
+            width: 33px;
+            margin-right: 30px;
+            margin-left: 30px;
+            transition-duration: 0.2s;
+          }
+  
+          &:hover {
+            background-color: $first-color;
+
+            i {
+              color: $form-background; // $secondary-color;
+            }
+          }
+        }
+      }
+    }
+
+    .dashboard-content {
+        height: 100%;
+        width: calc(100vw - 300px);
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+  }
+
   .landing-container {
     display: flex;
     flex-direction: column;
@@ -133,6 +216,7 @@ body, html {
     padding-top: 15%;
     padding-bottom: 12%;
     width: 50%;
+    //height: $content-container-height;
     align-items: center;
     justify-content: space-evenly;
   }
@@ -147,6 +231,65 @@ body, html {
     }
   }
 
+  .list-container {
+    width: 95%;
+    height: 100%;
+    margin: 2.5%;
+    background-color: $form-background;
+    color: $secondary-color;
+
+    .list-generator-container {
+      width: 100%;
+      height: 50%;
+
+      .items-columns {
+        display: flex;
+        align-items: center;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        width: 100%;
+        height: 10px;
+        text-align: center;
+
+        .item-column-row {
+          font-weight: bolder;
+          height: 10px;
+          margin-top: 5px;
+          margin-bottom: 5px;
+        }
+      }
+
+      .items-list {
+        .item-row {
+          display: flex;
+          align-items: center;
+          margin-top: 10px;
+          margin-bottom: 10px;
+
+          .item-info {
+            font-weight: bold;
+            margin-top: 15px;
+            margin-bottom: 15px;
+          }
+        }
+
+        .update-button {
+
+        }
+
+        .delete-button {
+
+        }
+      }
+
+    }
+
+    .element-details {
+      width: 100%;
+      height: 50%;
+    }
+  }
+
   .form {
     background: $form-background;
     padding: 50px;
@@ -265,6 +408,7 @@ body, html {
 
   footer {
     width: 70%;
+    height: $footer-height - 40px;
     background: $form-background;
     text-align: left;
     padding: 20px 15%;
@@ -319,7 +463,8 @@ body, html {
 }
 
 .navbar {
-  position: fixed;
+  position: relative;
+  height: $navbar-height - 40px;
   width: 70%;
   background: $form-background;
   text-align: left;