<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Organization" title="Branches, departments and hierarchy" subtitle="Multi-branch HRM setup with departments, sub-departments, designations, grades, teams, and sections." action="Add Branch" />
    <div class="grid gap-6 xl:grid-cols-2">
      <DataPanel title="Branches" :items="branches" />
      <DataPanel title="Departments" :items="departments" />
    </div>
    <DataPanel title="Designations and Grades" :items="designations" />
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import DataPanel from '../components/DataPanel.vue';
import ModuleHeader from '../components/ModuleHeader.vue';
import { getJson } from '../services/api.js';

const branches = ref([]);
const departments = ref([]);
const designations = ref([]);

onMounted(async () => {
  const data = await getJson('/organization');
  branches.value = data.branches;
  departments.value = data.departments;
  designations.value = data.designations;
});
</script>
