Admin One Dashboard template intergration

Author: balajidharma

package.json

@@ -8,12 +8,17 @@
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
         "@inertiajs/progress": "^0.2.7",
+        "@mdi/js": "^7.0.96",
         "@tailwindcss/forms": "^0.5.2",
+        "@tailwindcss/line-clamp": "^0.4.0",
         "@vitejs/plugin-vue": "^3.0.1",
         "autoprefixer": "^10.4.2",
         "axios": "^0.27",
+        "chart.js": "^3.9.1",
         "laravel-vite-plugin": "^0.5.0",
         "lodash": "^4.17.19",
+        "numeral": "^2.0.6",
+        "pinia": "^2.0.17",
         "postcss": "^8.4.6",
         "tailwindcss": "^3.1.0",
         "vite": "^3.0.0",

public/data-sources/clients.json

@@ -0,0 +1 @@
+{"data":[{"id":19,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Howell-Hand.svg","login":"percy64","name":"Howell Hand","company":"Kiehn-Green","city":"Emelyside","progress":70,"created":"Mar 3, 2021","created_mm_dd_yyyy":"03-03-2021"},{"id":11,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Hope-Howe.svg","login":"dare.concepcion","name":"Hope Howe","company":"Nolan Inc","city":"Paristown","progress":68,"created":"Dec 1, 2021","created_mm_dd_yyyy":"12-01-2021"},{"id":32,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Nelson-Jerde.svg","login":"geovanni.kessler","name":"Nelson Jerde","company":"Nitzsche LLC","city":"Jailynbury","progress":49,"created":"May 18, 2021","created_mm_dd_yyyy":"05-18-2021"},{"id":22,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Kim-Weimann.svg","login":"macejkovic.dashawn","name":"Kim Weimann","company":"Brown-Lueilwitz","city":"New Emie","progress":38,"created":"May 4, 2021","created_mm_dd_yyyy":"05-04-2021"},{"id":34,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Justice-OReilly.svg","login":"hilpert.leora","name":"Justice O'Reilly","company":"Lakin-Muller","city":"New Kacie","progress":38,"created":"Mar 27, 2021","created_mm_dd_yyyy":"03-27-2021"},{"id":48,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Adrienne-Mayer-III.svg","login":"ferry.sophia","name":"Adrienne Mayer III","company":"Kozey, McLaughlin and Kuhn","city":"Howardbury","progress":39,"created":"Mar 29, 2021","created_mm_dd_yyyy":"03-29-2021"},{"id":20,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Julien-Ebert.svg","login":"gokuneva","name":"Mr. Julien Ebert","company":"Cormier LLC","city":"South Serenaburgh","progress":29,"created":"Jun 25, 2021","created_mm_dd_yyyy":"06-25-2021"},{"id":47,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Lenna-Smitham.svg","login":"paolo.walter","name":"Lenna Smitham","company":"King Inc","city":"McCulloughfort","progress":59,"created":"Oct 8, 2021","created_mm_dd_yyyy":"10-08-2021"},{"id":24,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Travis-Davis.svg","login":"lkessler","name":"Travis Davis","company":"Leannon and Sons","city":"West Frankton","progress":52,"created":"Oct 20, 2021","created_mm_dd_yyyy":"10-20-2021"},{"id":49,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Prof.-Esteban-Steuber.svg","login":"shana.lang","name":"Prof. Esteban Steuber","company":"Langosh-Ernser","city":"East Sedrick","progress":34,"created":"May 16, 2021","created_mm_dd_yyyy":"05-16-2021"},{"id":36,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Russell-Goodwin-V.svg","login":"jewel07","name":"Russell Goodwin V","company":"Nolan-Stracke","city":"Williamsonmouth","progress":55,"created":"Apr 22, 2021","created_mm_dd_yyyy":"04-22-2021"},{"id":33,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Cassidy-Wiegand-DVM.svg","login":"burnice.okuneva","name":"Ms. Cassidy Wiegand DVM","company":"Kuhlman-Hahn","city":"New Ruthiehaven","progress":76,"created":"Sep 16, 2021","created_mm_dd_yyyy":"09-16-2021"},{"id":44,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Watson-Brakus-PhD.svg","login":"oconnell.juanita","name":"Mr. Watson Brakus PhD","company":"Osinski, Bins and Kuhn","city":"Lake Gloria","progress":58,"created":"Jun 22, 2021","created_mm_dd_yyyy":"06-22-2021"},{"id":46,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Garrison-Friesen-V.svg","login":"vgutmann","name":"Mr. Garrison Friesen V","company":"VonRueden, Rippin and Pfeffer","city":"Port Cieloport","progress":39,"created":"Oct 19, 2021","created_mm_dd_yyyy":"10-19-2021"},{"id":14,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Sister-Morar.svg","login":"veum.lucio","name":"Ms. Sister Morar","company":"Gusikowski, Altenwerth and Abbott","city":"Lake Macville","progress":34,"created":"Jun 11, 2021","created_mm_dd_yyyy":"06-11-2021"},{"id":40,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Laisha-Reinger.svg","login":"edietrich","name":"Ms. Laisha Reinger","company":"Boehm PLC","city":"West Alexiemouth","progress":73,"created":"Nov 2, 2021","created_mm_dd_yyyy":"11-02-2021"},{"id":5,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Cameron-Lind.svg","login":"mose44","name":"Cameron Lind","company":"Tremblay, Padberg and Pouros","city":"Naderview","progress":59,"created":"Sep 14, 2021","created_mm_dd_yyyy":"09-14-2021"},{"id":43,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Sarai-Little.svg","login":"rau.abelardo","name":"Sarai Little","company":"Deckow LLC","city":"Jeanieborough","progress":49,"created":"Jun 13, 2021","created_mm_dd_yyyy":"06-13-2021"},{"id":2,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Shyann-Kautzer.svg","login":"imurazik","name":"Shyann Kautzer","company":"Osinski, Boehm and Kihn","city":"New Alvera","progress":41,"created":"Feb 15, 2021","created_mm_dd_yyyy":"02-15-2021"},{"id":15,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Lorna-Christiansen.svg","login":"annalise97","name":"Lorna Christiansen","company":"Altenwerth-Friesen","city":"Port Elbertland","progress":36,"created":"Mar 9, 2021","created_mm_dd_yyyy":"03-09-2021"}]}

public/data-sources/history.json

@@ -0,0 +1 @@
+{"data":[{"amount":375.53,"account":"45721474","name":"Home Loan Account","date":"3 days ago","type":"deposit","business":"Turcotte"},{"amount":470.26,"account":"94486537","name":"Savings Account","date":"3 days ago","type":"payment","business":"Murazik - Graham"},{"amount":971.34,"account":"63189893","name":"Checking Account","date":"5 days ago","type":"invoice","business":"Fahey - Keebler"},{"amount":374.63,"account":"74828780","name":"Auto Loan Account","date":"7 days ago","type":"withdrawal","business":"Collier - Hintz"}]}

resources/css/_checkbox-radio-switch.css

@@ -0,0 +1,61 @@
+.checkbox, .radio, .switch {
+  @apply inline-flex items-center cursor-pointer relative;
+}
+
+.checkbox input[type=checkbox], .radio input[type=radio], .switch input[type=checkbox] {
+  @apply absolute left-0 opacity-0 -z-1;
+}
+
+.checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check, .switch input[type=checkbox]+.check {
+  @apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
+}
+
+.checkbox input[type=checkbox]:focus+.check, .radio input[type=radio]:focus+.check, .switch input[type=checkbox]:focus+.check {
+  @apply ring ring-blue-700;
+}
+
+.checkbox input[type=checkbox]+.check, .radio input[type=radio]+.check {
+  @apply block w-5 h-5;
+}
+
+.checkbox input[type=checkbox]+.check {
+  @apply rounded;
+}
+
+.switch input[type=checkbox]+.check {
+  @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
+}
+
+.radio input[type=radio]+.check, .switch input[type=checkbox]+.check, .switch input[type=checkbox]+.check:before {
+  @apply rounded-full;
+}
+
+.checkbox input[type=checkbox]:checked+.check, .radio input[type=radio]:checked+.check {
+  @apply bg-no-repeat bg-center bg-blue-600 border-blue-600 border-4;
+}
+
+.checkbox input[type=checkbox]:checked+.check {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.radio input[type=radio]:checked+.check {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
+}
+
+.switch input[type=checkbox]:checked+.check {
+  @apply bg-blue-600 border-blue-600;
+}
+
+.switch input[type=checkbox]+.check:before {
+  content: '';
+  @apply block w-5 h-5 bg-white border border-gray-700;
+}
+
+.switch input[type=checkbox]:checked+.check:before {
+  transform: translate3d(110%, 0 ,0);
+  @apply border-blue-600;
+}
+
+.checkbox .control-label, .radio .control-label, .switch .control-label {
+  @apply pl-2;
+}

resources/css/_progress.css

@@ -0,0 +1,19 @@
+progress {
+  @apply h-3 rounded-full overflow-hidden;
+}
+
+progress::-webkit-progress-bar {
+  @apply bg-blue-200;
+}
+
+progress::-webkit-progress-value {
+  @apply bg-blue-500;
+}
+
+progress::-moz-progress-bar {
+  @apply bg-blue-500;
+}
+
+progress::-ms-fill {
+  @apply bg-blue-500 border-0;
+}

resources/css/_scrollbars.css

@@ -0,0 +1,37 @@
+html {
+  scrollbar-width: thin;
+  scrollbar-color: #9ca3af #e5e7eb;
+}
+
+html::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+html::-webkit-scrollbar-track {
+  @apply bg-gray-200;
+}
+
+html::-webkit-scrollbar-thumb {
+  @apply bg-gray-400 rounded;
+}
+
+html::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-500;
+}
+
+html.dark-scrollbars {
+  scrollbar-color: #374151 #111827;
+}
+
+html.dark-scrollbars::-webkit-scrollbar-track {
+  @apply bg-gray-900;
+}
+
+html.dark-scrollbars::-webkit-scrollbar-thumb {
+  @apply bg-gray-700;
+}
+
+html.dark-scrollbars::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-600;
+}

resources/css/_table.css

@@ -0,0 +1,46 @@
+table {
+  @apply w-full;
+}
+
+thead {
+  @apply hidden lg:table-header-group;
+}
+
+tr {
+  @apply max-w-full block relative border-b-4 border-gray-100
+    lg:table-row lg:border-b-0 dark:border-slate-800;
+}
+
+tr:last-child {
+  @apply border-b-0;
+}
+
+td:not(:first-child) {
+  @apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700;
+}
+
+th {
+  @apply lg:text-left lg:p-3;
+}
+
+td {
+  @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
+    lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800;
+}
+
+td:last-child {
+  @apply border-b-0;
+}
+
+tbody tr, tbody tr:nth-child(odd) {
+  @apply lg:hover:bg-gray-100 lg:dark:hover:bg-slate-700/70;
+}
+
+tbody tr:nth-child(odd) {
+  @apply lg:bg-gray-50 lg:dark:bg-slate-800;
+}
+
+td:before {
+  content: attr(data-label);
+  @apply font-semibold pr-3 text-left lg:hidden;
+}

resources/css/app.css

@@ -0,0 +1,8 @@
+@import "tailwind/_base.css";
+@import "tailwind/_components.css";
+@import "tailwind/_utilities.css";
+
+@import "_checkbox-radio-switch.css";
+@import "_progress.css";
+@import "_scrollbars.css";
+@import "_table.css";

resources/css/main.css

@@ -0,0 +1 @@
+@tailwind base;

resources/css/tailwind/_base.css

@@ -0,0 +1 @@
+@tailwind components;

resources/css/tailwind/_components.css

@@ -0,0 +1 @@
+@tailwind utilities;

resources/css/tailwind/_utilities.css

@@ -0,0 +1,20 @@
+<script setup>
+import { useLayoutStore } from '@/Stores/layout.js'
+import menu from '@/menu.js'
+import AsideMenuLayer from '@/Components/AsideMenuLayer.vue'
+import OverlayLayer from '@/Components/OverlayLayer.vue'
+
+const layoutStore = useLayoutStore()
+</script>
+
+<template>
+  <AsideMenuLayer
+    :menu="menu"
+    :class="[layoutStore.isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0', {'lg:hidden xl:flex': !layoutStore.isAsideLgActive}]"
+  />
+  <OverlayLayer
+    v-show="layoutStore.isAsideLgActive"
+    z-index="z-30"
+    @overlay-click="layoutStore.isAsideLgActive = false"
+  />
+</template>

resources/js/Components/AsideMenu.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { Link } from '@inertiajs/inertia-vue3'
+import { useStyleStore } from '@/Stores/style.js'
+import { mdiMinus, mdiPlus } from '@mdi/js'
+import { getButtonColor } from '@/colors.js'
+import BaseIcon from '@/Components/BaseIcon.vue'
+import AsideMenuList from '@/Components/AsideMenuList.vue'
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  },
+  isDropdownList: Boolean,
+})
+
+const itemHref = computed(() => props.item.route ? route(props.item.route) : props.item.href)
+
+const emit = defineEmits(['menu-click'])
+
+const styleStore = useStyleStore()
+
+const hasColor = computed(() => props.item && props.item.color)
+
+const asideMenuItemActiveStyle = computed(() => hasColor.value ? '' : styleStore.asideMenuItemActiveStyle)
+
+const isDropdownActive = ref(false)
+
+const componentClass = computed(() => (
+  [
+    props.isDropdownList ? 'py-3 px-6 text-sm' : 'py-3',
+    hasColor.value
+      ? getButtonColor(props.item.color, false, true)
+      : styleStore.asideMenuItemStyle
+  ]
+))
+
+const hasDropdown = computed(() => !!props.item.menu)
+
+const menuClick = event => {
+  emit('menu-click', event, props.item)
+
+  if (hasDropdown.value) {
+    isDropdownActive.value = !isDropdownActive.value
+  }
+}
+
+const activeInactiveStyle = computed(
+  () => props.item.route && route().current(props.item.route)
+    ? styleStore.asideMenuItemActiveStyle
+    : ''
+)
+</script>
+
+<template>
+  <li>
+    <component
+      :is="item.route ? Link : 'a'"
+      :href="itemHref"
+      :target="item.target ?? null"
+      class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white"
+      :class="componentClass"
+      @click="menuClick"
+    >
+      <BaseIcon
+        v-if="item.icon"
+        :path="item.icon"
+        class="flex-none"
+        :class="activeInactiveStyle"
+        w="w-16"
+        :size="18"
+      />
+      <span
+        class="grow text-ellipsis line-clamp-1"
+        :class="activeInactiveStyle"
+      >{{ item.label }}</span>
+      <BaseIcon
+        v-if="hasDropdown"
+        :path="isDropdownActive ? mdiMinus : mdiPlus"
+        class="flex-none"
+        :class="activeInactiveStyle"
+        w="w-12"
+      />
+    </component>
+    <AsideMenuList
+      v-if="hasDropdown"
+      :menu="item.menu"
+      :class="[ styleStore.asideMenuDropdownStyle, isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden' ]"
+      is-dropdown-list
+    />
+  </li>
+</template>