first commit

resources/styles/@core/template/_default-layout-w-horizontal-nav.scss

@@ -0,0 +1,19 @@
+@use "@core-scss/base/placeholders" as *;
+@use "@core-scss/template/placeholders" as *;
+@use "@core-scss/base/mixins";
+
+.layout-wrapper.layout-nav-type-horizontal {
+  // 👉 App footer
+  .layout-footer {
+    @at-root {
+      .layout-footer-sticky#{&} {
+        box-shadow: 0 -4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
+      }
+    }
+  }
+
+  // TODO: Use Vuetify grid sass variable here
+  .layout-page-content {
+    padding-block: 1.5rem;
+  }
+}

resources/styles/@core/template/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,28 @@
+@use "@configured-variables" as variables;
+@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 {
+  // 👉 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 {
+            box-shadow: 0 -4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
+            padding-inline: 1.5rem;
+          }
+        }
+      }
+    }
+  }
+}

resources/styles/@core/template/_utilities.scss

@@ -0,0 +1,51 @@
+.v-timeline{
+  .v-timeline-item {
+    .app-timeline-title {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+      font-size: 15px;
+      font-weight: 500;
+      letter-spacing: 0.15px;
+      line-height: 1.375rem;
+    }
+
+    .app-timeline-meta {
+      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+      font-size: 13px;
+      letter-spacing: 0.4px;
+      line-height: 1.125rem;
+    }
+
+    .app-timeline-text {
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      font-size: .9375rem;
+      line-height: 1.375rem;
+    }
+  }
+}
+
+.per-page-select {
+  margin-block: auto;
+
+  .v-field__input {
+    align-items: center;
+    padding: 2px;
+  }
+
+  .v-field__append-inner {
+    align-items: center;
+    padding: 0;
+
+    .v-icon {
+      margin-inline-start: 0 !important;
+    }
+  }
+}
+
+.leading-normal {
+  font-weight: 600;
+  letter-spacing: .0094rem;
+}
+
+.bg-custom-background{
+  background-color: rgb(var(--v-table-header-color)) !important;
+}

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;
+  }
+}

resources/styles/@core/template/_variables.scss

@@ -0,0 +1,56 @@
+@use "sass:map";
+@use "utils";
+
+$vertical-nav-horizontal-padding-custom: 1.4375rem 1rem;
+
+// ℹ️ 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-custom) !default;
+$vertical-nav-items-icon-margin-inline-end: 0 !default;
+
+@forward "@core-scss/base/variables" with (
+  $layout-vertical-nav-collapsed-width: 68px !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: 0 1rem !default,
+  $vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default,
+  // Vertical nav header padding
+  $vertical-nav-header-padding: 1.25rem 0 1.25rem $vertical-nav-horizontal-padding-start !default,
+  
+  // Vertical nav icons
+  $vertical-nav-items-icon-size: 1.375rem !default,
+  $vertical-nav-items-nested-icon-size: 0.75rem !default,
+
+
+  // Section title margin top (when its not first child)
+  $vertical-nav-section-title-mt: 1.25rem !default,
+
+  $layout-vertical-nav-footer-height: 54px !default,
+  
+  // Horizontal nav icons
+  $horizontal-nav-items-icon-size: 1.375rem !default,
+  $horizontal-nav-items-icon-margin-inline-end: 0.5rem !default,
+  
+  // 👉 Horizontal nav
+  $horizontal-nav-padding: 0.625rem !default,
+  $horizontal-nav-third-level-icon-size: 0.75rem !default,
+  
+  // Gap between top level horizontal nav items
+  $horizontal-nav-top-level-items-gap: 8px !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(0.625rem + 0.375rem - 0.25rem) !default,
+
+  $font-sizes: (
+    "sm": 0.8125rem,
+    "base": 0.9375rem,
+  ),
+  $font-line-height: (
+    "base": 1.375rem,
+  ),
+);

resources/styles/@core/template/_vertical-nav.scss

