penambahan tabel pencarian, form tambah, form ubah

pages/notif.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-app-bar>
+        <v-app-bar-title>Hello</v-app-bar-title>
+        <v-spacer />
+        <v-btn @click="toggleTheme">
+          <v-icon>ph:sun</v-icon>
+          toggle thema</v-btn>
+      </v-app-bar>
+
+
+  <div class="text-center pa-4">
+    <v-dialog
+      v-model="dialog.dialog"
+      max-width="400"
+      persistent
+    >
+      <template v-slot:activator="{ props: activatorProps }">
+        <v-btn v-bind="activatorProps">
+          Open Dialog
+        </v-btn>
+      </template>
+
+      <!-- <v-card
+        prepend-icon="mdi-map-marker"
+        text="Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."
+        title="Use Google's location service?"
+      > -->
+      <v-card>
+      <v-toolbar dense flat class="body-2 font-weight-bold px-5">
+        Konfirmasi
+      </v-toolbar>
+      <v-row class="ma-1">
+        <v-col cols="12">
+          Yakin akan dihapus ?
+        </v-col>
+        </v-row>
+      
+        <template v-slot:actions>
+          <v-spacer></v-spacer>
+
+          <v-btn @click="dialog.dialog=false">
+            Tidak
+          </v-btn>
+
+          <v-btn @click="aksi()">
+            Ya
+          </v-btn>
+        </template>
+      </v-card>
+    </v-dialog>
+  </div>
+  
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useTheme } from "vuetify";
+import { storeToRefs } from "pinia";
+const theme = useTheme();
+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+}
+
+const dialog = reactive({
+  dialog:false
+})
+
+const aksi = () => {
+  console.log("data berhasil di hapus")
+  dialog.dialog=false
+}
+
+</script>
+
+<style>
+
+</style>