feat(404): 🥅 404 - Error Page (Orbis Theme).

.vscode/settings.json

@@ -11,25 +11,25 @@
     "source.fixAll.eslint": "explicit"
   },
   "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#eefe86",
+    "activityBar.activeBackground": "#090ed0",
-    "activityBar.background": "#eefe86",
+    "activityBar.background": "#090ed0",
-    "activityBar.foreground": "#15202b",
+    "activityBar.foreground": "#e7e7e7",
-    "activityBar.inactiveForeground": "#15202b99",
+    "activityBar.inactiveForeground": "#e7e7e799",
-    "activityBarBadge.background": "#02a5be",
+    "activityBarBadge.background": "#f40b10",
     "activityBarBadge.foreground": "#e7e7e7",
-    "commandCenter.border": "#15202b99",
+    "commandCenter.border": "#e7e7e799",
-    "sash.hoverBorder": "#eefe86",
+    "sash.hoverBorder": "#090ed0",
-    "statusBar.background": "#e7fe53",
+    "statusBar.background": "#070b9f",
-    "statusBar.foreground": "#15202b",
+    "statusBar.foreground": "#e7e7e7",
-    "statusBarItem.hoverBackground": "#e0fe20",
+    "statusBarItem.hoverBackground": "#090ed0",
-    "statusBarItem.remoteBackground": "#e7fe53",
+    "statusBarItem.remoteBackground": "#070b9f",
-    "statusBarItem.remoteForeground": "#15202b",
+    "statusBarItem.remoteForeground": "#e7e7e7",
-    "titleBar.activeBackground": "#e7fe53",
+    "titleBar.activeBackground": "#070b9f",
-    "titleBar.activeForeground": "#15202b",
+    "titleBar.activeForeground": "#e7e7e7",
-    "titleBar.inactiveBackground": "#e7fe5399",
+    "titleBar.inactiveBackground": "#070b9f99",
-    "titleBar.inactiveForeground": "#15202b99"
+    "titleBar.inactiveForeground": "#e7e7e799"
   },
-  "peacock.color": "#e7fe53",
+  "peacock.color": "#070b9f",
   "cSpell.words": [
     "orbis",
     "Orbis"

Dockerfile

@@ -0,0 +1,39 @@
+## Build image and name it 'custom-next'
+# docker build -t custom-next .
+
+## Run container and name it 'OrbisTemplate'. Webpage is localhost:3000
+# docker run -it --rm -dp 3000:3000 --name OrbisTemplate custom-next
+
+## Connect to container
+# docker exec -it OrbisTemplate sh
+
+## Stop docker container
+# docker stop OrbisTemplate
+
+## All together
+# docker stop OrbisTemplate & docker image rm -f custom-next & docker build -t custom-next . && docker run -it --rm -dp 3000:3000 --name OrbisTemplate custom-next && docker exec -it OrbisTemplate sh
+
+# Start Dockerfile
+ARG VERSION=18.16.0-alpine3.17
+ARG DIR=OrbisTemplate
+
+FROM node:${VERSION} as builder
+# redeclare ARG because ARG not in build environment
+ARG DIR 
+WORKDIR /${DIR}
+COPY . .
+RUN apk update
+RUN apk add git
+RUN yarn
+RUN NODE_ENV=production yarn build
+
+FROM node:${VERSION} as runner
+# redeclare ARG because ARG not in build environment
+ARG DIR
+WORKDIR /${DIR}
+COPY --from=builder /${DIR}/public ./public
+COPY --from=builder /${DIR}/.next/standalone .
+COPY --from=builder /${DIR}/.next/static ./.next/static
+
+EXPOSE 3000
+ENTRYPOINT ["node", "server.js"]

README.md

@@ -1,40 +1,3 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# next-template
 
-## Getting Started
+Next.js template with common dependencies and configurations.
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

config/default.json

@@ -8,7 +8,7 @@
     "appTitle": "OrbisTemplate",
     "idApp": "orbistemplate",
     "publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----",
-    "maxMbUpload": 4,
+    "maxMbUpload": "4",
     "defaultLocale": "es"
   }
 }

config/gt.json

@@ -8,7 +8,7 @@
     "appTitle": "OrbisTemplate",
     "idApp": "orbistemplate",
     "publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----",
-    "maxMbUpload": 4,
+    "maxMbUpload": "4",
     "defaultLocale": "es"
   }
 }

config/testing.json

@@ -8,7 +8,7 @@
     "appTitle": "OrbisTemplate",
     "idApp": "orbistemplate",
     "publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----",
-    "maxMbUpload": 4,
+    "maxMbUpload": "4",
     "defaultLocale": "es"
   }
 }

config/www.json