@@ -0,0 +1,51 @@
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+.layout-nav-type-vertical {
+  // 👉 Layout Vertical nav
+  .layout-vertical-nav {
+    .nav-items{
+      padding-block-start: .25rem;
+    }
+
+    // 👉 Vertical nav group
+    .nav-group {
+      .nav-group-arrow {
+        font-size: 1.375rem;
+      }
+    }
+
+    // 👉 Nav group & Link
+    .nav-link,
+    .nav-group {
+      // shadow cut issue fix
+      margin-block-end: -0.5rem;
+      padding-block-end: 0.5rem;
+
+      a {
+        outline: none;
+      }
+    }
+
+    // 👉 Nav section title
+    .nav-section-title {
+      .placeholder-icon {
+        transform: translateX(-3px);
+
+        @include layoutsMixins.rtl {
+          transform: translateX(3px);
+        }
+      }
+    }
+
+    // 👉 Nav header
+    .nav-header {
+      padding-block: 1.25rem;
+      padding-inline: 23px 0;
+    }
+  }
+}
+
+//  👉 Overlay 
+.layout-overlay{
+  touch-action: none;
+}

resources/styles/@core/template/index.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+@use "@core-scss/base";
+
+// layouts
+@use "vertical-nav";
+@use "default-layout-w-vertical-nav";
+@use "default-layout-w-horizontal-nav";
+
+// Components
+@use "components";
+
+// Utilities
+@use "utilities";
+
+// Skins
+@use "skins";

resources/styles/@core/template/libs/apex-chart.scss

@@ -0,0 +1,99 @@
+@use "@styles/variables/_vuetify.scss" as vuetify;
+@use "@layouts/styles/mixins" as layoutsMixins;
+@use "@core-scss/base/mixins";
+
+body .apexcharts-canvas {
+  &line[stroke="transparent"] {
+    display: "none";
+  }
+
+  .apexcharts-tooltip {
+    @include mixins.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;
+
+    @include layoutsMixins.rtl {
+      margin-inline-end: 0.75rem !important;
+    }
+  }
+}

resources/styles/@core/template/libs/full-calendar.scss

