BarangaySystem/resources/js/Pages/Home.vue

<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>