@@ -8,7 +8,7 @@
     "appTitle": "OrbisTemplate",
     "idApp": "orbistemplate",
     "publicKey":"-----BEGIN PUBLIC KEY----- MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA205Ag8sXnqc0XsPa4NiS tZSca+3afzgkMdpotsIOphZxketyBLs4QOKYsAHGw51R68fbx5oLmDCn7a4n4ZtT u39ksIQg1lwQ3y7pqfb9BbYZKhtYigL8URUVrsQ5EuZxk9BOHHez59gizNzM+Vp0 zlnOuJVZdVdp3d+d1z+oE3ejsdXLGFEjAblo8GNQxTgxOXJk2VQ+4yQX5QN+mEYS FQpJqP9z5Y+/SVXlD3e943XjuNOFZwSG2uVkW3tuKsvGBOA38xLKydY9hb5y0WdM E0/hnOvB6gfIOovSmdTonDF3224iGQJa8RXss3SN+6NeLnhJQYGBri6U4sa0lNR/ 5vip/VCzaHliYERTztT2NgW6WUZAEW05gjN6Qid2eB7lKs/ND3BQkDHUKqouNDO1 xookeBqSg7fT/l3D6D7QzJE5Jc+bdZUDrr2MeYXehzbGg8sUBXJZbOu6GUkDSM5Y C8r/SnZhhA0ancQZZW/t4TmFNiLiGrqNS4uJf4UHKKsmXHCKDKB/bdlp60lTl6YF ocGzW6tBPdDFD7S5UTPqg//ob6mvuPFJ0E6t8Le60P+UiZIdmINe9dX9darS0VNH +eCVLj1J7iQNyXrelD5sE7xhAvQ3+jp3Q4mXWVgOZi1Uh/+/iNXDxrAtzKipYAOg zuyH0DDtO3E4JSiv4qr8o+UCAwEAAQ== -----END PUBLIC KEY-----",
-    "maxMbUpload": 4,
+    "maxMbUpload": "4",
     "defaultLocale": "es"
   }
 }

next.config.js

@@ -2,7 +2,6 @@ const config = require('config')
 const constants = config.get('constants')
 
 /** @type {import('next').NextConfig} */
-
 const rewrites = async () => {
   return [
     {

package.json

@@ -9,7 +9,6 @@
   "keywords": [
     "operations",
     "orbis",
-    "smart",
     "route",
     "sales",
     "delivery"
@@ -22,7 +21,11 @@
     "build": "next build",
     "generate": "next build && next export",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "lint:fix": "next lint --fix"
+  },
+  "resolutions": {
+    "react": "18.2.0"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
@@ -42,19 +45,16 @@
     "vComponents": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-components.git"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-n": "^16.5.0",
+    "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-tailwindcss": "^3.13.0",
+    "eslint-plugin-tailwindcss": "^3.14.0",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "typescript": "^5.3.3"
   }
 }

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
+    autoprefixer: {}
-  },
+  }
 }

public/images/404/earth.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 139.64 139.64"><defs><style>.cls-1{fill:#5bcbf5;}.cls-2{fill:#fff;opacity:0.1;}.cls-3{clip-path:url(#clip-path);}.cls-4{fill:#257793;}.cls-5{opacity:0.2;}</style><clipPath id="clip-path"><circle class="cls-1" cx="69.82" cy="69.82" r="60.9" transform="translate(-28.55 61.3) rotate(-40.05)"/></clipPath></defs><title>earth</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="earth"><circle class="cls-2" cx="69.82" cy="69.82" r="69.82" transform="translate(-28.91 70.93) rotate(-45.64)"/><circle class="cls-1" cx="69.82" cy="69.82" r="60.9" transform="translate(-28.55 61.3) rotate(-40.05)"/><g class="cls-3"><path class="cls-4" d="M2.63,74.4A52.68,52.68,0,0,1,20.82,34.79s-1.28,4,6.25,2.31,6.3,1.65,6,3.43-4.4.82-7.1.17S15.78,41.92,13,46.8s-5.26,8.9-3.54,9.74,6.33-7.66,9-9.75S21.7,47,20.88,51s.88,6.48,4.68,5.68,7.06-3.38,7-4.85-6.84-5.3.1-7.08S44.86,40.9,44,47.92s-2,15-.16,17.37,5,2.89,4.28,3.78-2.44.5-3.69.21-4.13,1.71-5,3.32-1.6,5.64,1.36,6.31,4.07-1.78,6.66-2.54,7.14,1,7.43,2-2.1,1.48-5.57.09-4.45,2.37-6.53,3.42-3.6,1.88-7.91.37-8.57.73-11.51.25C14.89,81.2,11.94,77.2,9.6,76.24a47.8,47.8,0,0,0-7-1.84Zm0,0"/><path class="cls-4" d="M57.77,68.9s4.64-3.28,8.39-3.28,4.65.46,8.54-1.67,6.92-1.52,7.88,3.9,2.05,14.45,1.68,17.77-1.41,6.72.21,10.31,2.81,5.55,5.66,5.08c0,0,1.11,3.29-3.89,2.13s-6.36-6.46-7.79-9-5.85-9.9-7.92-10.85-6.21.9-9.91-1.64S52.88,71.46,57.77,68.9Zm0,0"/><path class="cls-4" d="M106.07,17.4c1.23,4.3-2.64,5.57-6.63,8.75-5.12,4.08-10.2,3.65-15.86,6-5.25,2.22-7.16,8.17-6.72,13.48.33,3.94,2.09,12,6.18,13.43a15.55,15.55,0,0,0,6.17.48,57.4,57.4,0,0,0,8.91-1c3.36-.73,6.88-2.05,10.12-.89,2.67,1,4.5,3.41,5.84,5.9C117.72,70.39,116,79.75,125,82.09a11.6,11.6,0,0,0,9.61-1.62,75.57,75.57,0,0,0-28.5-63.07Z"/><path class="cls-4" d="M46.65,13.42a7.4,7.4,0,0,0-1.29,3.41c-.07,2.56,2.44,4.54,4,6.18a14.68,14.68,0,0,0,1.81,1.61c8.25,6.11,13-3.14,20-4.63,4.45-1,9,1.43,13.55,1,5.14-.49,7.15-5.71,7.53-10.86q-3.75-2.91-7.75-5.49c-12.81-8.26-30-4.51-37.78,8.61Z"/><path class="cls-4" d="M43.49,125.16a41.14,41.14,0,0,0,22.75,5.65s-1.78-3.78-3.91-4.52-3.6,1.42-4.86.37,1.51-1.65-1-5.85-8.19-6.18-10.29-3.47-2.71,7.82-2.71,7.82Z"/><path class="cls-4" d="M108.53,88.17c1.31.3,2.08-2.07,4.54,1.18s1.59,4.76,3.57,5.77,1,3.73.51,3.85-2.16.74-3.06,1.1-3.37,1.08-4.08-.07-.38-2.07-2-3.21-2-.64-3.28-.73-1.35-1.43-2.7-.3-4,3.82-4.24,2.12a6.14,6.14,0,0,1,.62-3.9c.62-1.57-.56.14.62-1.57s.47-1.71,2-2.29S108.53,88.17,108.53,88.17Z"/><path class="cls-5" d="M123.42,39.39A80.86,80.86,0,0,1,94.54,100.8c-16.43,13.81-40.15,20.53-60,19.44a55.56,55.56,0,0,0,4.67,3,61.5,61.5,0,0,0,84.22-83.87Z"/></g></g></g></g></svg>

