initial: bootstrap from BukidBountyApp base

resources/js/Pages/CooperativeHub.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useAuth } from '../composables/Core/useAuth.js';
+import CooperativeDetail from '@/Pages/CooperativeDetail.vue';
+import DocumentRepository from '@/Pages/Fragments/DocumentRepository.vue';
+import GovernanceResolutions from '@/Pages/Fragments/GovernanceResolutions.vue';
+
+const { user } = useAuth();
+
+const activeOrgHash = computed(() => {
+    const coops = user.value?.settings?.cooperatives;
+    if (Array.isArray(coops) && coops.length > 0) return coops[0];
+    return null;
+});
+
+const hubTab = ref('overview');
+</script>
+
+<template>
+    <div class="cooperative-hub-page pb-5">
+        <div class="tf-container mt-3">
+            <div class="d-flex align-items-center justify-content-between mb-3">
+                <h5 class="fw_7 mb-0 d-flex align-items-center gap-2">
+                    <i class="fas fa-landmark text-primary opacity-50"></i>
+                    Cooperative Hub
+                </h5>
+                <div class="d-flex gap-1 bg-soft-primary p-1 rounded-pill">
+                    <button
+                        @click="hubTab = 'overview'"
+                        :class="['btn btn-xs rounded-pill px-3', hubTab === 'overview' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
+                    >Overview</button>
+                    <button
+                        @click="hubTab = 'docs'"
+                        :class="['btn btn-xs rounded-pill px-3', hubTab === 'docs' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
+                    >Docs</button>
+                    <button
+                        @click="hubTab = 'votes'"
+                        :class="['btn btn-xs rounded-pill px-3', hubTab === 'votes' ? 'btn-primary shadow-sm' : 'btn-transparent text-primary small']"
+                    >Resolutions</button>
+                </div>
+            </div>
+
+            <div v-if="!activeOrgHash" class="alert alert-warning small">
+                No active cooperative is configured for your account.
+            </div>
+
+            <div v-else class="card border-0 shadow-sm rounded-20 bg-white overflow-hidden p-0">
+                <div v-if="hubTab === 'overview'">
+                    <CooperativeDetail :target="activeOrgHash" />
+                </div>
+                <div v-else-if="hubTab === 'docs'" class="p-3">
+                    <DocumentRepository :org-hash="activeOrgHash" />
+                </div>
+                <div v-else-if="hubTab === 'votes'" class="p-3">
+                    <GovernanceResolutions :org-hash="activeOrgHash" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.btn-xs {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    border-radius: 50rem;
+}
+.bg-soft-primary {
+    background-color: rgba(var(--primary-rgb), 0.1);
+}
+</style>