initial: bootstrap from BukidBountyApp base

2026-06-06 18:43:00 +08:00
commit eb4a5731fb
5674 changed files with 160857 additions and 0 deletions
--- a/resources/js/Pages/Core/Fragments/BottomNav.vue
+++ b/resources/js/Pages/Core/Fragments/BottomNav.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="bottom-navigation-bar">
+    <div class="tf-container">
+      <ul class="tf-navigation-bar" :style="{ background: uiStore.darkMode ? 'transparent' : '' }">
+        <li>
+          <a class="nav-item-link" href="#" @click.prevent="navigate('Home')" @mouseenter="prefetch('Home')" @touchstart.passive="prefetch('Home')">
+            <i class="fas fa-home"></i>
+            <span>Home</span>
+          </a>
+        </li>
+        <li v-if="uiStore.isModuleEnabled('cart')">
+          <a class="nav-item-link" href="#" @click.prevent="navigate('CartProductMarket')" @mouseenter="prefetch('CartProductMarket')" @touchstart.passive="prefetch('CartProductMarket')">
+            <img src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/d36eb6a17e27.bin" alt="Cart" class="nav-icon">
+            <span>Cart</span>
+          </a>
+        </li>
+        <li>
+          <a class="nav-item-link" href="#" @click.prevent="navigate('MyWallet')" @mouseenter="prefetch('MyWallet')" @touchstart.passive="prefetch('MyWallet')">
+            <img src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/9908be28dd8a.bin" alt="Wallet" class="nav-icon spinning-on-hover">
+            <span>Wallet</span>
+          </a>
+        </li>
+        <li v-if="['tandem','ngo'].includes(uiStore.app_mode)">
+          <a class="nav-item-link" href="#" @click.prevent="navigate('CooperativeHub')" @mouseenter="prefetch('CooperativeHub')" @touchstart.passive="prefetch('CooperativeHub')">
+            <i class="fas fa-landmark"></i>
+            <span>Hub</span>
+          </a>
+        </li>
+        <li v-if="uiStore.isModuleEnabled('properties')">
+          <a class="nav-item-link" href="#" @click.prevent="navigate('ListProperties')" @mouseenter="prefetch('ListProperties')" @touchstart.passive="prefetch('ListProperties')">
+            <img src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/53c45417d1d1.bin" alt="Properties" class="nav-icon">
+            <span>Properties</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useUIStore } from '../../../stores/ui';
+
+const uiStore = useUIStore();
+
+const navigate = (page) => {
+  if (window.$navigateHelper) {
+    window.$navigateHelper({ page });
+  } else {
+    console.warn('Global $navigate function not found.');
+  }
+};
+
+const prefetch = (page) => {
+  if (window.$prefetchPage) window.$prefetchPage(page);
+};
+</script>
+
+<style scoped>
+.bottom-navigation-bar {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: var(--layout-max-width, 1440px);
+  z-index: 9999;
+  background-color: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
+  padding: 10px 0 env(safe-area-inset-bottom, 10px);
+  transition: all 0.3s ease;
+}
+
+:global(body.is-full-width) .bottom-navigation-bar {
+  max-width: none !important;
+}
+
+:global(.dark-mode) .bottom-navigation-bar {
+  background-color: var(--header-bg);
+  border-top-color: var(--border-color);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
+}
+
+:global(.dark-mode) .tf-navigation-bar {
+  background-color: transparent !important;
+}
+
+
+.tf-navigation-bar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-item-link {
+  text-decoration: none;
+  color: #717171;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  padding: 4px 12px;
+  border-radius: 12px;
+}
+
+.nav-item-link:hover {
+  color: #533dea;
+  background-color: rgba(83, 61, 234, 0.05);
+}
+
+.nav-item-link i {
+  font-size: 22px;
+}
+
+.nav-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+:global(.dark-mode) .nav-item-link {
+  color: #e0e0e0;
+}
+
+:global(.dark-mode) .nav-item-link:hover {
+  color: #816ef0;
+  background-color: rgba(129, 110, 240, 0.1);
+}
+</style>