Merge pull request #66 from dikstub-rssa/fe-public-features-46

Feat(public): Implement Dark Mode + Adjustment Padding Frame

app/components/content/dashboard/index.vue

@@ -113,7 +113,7 @@ onMounted(() => {
     <div class="mt-4 flex flex-wrap items-center justify-between gap-2">
       <h2 class="text-2xl font-bold tracking-tight">Dashboard SIMRS</h2>
       <div class="flex items-center gap-4 space-x-2">
-        <div class="bg-primary rounded-xl border p-1 text-white">Status: Aktif</div>
+        <div class="rounded-xl border bg-primary p-1 text-white">Status: Aktif</div>
         <Button class="bg-primary p-2 text-white" size="lg">
           <Icon name="i-lucide-refresh-ccw" class="h-6 w-6" />
           Sinkronisasi
@@ -121,10 +121,10 @@ onMounted(() => {
       </div>
     </div>
     <main class="my-6 flex flex-1 flex-col gap-4 md:gap-8">
-      <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+  <div class="dashboard-grid">
         <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </div>
-      <div class="grid gap-4 md:gap-8 lg:grid-cols-1 xl:grid-cols-3">
+  <div class="dashboard-grid">
         <Card v-for="n in 3" :key="n">
           <CardHeader>
             <CardTitle>Recent Sales</CardTitle>
@@ -143,7 +143,7 @@ onMounted(() => {
                 <p class="text-sm font-medium leading-none">
                   {{ recentSales.name }}
                 </p>
-                <p class="text-muted-foreground text-sm">
+                <p class="text-sm text-muted-foreground">
                   {{ recentSales.email }}
                 </p>
               </div>
@@ -156,19 +156,19 @@ onMounted(() => {
         <Card>
           <CardHeader>
             <div class="flex flex-wrap items-center gap-2">
-              <Icon name="i-lucide-activity" class="text-primary me-2 h-6 w-6" />
+              <Icon name="i-lucide-activity" class="me-2 h-6 w-6 text-primary" />
               <h2 class="text-xl font-semibold tracking-tight">Aksi Cepat</h2>
             </div>
           </CardHeader>
-          <CardContent class="grid cursor-pointer gap-8 md:grid-cols-4 md:gap-8">
+          <CardContent class="grid cursor-pointer gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-5">
             <Card
-            v-for="item in linkItems"
-            :key="item.title"
-              class="border-primary hover:bg-primary my-2 h-32 border transition-colors duration-200 hover:bg-gray-200"
-              >
+              v-for="item in linkItems"
+              :key="item.title"
+              class="my-2 h-32 border border-primary transition-colors duration-200 hover:bg-gray-200 hover:bg-primary"
+            >
               <NuxtLink :to="item.link">
                 <CardContent class="my-2 grid h-full grid-rows-2 place-items-center">
-                  <Icon :name="item.icon" class="text-primary h-9 w-[60px]" />
+                  <Icon :name="item.icon" class="h-9 w-[60px] text-primary" />
                   <h1>{{ item.title }}</h1>
                 </CardContent>
               </NuxtLink>

app/components/layout/Header.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ThemeToggle from "./ThemeToggle.vue"
+
 const route = useRoute()
 
 function setLinks() {
@@ -50,9 +52,10 @@ watch(
       <Separator orientation="vertical" class="h-4" />
       <PubBaseBreadcrumb :links="links" />
     </div>
-    <div class="ml-auto">
-      <slot />
-    </div>
+     <div class="ml-auto flex items-center gap-2">
+       <slot />
+       <ThemeToggle />
+     </div>
   </header>
 </template>
 

app/components/layout/ThemeToggle.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useTheme } from '~/composables/useTheme'
+const { theme, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <button
+    @click="toggleTheme"
+    class="ml-2 rounded border px-2 py-1 text-sm"
+    :title="theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
+  >
+    <span v-if="theme === 'dark'"><Icon name="i-lucide-moon" class="h-4 w-4 mt-1" /></span>
+    <span v-else><Icon name="i-lucide-sun" class="h-4 w-4 mt-1" /></span>
+  </button>
+</template>