Optimize auth initialization by using cached middleware state
- Replace API calls with cached auth state from middleware in useAuthorization - Add fallback to session cache and watchers for auth state updates - Change initialization from async to synchronous for better performance - Add DuplicateNotificationBanner component
This commit is contained in:
91
components/DuplicateNotificationBanner.vue
Normal file
91
components/DuplicateNotificationBanner.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<v-alert
|
||||
v-if="showBanner && duplicateCount > 0"
|
||||
type="warning"
|
||||
variant="tonal"
|
||||
closable
|
||||
@click:close="dismissBanner"
|
||||
class="ma-4"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-icon>mdi-content-duplicate</v-icon>
|
||||
</template>
|
||||
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="text-subtitle-1 font-weight-medium">
|
||||
{{ duplicateCount }} duplicate interest record{{ duplicateCount > 1 ? 's' : '' }} detected
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
Duplicate records can affect data integrity and reporting accuracy.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
color="warning"
|
||||
variant="elevated"
|
||||
size="small"
|
||||
:to="'/dashboard/admin/duplicates'"
|
||||
prepend-icon="mdi-wrench"
|
||||
>
|
||||
Clean Up Duplicates
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-alert>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { isAdmin } = useAuthorization();
|
||||
|
||||
const showBanner = ref(true);
|
||||
const duplicateCount = ref(0);
|
||||
const loading = ref(false);
|
||||
|
||||
// Check for duplicates on mount (admin only)
|
||||
const checkForDuplicates = async () => {
|
||||
if (!isAdmin() || loading.value) return;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
const response = await $fetch('/api/admin/duplicates/find', {
|
||||
method: 'POST',
|
||||
body: { threshold: 80 }
|
||||
});
|
||||
|
||||
if (response.success && response.data?.duplicateGroups) {
|
||||
duplicateCount.value = response.data.duplicateGroups.length;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[DuplicateNotification] Failed to check for duplicates:', error);
|
||||
// Silently fail - this is just a notification banner
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Dismiss the banner for this session
|
||||
const dismissBanner = () => {
|
||||
showBanner.value = false;
|
||||
// Store dismissal in session storage
|
||||
if (process.client) {
|
||||
sessionStorage.setItem('duplicates-banner-dismissed', 'true');
|
||||
}
|
||||
};
|
||||
|
||||
// Check if banner was already dismissed this session
|
||||
onMounted(() => {
|
||||
if (process.client) {
|
||||
const dismissed = sessionStorage.getItem('duplicates-banner-dismissed');
|
||||
if (dismissed === 'true') {
|
||||
showBanner.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Only check for duplicates if user is admin
|
||||
if (isAdmin()) {
|
||||
// Small delay to let other components load first
|
||||
setTimeout(checkForDuplicates, 2000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user