From fdbfcb29ff320657cab3dc1b2b9edccd4eae88ee Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 12 Sep 2025 14:13:33 +0700
Subject: [PATCH] feat(sep): change button export to dropdown

---
 app/components/content/sep/list.vue | 36 ++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index ff934da3..22597f22 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -3,6 +3,12 @@ import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '~/components/pub/ui/dropdown-menu'
 
 const search = ref('')
 const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
@@ -120,6 +126,16 @@ async function getSepList() {
   isLoading.dataListLoading = false
 }
 
+function exportCsv() {
+  console.log('Ekspor CSV dipilih')
+  // tambahkan logic untuk generate CSV
+}
+
+function exportExcel() {
+  console.log('Ekspor Excel dipilih')
+  // tambahkan logic untuk generate Excel
+}
+
 onMounted(() => {
   getSepList()
 })
@@ -152,12 +168,20 @@ provide('table_data_loader', isLoading)
       </Popover>
 
       <!-- Export -->
-      <Button
-        variant="outline"
-        class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
-      >
-        <Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
-      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button
+            variant="outline"
+            class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+          >
+            <Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-40">
+          <DropdownMenuItem @click="exportCsv"> Ekspor CSV </DropdownMenuItem>
+          <DropdownMenuItem @click="exportExcel"> Ekspor Excel </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
 
     <div class="rounded-md border p-4">