@@ -0,0 +1,355 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-duplicate-selectors */
+@use "@core-scss/base/mixins";
+@use "@styles/variables/vuetify.scss";
+
+body .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;
+  }
+  
+  th.fc-col-header-cell {
+    border-inline-end-color: transparent;
+  }
+
+  .fc-day-other .fc-daygrid-day-top {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    opacity: 1;
+  }
+
+  .fc-daygrid-event{
+    border-radius: 999px;
+  }
+
+  .fc-col-header-cell-cushion {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: .9375rem;
+    font-weight: 500;
+  }
+
+  .fc-toolbar .fc-toolbar-title {
+    margin-inline-start: 0.5rem;
+  }
+
+  .fc-event-time {
+    font-size: 0.8125rem;
+    font-weight: 500 !important;
+    line-height: 14px;
+  }
+
+  .fc-event-title {
+    font-size: 0.75rem;
+    font-weight: 500 !important;
+    line-height: 14px;
+  }
+
+  .fc-timegrid-event {
+    .fc-event-title {
+      font-size: 0.8125rem;
+      line-height: 1.25rem;
+    }
+
+    .fc-event-time {
+      margin-block-end: 2px;
+    }
+  }
+
+  .fc-event-title-container {
+    .fc-event-title {
+      font-size: 0.8125rem;
+    }
+  }
+
+  .fc-prev-button,
+  .fc-next-button {
+    border: 1px solid rgb(var(--v-theme-secondary));
+    border-radius: 6px !important;
+    block-size: 34px;
+    color: rgb(var(--v-theme-secondary));
+    inline-size: 34px;
+    margin-inline-end: 0.5rem;
+    min-block-size: 34px;
+    padding-block: 0 !important;
+    padding-inline: 7px !important;
+
+    &:hover,
+    &:focus {
+      border: 1px solid rgb(var(--v-theme-secondary)) !important; 
+      background-color: rgba(var(--v-theme-secondary), var(--v-activated-opacity)) !important;
+    }
+
+    .fc-icon{
+      position: relative;
+      inset-block-start: -1px;
+    }
+  }
+
+  .fc-prev-button {
+    .fc-icon{
+      position: relative;
+      inset-inline-start: -2px;
+    }
+  }
+
+  .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 in list view
+  .fc-list {
+    border-block-end: none;
+    border-inline: none;
+    font-size: 0.8125rem;
+
+    .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: 500;
+    }
+
+    .fc-list-event-time,
+    .fc-list-event-title {
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      font-size: 0.9375rem;
+    }
+
+    .fc-list-day .fc-list-day-text,
+    .fc-list-day .fc-list-day-side-text {
+      font-size: 0.9375rem;
+      line-height: 22px;
+      text-decoration: none;
+    }
+  }
+
+  .fc-timegrid-axis {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: .8125rem;
+    text-transform: capitalize;
+  }
+
+  .fc-timegrid-slot-label-frame {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: .8125rem;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .fc-header-toolbar {
+    flex-wrap: wrap;
+    padding: 1.25rem;
+    gap: 1rem 0.5rem;
+    margin-block-end: 0 !important;
+  }
+
+  .fc-toolbar-chunk {
+    display: flex;
+    align-items: center;
+
+    .fc-button-group {
+      .fc-button-primary {
+        &,
+        &:hover,
+        &:not(.disabled):active {
+          background-color: transparent;
+          color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+        }
+
+        
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+    }
+
+    &:last-child {
+      .fc-button-group {
+        border-radius: 0.375rem;
+
+        .fc-button,
+        .fc-button:active {
+          border: 1px solid rgb(var(--v-theme-primary));
+          color: rgb(var(--v-theme-primary));
+          font-size: 0.9375rem;
+          font-weight: 500;
+          letter-spacing: 0.0187rem;
+          padding-inline: 1rem;
+          text-transform: capitalize;
+
+          &: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.5rem;
+    font-weight: 500;
+    line-height: 38px;
+  }
+
+  // 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: .125rem;
+    padding-inline: .5rem;
+  }
+
+  .fc-event-main {
+    color: inherit;
+    font-weight: 500;
+    line-height: 14px;
+  }
+
+  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.6875rem;
+  }
+
+  .fc-daygrid-day {
+    padding: 0.3125rem;
+  }
+
+  .fc-scrollgrid-section > * {
+    border-inline-end-width: 0;
+    border-inline-start-width: 0;
+  }
+
+  .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: 0.9375rem;
+      font-weight: 500;
+    }
+  }
+
+  // 👉 sidebar toggler
+  .fc-toolbar-chunk {
+    .fc-button-group {
+      align-items: center;
+
+      .fc-button .fc-icon {
+        font-size: 1.25rem;
+        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;
+        border: 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: 1rem;
+
+        @media (max-width: 1279px) {
+          display: block !important;
+        }
+
+        @at-root {
+          .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;
+  }
+
+  // Remove event margin in week view inside day column
+  .fc-timegrid-col-events {
+    // margin: 0 !important;
+
+    .fc-event{
+      padding-block: 8px !important;
+    }
+  }
+
+
+  .fc-timeGridWeek-view .fc-timegrid-slot-minor{
+    border-block-start-style: none;
+  }
+
+  // Set button border radius
+  .fc .fc-button {
+    border-radius: vuetify.$card-border-radius;
+    min-block-size: vuetify.$button-height;
+  }
+}
+
+

resources/styles/@core/template/libs/shepherd.scss

@@ -0,0 +1,87 @@
+@use "@core-scss/base/mixins";
+@use "shepherd.js/dist/css/shepherd.css";
+@use "@styles/variables/_vuetify.scss" as variables;
+
+.shepherd-button {
+  border-radius: variables.$button-border-radius;
+  font-size: variables.$button-font-size;
+  font-weight: variables.$button-font-weight;
+  margin-inline-end: 0.75rem;
+  padding-block: 0.25rem;
+  padding-inline: 1rem;
+}
+
+.shepherd-footer {
+  background: rgb(var(--v-theme-background));
+  padding-block: 0.5rem 1rem;
+  padding-inline: 1rem;
+}
+
+.shepherd-element .shepherd-content .shepherd-header {
+  background: rgb(var(--v-theme-background));
+  padding-block: 1rem 0;
+  padding-inline: 1rem;
+}
+
+.shepherd-element .shepherd-content .shepherd-header .shepherd-title {
+  color: rgb(var(--v-theme-on-background));
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.shepherd-text {
+  padding: 1rem;
+  background: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-on-background));
+  font-size: variables.$card-text-font-size;
+}
+
+.shepherd-cancel-icon {
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)) !important;
+  font-size: 1.5rem;
+}
+
+.shepherd-element[data-popper-placement^="bottom"] {
+  margin-block-start: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^="top"] {
+  margin-block-start: -0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^="right"] {
+  margin-inline-start: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^="left"] {
+  margin-inline-end: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement] {
+  .shepherd-arrow::before {
+    background: rgb(var(--v-theme-background)) !important;
+  }
+}
+
+.shepherd-element {
+  @include mixins.elevation(8);
+  
+  border-radius: variables.$card-border-radius;
+  background: transparent;
+}
+
+.nextBtnClass,
+.nextBtnClass:not(:disabled):hover {
+  background: rgb(var(--v-theme-primary));
+}
+
+.backBtnClass,
+.backBtnClass:not(:disabled):hover {
+  background: rgba(var(--v-theme-secondary), var(--v-medium-emphasis-opacity));
+}
+
+@media screen and (max-width: 600px) {
+  .shepherd-element {
+    max-inline-size: 75vw;
+  }
+}

