initial: bootstrap from BukidBountyApp base

resources/js/Pages/Home.vue

@@ -0,0 +1,196 @@
+<script setup>
+import { usePageTitle } from '../composables/Core/usePageTitle';
+import { useAuth } from '../composables/Core/useAuth.js';
+import { useUIStore } from '../stores/ui';
+import { useUserStore } from '../stores/user.js';
+import HomeUltimate from './Fragments/Home/HomeUltimate.vue';
+import HomePublic from './Fragments/Home/HomePublic.vue';
+import HomeSuperOperator from './Fragments/Home/HomeSuperOperator.vue';
+import HomeOperator from './Fragments/Home/HomeOperator.vue';
+import HomeStoreOwner from './Fragments/Home/HomeStoreOwner.vue';
+import HomeStoreManager from './Fragments/Home/HomeStoreManager.vue';
+import HomeShared from './Fragments/Home/HomeShared.vue';
+import HomeCooperative from './Fragments/Home/HomeCooperative.vue';
+import HomeCoopOfficer from './Fragments/Home/HomeCoopOfficer.vue';
+import HomeCoopMember from './Fragments/Home/HomeCoopMember.vue';
+
+const uiStore = useUIStore();
+const userStore = useUserStore();
+usePageTitle(uiStore.appName);
+
+const { 
+  isUltimate, isPublic, isSuperOperator, isOperator, 
+  isCoordinator, isStoreOwner, isStoreManager,
+  isSupplier, isSupplierOverseer, isRider,
+  isUser, isPOSTerminal, role, user,
+  isCoopOfficer, isCoopMember
+} = useAuth();
+</script>
+
+<template>
+  <div class="home-page">
+    <div
+      class="home-bg-logo"
+      :style="uiStore.appLogo ? { backgroundImage: `url('${uiStore.appLogo}')` } : null"
+      aria-hidden="true"
+    ></div>
+
+    <div class="home-page-content">
+    <div v-if="!isPublic" class="tf-container mt-3 mb-3">
+      <h2 class="fw_6 text-center">{{ uiStore.appName }}</h2>
+    </div>
+
+    <!-- Bible Verse of the Day -->
+    <div v-if="!isPublic && uiStore.bibleVerseText" class="tf-container mt-2 mb-1">
+      <div class="bible-verse-card px-4 py-3 rounded-4 text-center">
+        <i class="fas fa-bible text-primary opacity-50 mb-2 d-block"></i>
+        <p class="fst-italic mb-1 bible-verse-text">"{{ uiStore.bibleVerseText }}"</p>
+        <small v-if="uiStore.bibleVerseReference" class="text-muted fw-semibold">— {{ uiStore.bibleVerseReference }}</small>
+      </div>
+    </div>
+
+    <div v-if="userStore.loading" class="d-flex justify-content-center align-items-center py-5">
+        <div class="spinner-border text-primary" role="status"></div>
+    </div>
+    <template v-else>
+    <!-- Case 1: Logged in as Ultimate -->
+    <template v-if="isUltimate">
+      <HomeUltimate />
+    </template>
+
+    <!-- Case 2: Public / Guest User -->
+    <template v-else-if="isPublic">
+      <HomePublic />
+    </template>
+
+    <!-- Case 3: Super Operator -->
+    <template v-else-if="isSuperOperator">
+      <HomeSuperOperator />
+    </template>
+
+    <!-- Case 4: Operator -->
+    <template v-else-if="isOperator">
+      <HomeOperator />
+    </template>
+
+    <!-- Case 5: Coordinator -->
+    <template v-else-if="isCoordinator">
+      <HomeCooperative />
+    </template>
+
+    <!-- Case 6: Store Owner -->
+    <template v-else-if="isStoreOwner">
+      <HomeStoreOwner title="Store Owner" />
+    </template>
+
+    <!-- Case 7: Store Manager -->
+    <template v-else-if="isStoreManager">
+      <HomeStoreManager />
+    </template>
+
+    <!-- Case 8: Supplier -->
+    <template v-else-if="isSupplier">
+      <HomeShared title="Supplier" />
+    </template>
+
+    <!-- Case 9: Supplier Overseer -->
+    <template v-else-if="isSupplierOverseer">
+      <HomeShared title="Supplier Overseer" />
+    </template>
+
+    <!-- Case 10: Rider -->
+    <template v-else-if="isRider">
+      <HomeShared title="Rider" />
+    </template>
+
+    <!-- Case 11: POS Terminal -->
+    <template v-else-if="isPOSTerminal">
+      <HomeShared title="POS Terminal" />
+    </template>
+
+    <!-- Coop Officer -->
+    <template v-else-if="isCoopOfficer">
+      <HomeCoopOfficer />
+    </template>
+
+    <!-- Coop Member -->
+    <template v-else-if="isCoopMember">
+      <HomeCoopMember />
+    </template>
+
+    <!-- Case 11: Regular User -->
+    <template v-else-if="isUser">
+      <HomeShared title="User" />
+    </template>
+
+    <!-- Fallback Dashboard -->
+    <template v-else>
+      <div class="tf-container mt-5 text-center">
+        <h4>Welcome to {{ uiStore.appName }}</h4>
+        <p>Your account type: <strong>{{ role }}</strong></p>
+        <p>Please wait while we set up your personalized dashboard.</p>
+
+        <div class="mt-4">
+          <img src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/9908be28dd8a.bin" class="spinning" style="width: 50px;">
+        </div>
+      </div>
+    </template>
+    </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-page {
+  position: relative;
+  min-height: 100%;
+}
+
+.home-bg-logo {
+  position: fixed;
+  inset: 0;
+  background-repeat: no-repeat;
+  background-position: center 35%;
+  background-size: min(60vw, 520px) auto;
+  opacity: 0.12;
+  filter: saturate(0.9);
+  pointer-events: none;
+  z-index: 0;
+}
+
+:global(.dark-mode) .home-bg-logo {
+  opacity: 0.15;
+  filter: invert(1) saturate(0.8);
+}
+
+.home-page-content {
+  position: relative;
+  z-index: 1;
+}
+
+.bible-verse-card {
+  background: rgba(var(--bg-card-rgb, 255, 255, 255), 0.7);
+  border: 1px solid rgba(var(--accent-color-rgb, 13, 110, 253), 0.15);
+  backdrop-filter: blur(8px);
+}
+
+.bible-verse-text {
+  color: var(--text-primary, #212529);
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.spinning {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>