update tampilan layar screen

stores/doctorStore.js

@@ -36,9 +36,9 @@ export const useDoctorStore = defineStore('doctor', () => {
   };
 
   /**
-   * Fetch doctors for a clinic from API
+   * Fetch doctors for a clinic from API with retry logic
    */
-  const fetchDoctorsForClinic = async (clinic, force = false) => {
+  const fetchDoctorsForClinic = async (clinic, force = false, retries = 2) => {
     if (!clinic || !clinic.id) return;
 
     const idklinik = clinic.id;
@@ -50,6 +50,8 @@ export const useDoctorStore = defineStore('doctor', () => {
 
     // Skip if already loading
     if (loadingDoctors.value[idklinik]) {
+      // Wait a bit if already loading? No, just return existing promise if we had one, 
+      // but for simplicity we just return.
       return;
     }
 
@@ -57,9 +59,30 @@ export const useDoctorStore = defineStore('doctor', () => {
 
     try {
       console.log(`🔄 [doctorStore] Fetching doctors for klinik ID: ${idklinik} (${clinic.name})`);
-      const data = await $fetch(
-        `http://10.10.150.131:8089/api/v1/dokter/${idklinik}`
-      );
+      
+      let data;
+      let lastError;
+      
+      // Retry loop
+      for (let i = 0; i <= retries; i++) {
+        try {
+          data = await $fetch(
+            `http://10.10.150.131:8089/api/v1/dokter/${idklinik}`,
+            { timeout: 5000 }
+          );
+          lastError = null;
+          break; // Success!
+        } catch (err) {
+          lastError = err;
+          if (i < retries) {
+            const delay = 500 * (i + 1);
+            console.warn(`⚠️ [doctorStore] Retry ${i+1}/${retries} for klinik ${idklinik} after ${delay}ms...`);
+            await new Promise(resolve => setTimeout(resolve, delay));
+          }
+        }
+      }
+
+      if (lastError) throw lastError;
 
       let doctorList = [];
       if (Array.isArray(data)) {
@@ -79,14 +102,16 @@ export const useDoctorStore = defineStore('doctor', () => {
       doctorsByKlinikId.value[idklinik] = doctorNames;
       
       // Update sync timestamp if this was a refresh
-      if (force) {
+      if (force && doctorNames.length > 0) {
         lastSyncTimestamp.value = new Date().toISOString();
       }
 
       console.log(`✅ [doctorStore] Loaded ${doctorNames.length} doctors untuk klinik ${clinic.name}`);
       return doctorNames;
     } catch (error) {
-      console.error(`❌ [doctorStore] Gagal mengambil dokter untuk klinik ID ${idklinik}:`, error);
+      const status = error.response ? error.response.status : (error.status || 'unknown');
+      console.error(`❌ [doctorStore] Gagal mengambil dokter untuk klinik ID ${idklinik} (${clinic.name}) - Status: ${status}`);
+      
       // Don't overwrite existing data on failure unless it's empty
       if (!doctorsByKlinikId.value[idklinik]) {
         doctorsByKlinikId.value[idklinik] = [];
@@ -97,15 +122,20 @@ export const useDoctorStore = defineStore('doctor', () => {
   };
 
   /**
-   * Sync doctors for all provided clinics
+   * Sync doctors for all provided clinics sequentially to avoid overloading the server
    */
   const syncAllDoctors = async (clinics) => {
-    console.log(`🔄 [doctorStore] Syncing all doctors for ${clinics.length} clinics...`);
+    console.log(`🔄 [doctorStore] Syncing all doctors for ${clinics.length} clinics sequentially...`);
     
-    // Filter clinics that need sync (only Reguler clinics usually have dynamic doctors)
+    // Filter clinics that need sync
     const clinicsToSync = clinics.filter(c => c.id);
     
-    await Promise.all(clinicsToSync.map(c => fetchDoctorsForClinic(c, true)));
+    // Process one by one instead of Promise.all to be gentle on the server
+    for (const clinic of clinicsToSync) {
+      await fetchDoctorsForClinic(clinic, true);
+      // Small delay between requests
+      await new Promise(resolve => setTimeout(resolve, 50));
+    }
     
     lastSyncTimestamp.value = new Date().toISOString();
     console.log(`✅ [doctorStore] Global doctor sync complete at ${lastSyncTimestamp.value}`);