resources/styles/@core/template/libs/swiper.scss

@@ -0,0 +1,5 @@
+swiper-container {
+  --swiper-navigation-color: rgb(var(--v-theme-primary));
+  --swiper-navigation-size: 1.75rem;
+  --swiper-pagination-color: rgb(var(--v-theme-primary));
+}

resources/styles/@core/template/libs/vuetify/_overrides.scss

@@ -0,0 +1,38 @@
+@use "@core-scss/base/utils";
+@use "@configured-variables" as variables;
+
+// 👉 Body
+// set body font size 15px
+body {
+  font-size: 15px !important;
+}
+
+// 👉 Typography
+.text-h1,
+.text-h2,
+.text-h3,
+.text-h4,
+.text-h5,
+.text-h6,
+.text-overline,
+.v-input {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+
+.text-caption{
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
+}
+
+.v-card-subtitle,
+.text-subtitle-1,
+.text-subtitle-2 {
+  color: rgba(var(--v-theme-on-background), 0.55);
+}
+
+// 👉 Input placeholder alignment
+.v-input--density-compact{
+  input::placeholder { 
+    position: relative;
+    inset-block-start: 1px;
+  }
+}

resources/styles/@core/template/libs/vuetify/_variables.scss

@@ -0,0 +1,312 @@
+$font-family-custom: "Inter", sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
+  "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+/* stylelint-disable length-zero-no-unit */
+@forward "../../../base/libs/vuetify/variables" with (
+  $body-font-family: $font-family-custom !default,
+  $border-radius-root: 6px,
+  
+  $rounded: (
+    "sm": 4px,
+    "shaped": 25px 0,
+    "lg":8px,
+  ) !default,
+
+  // 👉 Typography
+  $typography: (
+    "h1": (
+      "size": 2.875rem,
+      "weight": 500,
+      "line-height": 4.25rem,
+      "letter-spacing": normal,
+    ),
+    "h2": (
+      "size": 2.375rem,
+      "weight": 500,
+      "line-height": 3.5rem,
+      "letter-spacing": normal,
+    ),
+    "h3": (
+      "size": 1.75rem,
+      "weight": 500,
+      "line-height": 2.625rem,
+      "letter-spacing": normal,
+    ),
+    "h4": (
+      "size": 1.5rem,
+      "weight": 500,
+      "line-height": 2.375rem,
+      "letter-spacing": normal,
+    ), 
+    "h5": (
+      "size": 1.125rem,
+      "weight": 500,
+      "line-height": 1.75rem,
+      "letter-spacing": normal,
+    ),
+    "h6": (
+      "size": 0.9375rem,
+      "line-height": 1.375rem,
+      "letter-spacing": normal,
+    ),
+    "subtitle-1": (
+      "size": 0.9375rem,
+      "line-height": 1.375rem,
+      "letter-spacing": normal,
+    ),
+    "subtitle-2": (
+      "size": 0.8125rem,
+      "line-height": 1.25rem,
+      "letter-spacing": normal,
+    ),
+    "body-1": (
+      "size": 0.9375rem,
+      "line-height": 1.375rem,
+      "letter-spacing": normal,
+    ),
+    "body-2": (
+      "size": 0.8125rem,
+      "line-height": 1.25rem,
+      "letter-spacing": normal,
+    ),
+    "caption": (
+      "size": 0.8125rem,
+      "line-height": 1.125rem,
+      "letter-spacing": 0.025rem,
+    ),
+    "overline": (
+      "weight": 400,
+      "line-height": 0.875rem,
+      "letter-spacing": 0.05rem,
+    ),
+    'button': (
+      'size': 0.9375rem,
+      'weight': 500,
+      'letter-spacing': normal,
+      'font-family': $font-family-custom,
+      'text-transform': capitalize,
+    ),
+  )!default,
+
+  //  👉 Shadows
+  $shadow-key-umbra: (
+    0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)),
+    1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)),
+    2: (0 2px 4px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))),
+    3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)),
+    4: (0 3px 6px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))),
+    5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)),
+    6: (0 4px 10px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))),
+    7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)),
+    8: (0 6px 16px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))),
+    9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)),
+    10: (0 8px 28px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))),
+    11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)),
+    12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)),
+    13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)),
+    14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)),
+    15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)),
+    16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)),
+    17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)),
+    18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)),
+    19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)),
+    20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)),
+    21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)),
+    22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)),
+    23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)),
+    24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34))
+  ) !default,
+
+  $shadow-key-penumbra: (
+    0: (0 0 transparent),
+    1: (0 0 transparent),
+    2: (0 0 transparent),
+    3: (0 0 transparent),
+    4: (0 0 transparent),
+    5: (0 0 transparent),
+    6: (0 0 transparent),
+    7: (0 0 transparent),
+    8: (0 0 transparent),
+    9: (0 0 transparent),
+    10: (0 0 transparent),
+    11: (0 0 transparent),
+    12: (0 0 transparent),
+    13: (0 0 transparent),
+    14: (0 0 transparent),
+    15: (0 0 transparent),
+    16: (0 0 transparent),
+    17: (0 0 transparent),
+    18: (0 0 transparent),
+    19: (0 0 transparent),
+    20: (0 0 transparent),
+    21: (0 0 transparent),
+    22: (0 0 transparent),
+    23: (0 0 transparent),
+    24: (0 0 transparent),
+  ) !default,
+
+  $shadow-key-ambient: (
+    0: (0 0 transparent),
+    1: (0 0 transparent),
+    2: (0 0 transparent),
+    3: (0 0 transparent),
+    4: (0 0 transparent),
+    5: (0 0 transparent),
+    6: (0 0 transparent),
+    7: (0 0 transparent),
+    8: (0 0 transparent),
+    9: (0 0 transparent),
+    10: (0 0 transparent),
+    11: (0 0 transparent),
+    12: (0 0 transparent),
+    13: (0 0 transparent),
+    14: (0 0 transparent),
+    15: (0 0 transparent),
+    16: (0 0 transparent),
+    17: (0 0 transparent),
+    18: (0 0 transparent),
+    19: (0 0 transparent),
+    20: (0 0 transparent),
+    21: (0 0 transparent),
+    22: (0 0 transparent),
+    23: (0 0 transparent),
+    24: (0 0 transparent),
+  ) !default,
+
+  // 👉 Avatar
+  $avatar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default,
+
+  // 👉 Alert
+  $alert-title-font-size: 1.125rem !default,
+  $alert-text-line-height: 1.625rem !default,
+
+  // 👉 Autocomplete
+  $autocomplete-content-elevation: 8 !default,
+  $combobox-content-elevation: 8 !default,
+  $select-content-elevation: 8 !default,
+  
+  // 👉 Badge
+  $badge-height: 1.375rem !default,
+  $badge-min-width: 1.375rem !default,
+  $badge-dot-height: 8px !default,
+  $badge-dot-width: 8px !default,
+  $badge-border-radius: 50px !default,
+  $badge-font-size: 0.8125rem !default,
+
+  // 👉 Buttons
+  $button-height: 38px !default,
+  $button-padding-ratio: 2.15 !default,
+  $button-margin-start: 0 !default,
+  $button-disabled-opacity: .45 !default,
+  $button-elevation: ('default': 2, 'hover': 2, 'active': 0) !default,
+  $button-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default,
+  $button-line-height: 1.375rem !default,
+  $button-margin-end: 0.375rem !default,
+  $button-card-actions-padding: 0 18px !default,
+  
+  // 👉 Chip
+  $chip-font-size: 13px !default,
+  $chip-icon-font-size: 1.25rem !default,
+  $chip-close-size: 20px !default,
+  $chip-font-weight: 500 !default,
+
+  // 👉 Cards
+  $card-actions-padding: 0 6px 6px !default,
+  $card-title-font-size: 1.125rem !default,
+  $card-title-line-height: 1.75rem !default,
+  $card-text-font-size: 0.9375rem !default,
+  $card-text-line-height: 1.375rem !default,
+  $card-subtitle-font-size: 0.9375rem !default,
+  $card-subtitle-line-height: 1.375rem !default,
+  $card-subtitle-font-weight: 400 !default,
+  $card-subtitle-header-padding: 0 !default,
+
+  // 👉 Dialog 
+  $dialog-elevation: 10 !default,
+  $dialog-card-header-padding: 20px !default,
+  $dialog-card-text-padding: 0 20px 20px !default,
+
+  // 👉 Expansion Panel
+  $expansion-panel-active-margin: 0.5rem !default,
+  $expansion-panel-text-padding: 0 20px 20px !default,
+  $expansion-panel-title-padding: 12px 20px !default,
+  $expansion-panel-title-min-height: 46px !default,
+  $expansion-panel-active-title-min-height: 46px !default,
+
+  // 👉 Field
+  $field-outline-opacity: 0.22 !default,
+  $field-control-affixed-padding: 16px !default,
+  $field-control-affixed-inner-padding: 10px !default,
+  $field-font-size: 15px !default,
+
+  // 👉 Label
+  $label-font-size: 0.9375rem !default,
+  $label-letter-spacing: normal !default,
+  
+  // 👉 List
+  $list-item-one-line-min-height: 38px !default,
+  $list-subheader-min-height: 38px !default,
+  $list-item-padding: 8px 20px !default,
+  $list-subheader-font-weight: 500 !default,
+  $list-item-icon-margin-start: 12px !default,
+  $list-item-min-height: 38px !default,
+  $list-item-nav-title-font-size: 0.9375rem !default,
+  $list-item-nav-title-font-weight: 400 !default,
+  $list-item-nav-subtitle-font-size: 0.8125rem !default,
+  $list-item-subtitle-line-height: 1.25rem !default,
+
+  // 👉 label
+  $field-label-floating-scale: 0.8125 !default,
+  
+  // 👉 Snackbar
+  $snackbar-background: rgb(var(--v-tooltip-background)) !default,
+  $snackbar-color: rgb(var(--v-theme-surface)) !default,
+  $snackbar-content-padding: 12px 16px !default,
+  $snackbar-wrapper-padding: 0 !default,
+  $snackbar-wrapper-min-height: 44px !default,
+  $snackbar-elevation: 2 !default,
+  $snackbar-btn-padding: 0 10px !default,
+  $snackbar-action-margin: 16px !default,
+
+  // 👉 Slider
+  $slider-thumb-hover-opacity: var(--v-activated-opacity) !default,
+
+  // 👉 Tooltip
+  $tooltip-background-color: rgb(var(--v-tooltip-background)) !default,
+  $tooltip-text-color: rgb(var(--v-theme-surface)) !default,
+  $tooltip-border-radius: 0.25rem !default,
+  $tooltip-font-size: 0.8125rem !default,
+  $tooltip-padding: 4px 12px !default,
+  $tooltip-line-height: 1.25rem !default,
+  
+  // 👉 VPagination
+  $pagination-item-margin: 0.1875rem !default,
+
+  // 👉 Tabs
+  $tabs-height: 38px !default,
+  $tab-min-width: 60px !default,
+
+  // 👉 Timeline
+  $timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default,
+  $timeline-divider-line-thickness: 1.5px !default,
+  $timeline-item-padding: 16px !default,
+
+  // 👉 Slider
+  $slider-track-active-size-offset: 0px !default,
+  $slider-thumb-label-border-radius: 6px !default,
+  $slider-thumb-label-height: 28px !default,
+  $slider-thumb-label-padding: 4px 10px !default,
+
+  // 👉 Table
+  $table-row-height: 50px !default,
+  $table-header-font-weight: 500 !default,
+  $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $table-font-size: 15px !default,
+  $table-column-padding: 0 20px !default,
+
+  // navigation drawer
+  $navigation-drawer-temporary-elevation: 8 !default,
+  $navigation-drawer-transition-duration: 0.4s !default,
+
+  // 👉 Messages
+  $messages-font-size: 13px !default,
+);

