From 52752899426c8af2a99e58b818d7a9d474165337 Mon Sep 17 00:00:00 2001
From: Tengku Yusof <user2@example.com>
Date: Sat, 31 May 2025 10:07:32 +0800
Subject: [PATCH] first commit

---
 .node-version                                |   1 +
 pages/BF-PRF/AS/QUEUE/index.vue              | 183 +++++++++++++++++++
 server/api/queue/asnaf-analysis/index.get.js |  45 +++++
 3 files changed, 229 insertions(+)
 create mode 100644 .node-version
 create mode 100644 pages/BF-PRF/AS/QUEUE/index.vue
 create mode 100644 server/api/queue/asnaf-analysis/index.get.js

diff --git a/.node-version b/.node-version
new file mode 100644
index 0000000..2dbbe00
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+20.11.1
diff --git a/pages/BF-PRF/AS/QUEUE/index.vue b/pages/BF-PRF/AS/QUEUE/index.vue
new file mode 100644
index 0000000..493767f
--- /dev/null
+++ b/pages/BF-PRF/AS/QUEUE/index.vue
@@ -0,0 +1,183 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'vue-toastification';
+
+const toast = useToast();
+const loading = ref(true);
+const refreshInterval = ref(null);
+
+// Use useFetch for queue data
+const { data: queueData, refresh: refreshQueueData } = await useFetch('/api/queue/asnaf-analysis', {
+  onResponse({ response }) {
+    loading.value = false;
+  },
+  onResponseError({ error }) {
+    console.error('Error fetching queue data:', error);
+    toast.error('Gagal memuat data queue');
+    loading.value = false;
+  }
+});
+
+// Start auto-refresh
+onMounted(() => {
+  // Refresh every 30 seconds
+  refreshInterval.value = setInterval(() => {
+    refreshQueueData();
+  }, 30000);
+});
+
+// Clean up interval on component unmount
+onUnmounted(() => {
+  if (refreshInterval.value) {
+    clearInterval(refreshInterval.value);
+  }
+});
+
+// Retry failed job
+async function retryJob(jobId) {
+  try {
+    await useFetch(`/api/queue/asnaf-analysis/${jobId}/retry`, {
+      method: 'POST',
+      onResponse() {
+        toast.success('Job akan diproses semula');
+        refreshQueueData();
+      },
+      onResponseError({ error }) {
+        console.error('Error retrying job:', error);
+        toast.error('Gagal memproses semula job');
+      }
+    });
+  } catch (error) {
+    console.error('Error retrying job:', error);
+    toast.error('Gagal memproses semula job');
+  }
+}
+
+// Remove job
+async function removeJob(jobId) {
+  try {
+    await useFetch(`/api/queue/asnaf-analysis/${jobId}`, {
+      method: 'DELETE',
+      onResponse() {
+        toast.success('Job telah dipadam');
+        refreshQueueData();
+      },
+      onResponseError({ error }) {
+        console.error('Error removing job:', error);
+        toast.error('Gagal memadam job');
+      }
+    });
+  } catch (error) {
+    console.error('Error removing job:', error);
+    toast.error('Gagal memadam job');
+  }
+}
+
+// Page metadata
+definePageMeta({
+  title: "Queue Analisis Asnaf",
+  middleware: ["auth"],
+  requiresAuth: true,
+  breadcrumb: [
+    {
+      name: "Dashboard",
+      path: "/",
+    },
+    {
+      name: "BF-PRF",
+      path: "/BF-PRF",
+    },
+    {
+      name: "Asnaf",
+      path: "/BF-PRF/AS",
+    },
+    {
+      name: "Queue",
+      path: "/BF-PRF/AS/QUEUE",
+    },
+  ],
+});
+</script>
+
+<template>
+  <div class="space-y-6">
+    <LayoutsBreadcrumb />
+    
+    <div class="flex justify-between items-center">
+      <h1 class="text-2xl font-bold text-primary">Queue Analisis Asnaf</h1>
+      <rs-button variant="primary" @click="refreshQueueData">
+        <Icon name="mdi:refresh" size="18" class="mr-1" />
+        Refresh
+      </rs-button>
+    </div>
+    
+    <!-- Loading state -->
+    <div v-if="loading" class="flex justify-center items-center py-20">
+      <div class="text-center">
+        <Loading />
+        <p class="mt-4 text-gray-600">Memuat data queue...</p>
+      </div>
+    </div>
+    
+    <div v-else>
+      <rs-card>
+        <template #body>
+          <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead>
+                <tr>
+                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asnaf ID</th>
+                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
+                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Updated</th>
+                  <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <tr v-for="job in queueData" :key="job.id" class="hover:bg-gray-50">
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ job.id }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <rs-badge 
+                      :variant="job.status === 'completed' ? 'success' : 
+                               job.status === 'failed' ? 'danger' : 
+                               job.status === 'active' ? 'primary' : 
+                               'warning'">
+                      {{ job.status }}
+                    </rs-badge>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ job.data.asnafId }}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {{ new Date(job.timestamp).toLocaleString('ms-MY') }}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {{ new Date(job.processedOn || job.finishedOn).toLocaleString('ms-MY') }}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    <div class="flex space-x-2">
+                      <rs-button 
+                        v-if="job.status === 'failed'"
+                        variant="warning" 
+                        size="sm"
+                        @click="retryJob(job.id)">
+                        <Icon name="mdi:refresh" size="16" class="mr-1" />
+                        Retry
+                      </rs-button>
+                      <rs-button 
+                        variant="danger" 
+                        size="sm"
+                        @click="removeJob(job.id)">
+                        <Icon name="mdi:delete" size="16" class="mr-1" />
+                        Remove
+                      </rs-button>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </template>
+      </rs-card>
+    </div>
+  </div>
+</template> 
\ No newline at end of file
diff --git a/server/api/queue/asnaf-analysis/index.get.js b/server/api/queue/asnaf-analysis/index.get.js
new file mode 100644
index 0000000..53f552d
--- /dev/null
+++ b/server/api/queue/asnaf-analysis/index.get.js
@@ -0,0 +1,45 @@
+import Queue from 'bull';
+
+// Create a Bull queue instance
+const asnafAnalysisQueue = new Queue('asnaf-analysis', {
+  redis: {
+    host: process.env.REDIS_HOST || 'localhost',
+    port: process.env.REDIS_PORT || 6379,
+    password: process.env.REDIS_PASSWORD
+  }
+});
+
+export default defineEventHandler(async (event) => {
+  try {
+    // Get all jobs from different states
+    const [waiting, active, completed, failed] = await Promise.all([
+      asnafAnalysisQueue.getWaiting(),
+      asnafAnalysisQueue.getActive(),
+      asnafAnalysisQueue.getCompleted(),
+      asnafAnalysisQueue.getFailed()
+    ]);
+
+    // Combine all jobs and format them
+    const allJobs = [...waiting, ...active, ...completed, ...failed]
+      .map(job => ({
+        id: job.id,
+        status: job.finishedOn ? 'completed' : 
+                job.failedReason ? 'failed' : 
+                job.processedOn ? 'active' : 'waiting',
+        data: job.data,
+        timestamp: job.timestamp,
+        processedOn: job.processedOn,
+        finishedOn: job.finishedOn,
+        failedReason: job.failedReason
+      }))
+      .sort((a, b) => b.timestamp - a.timestamp); // Sort by timestamp, newest first
+
+    return allJobs;
+  } catch (error) {
+    console.error('Error fetching queue data:', error);
+    throw createError({ 
+      statusCode: 500, 
+      statusMessage: 'Failed to fetch queue data' 
+    });
+  }
+}); 
\ No newline at end of file