251 lines
13 KiB
Vue
251 lines
13 KiB
Vue
<script setup>
|
||
import { ref, onMounted, h, computed } from 'vue';
|
||
import usePageData from '../../../composables/usePageData.js';
|
||
import { useNavigate } from '../../../composables/Core/useNavigate.js';
|
||
import { useUserNotes } from '../../../composables/useUserNotes.js';
|
||
import { useModal } from '../../../composables/Core/useModal.js';
|
||
import { useAuth } from '../../../composables/Core/useAuth.js';
|
||
import { useGlobalTransactions } from '../../../composables/useGlobalTransactions.js';
|
||
import { useActivity } from '../../../composables/useActivity.js';
|
||
import { usePrefetch } from '../../../composables/Core/usePrefetch.js';
|
||
|
||
import BalanceBox from '../../../Components/Core/Stats/BalanceBox.vue';
|
||
import ServiceButtonGrid from '../../../Components/Core/Services/ServiceButtonGrid.vue';
|
||
import SideTextButtonList from '../../../Components/Core/Services/SideTextButtonList.vue';
|
||
import SearchableList from '../../../Components/Core/Search/SearchableList.vue';
|
||
import GlobalAnnouncement from '../../../Components/GlobalAnnouncement.vue';
|
||
import HomeSkeleton from '../../../Components/Core/Skeleton/HomeSkeleton.vue';
|
||
import CooperativeDetail from '@/Pages/CooperativeDetail.vue';
|
||
import DocumentRepository from '@/Pages/Fragments/DocumentRepository.vue';
|
||
import GovernanceResolutions from '@/Pages/Fragments/GovernanceResolutions.vue';
|
||
import OrgHierarchyExplorer from '@/Pages/Fragments/Home/OrgHierarchyExplorer.vue';
|
||
import { useUIStore } from '../../../stores/ui';
|
||
|
||
const uiStore = useUIStore();
|
||
const isOrgExplorerMode = computed(() => ['tandem', 'ngo'].includes(uiStore.app_mode));
|
||
const { user } = useAuth();
|
||
const { precache } = useGlobalTransactions();
|
||
const url = '/home-data';
|
||
const payload = {};
|
||
|
||
const { data, loading, error, fetchPageData } = usePageData();
|
||
const { navigate } = useNavigate();
|
||
const { notes, fetchNotes, dismissNotes, hasNotes } = useUserNotes();
|
||
const { activities, fetchRecentActivities, loading: loadingActivities } = useActivity();
|
||
const { prefetchEverything } = usePrefetch();
|
||
const modal = useModal();
|
||
|
||
const showStaleIndicator = ref(false);
|
||
|
||
const stats = ref([
|
||
{ title: "Transactions", number: 0, unit: "Total", align: "left", numberId: "total_transactions_no" },
|
||
{ title: "Value", number: 0, unit: "PHP", align: "left", numberId: "total_transactions_php" },
|
||
{ title: "Projected", number: 0, unit: "Income", align: "right", numberId: "projected_income_today" },
|
||
]);
|
||
|
||
const balanceFooterItems = ref([
|
||
{ title: "Add Transaction", icon: "https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin", pagename: "AddTransaction" },
|
||
{ title: "View Reports", icon: "https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f87407046b18.bin", pagename: "ListReports" },
|
||
]);
|
||
|
||
const activeOrgHash = computed(() => {
|
||
const coops = user.value?.settings?.cooperatives;
|
||
if (Array.isArray(coops) && coops.length > 0) return coops[0];
|
||
return null;
|
||
});
|
||
|
||
const hubTab = ref('overview');
|
||
|
||
const services = [
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/32248fe10b94.bin', title: 'Users', pagename: 'UserList' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/85605eacd4c8.bin', title: 'Stores', pagename: 'ManageStoresAdmin' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ef1a9a079a2d.svg', title: 'Products', pagename: 'ManageProductsAdmin' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin', title: 'Transactions', pagename: 'ManageGlobalTransactions' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f87407046b18.bin', title: 'Reports', pagename: 'ListReports' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/fa711c34b4ef.svg', title: 'Accounting', pagename: 'AccountingDashboard' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/5b5ef88c0ad1.svg', title: 'POS Keys', pagename: 'PosAccessKeys' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', title: 'Market', pagename: 'ListProductsMarket' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/4d9cb130fad1.bin', title: 'Shipments', pagename: 'ShipmentList' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/5d0ad5d52b8c.bin', title: 'Farmers', pagename: 'FarmerProfileEdit' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/3360da347e6b.svg', title: 'Verification', pagename: 'VerificationDashboard' },
|
||
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/d9b9b9179ce0.svg', title: 'Cooperatives', pagename: 'CooperativeList' },
|
||
];
|
||
|
||
const quickActionsItems = computed(() => [
|
||
{ text: 'Onboard New User', pagename: 'CreateUser', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/516ed2aaaa4c.bin' },
|
||
{ text: 'Register New Store', pagename: 'CreateStore', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/85605eacd4c8.bin' },
|
||
{ text: 'Create New Product', pagename: 'CreateProductUltimate', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f0a0193d728e.bin' },
|
||
{ text: 'Create New Cooperative', pagename: 'CreateCooperative', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/d9b9b9179ce0.svg' },
|
||
{ text: 'Add Organization', pagename: 'CreateOrganization', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f0cc8da0402c.svg' },
|
||
{ text: 'My Personal Profile', pagename: 'UserInfoEdit', pagestring: user.value?.hashkey, icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ac7a1cebe580.bin' },
|
||
{ text: 'Referrals & Leads', pagename: 'ListReferrals', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/7d45d4bdbc74.bin' },
|
||
{ text: 'Send Credit Transfer', pagename: 'TransferMyCredit', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/074af7aca12b.bin' },
|
||
{ text: 'Landing Page Editor', pagename: 'LandingPageEditor', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/3d721f4acf47.svg' },
|
||
]);
|
||
|
||
const showNotesModal = () => {
|
||
modal.continueCancelModal({
|
||
title: 'Notes',
|
||
body: h('div', { style: 'white-space: pre-wrap; font-size: 16px; line-height: 1.5; color: #333;' }, notes.value),
|
||
continueText: 'Dismiss Note',
|
||
cancelText: 'Close',
|
||
continueClass: 'btn btn-danger w-50 py-2 rounded-3 shadow-sm fw-bold',
|
||
cancelClass: 'btn btn-light w-50 py-2 rounded-3 border fw-bold text-muted',
|
||
onContinue: async () => {
|
||
const success = await dismissNotes();
|
||
if (success) await fetchNotes();
|
||
}
|
||
});
|
||
};
|
||
|
||
onMounted(async () => {
|
||
precache();
|
||
fetchRecentActivities(10);
|
||
const result = await fetchPageData(url, payload);
|
||
|
||
if (result && result.stale) showStaleIndicator.value = true;
|
||
|
||
if (data.value?.stats) {
|
||
stats.value = stats.value.map(s => {
|
||
if (data.value.stats[s.numberId] !== undefined) return { ...s, number: data.value.stats[s.numberId] };
|
||
return s;
|
||
});
|
||
}
|
||
|
||
await fetchNotes();
|
||
if (hasNotes()) showNotesModal();
|
||
|
||
setTimeout(() => { prefetchEverything(); }, 1000);
|
||
});
|
||
|
||
const handleItemClick = (item) => {
|
||
if (item.pagename) navigate({ page: item.pagename, props: { data: item.pagestring || '' } });
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="home-super-operator-fragment pb-5">
|
||
<HomeSkeleton v-if="loading && !data" />
|
||
|
||
<div v-if="showStaleIndicator" class="stale-notice">
|
||
⚠️ Displaying cached data.
|
||
</div>
|
||
|
||
<div v-if="data">
|
||
<BalanceBox :stats="stats" :footer-items="balanceFooterItems" @footer-click="handleItemClick" />
|
||
|
||
<div class="mt-2">
|
||
<ServiceButtonGrid :items="services" @item-click="handleItemClick" />
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<GlobalAnnouncement />
|
||
</div>
|
||
|
||
<div v-if="isOrgExplorerMode" class="mt-4 px-3">
|
||
<div class="card border-0 shadow-sm rounded-4 bg-white p-3">
|
||
<OrgHierarchyExplorer />
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="activeOrgHash && !isOrgExplorerMode" class="mt-4 px-3">
|
||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||
<h5 class="fw_7 mb-0 d-flex align-items-center gap-2" style="color: var(--text-primary) !important;">
|
||
<i class="fas fa-landmark text-primary opacity-50"></i>
|
||
Cooperative Hub
|
||
</h5>
|
||
<div class="d-flex gap-1 bg-soft-primary p-1 rounded-pill">
|
||
<button
|
||
@click="hubTab = 'overview'"
|
||
:class="['btn btn-xs rounded-pill px-3 transition-all', hubTab === 'overview' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
|
||
>Overview</button>
|
||
<button
|
||
@click="hubTab = 'docs'"
|
||
:class="['btn btn-xs rounded-pill px-3 transition-all', hubTab === 'docs' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
|
||
>Docs</button>
|
||
<button
|
||
@click="hubTab = 'votes'"
|
||
:class="['btn btn-xs rounded-pill px-3 transition-all', hubTab === 'votes' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
|
||
>Resolutions</button>
|
||
</div>
|
||
</div>
|
||
<div class="card border-0 shadow-sm rounded-20 bg-white overflow-hidden p-0">
|
||
<div v-if="hubTab === 'overview'">
|
||
<CooperativeDetail :target="activeOrgHash" />
|
||
</div>
|
||
<div v-else-if="hubTab === 'docs'" class="p-3">
|
||
<DocumentRepository :org-hash="activeOrgHash" />
|
||
</div>
|
||
<div v-else-if="hubTab === 'votes'" class="p-3">
|
||
<GovernanceResolutions :org-hash="activeOrgHash" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tf-container mt-4">
|
||
<h5 class="fw_7 mb-3" style="color: var(--text-primary) !important;">Management & Tools</h5>
|
||
<SideTextButtonList :items="quickActionsItems" @item-click="handleItemClick" />
|
||
</div>
|
||
|
||
<div class="mt-4 px-3">
|
||
<div class="activity-section card border-0 shadow-sm rounded-4 bg-white overflow-hidden">
|
||
<div class="card-header bg-white border-0 py-3 px-4 d-flex align-items-center justify-content-between">
|
||
<h5 class="fw-bold mb-0 d-flex align-items-center gap-2">
|
||
<i class="fas fa-history text-primary"></i>
|
||
Recent System Activity
|
||
</h5>
|
||
<a
|
||
href="javascript:void(0);"
|
||
class="btn btn-sm btn-outline-primary rounded-pill px-3 fw-semibold"
|
||
@click="navigate({ page: 'ManageGlobalTransactions' })"
|
||
>View All</a>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<SearchableList
|
||
title=""
|
||
:items="activities"
|
||
:loading="loadingActivities"
|
||
empty-text="No recent activity recorded"
|
||
@item-click="handleItemClick"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="error && !data">
|
||
<div class="tf-container mt-5 text-center">
|
||
<p style="color: var(--text-muted);">Dashboard disconnected. Please retry.</p>
|
||
<button class="btn btn-primary mt-2 rounded-pill px-4" @click="fetchPageData(url, payload)">Reconnect</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.stale-notice {
|
||
background-color: #fff3cd;
|
||
color: #856404;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
margin-bottom: 10px;
|
||
font-size: 0.85rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-xs {
|
||
padding: 0.25rem 0.5rem;
|
||
font-size: 0.75rem;
|
||
line-height: 1.5;
|
||
border-radius: 50rem;
|
||
}
|
||
|
||
.bg-soft-primary {
|
||
background-color: rgba(var(--primary-rgb), 0.1);
|
||
}
|
||
|
||
.transition-all {
|
||
transition: all 0.2s ease;
|
||
}
|
||
</style>
|