initial commit

2024-10-25 01:05:27 +05:00
commit 94cd8a1dc9
1710 changed files with 273609 additions and 0 deletions
--- a/resources/styles/@core/base/_components.scss
+++ b/resources/styles/@core/base/_components.scss
@@ -0,0 +1,172 @@
+@use "mixins";
+@use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins" as layoutMixins;
+@use "@configured-variables" as variables;
+
+// 👉 Avatar group
+.v-avatar-group {
+  display: flex;
+  align-items: center;
+
+  > * {
+    &:not(:first-child) {
+      margin-inline-start: -0.8rem;
+    }
+
+    transition: transform 0.25s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      z-index: 2;
+      transform: translateY(-5px) scale(1.05);
+
+      @include mixins.elevation(3);
+    }
+  }
+
+  > .v-avatar {
+    border: 2px solid rgb(var(--v-theme-surface));
+    transition: transform 0.15s ease;
+  }
+}
+
+// 👉 Button outline with default color border color
+.v-alert--variant-outlined,
+.v-avatar--variant-outlined,
+.v-btn.v-btn--variant-outlined,
+.v-card--variant-outlined,
+.v-chip--variant-outlined,
+.v-list-item--variant-outlined {
+  &:not([class*="text-"]) {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+
+  &.text-default {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+}
+
+// 👉 Custom Input
+.v-label.custom-input {
+  padding: 1rem;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  opacity: 1;
+  white-space: normal;
+
+  &:hover {
+    border-color: rgba(var(--v-border-color), 0.25);
+  }
+
+  &.active {
+    border-color: rgb(var(--v-theme-primary));
+
+    .v-icon {
+      color: rgb(var(--v-theme-primary)) !important;
+    }
+  }
+}
+
+// 👉 Datatable
+.v-data-table-footer__pagination {
+  @include layoutMixins.rtl {
+    .v-btn {
+      .v-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+// Dialog responsive width
+.v-dialog {
+  // dialog custom close btn
+  .v-dialog-close-btn {
+    position: absolute;
+    z-index: 1;
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
+    inset-block-start: 0.9375rem;
+    inset-inline-end: 0.9375rem;
+
+    .v-btn__overlay {
+      display: none;
+    }
+  }
+
+  .v-card {
+    @extend %style-scroll-bar;
+  }
+}
+
+@media (min-width: 600px) {
+  .v-dialog {
+    &.v-dialog-sm,
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 565px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 960px) {
+  .v-dialog {
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 865px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 1264px) {
+  .v-dialog.v-dialog-xl {
+    .v-overlay__content {
+      inline-size: 1165px !important;
+    }
+  }
+}
+
+// v-tab with pill support
+
+.v-tabs.v-tabs-pill {
+  .v-tab.v-btn {
+    border-radius: 0.25rem !important;
+    transition: none;
+
+    .v-tab__slider {
+      visibility: hidden;
+    }
+  }
+}
+
+// loop for all colors bg
+@each $color-name in variables.$theme-colors-name {
+  .v-tabs.v-tabs-pill {
+    .v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
+      background-color: rgb(var(--v-theme-#{$color-name}));
+      color: rgb(var(--v-theme-on-#{$color-name})) !important;
+    }
+  }
+}
+
+// ℹ️ We are make even width of all v-timeline body
+.v-timeline--vertical.v-timeline {
+  .v-timeline-item {
+    .v-timeline-item__body {
+      justify-self: stretch !important;
+    }
+  }
+}
+
+// 👉 Switch
+.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
+  color: #fff !important;
+}
+
+// 👉 Textarea
+.v-textarea .v-field__input {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
+}
--- a/resources/styles/@core/base/_dark.scss
+++ b/resources/styles/@core/base/_dark.scss
@@ -0,0 +1,16 @@
+@use "@configured-variables" as variables;
+
+// ————————————————————————————————————
+// * ——— Perfect Scrollbar
+// ————————————————————————————————————
+
+.v-application.v-theme--dark {
+  .ps__rail-y,
+  .ps__rail-x {
+    background-color: transparent !important;
+  }
+
+  .ps__thumb-y {
+    background-color: variables.$plugin-ps-thumb-y-dark;
+  }
+}
--- a/resources/styles/@core/base/_default-layout-w-vertical-nav.scss
+++ b/resources/styles/@core/base/_default-layout-w-vertical-nav.scss
@@ -0,0 +1,103 @@
+@use "@configured-variables" as variables;
+@use "@core-scss/base/placeholders" as *;
+@use "@core-scss/template/placeholders" as *;
+@use "misc";
+@use "@core-scss/base/mixins";
+
+$header: ".layout-navbar";
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: ".layout-navbar .navbar-content-container";
+}
+
+.layout-wrapper.layout-nav-type-vertical {
+  // SECTION  Layout Navbar
+  // 👉 Elevated navbar
+  @if variables.$vertical-nav-navbar-style == "elevated" {
+    // Add transition
+    #{$header} {
+      transition: padding 0.2s ease, background-color 0.18s ease;
+    }
+
+    // If navbar is contained => Add border radius to header
+    @if variables.$layout-vertical-nav-navbar-is-contained {
+      #{$header} {
+        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+    }
+
+    // Scrolled styles for sticky navbar
+    @at-root {
+      /* ℹ️ This html selector with not selector is required when:
+        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
+    */
+      html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky,
+      &.window-scrolled.layout-navbar-sticky {
+
+        #{$header} {
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+        }
+
+        .navbar-blur#{$header} {
+          @extend %blurry-bg;
+        }
+      }
+    }
+  }
+
+  // 👉 Floating navbar
+  @else if  variables.$vertical-nav-navbar-style == "floating" {
+    // ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
+    .layout-navbar {
+      &.navbar-blur {
+        @extend %default-layout-vertical-nav-floating-navbar-overlay;
+      }
+    }
+
+    &:not(.layout-navbar-sticky) {
+      #{$header} {
+        margin-block-start: variables.$vertical-nav-floating-navbar-top;
+      }
+    }
+
+    #{$header} {
+      @if variables.$layout-vertical-nav-navbar-is-contained {
+        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+
+      background-color: rgb(var(--v-theme-surface));
+
+      @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+    }
+
+    .navbar-blur#{$header} {
+      @extend %blurry-bg;
+    }
+  }
+
+  // !SECTION
+
+  // 👉 Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
+
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            background-color: rgb(var(--v-theme-surface));
+            padding-block: 0;
+            padding-inline: 1.2rem;
+
+            @include mixins.elevation(3);
+          }
+        }
+      }
+    }
+  }
+}
--- a/resources/styles/@core/base/_default-layout.scss
+++ b/resources/styles/@core/base/_default-layout.scss
@@ -0,0 +1,16 @@
+@use "@core-scss/base/placeholders";
+@use "@core-scss/base/variables";
+
+.layout-vertical-nav,
+.layout-horizontal-nav {
+  ol,
+  ul {
+    list-style: none;
+  }
+}
+
+.layout-navbar {
+  @if variables.$navbar-high-emphasis-text {
+    @extend %layout-navbar;
+  }
+}
--- a/resources/styles/@core/base/_index.scss
+++ b/resources/styles/@core/base/_index.scss
@@ -0,0 +1,40 @@
+@use "sass:map";
+
+// Layout
+@use "vertical-nav";
+@use "default-layout";
+@use "default-layout-w-vertical-nav";
+
+// Layouts package
+@use "layouts";
+
+// Components
+@use "components";
+
+// Utilities
+@use "utilities";
+
+// Misc
+@use "misc";
+
+// Dark
+@use "dark";
+
+// libs
+@use "libs/perfect-scrollbar";
+
+a {
+  color: rgb(var(--v-theme-primary));
+  text-decoration: none;
+}
+
+// Vuetify 3 don't provide margin bottom style like vuetify 2
+p {
+  margin-block-end: 1rem;
+}
+
+// Iconify icon size
+svg.iconify {
+  block-size: 1em;
+  inline-size: 1em;
+}
--- a/resources/styles/@core/base/_layouts.scss
+++ b/resources/styles/@core/base/_layouts.scss
@@ -0,0 +1,63 @@
+@use "@configured-variables" as variables;
+
+/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
+
+/*
+  ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
+*/
+// .layout-wrapper.layout-nav-type-vertical {
+//   &.layout-content-height-fixed {
+//     .page-content-container {
+//       > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
+//         flex-grow: 1;
+//         block-size: 100%;
+//       }
+//     }
+//   }
+// }
+.layout-wrapper.layout-nav-type-vertical {
+  &.layout-content-height-fixed {
+    .page-content-container {
+      > .v-layout:first-child {
+        overflow: hidden;
+        min-block-size: 100%;
+
+        > .v-main {
+          // overflow-y: auto;
+
+          .v-main__wrap > :first-child {
+            block-size: 100%;
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ℹ️ Let div/v-layout take full height. E.g. Email App
+.layout-wrapper.layout-nav-type-horizontal {
+  &.layout-content-height-fixed {
+    > .layout-page-content {
+      display: flex;
+    }
+  }
+}
+
+// 👉 Floating navbar styles
+@if variables.$vertical-nav-navbar-style == "floating" {
+  // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
+  .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
+    .layout-navbar {
+      inset-block-start: variables.$vertical-nav-floating-navbar-top;
+    }
+
+    /*
+      ℹ️ If it's floating navbar
+      Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
+    */
+    .layout-page-content {
+      margin-block-start: variables.$vertical-nav-floating-navbar-top;
+    }
+  }
+}
--- a/resources/styles/@core/base/_misc.scss
+++ b/resources/styles/@core/base/_misc.scss
@@ -0,0 +1,20 @@
+// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
+.scrollable-content {
+  &.v-navigation-drawer {
+    .v-navigation-drawer__content {
+      display: flex;
+      overflow: hidden;
+      flex-direction: column;
+    }
+  }
+}
+
+// ℹ️ adding styling for code tag
+code {
+  border-radius: 3px;
+  color: rgb(var(--v-code-color));
+  font-size: 90%;
+  font-weight: 400;
+  padding-block: 0.2em;
+  padding-inline: 0.4em;
+}
--- a/resources/styles/@core/base/_mixins.scss
+++ b/resources/styles/@core/base/_mixins.scss
@@ -0,0 +1,63 @@
+@use "sass:map";
+@use "@styles/variables/_vuetify.scss";
+
+@mixin elevation($z, $important: false) {
+  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
+}
+
+// #region before-pseudo
+// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
+@mixin before-pseudo() {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    border-radius: inherit;
+    background: currentcolor;
+    block-size: 100%;
+    content: "";
+    inline-size: 100%;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+// #endregion before-pseudo
+
+@mixin bordered-skin($component, $border-property: "border", $important: false) {
+  #{$component} {
+    // background-color: rgb(var(--v-theme-background));
+    box-shadow: none !important;
+    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
+  }
+}
+
+// #region selected-states
+// ℹ️ Inspired from vuetify's active-states mixin
+// focus => 0.12 & selected => 0.08
+@mixin selected-states($selector) {
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:hover
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:focus-visible
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      #{$selector} {
+        opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
+      }
+    }
+  }
+}
+
+// #endregion selected-states
--- a/resources/styles/@core/base/_utilities.scss
+++ b/resources/styles/@core/base/_utilities.scss
@@ -0,0 +1,157 @@
+@use "@configured-variables" as variables;
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+// 👉 Demo spacers
+// TODO: Use vuetify SCSS variable here
+$card-spacer-content: 16px;
+
+.demo-space-x {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-block-start: -$card-spacer-content;
+
+  & > * {
+    margin-block-start: $card-spacer-content;
+    margin-inline-end: $card-spacer-content;
+  }
+}
+
+.demo-space-y {
+  & > * {
+    margin-block-end: $card-spacer-content;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+}
+
+// 👉 Card match height
+.match-height.v-row {
+  .v-card {
+    block-size: 100%;
+  }
+}
+
+// 👉 Whitespace
+.whitespace-no-wrap {
+  white-space: nowrap;
+}
+
+// 👉 Colors
+
+/*
+  ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
+  Moreover, we also use this class in some places
+
+  ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
+
+  ℹ️ We also need !important to get correct color in badge icon
+*/
+.text-white {
+  color: #fff !important;
+}
+.primary{
+
+
+    background-color: rgb(var(--v-theme-yellow)) !important;
+
+}
+.bg-var-theme-background {
+  background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !important;
+}
+
+// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
+@each $color-name in variables.$theme-colors-name {
+  .bg-light-#{$color-name} {
+    background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
+  }
+}
+
+// 👉 clamp text
+.clamp-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.leading-normal {
+  line-height: normal !important;
+}
+
+// 👉 for rtl only
+.flip-in-rtl {
+  @include layoutsMixins.rtl {
+    transform: scaleX(-1);
+  }
+}
+
+// 👉 Carousel
+.carousel-delimiter-top-end {
+  .v-carousel__controls {
+    justify-content: end;
+    block-size: 40px;
+    inset-block-start: 0;
+    padding-inline: 1rem;
+
+    .v-btn--icon.v-btn--density-default {
+      block-size: calc(var(--v-btn-height) + -10px);
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      inline-size: calc(var(--v-btn-height) + -8px);
+
+      &.v-btn--active {
+        color: #fff;
+      }
+
+      .v-btn__overlay {
+        opacity: 0;
+      }
+
+      .v-ripple__container {
+        display: none;
+      }
+
+      .v-btn__content {
+        .v-icon {
+          block-size: 8px !important;
+          inline-size: 8px !important;
+        }
+      }
+    }
+  }
+
+  @each $color-name in variables.$theme-colors-name {
+
+    &.dots-active-#{$color-name} {
+      .v-carousel__controls {
+        .v-btn--active {
+          color: rgb(var(--v-theme-#{$color-name})) !important;
+        }
+      }
+    }
+  }
+}
+
+.v-timeline-item {
+  .app-timeline-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.3125rem;
+  }
+
+  .app-timeline-meta {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 12px;
+    line-height: 0.875rem;
+  }
+
+  .app-timeline-text {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 14px;
+    line-height: 1.25rem;
+  }
+}
--- a/resources/styles/@core/base/_utils.scss
+++ b/resources/styles/@core/base/_utils.scss
@@ -0,0 +1,90 @@
+@use "sass:map";
+@use "sass:list";
+@use "@configured-variables" as variables;
+
+// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+
+  @return $map;
+}
+
+@function map-deep-set($map, $keys, $value) {
+  $maps: ($map,);
+  $result: null;
+
+  // If the last key is a map already
+  // Warn the user we will be overriding it with $value
+  @if type-of(nth($keys, -1)) == "map" {
+    @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
+  }
+
+  // If $keys is a single key
+  // Just merge and return
+  @if length($keys) == 1 {
+    @return map-merge($map, ($keys: $value));
+  }
+
+  // Loop from the first to the second to last key from $keys
+  // Store the associated map to this key in the $maps list
+  // If the key doesn't exist, throw an error
+  @for $i from 1 through length($keys) - 1 {
+    $current-key: list.nth($keys, $i);
+    $current-map: list.nth($maps, -1);
+    $current-get: map.get($current-map, $current-key);
+
+    @if not $current-get {
+      @error "Key `#{$key}` doesn't exist at current level in map.";
+    }
+
+    $maps: list.append($maps, $current-get);
+  }
+
+  // Loop from the last map to the first one
+  // Merge it with the previous one
+  @for $i from length($maps) through 1 {
+    $current-map: list.nth($maps, $i);
+    $current-key: list.nth($keys, $i);
+    $current-val: if($i == list.length($maps), $value, $result);
+    $result: map.map-merge($current-map, ($current-key: $current-val));
+  }
+
+  // Return result
+  @return $result;
+}
+
+// font size utility classes
+@each $name, $size in variables.$font-sizes {
+  .text-#{$name} {
+    font-size: $size;
+    line-height: map.get(variables.$font-line-height, $name);
+  }
+}
+
+// truncate utility class
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// gap utility class
+@each $name, $size in variables.$gap {
+  .gap-#{$name} {
+    gap: $size;
+  }
+
+  .gap-x-#{$name} {
+    column-gap: $size;
+  }
+
+  .gap-y-#{$name} {
+    row-gap: $size;
+  }
+}
+
+.list-none {
+  list-style-type: none;
+}
--- a/resources/styles/@core/base/_variables.scss
+++ b/resources/styles/@core/base/_variables.scss
@@ -0,0 +1,197 @@
+@use "vuetify/lib/styles/tools/functions" as *;
+
+/*
+  TODO: Add docs on when to use placeholder vs when to use SASS variable
+
+  Placeholder
+    - When we want to keep customization to our self between templates use it
+
+  Variables
+    - When we want to allow customization from both user and our side
+    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
+*/
+
+@forward "@layouts/styles/variables" with (
+  // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
+  $layout-vertical-nav-z-index: 1004,
+  $layout-overlay-z-index: 1003,
+);
+@use "@layouts/styles/variables" as *;
+
+// 👉 Default layout
+
+$navbar-high-emphasis-text: true !default;
+
+// @forward "@layouts/styles/variables" with (
+//   $layout-vertical-nav-width: 350px !default,
+// );
+
+$theme-colors-name: (
+  "primary",
+  "secondary",
+  "error",
+  "info",
+  "success",
+  "warning"
+) !default;
+
+// 👉 Default layout with vertical nav
+
+$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
+
+// 👉 Vertical nav
+$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
+$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
+
+// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+// This is used by nav items & nav header
+$vertical-nav-horizontal-spacing: 1rem !default;
+$vertical-nav-horizontal-padding: 0.75rem !default;
+
+// Vertical nav header height. Mostly we will align it with navbar height;
+$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
+$vertical-nav-navbar-elevation: 3 !default;
+$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
+$vertical-nav-floating-navbar-top: 1rem !default;
+
+// Vertical nav header padding
+$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
+$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
+
+// Move logo when vertical nav is mini (collapsed but not hovered)
+$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
+
+// Space between logo and title
+$vertical-nav-header-logo-title-spacing: 0.9rem !default;
+
+// Section title margin top (when its not first child)
+$vertical-nav-section-title-mt: 1.5rem !default;
+
+// Section title margin bottom
+$vertical-nav-section-title-mb: 0.5rem !default;
+
+// Vertical nav icons
+$vertical-nav-items-icon-size: 1.5rem !default;
+$vertical-nav-items-nested-icon-size: 0.9rem !default;
+$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
+
+// Transition duration for nav group arrow
+$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
+
+// Timing function for nav group arrow
+$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
+
+// 👉 Horizontal nav
+
+/*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+*/
+$horizontal-nav-padding: 0.6875rem !default;
+
+// Gap between top level horizontal nav items
+$horizontal-nav-top-level-items-gap: 4px !default;
+
+// Horizontal nav icons
+$horizontal-nav-items-icon-size: 1.5rem !default;
+$horizontal-nav-third-level-icon-size: 0.9rem !default;
+$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
+
+// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
+// 120px is combined height of navbar & horizontal nav
+$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
+
+// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
+$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
+
+// 👉 Plugins
+
+$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
+
+// 👉 Vuetify
+
+// Used in src/@core-scss/base/libs/vuetify/_overrides.scss
+$vuetify-reduce-default-compact-button-icon-size: true !default;
+
+// 👉 Custom variables
+// for utility classes
+$font-sizes: () !default;
+$font-sizes: map-deep-merge(
+  (
+    "xs": 0.75rem,
+    "sm": 0.875rem,
+    "base": 1rem,
+    "lg": 1.125rem,
+    "xl": 1.25rem,
+    "2xl": 1.5rem,
+    "3xl": 1.875rem,
+    "4xl": 2.25rem,
+    "5xl": 3rem,
+    "6xl": 3.75rem,
+    "7xl": 4.5rem,
+    "8xl": 6rem,
+    "9xl": 8rem
+  ),
+  $font-sizes
+);
+
+// line height
+$font-line-height: () !default;
+$font-line-height: map-deep-merge(
+  (
+    "xs": 1rem,
+    "sm": 1.25rem,
+    "base": 1.5rem,
+    "lg": 1.75rem,
+    "xl": 1.75rem,
+    "2xl": 2rem,
+    "3xl": 2.25rem,
+    "4xl": 2.5rem,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1
+  ),
+  $font-line-height
+);
+
+// gap utility class
+$gap: () !default;
+$gap: map-deep-merge(
+  (
+    "0": 0,
+    "1": 0.25rem,
+    "2": 0.5rem,
+    "3": 0.75rem,
+    "4": 1rem,
+    "5": 1.25rem,
+    "6":1.5rem,
+    "7": 1.75rem,
+    "8": 2rem,
+    "9": 2.25rem,
+    "10": 2.5rem,
+    "11": 2.75rem,
+    "12": 3rem,
+    "14": 3.5rem,
+    "16": 4rem,
+    "20": 5rem,
+    "24": 6rem,
+    "28": 7rem,
+    "32": 8rem,
+    "36": 9rem,
+    "40": 10rem,
+    "44": 11rem,
+    "48": 12rem,
+    "52": 13rem,
+    "56": 14rem,
+    "60": 15rem,
+    "64": 16rem,
+    "72": 18rem,
+    "80": 20rem,
+    "96": 24rem
+  ),
+  $gap
+);
--- a/resources/styles/@core/base/_vertical-nav.scss
+++ b/resources/styles/@core/base/_vertical-nav.scss
@@ -0,0 +1,250 @@
+@use "@core-scss/base/placeholders" as *;
+@use "@core-scss/template/placeholders" as *;
+@use "@layouts/styles/mixins" as layoutsMixins;
+@use "@configured-variables" as variables;
+@use "@core-scss/base/mixins" as mixins;
+@use "vuetify/lib/styles/tools/states" as vuetifyStates;
+
+.layout-nav-type-vertical {
+  // 👉 Layout Vertical nav
+  .layout-vertical-nav {
+    $sl-layout-nav-type-vertical: &;
+
+    @extend %nav;
+
+    @at-root {
+      // ℹ️ Add styles for collapsed vertical nav
+      .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
+        @include mixins.elevation(6);
+      }
+    }
+
+    background-color: variables.$vertical-nav-background-color;
+
+    // 👉 Nav header
+    .nav-header {
+      overflow: hidden;
+      padding: variables.$vertical-nav-header-padding;
+      margin-inline: variables.$vertical-nav-header-inline-spacing;
+      min-block-size: variables.$vertical-nav-header-height;
+
+      // TEMPLATE: Check if we need to move this to master
+      .app-logo {
+        flex-shrink: 0;
+        transition: transform 0.25s ease-in-out;
+
+        @at-root {
+          // Move logo a bit to align center with the icons in vertical nav mini variant
+          .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered) .nav-header .app-logo {
+            transform: translateX(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini);
+
+            @include layoutsMixins.rtl {
+              transform: translateX(-(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini));
+            }
+          }
+        }
+      }
+
+      .app-title {
+        margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
+      }
+
+      .header-action {
+        @extend %nav-header-action;
+      }
+    }
+
+    // 👉 Nav items shadow
+    .vertical-nav-items-shadow {
+      position: absolute;
+      z-index: 1;
+      background:
+        linear-gradient(
+          rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
+          rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
+          rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
+          transparent
+        );
+      block-size: 55px;
+      inline-size: 100%;
+      inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s ease-in-out;
+      will-change: opacity;
+
+      @include layoutsMixins.rtl {
+        transform: translateX(8px);
+      }
+    }
+
+    &.scrolled {
+      .vertical-nav-items-shadow {
+        opacity: 1;
+      }
+    }
+
+    .ps__rail-y {
+      // ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow
+      z-index: 1;
+    }
+
+    // 👉 Nav section title
+    .nav-section-title {
+      @extend %vertical-nav-item;
+      @extend %vertical-nav-section-title;
+
+      margin-block-end: variables.$vertical-nav-section-title-mb;
+
+      &:not(:first-child) {
+        margin-block-start: variables.$vertical-nav-section-title-mt;
+      }
+
+      .placeholder-icon {
+        margin-inline: auto;
+      }
+    }
+
+    // Nav item badge
+    .nav-item-badge {
+      @extend %vertical-nav-item-badge;
+    }
+
+    // 👉 Nav group & Link
+    .nav-link,
+    .nav-group {
+      overflow: hidden;
+
+      > :first-child {
+        @extend %vertical-nav-item;
+        @extend %vertical-nav-item-interactive;
+      }
+
+      .nav-item-icon {
+        @extend %vertical-nav-items-icon;
+      }
+
+      &.disabled {
+        opacity: var(--v-disabled-opacity);
+        pointer-events: none;
+      }
+    }
+
+    // 👉 Vertical nav link
+    .nav-link {
+      @extend %nav-link;
+
+      > .router-link-exact-active {
+        @extend %nav-link-active;
+      }
+
+      > a {
+        // Adds before psudo element to style hover state
+        @include mixins.before-pseudo;
+
+        // Adds vuetify states
+        @include vuetifyStates.states($active: false);
+      }
+    }
+
+    // 👉 Vertical nav group
+    .nav-group {
+      // Reduce the size of icon if link/group is inside group
+      .nav-group,
+      .nav-link {
+        .nav-item-icon {
+          @extend %vertical-nav-items-nested-icon;
+        }
+      }
+
+      // Hide icons after 2nd level
+      & .nav-group {
+        .nav-link,
+        .nav-group {
+          .nav-item-icon {
+            @extend %vertical-nav-items-icon-after-2nd-level;
+          }
+        }
+      }
+
+      .nav-group-arrow {
+        flex-shrink: 0;
+        transform-origin: center;
+        transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration variables.$vertical-nav-nav-group-arrow-transition-timing-function;
+        will-change: transform;
+      }
+
+      // Rotate arrow icon if group is opened
+      &.open {
+        > .nav-group-label .nav-group-arrow {
+          transform: rotateZ(90deg);
+        }
+      }
+
+      // Nav group label
+      > :first-child {
+        // Adds before psudo element to style hover state
+        @include mixins.before-pseudo;
+
+        // Adds vuetify states
+        @include vuetifyStates.states($active: false);
+      }
+
+      // Active & open states for nav group label
+      &.active,
+      &.open {
+        > :first-child {
+          @extend %vertical-nav-group-open-active;
+        }
+      }
+    }
+  }
+}
+
+// SECTION: Transitions
+.vertical-nav-section-title-enter-active,
+.vertical-nav-section-title-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+}
+
+.vertical-nav-section-title-enter-from,
+.vertical-nav-section-title-leave-to {
+  opacity: 0;
+  transform: translateX(15px);
+
+  @include layoutsMixins.rtl {
+    transform: translateX(-15px);
+  }
+}
+
+.transition-slide-x-enter-active,
+.transition-slide-x-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
+}
+
+.transition-slide-x-enter-from,
+.transition-slide-x-leave-to {
+  opacity: 0;
+  transform: translateX(-15px);
+
+  @include layoutsMixins.rtl {
+    transform: translateX(15px);
+  }
+}
+
+.vertical-nav-app-title-enter-active,
+.vertical-nav-app-title-leave-active {
+  transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
+}
+
+.vertical-nav-app-title-enter-from,
+.vertical-nav-app-title-leave-to {
+  opacity: 0;
+  transform: translateX(-15px);
+
+  @include layoutsMixins.rtl {
+    transform: translateX(15px);
+  }
+}
+
+// !SECTION
--- a/resources/styles/@core/base/libs/_perfect-scrollbar.scss
+++ b/resources/styles/@core/base/libs/_perfect-scrollbar.scss
@@ -0,0 +1,35 @@
+$ps-size: 0.25rem;
+$ps-hover-size: 0.375rem;
+$ps-track-size: 0.5rem;
+
+.ps__thumb-y {
+  inline-size: $ps-size;
+  inset-inline-end: 0.0625rem;
+}
+
+.ps__thumb-x {
+  block-size: $ps-size !important;
+}
+
+.ps__rail-x {
+  background: transparent !important;
+  block-size: $ps-track-size;
+}
+
+.ps__rail-y {
+  background: transparent !important;
+  inline-size: $ps-track-size !important;
+  inset-inline-end: 0.125rem !important;
+  inset-inline-start: unset !important;
+}
+
+.ps__rail-y.ps--clicking .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y:hover > .ps__thumb-y {
+  inline-size: $ps-hover-size;
+}
+
+.ps__thumb-x,
+.ps__thumb-y {
+  background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
+}
--- a/resources/styles/@core/base/libs/vuetify/_index.scss
+++ b/resources/styles/@core/base/libs/vuetify/_index.scss
@@ -0,0 +1 @@
+@use "overrides";
--- a/resources/styles/@core/base/libs/vuetify/_overrides.scss
+++ b/resources/styles/@core/base/libs/vuetify/_overrides.scss
@@ -0,0 +1,287 @@
+@use "@core-scss/base/utils";
+@use "@configured-variables" as variables;
+
+// 👉 Application
+// ℹ️ We need accurate vh in mobile devices as well
+.v-application__wrap {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  min-height: calc(var(--vh, 1vh) * 100);
+}
+
+// 👉 Typography
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.text-h1,
+.text-h2,
+.text-h3,
+.text-h4,
+.text-h5,
+.text-h6,
+.text-button,
+.text-overline,
+.v-card-title {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+
+.v-application,
+.text-body-1,
+.text-body-2,
+.text-subtitle-1,
+.text-subtitle-2 {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+// 👉 Grid
+// Remove margin-bottom of v-input_details inside grid (validation error message)
+.v-row {
+  .v-col,
+  [class^="v-col-*"] {
+    .v-input__details {
+      margin-block-end: 0;
+    }
+  }
+}
+
+// 👉 Button
+@if variables.$vuetify-reduce-default-compact-button-icon-size {
+  .v-btn--density-compact.v-btn--size-default {
+    .v-btn__content > svg {
+      block-size: 22px;
+      font-size: 22px;
+      inline-size: 22px;
+    }
+  }
+}
+
+// 👉 Card
+// Removes padding-top for immediately placed v-card-text after itself
+.v-card-text {
+  & + & {
+    padding-block-start: 0 !important;
+  }
+}
+
+/*
+  👉 Checkbox & Radio Ripple
+
+  TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
+  We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
+  Tested with checkbox & switches
+*/
+.v-checkbox.v-input,
+.v-switch.v-input {
+  --v-input-control-height: auto;
+
+  flex: unset;
+}
+
+.v-selection-control--density-comfortable {
+  &.v-checkbox-btn,
+  &.v-radio,
+  &.v-radio-btn {
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.5625rem;
+    }
+  }
+}
+
+.v-selection-control--density-compact {
+  &.v-radio,
+  &.v-radio-btn,
+  &.v-checkbox-btn {
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.3125rem;
+    }
+  }
+}
+
+.v-selection-control--density-default {
+  &.v-checkbox-btn,
+  &.v-radio,
+  &.v-radio-btn {
+    .v-selection-control__wrapper {
+      margin-inline-start: -0.6875rem;
+    }
+  }
+}
+
+.v-radio-group {
+  .v-selection-control-group {
+    .v-radio:not(:last-child) {
+      margin-inline-end: 0.9rem;
+    }
+  }
+}
+
+/*
+  👉 Tabs
+  Disable tab transition
+
+  This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
+
+  This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
+*/
+.disable-tab-transition {
+  overflow: unset !important;
+
+  .v-window__container {
+    block-size: auto !important;
+  }
+
+  .v-window-item:not(.v-window-item--active) {
+    display: none !important;
+  }
+
+  .v-window__container .v-window-item {
+    transform: none !important;
+  }
+}
+
+// 👉 List
+.v-list {
+  // Set icons opacity to .87
+  .v-list-item__prepend > .v-icon,
+  .v-list-item__append > .v-icon {
+    opacity: var(--v-high-emphasis-opacity);
+  }
+}
+
+// 👉 Card list
+
+/*
+  ℹ️ Custom class
+
+  Remove list spacing inside card
+
+  This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
+*/
+.card-list {
+  --v-card-list-gap: 20px;
+
+  &.v-list {
+    padding-block: 0;
+  }
+
+  .v-list-item {
+    min-block-size: unset;
+    min-block-size: auto !important;
+    padding-block: 0 !important;
+    padding-inline: 0 !important;
+
+    > .v-ripple__container {
+      opacity: 0;
+    }
+
+    &:not(:last-child) {
+      padding-block-end: var(--v-card-list-gap) !important;
+    }
+  }
+
+  .v-list-item:hover,
+  .v-list-item:focus,
+  .v-list-item:active,
+  .v-list-item.active {
+    > .v-list-item__overlay {
+      opacity: 0 !important;
+    }
+  }
+}
+
+// 👉 Divider
+.v-divider {
+  color: rgb(var(--v-border-color));
+}
+
+// 👉 DataTable
+.v-data-table {
+  /* stylelint-disable-next-line no-descending-specificity */
+  .v-checkbox-btn .v-selection-control__wrapper {
+    margin-inline-start: 0 !important;
+  }
+
+  .v-selection-control {
+    display: flex !important;
+  }
+
+  .v-pagination {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  }
+}
+
+.v-data-table-footer {
+  margin-block-start: 1rem;
+}
+
+// 👉 v-field
+.v-field:hover .v-field__outline {
+  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
+}
+
+// 👉 VLabel
+.v-label {
+  opacity: 1 !important;
+
+  &:not(.v-field-label--floating) {
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+  }
+}
+
+// 👉 Overlay
+.v-overlay__scrim,
+.v-navigation-drawer__scrim {
+  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
+  opacity: 1 !important;
+}
+
+// 👉 VMessages
+.v-messages {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  opacity: 1;
+}
+
+// 👉 Alert close btn
+.v-alert__close {
+  .v-btn--icon .v-icon {
+    --v-icon-size-multiplier: 1.5;
+  }
+}
+
+// 👉 Badge icon alignment
+.v-badge__badge {
+  display: flex;
+  align-items: center;
+}
+
+// 👉 Btn focus outline style removed
+.v-btn:focus-visible::after {
+  opacity: 0 !important;
+}
+
+// .v-select chip spacing for slot
+.v-input:not(.v-select--chips) .v-select__selection {
+  .v-chip {
+    margin-block: 2px var(--select-chips-margin-bottom);
+  }
+}
+
+// 👉 VCard and VList subtitle color
+.v-card-subtitle,
+.v-list-item-subtitle {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+// 👉 placeholders
+.v-field__input {
+  @at-root {
+    & input::placeholder,
+    input#{&}::placeholder,
+    textarea#{&}::placeholder {
+      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
+      opacity: 1 !important;
+    }
+  }
+}
--- a/resources/styles/@core/base/libs/vuetify/_variables.scss
+++ b/resources/styles/@core/base/libs/vuetify/_variables.scss
@@ -0,0 +1,49 @@
+// 👉 Shadow opacities
+$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
+$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
+$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
+
+// 👉 Card transition properties
+$card-transition-property-custom: box-shadow, opacity;
+
+@forward "vuetify/settings" with (
+  // 👉 General settings
+  $color-pack: false !default,
+
+  // 👉 Shadow opacity
+  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
+  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
+  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
+
+    // 👉 Card
+  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $card-elevation: 6 !default,
+  $card-title-line-height: 1.6 !default,
+  $card-actions-min-height: unset !default,
+  $card-text-padding: 1.25rem !default,
+  $card-item-padding: 1.25rem !default,
+  $card-actions-padding: 0 12px 12px !default,
+  $card-transition-property: $card-transition-property-custom !default,
+  $card-subtitle-opacity: 1 !default,
+
+  // 👉 Expansion Panel
+  $expansion-panel-active-title-min-height: 48px !default,
+
+  // 👉 List
+  $list-item-icon-margin-end: 16px !default,
+  $list-item-icon-margin-start: 16px !default,
+  $list-item-subtitle-opacity: 1 !default,
+
+  // 👉 Tooltip
+  $tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
+  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
+  $tooltip-font-size: 0.75rem !default,
+
+  $button-icon-density: ("default": 2, "comfortable": 0, "compact": -1 ) !default,
+
+   // 👉 VTimeline
+  $timeline-dot-size: 34px !default,
+
+  // 👉 VOverlay
+  $overlay-opacity: 1 !default,
+);
--- a/resources/styles/@core/base/placeholders/_default-layout-vertical-nav.scss
+++ b/resources/styles/@core/base/placeholders/_default-layout-vertical-nav.scss
@@ -0,0 +1,46 @@
+@use "@configured-variables" as variables;
+@use "misc";
+@use "@core-scss/base/mixins";
+
+%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
+  background-color: rgb(var(--v-theme-surface));
+}
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
+
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.2rem;
+  }
+}
+
+%default-layout-vertical-nav-floating-navbar-overlay {
+  isolation: isolate;
+
+  &::after {
+    position: absolute;
+    z-index: -1;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    /* stylelint-enable */
+    background:
+      linear-gradient(
+        180deg,
+        rgba(var(--v-theme-background), 70%) 44%,
+        rgba(var(--v-theme-background), 43%) 73%,
+        rgba(var(--v-theme-background), 0%)
+      );
+    background-repeat: repeat;
+    block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
+    content: "";
+    inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
+    inset-inline-end: 0;
+    inset-inline-start: 0;
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-mask: linear-gradient(black, black 18%, transparent 100%);
+    mask: linear-gradient(black, black 18%, transparent 100%);
+    /* stylelint-enable */
+  }
+}
--- a/resources/styles/@core/base/placeholders/_default-layout.scss
+++ b/resources/styles/@core/base/placeholders/_default-layout.scss
@@ -0,0 +1,3 @@
+%layout-navbar {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
--- a/resources/styles/@core/base/placeholders/_index.scss
+++ b/resources/styles/@core/base/placeholders/_index.scss
@@ -0,0 +1,5 @@
+@forward "vertical-nav";
+@forward "nav";
+@forward "default-layout";
+@forward "default-layout-vertical-nav";
+@forward "misc";
--- a/resources/styles/@core/base/placeholders/_misc.scss
+++ b/resources/styles/@core/base/placeholders/_misc.scss
@@ -0,0 +1,7 @@
+%blurry-bg {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  /* stylelint-enable */
+  background-color: rgb(var(--v-theme-surface), 0.9);
+}
--- a/resources/styles/@core/base/placeholders/_nav.scss
+++ b/resources/styles/@core/base/placeholders/_nav.scss
@@ -0,0 +1,33 @@
+@use "@core-scss/base/mixins";
+
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+  .nav-item-title {
+    letter-spacing: 0.15px;
+  }
+
+  .nav-section-title {
+    letter-spacing: 0.4px;
+  }
+}
+
+/*
+    Active nav link styles for horizontal & vertical nav
+
+    For horizontal nav it will be only applied to top level nav items
+    For vertical nav it will be only applied to nav links (not nav groups)
+*/
+%nav-link-active {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+
+  @include mixins.elevation(3);
+}
+
+%nav-link {
+  a {
+    color: inherit;
+  }
+}
--- a/resources/styles/@core/base/placeholders/_vertical-nav.scss
+++ b/resources/styles/@core/base/placeholders/_vertical-nav.scss
@@ -0,0 +1,81 @@
+@use "@core-scss/base/mixins";
+@use "@configured-variables" as variables;
+@use "vuetify/lib/styles/tools/states" as vuetifyStates;
+
+%nav-header-action {
+  font-size: 1.25rem;
+}
+
+// Nav items styles (including section title)
+%vertical-nav-item {
+  margin-block: 0;
+  margin-inline: variables.$vertical-nav-horizontal-spacing;
+  padding-block: 0;
+  padding-inline: variables.$vertical-nav-horizontal-padding;
+  white-space: nowrap;
+}
+
+// This is same as `%vertical-nav-item` except section title is excluded
+%vertical-nav-item-interactive {
+  border-radius: 0.4rem;
+  block-size: 2.75rem;
+
+  /*
+    ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
+    With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
+  */
+  margin-block-end: 0.375rem;
+}
+
+// Common styles for nav item icon styles
+// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
+%vertical-nav-items-icon {
+  flex-shrink: 0;
+  font-size: variables.$vertical-nav-items-icon-size;
+  margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  /*
+    ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
+    (1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
+  */
+  $vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
+
+  font-size: variables.$vertical-nav-items-nested-icon-size;
+  margin-inline-end: $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
+  margin-inline-start: $vertical-nav-items-nested-icon-margin-inline;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  visibility: hidden;
+}
+
+// Open & Active nav group styles
+%vertical-nav-group-open-active {
+  @include mixins.selected-states("&::before");
+}
+
+// Section title
+%vertical-nav-section-title {
+  // ℹ️ Setting height will prevent jerking when text & icon is toggled
+  block-size: 1.5rem;
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  display: inline-block;
+  border-radius: 1.5rem;
+  font-size: 0.8em;
+  font-weight: 500;
+  line-height: 1;
+  padding-block: 0.25em;
+  padding-inline: 0.55em;
+  text-align: center;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
--- a/resources/styles/@core/template/_components.scss
+++ b/resources/styles/@core/template/_components.scss
@@ -0,0 +1,69 @@
+@use "@configured-variables" as variables;
+@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
+
+// 👉 VExpansionPanel
+.v-expansion-panel-title,
+.v-expansion-panel-title--active,
+.v-expansion-panel-title:hover,
+.v-expansion-panel-title:focus,
+.v-expansion-panel-title:focus-visible,
+.v-expansion-panel-title--active:focus,
+.v-expansion-panel-title--active:hover {
+  .v-expansion-panel-title__overlay {
+    opacity: 0 !important;
+  }
+}
+
+// 👉 Set Elevation
+.v-expansion-panels {
+  .v-expansion-panel {
+    .v-expansion-panel__shadow {
+      @include mixins_elevation.elevation(3);
+    }
+  }
+
+  .v-expansion-panel-text__wrapper {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+    font-size: 1rem;
+  }
+}
+
+// 👉 Timeline outlined variant
+.v-timeline-item {
+  .v-timeline-divider__dot {
+    .v-timeline-divider__inner-dot {
+      box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
+
+      @each $color-name in variables.$theme-colors-name {
+
+        &.bg-#{$color-name} {
+          box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
+        }
+      }
+    }
+  }
+}
+
+// 👉 Timeline Outlined style
+.v-timeline-variant-outlined.v-timeline {
+  .v-timeline-divider__dot {
+    .v-timeline-divider__inner-dot {
+      box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));
+
+      @each $color-name in variables.$theme-colors-name {
+        background-color: rgb(var(--v-theme-surface)) !important;
+
+        &.bg-#{$color-name} {
+          box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
+        }
+      }
+    }
+  }
+}
+
+// 👉 v-tab with pill support
+.v-tabs.v-tabs-pill {
+  .v-tab.v-btn {
+    border-radius: 0.375rem !important;
+  }
+}
--- a/resources/styles/@core/template/_dark.scss
+++ b/resources/styles/@core/template/_dark.scss
@@ -0,0 +1,37 @@
+.v-application {
+  // vertical nav
+  &.v-theme--dark .layout-nav-type-vertical,
+  .v-theme-provider.v-theme--dark {
+    .layout-vertical-nav {
+      // nav-link and nav-group style for dark
+      .nav-link .router-link-exact-active,
+      .nav-group.active:not(.nav-group .nav-group) > :first-child {
+        background-color: rgb(var(--v-theme-primary)) !important;
+        color: rgb(var(--v-theme-on-primary)) !important;
+
+        &::before {
+          z-index: -1;
+          color: rgb(var(--v-global-theme-primary));
+          opacity: 1 !important;
+        }
+      }
+
+      .nav-group {
+        .nav-link {
+          .router-link-exact-active {
+            color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+
+            &::before {
+              color: transparent;
+            }
+
+            &:hover::before {
+              color: inherit;
+              opacity: var(--v-hover-opacity) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/resources/styles/@core/template/_default-layout-w-vertical-nav.scss
+++ b/resources/styles/@core/template/_default-layout-w-vertical-nav.scss
@@ -0,0 +1,20 @@
+@use "vuetify/lib/styles/tools/elevation" as elevation;
+
+.layout-wrapper.layout-nav-type-vertical {
+  // 👉 Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            @include elevation.elevation(4);
+          }
+        }
+      }
+    }
+  }
+}
--- a/resources/styles/@core/template/_utils.scss
+++ b/resources/styles/@core/template/_utils.scss
@@ -0,0 +1,41 @@
+@use "sass:string";
+
+/*
+  ℹ️ This function is helpful when we have multi dimensional value
+
+  Assume we have padding variable `$nav-padding-horizontal: 10px;`
+  With above variable let's say we use it in some style:
+  ```scss
+  .selector {
+    margin-left: $nav-padding-horizontal;
+  }
+  ```
+
+  Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
+  In this case above style will be invalid.
+
+  This function will extract the left most value from the variable value.
+
+  $nav-padding-horizontal: 10px; => 10px;
+  $nav-padding-horizontal: 10px 15px; => 10px;
+
+  This is safe:
+  ```scss
+  .selector {
+    margin-left: get-first-value($nav-padding-horizontal);
+  }
+  ```
+*/
+@function get-first-value($var) {
+  $start-at: string.index(#{$var}, " ");
+
+  @if $start-at {
+    @return string.slice(
+      #{$var},
+      0,
+      $start-at
+    );
+  } @else {
+    @return $var;
+  }
+}
--- a/resources/styles/@core/template/_variables.scss
+++ b/resources/styles/@core/template/_variables.scss
@@ -0,0 +1,57 @@
+@use "sass:map";
+@use "utils";
+
+$vertical-nav-horizontal-padding-margin-custom: 1.91rem;
+
+// ℹ️ We created this SCSS var to extract the start padding
+// Docs: https://sass-lang.com/documentation/modules/string
+// $vertical-nav-horizontal-padding => 0 8px;
+// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
+//   string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
+// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
+
+$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-margin-custom) !default;
+
+@forward "@core-scss/base/variables" with (
+  // 👉 Default layout with vertical nav
+  $default-layout-with-vertical-nav-navbar-footer-roundness: 8px !default,
+
+  // 👉 Vertical nav
+  $layout-vertical-nav-collapsed-width: 84px !default,
+  $vertical-nav-background-color-rgb: var(--v-theme-surface) !default,
+  $vertical-nav-items-nested-icon-size: 0.5rem !default,
+  $vertical-nav-horizontal-padding: 0.9375rem 0.625rem !default,
+  $vertical-nav-header-inline-spacing: 0 !default,
+  $vertical-nav-header-padding: 1rem 2.2rem !default,
+
+  // Section title margin top (when its not first child)
+  $vertical-nav-section-title-mt: 1.4rem !default,
+
+  // Section title margin bottom
+  $vertical-nav-section-title-mb: 0.65rem !default,
+
+  // Vertical nav icons
+  $vertical-nav-items-icon-size: 1.375rem !default,
+  $vertical-nav-navbar-style: "floating" !default, // options: elevated, floating
+  $vertical-nav-floating-navbar-top: 0.75rem !default,
+  $vertical-nav-items-icon-margin-inline-end: 0.625rem !default,
+
+  // 👉 Horizontal nav
+  /*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+  */
+  $horizontal-nav-padding: 0.625rem !default,
+
+  // Horizontal nav icons
+  $horizontal-nav-items-icon-size: 1.375rem !default,
+  $horizontal-nav-third-level-icon-size: 0.5rem !default,
+  $horizontal-nav-items-icon-margin-inline-end: 0.5rem !default,
+);
+
+$slider-thumb-label-color: rgb(117, 117, 117) !default;
+
+// vertical nav header
+$vertical-nav-header-margin-top: 0.75rem !default;
--- a/resources/styles/@core/template/_vertical-nav.scss
+++ b/resources/styles/@core/template/_vertical-nav.scss
@@ -0,0 +1,103 @@
+@use "@core-scss/template/placeholders" as *;
+@use "vuetify/lib/styles/tools/elevation" as elevation;
+@use "@configured-variables" as variables;
+
+$divider-gap: 0.75rem;
+
+// vertical nav app title
+.layout-nav-type-vertical {
+  .layout-vertical-nav {
+    @include elevation.elevation(3);
+
+    // 👉 Nav header
+    .nav-header {
+      margin-block-start: variables.$vertical-nav-header-margin-top;
+
+      .app-title-wrapper {
+        h1 {
+          font-size: 28px;
+        }
+      }
+    }
+
+    .nav-items {
+      padding-block-start: 0.25rem;
+
+      // ℹ️ Reduce with width of the thumb in vertical nav menu so we can clearly see active indicator
+      .ps__thumb-y {
+        inline-size: 0.125rem;
+      }
+
+      .ps__rail-y.ps--clicking .ps__thumb-y,
+      .ps__rail-y:focus > .ps__thumb-y,
+      .ps__rail-y:hover > .ps__thumb-y {
+        inline-size: 0.375rem;
+      }
+    }
+
+    // nav-section-title's line
+    .title-text {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-start;
+      column-gap: $divider-gap;
+
+      &::before {
+        flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
+        border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+        content: "";
+        margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
+      }
+    }
+
+    // Active status indicator
+    .nav-link .router-link-exact-active,
+    .nav-group.active:not(.nav-group .nav-group) > :first-child {
+      &::after {
+        position: absolute;
+        background-color: rgb(var(--v-global-theme-primary));
+        block-size: 2.625rem;
+        border-end-start-radius: 0.375rem;
+        border-start-start-radius: 0.375rem;
+        content: "";
+        inline-size: 0.25rem;
+        inset-inline-end: - variables.$vertical-nav-horizontal-spacing;
+      }
+    }
+
+    // 👉 Vertical nav link
+    .nav-group {
+      .nav-link {
+        > .router-link-exact-active {
+          @extend %nav-link-nested-active;
+
+          // active status indicator removed
+          &::after {
+            content: none;
+          }
+        }
+      }
+
+      // Active & open states for nav group label
+      &.open:not(.active),
+      .nav-group.active {
+        > :first-child {
+          &.nav-group-label {
+            svg,
+            .nav-item-title {
+              color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+            }
+          }
+        }
+      }
+
+      // nav-group active
+      &.active:not(.nav-group .nav-group) {
+        > :first-child {
+          @extend %vertical-nav-group-active;
+        }
+      }
+    }
+  }
+}
--- a/resources/styles/@core/template/index.scss
+++ b/resources/styles/@core/template/index.scss
@@ -0,0 +1,11 @@
+@use "@core-scss/base";
+
+// Layout
+@use "vertical-nav";
+@use "default-layout-w-vertical-nav";
+
+// Components
+@use "components";
+
+// Dark
+@use "dark";
--- a/resources/styles/@core/template/libs/apex-chart.scss
+++ b/resources/styles/@core/template/libs/apex-chart.scss
@@ -0,0 +1,95 @@
+@use "@styles/variables/_vuetify.scss" as vuetify;
+@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+.v-application .apexcharts-canvas {
+  &line[stroke="transparent"] {
+    display: "none";
+  }
+
+  .apexcharts-tooltip {
+    @include mixins_elevation.elevation(3);
+
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-surface));
+
+    .apexcharts-tooltip-title {
+      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+      background: rgb(var(--v-theme-surface));
+      font-weight: 600;
+    }
+
+    &.apexcharts-theme-light {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+
+    &.apexcharts-theme-dark {
+      color: white;
+    }
+
+    .apexcharts-tooltip-series-group:first-of-type {
+      padding-block-end: 0;
+    }
+  }
+
+  .apexcharts-xaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-grey-50));
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+
+    &::after {
+      border-block-end-color: rgb(var(--v-theme-grey-50));
+    }
+
+    &::before {
+      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-yaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-grey-50));
+
+    &::after {
+      border-inline-start-color: rgb(var(--v-theme-grey-50));
+    }
+
+    &::before {
+      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+  }
+
+  .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
+    @include layoutsMixins.rtl {
+      text-anchor: start;
+    }
+  }
+
+  .apexcharts-text,
+  .apexcharts-tooltip-text,
+  .apexcharts-datalabel-label,
+  .apexcharts-datalabel,
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text,
+  .apexcharts-legend-text {
+    font-family: vuetify.$body-font-family !important;
+  }
+
+  .apexcharts-pie-label {
+    fill: white;
+    filter: none;
+  }
+
+  .apexcharts-marker {
+    box-shadow: none;
+  }
+
+  .apexcharts-legend-marker {
+    margin-inline-end: 0.3875rem !important;
+  }
+}
--- a/resources/styles/@core/template/libs/full-calendar.scss
+++ b/resources/styles/@core/template/libs/full-calendar.scss
@@ -0,0 +1,267 @@
+@use "@core-scss/base/mixins";
+
+.v-application .fc {
+  --fc-today-bg-color: rgba(var(--v-theme-on-surface), 0.04);
+  --fc-border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  --fc-neutral-bg-color: rgb(var(--v-theme-background));
+  --fc-list-event-hover-bg-color: rgba(var(--v-theme-on-surface), 0.02);
+  --fc-page-bg-color: rgb(var(--v-theme-surface));
+  --fc-event-border-color: currentcolor;
+
+  a {
+    color: inherit;
+  }
+
+  .fc-timegrid-divider {
+    padding: 0;
+  }
+
+  .fc-col-header-cell-cushion {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .fc-toolbar .fc-toolbar-title {
+    margin-inline-start: 0.25rem;
+  }
+
+  .fc-event-time {
+    font-size: 0.75rem;
+    font-weight: 500 !important;
+  }
+
+  .fc-event-title {
+    font-size: 0.75rem;
+    font-weight: 500 !important;
+  }
+
+  .fc-timegrid-event {
+    .fc-event-title {
+      font-size: 0.875rem;
+    }
+  }
+
+  .fc-prev-button {
+    padding-inline-start: 0;
+  }
+
+  .fc-prev-button,
+  .fc-next-button {
+    padding: 0.25rem;
+  }
+
+  .fc-col-header .fc-col-header-cell .fc-col-header-cell-cushion {
+    padding: 0.5rem;
+    text-decoration: none !important;
+  }
+
+  .fc-timegrid .fc-timegrid-slots .fc-timegrid-slot {
+    block-size: 3rem;
+  }
+
+  // Removed double border on left in list view
+  .fc-list {
+    border-inline-start: none;
+    font-size: 0.875rem;
+
+    .fc-list-day-cushion.fc-cell-shaded {
+      background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+      font-weight: 600;
+    }
+
+    .fc-list-event-time,
+    .fc-list-event-title {
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    }
+
+    .fc-list-day .fc-list-day-text,
+    .fc-list-day .fc-list-day-side-text {
+      text-decoration: none;
+    }
+  }
+
+  .fc-timegrid-axis {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 0.75rem;
+    text-transform: capitalize;
+  }
+
+  .fc-timegrid-slot-label-frame {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 0.75rem;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .fc-header-toolbar {
+    flex-wrap: wrap;
+    margin: 1.25rem;
+    column-gap: 0.5rem;
+    row-gap: 1rem;
+  }
+
+  .fc-toolbar-chunk {
+    display: flex;
+    align-items: center;
+
+    .fc-button-group {
+      .fc-button-primary {
+        &,
+        &:hover,
+        &:not(.disabled):active {
+          border-color: transparent;
+          background-color: transparent;
+          color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+    }
+
+    &:last-child {
+      .fc-button-group {
+        border: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
+        border-radius: 0.375rem;
+
+        .fc-button {
+          font-size: 0.9rem;
+          letter-spacing: 0.0187rem;
+          padding-inline: 1rem;
+          text-transform: uppercase;
+
+          &:not(:last-child) {
+            border-inline-end: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
+          }
+
+          &.fc-button-active {
+            background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
+            color: rgb(var(--v-theme-primary));
+          }
+        }
+      }
+    }
+  }
+
+  .fc-toolbar-title {
+    display: inline-block;
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 1.25rem;
+    font-weight: 500;
+  }
+
+  .fc-scrollgrid-section {
+    th {
+      border-inline: 0;
+    }
+  }
+
+  // Calendar content container
+  .fc-view-harness {
+    min-block-size: 40.625rem;
+  }
+
+  .fc-event {
+    border-color: transparent;
+    cursor: pointer;
+    margin-block-end: 0.3rem;
+    padding-block: 0.1875rem;
+    padding-inline: 0.3125rem;
+  }
+
+  .fc-event-main {
+    color: inherit;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding-inline: 0.25rem;
+  }
+
+  tbody[role="rowgroup"] {
+    > tr > td[role="presentation"] {
+      border: none;
+    }
+  }
+
+  .fc-scrollgrid {
+    border-inline-start: none;
+  }
+
+  .fc-daygrid-day {
+    padding: 0.3125rem;
+  }
+
+  .fc-daygrid-day-number {
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+  }
+
+  .fc-list-event-dot {
+    color: inherit;
+
+    --fc-event-border-color: currentcolor;
+  }
+
+  .fc-list-event {
+    background-color: transparent !important;
+  }
+
+  .fc-popover {
+    @include mixins.elevation(3);
+
+    border-radius: 6px;
+
+    .fc-popover-header,
+    .fc-popover-body {
+      padding: 0.5rem;
+    }
+
+    .fc-popover-title {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 500;
+    }
+  }
+
+  // 👉 sidebar toggler
+  .fc-toolbar-chunk {
+    .fc-button-group {
+      align-items: center;
+
+      .fc-button .fc-icon {
+        vertical-align: bottom;
+      }
+
+      // ℹ️ Below two `background-image` styles contains static color due to browser limitation of not parsing the css var inside CSS url()
+      .fc-drawerToggler-button {
+        display: none;
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
+        background-position: 50%;
+        background-repeat: no-repeat;
+        block-size: 1.5625rem;
+        font-size: 0;
+        inline-size: 1.5625rem;
+        margin-inline-end: 0.25rem;
+
+        @media (max-width: 1264px) {
+          display: block !important;
+        }
+
+        .v-theme--dark & {
+          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
+        }
+      }
+    }
+  }
+
+  // ℹ️ Workaround of https://github.com/fullcalendar/fullcalendar/issues/6407
+  .fc-col-header,
+  .fc-daygrid-body,
+  .fc-scrollgrid-sync-table,
+  .fc-timegrid-body,
+  .fc-timegrid-body table {
+    inline-size: 100% !important;
+  }
+}
--- a/resources/styles/@core/template/libs/vuetify/_overrides.scss
+++ b/resources/styles/@core/template/libs/vuetify/_overrides.scss
@@ -0,0 +1,195 @@
+@use "@configured-variables" as variables;
+@use "@styles/variables/vuetify";
+@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
+
+// 👉 Typography
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.text-h1,
+.text-h2,
+.text-h3,
+.text-h4,
+.text-h5,
+.text-h6,
+.text-body-1,
+.text-subtitle-1,
+.text-button,
+.v-card-title {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+
+.v-application,
+.text-body-2,
+.text-subtitle-2,
+.text-overline {
+  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
+// 👉 Button
+.v-btn {
+  .v-icon {
+    --v-icon-size-multiplier: 0.953;
+  }
+
+  &--icon .v-icon {
+    --v-icon-size-multiplier: 1;
+  }
+}
+
+// Alert
+// custom icon style
+$alert-prepend-icon-font-size: 1.125rem !important;
+
+.v-alert:not(.v-alert--prominent) {
+  .v-alert__prepend {
+    padding: 0.25rem;
+    border-radius: 1rem;
+    background-color: #fff;
+
+    .v-icon {
+      block-size: $alert-prepend-icon-font-size;
+      font-size: $alert-prepend-icon-font-size;
+      inline-size: $alert-prepend-icon-font-size;
+    }
+  }
+}
+
+@each $color-name in variables.$theme-colors-name {
+  .v-alert {
+
+    &:not(.v-alert--prominent).text-#{$color-name},
+    &:not(.v-alert--prominent).bg-#{$color-name} {
+      .v-alert__prepend {
+        border: 3px solid rgb(var(--v-theme-#{$color-name}), 0.4);
+        color: rgba(var(--v-theme-#{$color-name})) !important;
+      }
+    }
+
+    &--variant-outlined:not(.v-alert--prominent),
+    &--variant-tonal:not(.v-alert--prominent),
+    &--variant-plain:not(.v-alert--prominent) {
+      &.bg-#{$color-name},
+      &.text-#{$color-name} {
+        .v-alert__prepend {
+          background-color: rgb(var(--v-theme-#{$color-name}));
+          box-shadow: 0 0 0 3px rgba(var(--v-theme-#{$color-name}), 0.4);
+          color: #fff !important;
+        }
+      }
+    }
+  }
+}
+
+// 👉 VAvatar
+.v-avatar {
+  font-size: 1.125rem;
+  line-height: 1.25rem;
+}
+
+// 👉 VChip
+.v-chip {
+  line-height: normal;
+  text-transform: uppercase;
+}
+
+.v-chip.v-chip--size-default .v-avatar {
+  font-size: 0.8125rem;
+  line-height: normal;
+}
+
+// 👉 VTooltip
+.v-tooltip {
+  .v-overlay__content {
+    font-weight: 500;
+  }
+}
+
+// 👉 VMenu
+.v-menu.v-overlay {
+  .v-overlay__content {
+    .v-list {
+      .v-list-item--density-default {
+        min-block-size: 2.25rem;
+      }
+    }
+  }
+}
+
+// 👉 VTabs
+.v-tabs--vertical:not(.v-tabs-pill) {
+  border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+
+  .v-tab__slider {
+    inset-inline-end: 0;
+    inset-inline-start: unset;
+  }
+}
+
+.v-tabs.v-tabs-pill:not(.v-tabs--stacked) {
+  &.v-tabs--density-default {
+    --v-tabs-height: 38px;
+  }
+}
+
+// 👉 VSliderThumb
+.v-slider-thumb__surface {
+  border: 3px solid rgb(var(--v-theme-surface));
+
+  &::before {
+    inset: 0;
+  }
+}
+
+.v-slider-thumb__label {
+  background: variables.$slider-thumb-label-color;
+  color: rgb(var(--v-theme-on-primary));
+}
+
+.v-slider-thumb__label::before {
+  color: variables.$slider-thumb-label-color;
+}
+
+// 👉 VTimeline
+.v-timeline {
+  .v-timeline-item:not(:last-child) {
+    .v-timeline-item__body {
+      margin-block-end: 0.95rem;
+    }
+  }
+}
+
+// 👉 VDatatable
+.v-data-table {
+  th {
+    background: rgb(var(--v-table-header-background)) !important;
+    font-size: 0.75rem;
+    font-weight: 500 !important;
+    letter-spacing: 0.17px !important;
+    text-transform: uppercase !important;
+
+    .v-data-table-header__content {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+
+// 👉 VTable
+.v-table {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+
+  th {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+    font-size: 0.75rem;
+    text-align: center !important;
+    text-transform: uppercase;
+
+    &:first-child {
+      text-align: start !important;
+    }
+  }
+}
--- a/resources/styles/@core/template/libs/vuetify/_variables.scss
+++ b/resources/styles/@core/template/libs/vuetify/_variables.scss
@@ -0,0 +1,237 @@
+$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
+$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
+$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
+/* stylelint-disable max-line-length */
+$font-family-custom: "Public Sans", sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+/* stylelint-enable max-line-length */
+
+@forward "../../../base/libs/vuetify/variables" with (
+  // 👉 font-family
+  $body-font-family: $font-family-custom !default,
+
+  // 👉 border-radius
+  $border-radius-root: 6px !default,
+
+  $shadow-key-umbra: (
+    0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
+    1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
+    2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)),
+    3: (0 1px 6px -2px var(--v-shadow-key-umbra-opacity)),
+    4: (0 1px 7px -2px var(--v-shadow-key-umbra-opacity)),
+    5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),
+    6: (0 2px 9px -2px var(--v-shadow-key-umbra-opacity)),
+    7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
+    8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)),
+    9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)),
+    10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)),
+    11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)),
+    12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
+    13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
+    14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)),
+    15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)),
+    16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)),
+    17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)),
+    18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)),
+    19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)),
+    20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
+    21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
+    22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)),
+    23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)),
+    24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity))
+  ) !default,
+
+  $shadow-key-penumbra: (
+    0: (0 0 0 0 $shadow-key-penumbra-opacity-custom),
+    1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom),
+    2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom),
+    3: (0 2px 6px 1px $shadow-key-penumbra-opacity-custom),
+    4: (0 3px 7px 1px $shadow-key-penumbra-opacity-custom),
+    5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),
+    6: (0 4px 9px 1px $shadow-key-penumbra-opacity-custom),
+    7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom),
+    8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom),
+    9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom),
+    10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom),
+    11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom),
+    12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom),
+    13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom),
+    14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom),
+    15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom),
+    16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom),
+    17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom),
+    18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom),
+    19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom),
+    20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom),
+    21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom),
+    22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom),
+    23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom),
+    24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom)
+  ) !default,
+
+  $shadow-key-ambient: (
+    0: (0 0 0 0 $shadow-key-ambient-opacity-custom),
+    1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom),
+    2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom),
+    3: (0 1px 4px 2px $shadow-key-ambient-opacity-custom),
+    4: (0 1px 4px 2px $shadow-key-ambient-opacity-custom),
+    5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),
+    6: (0 2px 6px 4px $shadow-key-ambient-opacity-custom),
+    7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
+    8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom),
+    9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom),
+    10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom),
+    11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom),
+    12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom),
+    13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom),
+    14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom),
+    15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom),
+    16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom),
+    17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom),
+    18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom),
+    19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom),
+    20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom),
+    21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom),
+    22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom),
+    23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom),
+    24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
+  ) !default,
+
+  // 👉 Typography
+  $typography: (
+    "h1": (
+      "weight": 500,
+      "line-height": 7rem,
+      "letter-spacing": -0.0938rem,
+    ),
+    "h2": (
+      "weight": 500,
+      "line-height": 4.5rem,
+      "letter-spacing": -0.0313rem,
+    ),
+    "h3": (
+      "weight": 500,
+      "line-height": 3.5rem,
+    ),
+    "h4": (
+      "weight": 500,
+      "letter-spacing": 0.0156rem,
+    ),
+    "h5": (
+      "weight": 500,
+    ),
+    "h6": (
+      "letter-spacing": 0.0094rem,
+    ),
+    "subtitle-1": (
+      "letter-spacing": 0.0094rem,
+    ),
+    "subtitle-2": (
+      "line-height": 1.3125rem,
+      "letter-spacing": 0.0063rem,
+    ),
+    "body-1": (
+      "letter-spacing": 0.0094rem,
+    ),
+    "body-2": (
+      "line-height": 1.3125rem,
+      "letter-spacing": 0.0094rem,
+    ),
+    "caption": (
+      "line-height": 0.875rem,
+      "letter-spacing": 0.025rem,
+    ),
+    "button": (
+      "line-height": 1.5rem,
+      "letter-spacing": 0.025rem,
+    ),
+    "overline": (
+      "weight": 400,
+      "line-height": 0.875rem,
+      "letter-spacing": 0.0625rem,
+    ),
+  ) !default,
+
+  // 👉 Alert
+  $alert-density: ("default": 0, "comfortable": -0.625, "compact": -2) !default,
+  $alert-title-font-size: 1rem !default,
+  $alert-title-line-height: 1.5rem !default,
+  $alert-prepend-margin-inline-end: 0.75rem !default,
+
+  // 👉 Badges
+  $badge-dot-height: 0.5rem !default,
+  $badge-dot-width: 0.5rem !default,
+
+  // 👉 Button
+  $button-height: 38px !default,
+  $button-icon-density: ("default": 2.5, "comfortable": 0, "compact": -1.5) !default,
+  $button-card-actions-padding: 0 12px !default,
+
+  // 👉 Chip
+  $chip-font-size: 13px !default,
+  $chip-close-size: 22px !default,
+  $chip-label-border-radius: 4px !default,
+  $chip-density: ("default": 0, "comfortable": -1, "compact": -2) !default,
+
+  // 👉 Dialog
+  $dialog-card-header-padding: 20px 20px 0 !default,
+  $dialog-card-text-padding: 20px !default,
+  $dialog-elevation: 16 !default,
+
+  // 👉 Expansion Panel
+  $expansion-panel-title-padding: 14px 20px !default,
+  $expansion-panel-title-font-size: 1rem !default,
+  $expansion-panel-active-title-min-height: 51px !default,
+  $expansion-panel-title-min-height: 51px !default,
+  $expansion-panel-text-padding: 6px 20px 20px !default,
+
+  // 👉 List
+  $list-item-icon-margin-end: 12px !default,
+
+  // 👉 Pagination
+  $pagination-item-margin: 0.2rem !default,
+
+  // 👉 Snackbar
+  $snackbar-border-radius: 8px !default,
+  $snackbar-btn-padding: 0 12px !default,
+  $snackbar-background: rgb(var(--v-snackbar-background)) !default,
+  $snackbar-color: rgb(var(--v-snackbar-color)) !default,
+
+  // 👉 Tooltip
+  $tooltip-background-color: rgba(var(--v-tooltip-background),var(--v-tooltip-opacity)) !default,
+  $tooltip-padding: 4px 8px !default,
+  $tooltip-line-height: 16px !default,
+  $tooltip-font-size: 11px !default,
+
+  // 👉 Timeline
+  $timeline-dot-divider-background: transparent !default,
+  $timeline-divider-line-thickness: 1px !default,
+  $timeline-item-padding: 16px !default,
+
+  // 👉 input
+  $input-details-padding-above: 3px !default,
+  $text-field-details-padding-inline: 14px !default,
+
+  // 👉 combobox
+  $combobox-content-elevation: 6 !default,
+
+  // 👉 Range slider
+  $slider-track-active-size: 4px !default,
+  $slider-thumb-label-height: 29px !default,
+  $slider-thumb-label-padding: 4px 12px !default,
+  $slider-thumb-label-font-size: 12px !default,
+  $slider-track-border-radius: 12px !default,
+
+  // 👉 Card
+  $card-item-padding: 1.5rem !default,
+  $card-border-radius: 0.5rem !default,
+  $card-text-padding: 1.5rem !default,
+  $card-text-font-size: 1rem !default,
+  $card-title-padding: 0.5rem 1.5rem !default,
+  $card-subtitle-padding: 0 1.5rem !default,
+  $card-prepend-padding-inline-end: 0.625rem !default,
+  $card-append-padding-inline-start: 0.625rem !default,
+
+  // 👉 Button Group
+  $btn-group-height: 38px !default,
+);
--- a/resources/styles/@core/template/libs/vuetify/index.scss
+++ b/resources/styles/@core/template/libs/vuetify/index.scss
@@ -0,0 +1,2 @@
+@use "@core-scss/base/libs/vuetify";
+@use "overrides";
--- a/resources/styles/@core/template/pages/misc.scss
+++ b/resources/styles/@core/template/pages/misc.scss
@@ -0,0 +1,14 @@
+.layout-blank {
+  .misc-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.25rem;
+    min-block-size: calc(var(--vh, 1vh) * 100);
+  }
+
+  .misc-avatar {
+    z-index: 1;
+  }
+}
--- a/resources/styles/@core/template/pages/page-auth.scss
+++ b/resources/styles/@core/template/pages/page-auth.scss
@@ -0,0 +1,45 @@
+.layout-blank {
+  .auth-wrapper {
+    min-block-size: calc(var(--vh, 1vh) * 100);
+  }
+
+  .auth-card {
+    z-index: 1 !important;
+  }
+}
+
+.auth-title {
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.auth-v1-top-shape,
+.auth-v1-bottom-shape {
+  position: absolute;
+}
+
+.auth-v1-top-shape {
+  block-size: 148px;
+  inline-size: 148px;
+  inset-block-start: -2.5rem;
+  inset-inline-end: -2.5rem;
+}
+
+.auth-v1-bottom-shape {
+  block-size: 240px;
+  inline-size: 240px;
+  inset-block-end: -4.5rem;
+  inset-inline-start: -3rem;
+}
+
+.auth-illustration {
+  z-index: 1;
+}
+
+@media (min-width: 960px) {
+  .skin--bordered {
+    .auth-card-v2 {
+      border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+    }
+  }
+}
--- a/resources/styles/@core/template/placeholders/_default-layout-vertical-nav.scss
+++ b/resources/styles/@core/template/placeholders/_default-layout-vertical-nav.scss
@@ -0,0 +1,11 @@
+@use "vuetify/lib/styles/tools/elevation" as elevation;
+@use "@configured-variables" as variables;
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.5rem;
+
+    @include elevation.elevation(4);
+  }
+}
--- a/resources/styles/@core/template/placeholders/_index.scss
+++ b/resources/styles/@core/template/placeholders/_index.scss
@@ -0,0 +1,3 @@
+@forward "vertical-nav";
+@forward "nav";
+@forward "default-layout-vertical-nav";
--- a/resources/styles/@core/template/placeholders/_nav.scss
+++ b/resources/styles/@core/template/placeholders/_nav.scss
@@ -0,0 +1,33 @@
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+
+/*
+    Active nav link styles for horizontal & vertical nav
+
+    For horizontal nav it will be only applied to top level nav items
+    For vertical nav it will be only applied to nav links (not nav groups)
+*/
+%nav-link-active {
+  --v-activated-opacity: 0.16;
+
+  background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
+  box-shadow: none;
+  color: rgb(var(--v-theme-primary));
+}
+
+// style for vertical nav nested icon
+%nav-link-nested-active {
+  background-color: transparent !important;
+  box-shadow: none;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+  font-weight: 600;
+
+  // style for nested dot icon
+  .nav-item-icon {
+    color: rgb(var(--v-global-theme-primary)) !important;
+    filter: drop-shadow(rgb(var(--v-global-theme-primary)) 0 0 2px);
+    transform: scale(1.2);
+  }
+}
--- a/resources/styles/@core/template/placeholders/_vertical-nav.scss
+++ b/resources/styles/@core/template/placeholders/_vertical-nav.scss
@@ -0,0 +1,21 @@
+// Open & Active nav group styles
+%vertical-nav-group-active {
+  --v-theme-overlay-multiplier: 2;
+
+  color: rgb(var(--v-global-theme-primary));
+
+  &:hover {
+    --v-theme-overlay-multiplier: 4;
+  }
+}
+
+// nav-group and nav-link border radius
+%vertical-nav-item-interactive {
+  border-radius: 0.375rem;
+  margin-block-end: 0.125rem;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  transition: transform 0.25s ease-in-out 0s;
+}
--- a/resources/styles/css/base.css
+++ b/resources/styles/css/base.css
@@ -0,0 +1,36 @@
+:root {
+  --marine-blue: hsl(213, 96%, 18%);
+  --purplish-blue: hsl(243, 100%, 62%);
+  --pastel-blue: hsl(228, 100%, 84%);
+  --light-blue: hsl(206, 94%, 87%);
+  --strawberry-red: hsl(354, 84%, 57%);
+
+  --cool-gray: hsl(231, 11%, 63%);
+  --light-gray: hsl(229, 24%, 87%);
+  --magnolia: hsl(217, 100%, 97%);
+  --alabaster: hsl(231, 100%, 99%);
+  --white: hsl(0, 0%, 100%);
+
+  --font-size: 16px;
+  --font-family: 'Ubuntu', sans-serif;
+}
+
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url("./fonts/Ubuntu-Regular.ttf") format("truetype");
+}
+
+body {
+  min-height: 100vh;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+}
--- a/resources/styles/css/demo.css
+++ b/resources/styles/css/demo.css
@@ -0,0 +1,137 @@
+/*
+* demo.css
+* File include item demo only specific css only
+******************************************************************************/
+
+.light-style .menu .app-brand.demo {
+  height: 64px;
+}
+
+.dark-style .menu .app-brand.demo {
+  height: 64px;
+}
+
+.app-brand-logo.demo {
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  display: -ms-flexbox;
+  display: flex;
+  width: 40px;
+  height: 40px;
+}
+
+.app-brand-logo.demo svg {
+  width: 35px;
+  height: 24px;
+}
+
+.app-brand-text.demo {
+  font-size: 1.375rem;
+}
+
+/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
+.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
+  padding-top: 64px !important;
+}
+
+.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
+  padding-top: 78px !important;
+}
+
+/* Navbar page z-index issue solution */
+.content-wrapper .navbar {
+  z-index: auto;
+}
+
+/*
+* Content
+******************************************************************************/
+
+.demo-blocks>* {
+  display: block !important;
+}
+
+.demo-inline-spacing>* {
+  margin: 1rem 0.375rem 0 0 !important;
+}
+
+/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
+.demo-vertical-spacing>* {
+  margin-top: 1rem !important;
+  margin-bottom: 0 !important;
+}
+
+.demo-vertical-spacing.demo-only-element> :first-child {
+  margin-top: 0 !important;
+}
+
+.demo-vertical-spacing-lg>* {
+  margin-top: 1.875rem !important;
+  margin-bottom: 0 !important;
+}
+
+.demo-vertical-spacing-lg.demo-only-element> :first-child {
+  margin-top: 0 !important;
+}
+
+.demo-vertical-spacing-xl>* {
+  margin-top: 5rem !important;
+  margin-bottom: 0 !important;
+}
+
+.demo-vertical-spacing-xl.demo-only-element> :first-child {
+  margin-top: 0 !important;
+}
+
+.rtl-only {
+  display: none !important;
+  text-align: left !important;
+  direction: ltr !important;
+}
+
+[dir='rtl'] .rtl-only {
+  display: block !important;
+}
+
+/* Dropdown buttons going out of small screens */
+@media (max-width: 576px) {
+  #dropdown-variation-demo .btn-group .text-truncate {
+    width: 254px;
+    position: relative;
+  }
+
+  #dropdown-variation-demo .btn-group .text-truncate::after {
+    position: absolute;
+    top: 45%;
+    right: 0.65rem;
+  }
+}
+
+/*
+* Layout demo
+******************************************************************************/
+
+.layout-demo-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 1rem;
+}
+
+.layout-demo-placeholder img {
+  width: 900px;
+}
+
+.layout-demo-info {
+  text-align: center;
+  margin-top: 1rem;
+}
--- a/resources/styles/css/fonts/Ubuntu-Bold.ttf
+++ b/resources/styles/css/fonts/Ubuntu-Bold.ttf
--- a/resources/styles/css/fonts/Ubuntu-Medium.ttf
+++ b/resources/styles/css/fonts/Ubuntu-Medium.ttf
--- a/resources/styles/css/fonts/Ubuntu-Regular.ttf
+++ b/resources/styles/css/fonts/Ubuntu-Regular.ttf
--- a/resources/styles/css/main.css
+++ b/resources/styles/css/main.css
@@ -0,0 +1,13 @@
+@import '@styles/css/base.css';
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    color: black;
+}
+
+.v-application__wrap {
+    min-height: 0;
+}
--- a/resources/styles/styles.scss
+++ b/resources/styles/styles.scss
@@ -0,0 +1 @@
+// Write your overrides
--- a/resources/styles/variables/_template.scss
+++ b/resources/styles/variables/_template.scss
@@ -0,0 +1,6 @@
+@forward "@core-scss/template/variables";
+
+// ℹ️ Remove above import and uncomment below to override core variables.
+// @forward "@core-scss/template/variables" with (
+//   $<variable-name>: <variable-value>
+// )
--- a/resources/styles/variables/_vuetify.scss
+++ b/resources/styles/variables/_vuetify.scss
@@ -0,0 +1,7 @@
+// ❗ Path must be relative
+@forward "../@core/template/libs/vuetify/variables";
+
+// ℹ️ Remove above import and uncomment below to override core variables.
+// @forward "../@core/template/libs/vuetify/variables" with (
+//   $<variable-name>: <variable-value>
+// )