fbb7e3ff37
Complete adaptation from BukidBountyApp to Philippine barangay governance: - Barangay models: Resident, Household, HouseholdMember, Blotter, BlotterHearing, DocumentRequest, RequestPayment, RequestType, BarangayProject, BarangayBudget - Controllers: ResidentController, HouseholdController, BlotterController, BlotterHearingController, DocumentRequestController, RequestTypeController, ProjectController, BudgetController, QRPHController, AdminConsoleController, UserController, FileController, ChapterController, LoginController - Vue pages: Home, ManageResidents, ResidentProfile, ManageHouseholds, ManageBlotters, BlotterDetail, RequestDocument, ManageDocumentRequests, DocumentRequestDetail, ManageRequestTypes, ManageProjects, BudgetLedger, AdminConsole - Barangay roles: PunongBarangay, Kagawad, Secretary, Treasurer, SK, Tanod, BHW, Staff, Resident - UserPermissions matrix rewritten with barangay-specific permission mappings - VueRouteMap replaced with barangay SPA routes - UserActions enum references corrected across all controllers - Removed all market/cooperative/POS/subscription code and models
105 lines
4.9 KiB
Vue
105 lines
4.9 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { usePageTitle } from '../composables/Core/usePageTitle';
|
|
import { useAuth } from '../composables/Core/useAuth.js';
|
|
import { useUIStore } from '../stores/ui';
|
|
import { executeRequest } from '../utils/executeRequest.js';
|
|
import { navigate } from '../utils/navigate.js';
|
|
|
|
const uiStore = useUIStore();
|
|
usePageTitle(uiStore.appName ?? 'Barangay System');
|
|
|
|
const { isSuperAdmin, isPunongBarangay, isAdmin, isBarangayStaff, isResident, role } = useAuth();
|
|
|
|
const stats = ref({});
|
|
const loading = ref(false);
|
|
|
|
const loadStats = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const res = await executeRequest('/home-data');
|
|
if (res?.props?.stats) stats.value = res.props.stats;
|
|
} catch (e) { /* silent */ }
|
|
loading.value = false;
|
|
};
|
|
|
|
const adminCards = [
|
|
{ label: 'Residents', icon: '👥', route: '/Barangay/ManageResidents', color: 'bg-blue-500' },
|
|
{ label: 'Households', icon: '🏠', route: '/Barangay/ManageHouseholds', color: 'bg-green-500' },
|
|
{ label: 'Blotters', icon: '⚖️', route: '/Barangay/ManageBlotters', color: 'bg-orange-500' },
|
|
{ label: 'Documents', icon: '📋', route: '/Barangay/ManageDocumentRequests', color: 'bg-purple-500' },
|
|
{ label: 'Projects', icon: '🏗️', route: '/Barangay/ManageProjects', color: 'bg-indigo-500' },
|
|
{ label: 'Budget', icon: '💰', route: '/Barangay/BudgetLedger', color: 'bg-emerald-500' },
|
|
{ label: 'Announcements', icon: '📢', route: '/ManageAnnouncements', color: 'bg-yellow-500' },
|
|
{ label: 'Settings', icon: '⚙️', route: '/SystemSettings', color: 'bg-gray-500' },
|
|
];
|
|
|
|
const serviceCards = [
|
|
{ label: 'Request Document', icon: '📄', route: '/Barangay/RequestDocument', color: 'bg-blue-500' },
|
|
{ label: 'View Announcements', icon: '📢', route: '/ManageAnnouncements', color: 'bg-yellow-500' },
|
|
];
|
|
|
|
onMounted(loadStats);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-4 max-w-5xl mx-auto">
|
|
<div class="mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">Barangay Management System</h1>
|
|
<p class="text-gray-500 text-sm mt-1">Welcome. Here's today's overview.</p>
|
|
</div>
|
|
|
|
<!-- Stats (admin/staff) -->
|
|
<div v-if="isBarangayStaff" class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
|
|
<div class="bg-white rounded-xl shadow p-4 text-center">
|
|
<div class="text-3xl font-bold text-blue-600">{{ stats.total_residents ?? 0 }}</div>
|
|
<div class="text-xs text-gray-500 mt-1">Residents</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow p-4 text-center">
|
|
<div class="text-3xl font-bold text-green-600">{{ stats.total_households ?? 0 }}</div>
|
|
<div class="text-xs text-gray-500 mt-1">Households</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow p-4 text-center">
|
|
<div class="text-3xl font-bold text-orange-600">{{ stats.open_blotters ?? 0 }}</div>
|
|
<div class="text-xs text-gray-500 mt-1">Open Blotters</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow p-4 text-center">
|
|
<div class="text-3xl font-bold text-purple-600">{{ stats.pending_documents ?? 0 }}</div>
|
|
<div class="text-xs text-gray-500 mt-1">Pending Docs</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Access (admin/staff) -->
|
|
<div v-if="isBarangayStaff" class="mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-3">Quick Access</h2>
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
<button
|
|
v-for="card in adminCards"
|
|
:key="card.label"
|
|
@click="navigate(card.route)"
|
|
:class="`${card.color} text-white rounded-xl p-4 flex flex-col items-center gap-2 hover:opacity-90 transition`"
|
|
>
|
|
<span class="text-3xl">{{ card.icon }}</span>
|
|
<span class="text-sm font-medium">{{ card.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services (resident) -->
|
|
<div v-if="isResident" class="mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-3">Services Available to You</h2>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button
|
|
v-for="card in serviceCards"
|
|
:key="card.label"
|
|
@click="navigate(card.route)"
|
|
:class="`${card.color} text-white rounded-xl p-5 flex flex-col items-center gap-2 hover:opacity-90 transition`"
|
|
>
|
|
<span class="text-4xl">{{ card.icon }}</span>
|
|
<span class="text-sm font-medium">{{ card.label }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|