got a basic dashboard going

2026-06-01 16:30:02 -06:00
parent e5e45043a8
commit 1d00b8e171
14 changed files with 753 additions and 58 deletions
@@ -0,0 +1,65 @@
+<script setup>
+import DashboardLayout from '../layouts/DashboardLayout.vue'
+
+const groups = [
+  {
+    label: 'Navigation',
+    icons: ['home','menu','close','arrow_back','arrow_forward','chevron_left','chevron_right',
+            'expand_more','expand_less','more_vert','more_horiz','open_in_new','launch'],
+  },
+  {
+    label: 'Actions',
+    icons: ['add','edit','delete','save','search','filter_list','sort','share','download',
+            'upload','copy_all','content_paste','refresh','sync'],
+  },
+  {
+    label: 'Status & Feedback',
+    icons: ['check_circle','error','warning','info','notifications','notification_important',
+            'done','done_all','pending','hourglass_empty','lock','lock_open'],
+  },
+  {
+    label: 'Content',
+    icons: ['dashboard','table_view','text_fields','auto_awesome','map','bar_chart',
+            'pie_chart','analytics','insights','summarize','article','description'],
+  },
+  {
+    label: 'People & Social',
+    icons: ['person','group','account_circle','face','supervised_user_circle',
+            'person_add','logout','login','badge','contacts'],
+  },
+  {
+    label: 'Media & Files',
+    icons: ['image','photo','video_library','music_note','folder','folder_open',
+            'attachment','cloud','cloud_upload','cloud_download','storage','backup'],
+  },
+]
+</script>
+
+<template>
+  <DashboardLayout>
+    <div class="space-y-6">
+      <div
+        v-for="group in groups"
+        :key="group.label"
+        class="rounded-2xl bg-white p-6 shadow-soft-md"
+      >
+        <h6 class="mb-4 text-sm font-bold text-dark">{{ group.label }}</h6>
+        <div class="grid grid-cols-4 gap-3 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-13">
+          <div
+            v-for="icon in group.icons"
+            :key="icon"
+            class="group flex flex-col items-center gap-2 rounded-xl p-3 transition-all hover:bg-primary/5 hover:shadow-soft-xs cursor-default"
+            :title="icon"
+          >
+            <span class="material-icons text-2xl text-secondary transition-colors group-hover:text-primary">
+              {{ icon }}
+            </span>
+            <span class="w-full truncate text-center text-xs text-secondary group-hover:text-dark">
+              {{ icon }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DashboardLayout>
+</template>