resources/styles/@core/template/libs/vuetify/index.scss

@@ -0,0 +1,2 @@
+@use "@core-scss/base/libs/vuetify";
+@use "overrides";

resources/styles/@core/template/pages/misc.scss

@@ -0,0 +1,36 @@
+.layout-blank {
+  .misc-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.25rem;
+    min-block-size: 100dvh;
+
+    .misc-footer-img {
+      position: absolute;
+      inline-size: 100%;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+    }
+
+    .misc-footer-tree, .misc-footer-tree-1 {
+      position: absolute;
+    }
+    
+    .misc-footer-tree {
+      inset-block-end: 3.75rem;
+      inset-inline-start: 3.75rem;
+    }
+    
+    .misc-footer-tree-1 {
+      inset-block-end: 5rem;
+      inset-inline-end: 4.75rem;
+    }
+
+  }
+
+  .misc-avatar {
+    z-index: 1;
+  }
+}

resources/styles/@core/template/pages/page-auth.scss

@@ -0,0 +1,61 @@
+.layout-blank {
+  .auth-wrapper {
+    min-block-size: 100dvh;
+  }
+
+  .auth-footer-mask {
+    position: absolute;
+    inset-block-end: 0;
+    max-inline-size: 100%;
+    min-inline-size: 100%;
+  }
+
+  .auth-footer-tree{
+    position: absolute !important;
+    inset-block-end: 70px;
+    inset-inline-start: 70px;
+  }
+
+  .auth-footer-start-tree, .auth-footer-end-tree{
+    position: absolute !important;
+    z-index: 1 !important;
+  }
+
+  .auth-footer-start-tree{
+    inset-block-end: 3.75rem;
+    inset-inline-start: 3.75rem;
+  }
+
+  .auth-footer-end-tree{
+    inset-block-end: 4.625rem;
+    inset-inline-end: 5rem;
+  }
+
+  .auth-card, .auth-card-v2, .auth-illustration {
+    z-index: 1 !important;
+  }
+}
+
+@media (min-width: 960px) {
+  .skin--bordered {
+    .auth-card-v2 {
+      border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+    }
+  }
+}
+
+
+.auth-logo {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 2rem;
+  inset-inline-start: 2.3rem;
+}
+
+.auth-title{
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: 0.273px;
+  line-height: normal;
+  text-transform: capitalize;
+}

