379 lines
15 KiB
Vue
379 lines
15 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue';
|
|
import usePageData from '../../../composables/usePageData.js';
|
|
import { useNavigate } from '../../../composables/Core/useNavigate.js';
|
|
import { useAuth } from '../../../composables/Core/useAuth.js';
|
|
import { useModal } from '../../../composables/Core/useModal.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 HomeSkeleton from '../../../Components/Core/Skeleton/HomeSkeleton.vue';
|
|
|
|
import { useChapters } from '../../../composables/useChapters.js';
|
|
|
|
const { user } = useAuth();
|
|
const { navigate } = useNavigate();
|
|
const modal = useModal();
|
|
|
|
const { data, loading, error, fetchPageData } = usePageData();
|
|
const { fetchHierarchy, fetchMapData } = useChapters();
|
|
|
|
const stats = ref([
|
|
{ title: 'Cooperatives', number: 0, unit: 'Total', numberId: 'cooperative_total_no' },
|
|
{ title: 'Members', number: 0, unit: 'Enrolled', numberId: 'cooperative_members_no' },
|
|
{ title: 'New (7d)', number: 0, unit: 'Members', numberId: 'pending_members_no' },
|
|
]);
|
|
|
|
const footerItems = ref([
|
|
{ title: 'Cooperatives', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', pagename: 'CooperativeList' },
|
|
{ title: 'My Profile', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ac7a1cebe580.bin', pagename: 'UserInfoEdit' },
|
|
]);
|
|
|
|
const services = ref([
|
|
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', title: 'Cooperatives', pagename: 'CooperativeList' },
|
|
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', title: 'Register Member', pagename: 'CooperativeMemberRegister' },
|
|
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/85605eacd4c8.bin', title: 'My Cooperative', action: 'viewMyCoop' },
|
|
{ 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/c9fd442fe676.bin', title: 'Documents', pagename: 'CooperativeList' },
|
|
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin', title: 'Members', pagename: 'CooperativeList' },
|
|
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin', title: 'Create Coop', pagename: 'CreateCooperative' },
|
|
{ icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin', title: 'Chapter Map', action: 'toggleMap' },
|
|
]);
|
|
|
|
const quickActions = ref([
|
|
{ text: 'Create Cooperative', pagename: 'CreateCooperative', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/04d0e432a298.bin' },
|
|
{ text: 'Member Ledger', pagename: 'AccountingDashboard', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin' },
|
|
{ text: 'Add Transaction', pagename: 'AddTransaction', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c9fd442fe676.bin' },
|
|
{ text: 'My Personal Profile', pagename: 'UserInfoEdit', icon: 'https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ac7a1cebe580.bin' },
|
|
]);
|
|
|
|
const activeOrgHash = computed(() => user.value?.settings?.cooperatives?.[0] ?? null);
|
|
|
|
const showMap = ref(false);
|
|
|
|
const applyStats = () => {
|
|
if (!data.value?.stats) return;
|
|
stats.value = stats.value.map((s) => {
|
|
const v = data.value.stats[s.numberId];
|
|
return v !== undefined ? { ...s, number: v } : s;
|
|
});
|
|
};
|
|
|
|
const viewMyCoop = () => {
|
|
if (activeOrgHash.value) {
|
|
navigate({ page: 'CooperativeDetail', props: { target: activeOrgHash.value } });
|
|
} else {
|
|
modal.quickDismiss({ title: 'No Cooperative', body: 'You have not joined a cooperative yet.' });
|
|
}
|
|
};
|
|
|
|
const handleItemClick = (item) => {
|
|
if (item?.action === 'viewMyCoop') {
|
|
viewMyCoop();
|
|
return;
|
|
}
|
|
if (item?.action === 'toggleMap') {
|
|
showMap.value = !showMap.value;
|
|
return;
|
|
}
|
|
if (item?.pagename) {
|
|
navigate({ page: item.pagename });
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await fetchPageData('/home-data', {});
|
|
applyStats();
|
|
});
|
|
|
|
// ---- Chapter Map (Leaflet) ----
|
|
const mapContainer = ref(null);
|
|
const currentChapter = ref(null);
|
|
const breadcrumb = ref([]);
|
|
const chapterList = ref([]);
|
|
const mapDots = ref([]);
|
|
|
|
let leafletMap = null;
|
|
let markerLayer = null;
|
|
|
|
const LEVEL_LABELS = {
|
|
national: 'Philippines',
|
|
region: 'Region',
|
|
province: 'Province',
|
|
city: 'City / Municipality',
|
|
barangay: 'Barangay',
|
|
};
|
|
|
|
const NEXT_LEVEL = {
|
|
national: 'region',
|
|
region: 'province',
|
|
province: 'city',
|
|
city: 'barangay',
|
|
};
|
|
|
|
const currentLevel = () => currentChapter.value?.level ?? 'national';
|
|
const nextLevel = () => NEXT_LEVEL[currentLevel()] ?? 'barangay';
|
|
|
|
const PH_CENTER = [12.0, 122.5];
|
|
const PH_ZOOM = 6;
|
|
|
|
async function initMap() {
|
|
if (!mapContainer.value) return;
|
|
|
|
const L = (await import('leaflet')).default;
|
|
await import('leaflet/dist/leaflet.css');
|
|
|
|
leafletMap = L.map(mapContainer.value, {
|
|
center: PH_CENTER,
|
|
zoom: PH_ZOOM,
|
|
zoomControl: true,
|
|
scrollWheelZoom: true,
|
|
});
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors',
|
|
maxZoom: 18,
|
|
}).addTo(leafletMap);
|
|
|
|
markerLayer = L.layerGroup().addTo(leafletMap);
|
|
|
|
renderMarkers(L);
|
|
}
|
|
|
|
async function renderMarkers(L) {
|
|
if (!markerLayer || !L) return;
|
|
markerLayer.clearLayers();
|
|
|
|
const dots = mapDots.value.filter(d => d.lat && d.lng);
|
|
if (!dots.length) return;
|
|
|
|
dots.forEach(dot => {
|
|
const radius = Math.max(8, Math.min(40, Math.sqrt(dot.count + 1) * 5));
|
|
const circle = L.circleMarker([dot.lat, dot.lng], {
|
|
radius,
|
|
fillColor: '#198754',
|
|
color: '#fff',
|
|
weight: 2,
|
|
opacity: 0.9,
|
|
fillOpacity: 0.75,
|
|
}).addTo(markerLayer);
|
|
|
|
circle.bindTooltip(`<b>${dot.name}</b><br>${dot.count} member${dot.count !== 1 ? 's' : ''}`, {
|
|
permanent: false,
|
|
direction: 'top',
|
|
});
|
|
|
|
circle.on('click', () => drillDown(dot.id));
|
|
});
|
|
}
|
|
|
|
async function loadLevel(chapterId = null) {
|
|
const hierarchyData = await fetchHierarchy({ chapterId });
|
|
|
|
currentChapter.value = hierarchyData.current ?? null;
|
|
breadcrumb.value = hierarchyData.breadcrumb ?? [];
|
|
chapterList.value = hierarchyData.chapters ?? [];
|
|
|
|
const mapData = await fetchMapData({ level: nextLevel(), parentId: chapterId });
|
|
mapDots.value = mapData.chapters ?? [];
|
|
|
|
if (leafletMap) {
|
|
const L = (await import('leaflet')).default;
|
|
if (chapterId && hierarchyData.current?.lat && hierarchyData.current?.lng) {
|
|
leafletMap.flyTo([hierarchyData.current.lat, hierarchyData.current.lng], 9, { duration: 1 });
|
|
} else {
|
|
leafletMap.flyTo(PH_CENTER, PH_ZOOM, { duration: 1 });
|
|
}
|
|
await renderMarkers(L);
|
|
}
|
|
}
|
|
|
|
async function drillDown(chapterId) {
|
|
await loadLevel(chapterId);
|
|
}
|
|
|
|
async function navigateBreadcrumb(crumb) {
|
|
await loadLevel(crumb?.id ?? null);
|
|
}
|
|
|
|
async function resetToNational() {
|
|
await loadLevel(null);
|
|
}
|
|
|
|
watch(showMap, async (val) => {
|
|
if (val && !leafletMap) {
|
|
await nextTick();
|
|
await loadLevel(null);
|
|
await nextTick();
|
|
await initMap();
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (leafletMap) {
|
|
leafletMap.remove();
|
|
leafletMap = null;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="home-cooperative-fragment pb-5">
|
|
<HomeSkeleton v-if="loading" />
|
|
|
|
<template v-else>
|
|
<BalanceBox
|
|
:stats="stats"
|
|
:footer-items="footerItems"
|
|
@footer-click="handleItemClick"
|
|
/>
|
|
|
|
<div class="tf-container mt-4">
|
|
<h5 class="fw_7 mb-3">Cooperative Services</h5>
|
|
<ServiceButtonGrid :items="services" @item-click="handleItemClick" />
|
|
</div>
|
|
|
|
<div class="tf-container mt-4">
|
|
<h5 class="fw_7 mb-3">Quick Actions</h5>
|
|
<SideTextButtonList :items="quickActions" @item-click="handleItemClick" />
|
|
</div>
|
|
|
|
<div class="tf-container mt-4">
|
|
<button class="btn btn-outline-secondary w-100 mb-3" @click="showMap = !showMap">
|
|
{{ showMap ? 'Hide' : 'Show' }} Chapter Map
|
|
</button>
|
|
|
|
<div v-show="showMap">
|
|
<div class="mb-2">
|
|
<h5 class="fw_7 mb-1">Organizational Map</h5>
|
|
<p class="text-muted small mb-0">
|
|
{{ currentChapter ? currentChapter.name : 'Philippines — National View' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="breadcrumb.length || currentChapter" class="mb-2">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0 small">
|
|
<li class="breadcrumb-item">
|
|
<a href="#" @click.prevent="resetToNational()" class="text-success">Philippines</a>
|
|
</li>
|
|
<li
|
|
v-for="crumb in breadcrumb"
|
|
:key="crumb.id"
|
|
class="breadcrumb-item"
|
|
>
|
|
<a href="#" @click.prevent="navigateBreadcrumb(crumb)" class="text-success">{{ crumb.name }}</a>
|
|
</li>
|
|
<li v-if="currentChapter" class="breadcrumb-item active">
|
|
{{ currentChapter.name }}
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="mb-1 px-0">
|
|
<div
|
|
ref="mapContainer"
|
|
class="chapter-map rounded-3 overflow-hidden"
|
|
style="height: 320px; width: 100%;"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center gap-2 small text-muted">
|
|
<span
|
|
class="d-inline-block rounded-circle bg-success"
|
|
style="width:12px;height:12px;opacity:.75;"
|
|
></span>
|
|
<span>Each dot = member cluster. Larger dot = more members.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center justify-content-between mb-2">
|
|
<h6 class="fw_6 mb-0">
|
|
{{ LEVEL_LABELS[nextLevel()] }}s
|
|
<span v-if="currentChapter" class="text-muted fw_4">
|
|
in {{ currentChapter.name }}
|
|
</span>
|
|
</h6>
|
|
<span class="badge bg-success-subtle text-success rounded-pill">
|
|
{{ chapterList.length }}
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="!chapterList.length" class="text-center py-4 text-muted small">
|
|
No {{ LEVEL_LABELS[nextLevel()]?.toLowerCase() }}s found yet.
|
|
<br>Members will appear once addresses are synced.
|
|
</div>
|
|
|
|
<div
|
|
v-for="chapter in chapterList"
|
|
:key="chapter.id"
|
|
class="chapter-row d-flex align-items-center gap-3 p-3 mb-2 rounded-3 border"
|
|
:class="{ 'chapter-row--clickable': chapter.has_children }"
|
|
@click="chapter.has_children ? drillDown(chapter.id) : null"
|
|
role="button"
|
|
>
|
|
<div class="chapter-count d-flex flex-column align-items-center justify-content-center rounded-circle bg-success text-white fw_7"
|
|
style="min-width:48px;height:48px;font-size:0.9rem;">
|
|
{{ chapter.member_count }}
|
|
</div>
|
|
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<div class="fw_6 text-truncate">{{ chapter.name }}</div>
|
|
<div class="small text-muted">
|
|
{{ chapter.member_count }} member{{ chapter.member_count !== 1 ? 's' : '' }}
|
|
</div>
|
|
|
|
<div v-if="chapter.leaders?.length" class="mt-1 d-flex flex-wrap gap-1">
|
|
<span
|
|
v-for="leader in chapter.leaders.slice(0, 3)"
|
|
:key="leader.hashkey"
|
|
class="badge border small"
|
|
style="background: var(--bg-card); color: var(--text-primary);"
|
|
>
|
|
<span v-if="leader.photo" class="me-1">
|
|
<img :src="leader.photo" class="rounded-circle" width="14" height="14" style="object-fit:cover;">
|
|
</span>
|
|
{{ leader.name }}
|
|
<span v-if="leader.position" class="text-muted"> · {{ leader.position }}</span>
|
|
</span>
|
|
<span v-if="chapter.leaders.length > 3" class="badge border small text-muted"
|
|
style="background: var(--bg-card);">
|
|
+{{ chapter.leaders.length - 3 }} more
|
|
</span>
|
|
</div>
|
|
<div v-else class="small text-muted fst-italic mt-1">No leaders assigned</div>
|
|
</div>
|
|
|
|
<div v-if="chapter.has_children" class="text-muted">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chapter-row {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
}
|
|
.chapter-row--clickable {
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
.chapter-map {
|
|
border: 1px solid #dee2e6;
|
|
background: #e8f5e9;
|
|
}
|
|
:global(.dark-mode) .chapter-row {
|
|
background: var(--bg-card) !important;
|
|
}
|
|
</style>
|