public/images/404/overlay_stars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1200.79"><defs><style>.cls-1{fill:#fff;}.cls-1,.cls-2{opacity:0.3;}.cls-2,.cls-3{fill:#66baf2;}.cls-3{opacity:0.62;}</style></defs><title>overlay_stars_1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="stars"><circle class="cls-1" cx="683.82" cy="963.26" r="4.06"/><circle class="cls-1" cx="1069.31" cy="912.12" r="4.06"/><circle class="cls-2" cx="294.27" cy="453.34" r="4.06"/><circle class="cls-1" cx="1275.94" cy="40.66" r="4.06"/><circle class="cls-1" cx="1215.06" cy="218.57" r="4.06"/><circle class="cls-1" cx="652.22" cy="28.49" r="4.06"/><circle class="cls-1" cx="777.57" cy="241.13" r="4.06"/><circle class="cls-1" cx="332.83" cy="4.06" r="4.06"/><circle class="cls-1" cx="4.06" cy="260.78" r="4.06"/><circle class="cls-1" cx="166.41" cy="107.25" r="4.06"/><circle class="cls-1" cx="1275.94" cy="954.96" r="4.06"/><circle class="cls-1" cx="1018.93" cy="77.2" r="4.06"/><circle class="cls-3" cx="484.62" cy="157.49" r="4.06"/><circle class="cls-1" cx="1259.71" cy="1196.73" r="4.06"/><circle class="cls-1" cx="80.59" cy="434.82" r="4.06"/><circle class="cls-2" cx="1241.44" cy="414.63" r="4.06"/><circle class="cls-1" cx="855.41" cy="111.31" r="4.06"/><circle class="cls-1" cx="64.36" cy="846.09" r="4.06"/><circle class="cls-1" cx="131.04" cy="1186.11" r="4.06"/><circle class="cls-1" cx="331.67" cy="1023.77" r="4.06"/><circle class="cls-2" cx="1179.77" cy="625.84" r="3.56"/><circle class="cls-1" cx="250.33" cy="701.86" r="3.56"/><circle class="cls-3" cx="349.59" cy="908.56" r="3.56"/><circle class="cls-1" cx="639.33" cy="647.86" r="3.56"/><circle class="cls-1" cx="824.33" cy="752.86" r="3.56"/></g></g></g></svg>

public/images/404/rocket.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.83 41.92"><defs><style>.cls-1{fill:#5bcbf5;}.cls-2{fill:#ffcb39;}.cls-3{fill:#ff9600;}.cls-4{fill:#007bbd;}.cls-5{fill:#c7f4f9;}.cls-6{fill:#5c546a;}.cls-7{fill:#e87e04;}</style></defs><title>rocket_1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="rocket"><path class="cls-1" d="M16.31,41.57a7.89,7.89,0,0,0,1.91-1,9.68,9.68,0,0,0-6-17.66A10,10,0,0,0,7.3,24.57,10.1,10.1,0,0,0,5.67,26a13.83,13.83,0,1,1,26.81,6.43,13.67,13.67,0,0,1-5.35,7A13.41,13.41,0,0,1,16.31,41.57Z"/><path class="cls-2" d="M57.81,2.35a.92.92,0,0,0-.53-.78A21.75,21.75,0,0,0,36.75,3.9C32.63,6.7,22.38,15.2,12.89,23.65a3.69,3.69,0,0,0-.59,4.82l4.05,5.94a3.69,3.69,0,0,0,4.7,1.2c11.33-5.74,23-12.19,27.1-15A21.75,21.75,0,0,0,57.81,2.35Zm0,0"/><path class="cls-3" d="M14.33,31.44l-2-3a3.69,3.69,0,0,1,.59-4.82C22.38,15.2,32.63,6.7,36.75,3.9A21.75,21.75,0,0,1,57.28,1.57a.92.92,0,0,1,.37.32h0Zm0,0"/><path class="cls-1" d="M44.8,17.34a5.52,5.52,0,1,1,1.45-7.67,5.52,5.52,0,0,1-1.45,7.67Zm0,0"/><path class="cls-1" d="M57.28,1.57A21.48,21.48,0,0,0,46.46.17l8.71,12.77A21.48,21.48,0,0,0,57.81,2.35a.92.92,0,0,0-.53-.78Zm0,0"/><path class="cls-4" d="M57.66,1.89a.92.92,0,0,0-.38-.32A21.48,21.48,0,0,0,46.46.17l4.35,6.38Z"/><path class="cls-5" d="M44.8,17.34a5.52,5.52,0,0,0,1.45-7.67l-9.12,6.22a5.52,5.52,0,0,0,7.67,1.45Zm0,0"/><path class="cls-6" d="M36.37,16.41a6.44,6.44,0,1,1,9,1.69,6.45,6.45,0,0,1-9-1.69Zm9.12-6.22a4.6,4.6,0,1,0-1.21,6.39,4.61,4.61,0,0,0,1.21-6.39Zm0,0"/><g id="flame"><path class="cls-7" d="M11.39,38.49C7.39,41.21,0,41.22,0,41.22s2.33-6.63,6.7-9.61a4.16,4.16,0,0,1,4.69,6.88Z"/><path class="cls-3" d="M11.75,36.54c-2.65,1.81-7.56,1.81-7.56,1.81S5.74,34,8.64,32a2.76,2.76,0,0,1,3.12,4.57Z"/><path class="cls-2" d="M11.72,35.37c-1.61,1.1-4.61,1.1-4.61,1.1a9,9,0,0,1,2.71-3.89,1.68,1.68,0,0,1,1.9,2.78Z"/></g></g></g></g></svg>