resources/styles/@core/template/placeholders/_default-layout-horizontal-nav.scss

@@ -0,0 +1,9 @@
+@use 'misc';
+
+%default-layout-horizontal-nav-navbar-and-nav-container {
+  box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
+
+  &.header-blur {
+    @extend %blurry-bg;
+  }
+}

resources/styles/@core/template/placeholders/_default-layout-vertical-nav.scss

@@ -0,0 +1,11 @@
+@use "@configured-variables" as variables;
+@use "@core-scss/base/mixins";
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%);
+
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.5rem;
+  }
+}

resources/styles/@core/template/placeholders/_horizontal-nav.scss

@@ -0,0 +1,36 @@
+@use "@core-scss/base/mixins";
+
+// Add border radius to top level nav item
+%horizontal-nav-top-level-item {
+  border-radius: 3.125rem !important;
+}
+
+// Horizontal nav item styles (including nested)
+%horizontal-nav-item {
+  padding-block: 0.5rem;
+}
+
+// Horizontal nav item title
+%horizontal-nav-item-title {
+  margin-inline-end: 0.5rem;
+}
+
+// Popper content styles
+%horizontal-nav-popper-content {
+  @include mixins.elevation(8);
+}
+
+
+// Styles for third level item icon/ (e.g. Reduce the icon's size of nested group's nav links (Top level group > Sub group > [Nav links]))
+%third-level-nav-item-icon {
+  color:rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))
+}
+
+
+// Active styles for sub nav link
+%horizontal-nav-sub-nav-link-active {
+  background: rgba(var(--v-theme-primary), 0.16);
+  color: rgb(var(--v-theme-primary));
+
+  i { color: rgb(var(--v-theme-primary)) !important;}
+}

resources/styles/@core/template/placeholders/_index.scss

@@ -0,0 +1,6 @@
+@forward "horizontal-nav";
+@forward "nav";
+@forward "default-layout-vertical-nav";
+@forward "default-layout-horizontal-nav";
+@forward "vertical-nav";
+@forward "misc";

resources/styles/@core/template/placeholders/_misc.scss

@@ -0,0 +1,7 @@
+%blurry-bg {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(9px);
+  backdrop-filter: blur(9px);
+  /* stylelint-enable */
+  background-color: rgb(var(--v-theme-surface), 0.85);
+}

resources/styles/@core/template/placeholders/_nav.scss

@@ -0,0 +1,17 @@
+@use "@core-scss/base/mixins";
+
+%nav-link-active {
+  background: linear-gradient(-72.47deg, rgb(var(--v-global-theme-primary)) 22.16%,
+  rgba(var(--v-global-theme-primary), 0.7) 76.47%) !important;
+
+  i { color: rgb(var(--v-theme-on-primary)) !important; }
+
+  @include mixins.elevation(4);
+}
+
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  .nav-item-title {
+    line-height: 1.375rem;
+  }
+}

resources/styles/@core/template/placeholders/_vertical-nav.scss

@@ -0,0 +1,93 @@
+@use "@configured-variables" as variables;
+
+%nav-header-action {
+  color:rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}
+
+// ℹ️ Add divider around section title
+%vertical-nav-section-title {
+  block-size: 2rem;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+
+  /*
+    ℹ️ We will use this to add gap between divider and text.
+    Moreover, we will use this to adjust the `flex-basis` property of left divider
+  */
+  $divider-gap: 0.625rem;
+
+  // Thanks: https://stackoverflow.com/a/62359101/10796681
+  .title-text {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    column-gap: $divider-gap;
+
+    &::before,
+    &::after {
+      border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+      content: "";
+    }
+
+    &::after {
+      flex: 1 1 auto;
+    }
+
+    &::before {
+      flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
+      margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
+    }
+  }
+
+  // ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
+  @at-root {
+    .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
+      margin-inline: 4px 0;
+    }
+  }
+}
+
+%vertical-nav-item-interactive {
+  // Add pill shape styles
+  block-size: 2.375rem !important;
+  border-end-end-radius: 3.125rem !important;
+  border-end-start-radius: 0 !important;
+  border-start-end-radius: 3.125rem !important;
+  border-start-start-radius: 0 !important;
+
+  // ℹ️ Wobble effect
+  transition: margin-inline 0.15s ease-in-out;
+  will-change: margin-inline;
+
+  // Reduce margin inline end when vertical nav is in collapsed mode and not hovered
+  .layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) & {
+    margin-inline: 0 5px;
+  }
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  font-size: .8125rem;
+  line-height: 20px;
+  padding-block: 0.125rem;
+  padding-inline: 0.75rem;
+}
+
+// Nav items styles (including section title)
+%vertical-nav-item {
+  gap: .5rem;
+  padding-block: 0.4375rem;
+}
+
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  margin-inline: .375rem;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  margin-inline-start: 1rem;
+  visibility: visible;
+}

resources/styles/@core/template/skins/_bordered.scss

@@ -0,0 +1,23 @@
+@use "sass:map";
+@use "@core-scss/base/mixins";
+@use "@configured-variables" as variables;
+
+$header: ".layout-navbar";
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: ".layout-navbar .navbar-content-container";
+}
+
+.skin--bordered {
+  .flatpickr-calendar {
+    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    box-shadow: none;
+  }
+
+  // select remove box shadow
+  .v-select__content,
+  .v-combobox__content,
+  .v-autocomplete__content {
+    box-shadow: none;
+  } 
+}

resources/styles/@core/template/skins/_index.scss

@@ -0,0 +1 @@
+@use "bordered";