src/components/Login/FormLogin.jsx

@@ -94,7 +94,7 @@ const FormLogin = ({ onLogin }) => {
               onClick={(e) => { e.stopPropagation() }}
               disabled
             >
-              <UserIcon className="h-5 w-5" />
+              <UserIcon className="size-5" />
             </button>
           </div>
         </div>
@@ -118,8 +118,8 @@ const FormLogin = ({ onLogin }) => {
               className={'via-append-input'}
               onClick={(e) => { e.stopPropagation(); e.preventDefault(); setViewPassword(!viewPassword) }}
             >
-              { viewPassword === false && <EyeIcon className="h-5 w-5" /> }
+              { viewPassword === false && <EyeIcon className="size-5" /> }
-              { viewPassword === true && <EyeSlashIcon className="h-5 w-5" /> }
+              { viewPassword === true && <EyeSlashIcon className="size-5" /> }
             </button>
           </div>
         </div>
@@ -127,9 +127,9 @@ const FormLogin = ({ onLogin }) => {
           <button
             type="submit"
             disabled={!isInputValid}
-            className={`${'via-button'} ${(isInputValid ? 'bg-cyan-900' : 'bg-red-400')} mx-0 w-full justify-center`}
+            className={`${'via-button'} ${(isInputValid ? '!bg-cyan-900' : 'bg-red-400')} mx-0 w-full justify-center shadow-md`}
           >
-            <KeyIcon className="h-5 w-5 pr-2" />
+            <KeyIcon className="size-5 pr-2" />
             { i18n.t('login.connect') }
           </button>
         </div>

src/components/widgets/UserOptionsMenu.jsx

@@ -6,55 +6,55 @@ import { TbColorPicker, TbLanguage } from 'react-icons/tb'
 const UserOptionsMenu = ({ setPreferences, theme, i18n }) => {
   return (
     <>
-      <div className="flex items-center justify-center text-gray-900">
+      <div className="flex items-center justify-center text-gray-900 dark:text-white">
-        <TbColorPicker className="mr-2 h-5 w-5" aria-hidden="true" />
+        <TbColorPicker className="mr-2 size-5" aria-hidden="true" />
-        Tema
+        {i18n.t('common.theme') || 'Tema'}
       </div>
-      <div className="mb-4 grid grid-cols-2 gap-2 p-1">
+      <div className="mb-2 grid grid-cols-2 gap-2 p-1">
         <Menu.Item>
           <button
             className={`${
               theme === 'light'
-                ? 'bg-slate-700 text-white dark:bg-slate-800'
+                ? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
-                : 'bg-gray-200 text-gray-900 transition-colors duration-[350ms] ease-in-out hover:bg-gray-300'
+                : 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
             } group flex w-full items-center rounded-md p-2 text-sm`}
             onClick={async () => {
               setPreferences('light')
             }}
           >
-            <MdOutlineLightMode className="mr-2 h-5 w-5" aria-hidden="true" />
+            <MdOutlineLightMode className="mr-2 size-5" aria-hidden="true" />
-              Claro
+            {i18n.t('common.themeLight') || 'Claro'}
           </button>
         </Menu.Item>
         <Menu.Item>
           <button
             className={`${
               theme === 'dark'
-                ? 'bg-slate-700 text-white dark:bg-slate-800'
+                ? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
-                : 'bg-gray-200 text-gray-900 transition-colors duration-[350ms] ease-in-out hover:bg-gray-300'
+                : 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
             } group flex w-full items-center rounded-md p-2 text-sm`}
             onClick={() => {
               setPreferences('dark')
             }}
           >
-            <MdDarkMode className="mr-2 h-5 w-5" aria-hidden="true" />
+            <MdDarkMode className="mr-2 size-5" aria-hidden="true" />
-              Oscuro
+            {i18n.t('common.themeDark') || 'Oscuro'}
           </button>
         </Menu.Item>
       </div>
 
-      <div className="flex items-center justify-center text-gray-900">
+      <div className="flex items-center justify-center text-gray-900 dark:text-white">
-        <TbLanguage className="mr-2 h-5 w-5" aria-hidden="true" />
+        <TbLanguage className="mr-2 size-5" aria-hidden="true" />
-        Idioma
+        {i18n.t('common.language') || 'Idioma'}
       </div>
 
-      <div className="grid grid-cols-2 gap-2 p-1">
+      <div className="mb-2 grid grid-cols-2 gap-2 p-1">
         <Menu.Item>
           <button
             className={`${
               i18n.activeLocale === 'es'
-                ? 'bg-slate-700 text-white dark:bg-slate-800'
+                ? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
-                : 'bg-gray-200 text-gray-900 transition-colors duration-[350ms] ease-in-out hover:bg-gray-300'
+                : 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
             } group flex w-full items-center rounded-md p-2 text-sm`}
             onClick={async () => {
               setPreferences('es')
@@ -64,26 +64,26 @@ const UserOptionsMenu = ({ setPreferences, theme, i18n }) => {
               i18n.activeLocale === 'es'
                 ? (
                   <MdOutlineCheckBox
-                    className="mr-2 h-5 w-5"
+                    className="mr-2 size-5"
                     aria-hidden="true"
                   />
                 )
                 : (
                   <MdOutlineCheckBoxOutlineBlank
-                    className="mr-2 h-5 w-5"
+                    className="mr-2 size-5"
                     aria-hidden="true"
                   />
                 )
             }
-              Español
+            {i18n.t('common.languageSpanish') || 'Español'}
           </button>
         </Menu.Item>
         <Menu.Item>
           <button
             className={`${
               i18n.activeLocale === 'en'
-                ? 'bg-slate-700 text-white dark:bg-slate-800'
+                ? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
-                : 'bg-gray-200 text-gray-900 transition-colors duration-[350ms] ease-in-out hover:bg-gray-300'
+                : 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
             } group flex w-full items-center rounded-md p-2 text-sm`}
             onClick={() => {
               setPreferences('en')
@@ -93,18 +93,18 @@ const UserOptionsMenu = ({ setPreferences, theme, i18n }) => {
               i18n.activeLocale === 'en'
                 ? (
                   <MdOutlineCheckBox
-                    className="mr-2 h-5 w-5"
+                    className="mr-2 size-5"
                     aria-hidden="true"
                   />
                 )
                 : (
                   <MdOutlineCheckBoxOutlineBlank
-                    className='mr-2 h-5 w-5'
+                    className='mr-2 size-5'
                     aria-hidden='true'
                   />
                 )
             }
-              Ingles
+            {i18n.t('common.languageEnglish') || 'Inglés'}
           </button>
         </Menu.Item>
       </div>

src/helper/clientApi.js

@@ -23,22 +23,27 @@ const encryptRsa = function (obj) {
 }
 
 const callWs = async (uri, json) => {
-  // Send the form data to our API and get a response.
+  try {
-  const response = await fetch(uri, {
+    // Send the form data to our API and get a response.
+    const response = await fetch(uri, {
     // Body of the request is the JSON data we created above.
-    body: JSON.stringify(json),
+      body: JSON.stringify(json),
-    // Tell the server we're sending JSON.
+      // Tell the server we're sending JSON.
-    headers: {
+      headers: {
-      'Content-Type': 'application/json'
+        'Content-Type': 'application/json'
-    },
+      },
-    // The method is POST because we are sending data.
+      // The method is POST because we are sending data.
-    method: 'POST'
+      method: 'POST'
-  })
+    })
 
-  // Get the response data from server as JSON.
+    // Get the response data from server as JSON.
-  // If server returns the name submitted, that means the form works.
+    // If server returns the name submitted, that means the form works.
-  const result = await response.json()
+    const result = await response.json()
-  return result.data // return data rows
+    return result.data // return data rows
+  } catch (error) {
+    console.log('error', error)
+    return null
+  }
 }
 
 const callUpload = (fileToUpload) => {

src/layout/ResponsiveContainer.jsx

@@ -108,8 +108,7 @@ const ResponsiveContainer = ({ children }) => {
     setMenu([])
     if (token && token !== null) {
       const options = await execute('SPR_MENU_S', [token, 'BO', null])
-      console.log('options', options)
+      setMenu(options || [])
-      setMenu(options)
     }
     loading.stop()
   }

src/pages/404.jsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import presets from '@/utils/globalPresets'
+import Link from 'next/link'
+import Image from 'next/image'
+
+const generateStarStyle = () => {
+  const size = Math.random() * 3 + 1
+  return {
+    width: `${size}px`,
+    height: `${size}px`,
+    borderRadius: '50%',
+    background: 'white',
+    position: 'absolute',
+    top: `${Math.random() * 100}%`,
+    left: `${Math.random() * 100}%`,
+    animation: `blink ${Math.random() * 2 + 1}s infinite`
+  }
+}
+
+const NotFound = () => {
+  const stars = new Array(100).fill(0)
+
+  return (
+    <div className='relative z-10 -m-2 h-[90dvh] overflow-hidden bg-gradient-to-br from-purple-950 via-violet-950 to-blue-950'>
+      <div className="absolute inset-0 z-[10]">
+        {stars.map((_, index) => (
+          <div key={index} style={generateStarStyle()} />
+        ))}
+      </div>
+
+      <div className="relative z-[28] flex h-full flex-col justify-center bg-transparent text-center"
+        style={{
+          backgroundImage: `url(${process.env.publicPath}/images/404/overlay_stars.svg)`,
+          backgroundRepeat: 'repeat',
+          backgroundSize: 'contain',
+          backgroundPosition: 'left top'
+        }}
+      >
+        <h1 className="text-8xl font-extrabold tracking-widest text-violet-100">404</h1>
+        <p className="text-balance text-xl text-purple-200">Parece que te has desviado de la órbita...</p>
+        <p className="text-xl font-semibold text-purple-200">La página que buscas no existe.</p>
+        <Link href={`${presets.locations.welcome}`}
+          className="mt-5 inline-block">
+          <button className="rounded bg-blue-700 px-5 py-3 text-lg text-white transition duration-300 hover:bg-blue-800">
+            Navegar de Regreso
+          </button>
+        </Link>
+      </div>
+
+      <div className="">
+        <Image
+          style={{
+            zIndex: 39,
+            position: 'absolute',
+            transform: 'translateX(-50px)',
+            top: '75%',
+            pointerEvents: 'none',
+            animation: 'rocket-movement 200s linear infinite both running'
+          }}
+          src={`${process.env.publicPath}/images/404/rocket.svg`}
+          width={60}
+          height={60}
+          alt='rocket'
+        />
+        <div className="">
+          <Image className="absolute left-[15%] top-[20%] z-[35]"
+            src={`${process.env.publicPath}/images/404/earth.svg`}
+            width={100}
+            height={100}
+            alt='earth'
+          />
+          <Image
+            style={{
+              position: 'absolute',
+              top: '12%',
+              left: '25%',
+              animation: 'orbit 120s infinite linear both'
+            }}
+            src={`${process.env.publicPath}/images/404/moon.svg`}
+            width={80}
+            height={80}
+            alt='moon'
+          />
+        </div>
+        <div
+          style={{
+            zIndex: 20,
+            position: 'absolute',
+            top: '60%',
+            right: '20%',
+            willChange: 'transform',
+            animation: 'move-astronaut 50s infinite linear both alternate'
+          }}
+        >
+          <Image
+            style={{
+              animation: 'rotate-astronaut 200s infinite linear both alternate'
+            }}
+            src={`${process.env.publicPath}/images/404/astronaut.svg`}
+            width={140}
+            height={140}
+            alt='astronaut'
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default NotFound

src/pages/_app.jsx

@@ -2,10 +2,11 @@ import { RouteProvider } from '@/hooks/useRoute'
 import ResponsiveContainer from '@/layout/ResponsiveContainer'
 import LoadingProvider from '@/plugins/LoadingContext'
 import I18nProvider from '@/plugins/i18nContext'
-import '@/styles/globals.css'
 import Head from 'next/head'
+
+// Estilos globales
+import '@/styles/globals.css'
 import 'vComponents/styles/generated/output.css'
-import 'vComponents/styles/generated/bgColors.min.css'
 
 import { ToastContainer } from 'react-toastify'
 

src/pages/_error.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const Error = ({ statusCode }) => {
+  return (
+    <p>
+      {statusCode
+        ? `An error ${statusCode} occurred on server`
+        : 'An error occurred on client'}
+    </p>
+  )
+}
+
+Error.getInitialProps = ({ res, err }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  return { statusCode }
+}
+
+export default Error

src/pages/index.jsx

@@ -82,7 +82,6 @@ const LoginPage = () => {
     if (hasMounted) {
       getEnv()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasMounted])
 
   return (
@@ -91,7 +90,7 @@ const LoginPage = () => {
         {/* <!-- Tarjeta de Login --> */}
         <div className={'via-card'}>
           <div className={'via-login-header'}>
-            <div className={'h-64 w-64 shrink-0'}>
+            <div className={'size-64 shrink-0'}>
               <Image src={presets.images.logo} alt="logo" className={'via-login-logo'} width={100} height={100} />
             </div>
           </div>

src/plugins/LoadingContext.jsx

@@ -16,7 +16,7 @@ const LoadingProvider = ({ children }) => {
   }
 
   return (
-    <LoadingContext.Provider value={ loadingWrapper }>
+    <LoadingContext.Provider value={loadingWrapper}>
       { children }
       <LoadingSpinner loading={loading} image={presets.images.imageLoader} background={'backgroundLoader'} color={'colorLoader'} />
     </LoadingContext.Provider>

src/plugins/i18nContext.jsx

@@ -2,7 +2,6 @@ import { createContext, useState, useRef, useEffect } from 'react'
 import rosetta from 'rosetta'
 import { execute } from '@/helper/clientApi'
 import useHasMounted from '@/hooks/useHasMounted'
-// import environment from '@/utils/environment'
 
 const i18n = rosetta()
 const defaultLanguage = 'es'
@@ -37,19 +36,11 @@ const I18nProvider = ({ children, locale, dict }) => {
 
   const setLanguage = async () => {
     let msgs = {}
-    // const env = await environment.getEnvUser()
-    // const response = await execute('SPR_PROY_SESION_S', [env.token])
-    // if (response[0].status !== 'ERROR') {
-    //   const options = await execute('SPR_CATALOGOS_S', ['idioma', env.token])
-    //   locale = options[0].idioma
-    // } else {
-    //   locale = defaultLanguage
-    // }
     locale = defaultLanguage
     // si la app ya esta renderizada se cargan los textos
     if (hasMounted) {
       const i18nDb = await execute('SPR_I18N_T', [locale])
-      msgs = i18nDb.reduce((obj, elm) => {
+      msgs = i18nDb?.reduce((obj, elm) => {
         obj[elm.id_mensaje_padre] = { ...obj[elm.id_mensaje_padre], [elm.id_mensaje]: elm.mensaje }
         return obj
       }, {})

src/styles/additional-styles/404.css

@@ -0,0 +1,43 @@
+@-moz-keyframes rocket-movement { 100% {-moz-transform: translate(1200px,-600px);} }
+@-webkit-keyframes rocket-movement {100% {-webkit-transform: translate(1200px,-600px); } }
+@keyframes rocket-movement { 100% {transform: translate(1200px,-600px);} }
+@-moz-keyframes spin-earth { 100% { -moz-transform: rotate(-360deg); transition: transform 20s;  } }
+@-webkit-keyframes spin-earth { 100% { -webkit-transform: rotate(-360deg); transition: transform 20s;  } }
+@keyframes spin-earth{ 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); transition: transform 20s; } }
+
+@-moz-keyframes move-astronaut {
+    100% { -moz-transform: translate(-160px, -160px);}
+}
+@-webkit-keyframes move-astronaut {
+    100% { -webkit-transform: translate(-160px, -160px);}
+}
+@keyframes move-astronaut{
+    100% { -webkit-transform: translate(-160px, -160px); transform:translate(-160px, -160px); }
+}
+@-moz-keyframes rotate-astronaut {
+    100% { -moz-transform: rotate(-720deg);}
+}
+@-webkit-keyframes rotate-astronaut {
+    100% { -webkit-transform: rotate(-720deg);}
+}
+@keyframes rotate-astronaut{
+    100% { -webkit-transform: rotate(-720deg); transform:rotate(-720deg); }
+}
+
+@keyframes orbit {
+  0% {
+    transform: rotate(0deg) translateX(50px) rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg) translateX(50px) rotate(-360deg);
+  }
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

src/styles/component-styles/loading.css

@@ -3,7 +3,7 @@
 }
 
 .colorLoader {
-  @apply bg-sky-500;
+  @apply bg-theme-app-500 dark:bg-theme-app-700 !important;
 }
 
 .div_loading {

src/styles/component-styles/navbar.css

@@ -1,19 +1,19 @@
 .via-navbar {
-  @apply bg-white dark:bg-[#222222] border-slate-200 text-theme-app-500 dark:text-theme-app-50 font-semibold !important;
+  @apply bg-white dark:bg-[#222222] border-slate-200 text-theme-app-500 dark:text-theme-app-50 font-semibold transition-colors duration-350 ease-in-out !important;
 }
 
 .via-menu-btn-navbar {
-  @apply text-slate-600 hover:text-slate-900 !important;
+  @apply text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200 transition-colors duration-350 ease-in-out !important;
 }
 
 .via-user-menu-btn-navbar {
-  @apply bg-slate-700 text-white transition-colors duration-[350ms] ease-in-out !important;
+  @apply bg-slate-700 text-white transition-colors duration-350 ease-in-out !important;
 }
 
 .via-user-options-navbar {
-  @apply text-gray-900 bg-transparent transition-colors duration-[350ms] ease-in-out !important;
+  @apply text-gray-900 bg-transparent transition-colors duration-350 ease-in-out !important;
 }
 
 .via-user-options-selected-navbar {
-  @apply bg-slate-700 dark:bg-slate-800 text-white transition-colors duration-[350ms] ease-in-out !important;
+  @apply bg-slate-700 dark:bg-slate-800 text-white transition-colors duration-350 ease-in-out !important;
 }

src/styles/component-styles/sidebar.css

@@ -1,13 +1,13 @@
 .via-bg-sidebar {
-  @apply bg-theme-app-500 border border-theme-app-300 rounded-t-lg md:rounded-t-none md:rounded-b-lg md:rounded-none dark:border-theme-app-800 dark:from-theme-app-700 dark:to-theme-app-800 !important;
+  @apply bg-theme-app-500 border border-theme-app-300 rounded-t-lg md:rounded-t-none md:rounded-b-lg md:rounded-none dark:border-theme-app-800 dark:from-theme-app-700 dark:to-theme-app-800 transition-colors duration-350 ease-in-out !important;
 }
 
 .via-options-sidebar {
-  @apply text-theme-app-50 bg-transparent transition-colors duration-150 font-semibold hover:bg-theme-app-50 hover:text-gray-800 dark:text-theme-app-50 dark:hover:bg-theme-app-700 first-letter:uppercase !important;
+  @apply text-theme-app-50 bg-transparent transition-colors duration-150 font-semibold hover:bg-theme-app-50 hover:text-gray-800 dark:text-theme-app-50 dark:hover:bg-theme-app-200 first-letter:uppercase !important;
 }
 
 .via-sub-options-sidebar {
-  @apply text-white hover:bg-theme-app-100 transition-colors duration-150 font-semibold gap-x-1 hover:text-gray-800 dark:text-theme-app-50 dark:hover:bg-theme-app-800 !important;
+  @apply text-white hover:bg-theme-app-100 transition-colors duration-150 font-semibold gap-x-1 hover:text-gray-800 dark:text-theme-app-50 dark:hover:bg-theme-app-300 !important;
 }
 
 .via-drawer-count {
@@ -28,4 +28,12 @@
 
 .via-icons-sub-sidebar {
   @apply !text-theme-app-950 bg-cyan-50 rounded-md h-6 w-6 p-[1px] drop-shadow-md !important;
+}
+
+.via-input-search-sidebar {
+  @apply w-full rounded-l-lg shadow-lg !border-l-2 !border-y-2 border-r-0 border-[#7b1fa2] focus:border-blue-500 !important;
+}
+
+.via-button-search-sidebar {
+  @apply bg-theme-app-500 hover:bg-theme-app-600 text-white flex justify-center items-center p-2 rounded-r-lg cursor-pointer dark:!border-l-0 !important;
 }

src/styles/globals.css

@@ -1,39 +1,47 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback'); /* Inter */
-@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round');
+  @import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round'); /* Material Icons */
 
-@tailwind base;
+  @tailwind base;
-@tailwind components;
+  @tailwind components;
-@tailwind utilities;
+  @tailwind utilities;
 
-/* ===== Scrollbar CSS ===== */
+
-@layer utilities {
+  /* ===== Scrollbar CSS ===== */
-  /* Firefox */
+  @layer utilities {
-  * {
+    /* Firefox */
-    scrollbar-width: auto;
+    * {
-    scrollbar-color: #1F92BF #e1e1e1;
+      scrollbar-width: auto;
+      scrollbar-color: #1F92BF #e1e1e1;
+    }
+
+    /* Chrome, Edge, and Safari */
+    *::-webkit-scrollbar {
+      @apply w-2 h-2 bg-gray-200 dark:bg-gray-800 rounded-lg;
+    }
+
+    *::-webkit-scrollbar-thumb {
+      @apply bg-theme-app-600 rounded-lg border-theme-app-400 dark:bg-theme-app-600 dark:border-theme-app-600;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      @apply bg-theme-app-700 border-theme-app-700 dark:bg-theme-app-900 dark:border-theme-app-900;
+      transition: 0s;
+    }
+
+    /* Transition Classes for Theme Switching */
+    .transition-theme {
+      @apply transition-colors duration-[350ms] ease-in-out !important;
+    }
   }
 
-  /* Chrome, Edge, and Safari */
-  *::-webkit-scrollbar {
-    @apply w-2 h-2 bg-gray-200 dark:bg-gray-800 rounded-lg;
-  }
 
-  *::-webkit-scrollbar-thumb {
+  /* Additional Styles */
-    @apply bg-theme-app-600 rounded-lg border-theme-app-400 dark:bg-theme-app-600 dark:border-theme-app-600;
+  @import 'additional-styles/toastify.css';
-  }
+  @import 'additional-styles/404.css';
-
+  @import 'component-styles/loading.css';
-  ::-webkit-scrollbar-thumb:hover {
+  @import 'component-styles/sidebar.css';
-    @apply bg-theme-app-700 border-theme-app-700 dark:bg-theme-app-900 dark:border-theme-app-900;
+  @import 'component-styles/navbar.css';
-    transition: 0s;
+  @import 'component-styles/datatable.css';
-  }
+  @import 'page-styles/common.css';
-}
+  @import 'page-styles/login.css';
-
+  @import 'ui-styles/via-ui.css';
-/* Additional Styles */
-@import 'additional-styles/toastify.css';
-@import 'component-styles/loading.css';
-@import 'component-styles/sidebar.css';
-@import 'component-styles/navbar.css';
-@import 'component-styles/datatable.css';
-@import 'page-styles/common.css';
-@import 'page-styles/login.css';
-@import 'ui-styles/via-ui.css';

src/styles/page-styles/common.css

@@ -110,7 +110,7 @@
 }
 
 .responsive-container {
-  @apply w-full h-auto min-h-[calc(100vh-60px)] mx-auto bg-[#ECEFF8] dark:bg-[#0f0f0f] items-center pb-10 p-2;
+  @apply w-full h-auto min-h-[calc(100vh-60px)] mx-auto bg-[#ECEFF8] dark:bg-[#0f0f0f] items-center pb-10 p-2 transition-colors duration-350 ease-in-out !important;
 }
 
 .via-title {
@@ -139,12 +139,3 @@
 .via-success {
   @apply bg-success hover:bg-success-hover dark:bg-success-dark dark:hover:bg-success-hover-dark text-white !important;
 }
-
-
-.via-background {
-  @apply bg-[#F6F6F6] dark:bg-[#272727] !important;
-}
-
-/* .test {
-  @apply bg-theme-app-
-} */

src/styles/page-styles/login.css

@@ -11,7 +11,7 @@
 }
 
 .via-login-logo {
-  @apply w-64 h-64 bg-center bg-auto bg-no-repeat object-cover;
+  @apply w-64 h-64 bg-center bg-auto bg-no-repeat object-contain !important;
 }
 
 .via-login-background {

src/styles/ui-styles/via-ui.css

@@ -86,8 +86,6 @@
   transform: translateY(-50%);
 }
 
-
-
 /* tabs styles */
 .tabs {
   min-height: 200px;

src/utils/globalPresets.js

@@ -7,9 +7,9 @@ const presets = {
   images: {
     loginFondo: 'https://www.via-asesores.com/backgrounds/smartoperation/SmartOperation_background.png',
     welcomeFondo: 'https://www.via-asesores.com/backgrounds/smartoperation/SmartOperation_background.png',
-    icon: 'https://www.via-asesores.com/logos/logo_icons/smarterp_icon.svg',
+    icon: 'https://www.via-asesores.com/logos/logo_icons/orbisprocess_icon.svg',
-    logo: 'https://www.via-asesores.com/logos/smartOperations.png',
+    logo: 'https://www.via-asesores.com/logos/logo_vertical/orbisprocess_vertical_logo.svg',
-    imageLoader: 'https://www.via-asesores.com/logos/logo_via.png',
+    imageLoader: 'https://www.via-asesores.com/logos/logo_horizontal/orbisprocess_horizontal_logo.svg',
     noImageFound: 'https://www.via-asesores.com/smartsalesnprofit/images/LogoViasaClaroTransparente_600x.png',
     onError: 'https://www.via-asesores.com/smartsalesnprofit/images/LogoViasaClaroTransparente_600x.png',
     noDataFound: `${process.env.publicPath}/images/cancel.png`

tailwind.config.ts

@@ -58,6 +58,9 @@ const config: Config = {
       outline: {
         blue: '2px solid rgba(0, 112, 244, 0.5)'
       },
+      transitionDuration: {
+        350: '350ms'
+      },
       colors: {
         'theme-text': {
           principal: '#323338',