panels-origin/web-panel/layouts/default.vue

<template>
  <div class="shell">
    <Menubar class="menubar" :model="menu">
      <template #start>
        <button type="button" class="brand-lockup" aria-label="Ir al inicio" @click="navigateTo('/')">
          <span class="brand-mark" aria-hidden="true">
            <span /><span /><span /><span />
          </span>
          <span class="brand-word">{{ brand }}</span>
        </button>
      </template>
      <template #item="{ item, props }">
        <a v-bind="props.action" class="menubar-link" :class="{ 'is-active': isActive(String(item.to || '')) }">
          <i v-if="item.icon" :class="item.icon" />
          <span>{{ item.label }}</span>
        </a>
      </template>
      <template #end>
        <div class="topbar-tools">
          <IconField class="desk-search desk-search--topbar">
            <InputIcon class="pi pi-search" />
            <InputText v-model="globalQ" placeholder="Buscar en el sistema..." @keyup.enter="goSearch" />
          </IconField>
          <Button icon="pi pi-bell" text rounded aria-label="Notificaciones" @click="showNotifications" />
          <Button icon="pi pi-question-circle" text rounded aria-label="Ayuda" @click="showHelp" />
          <button type="button" class="topbar-user-trigger" aria-label="Menú de usuario" @click="toggleProfile">
            <Avatar :label="initials(user?.display_name)" shape="circle" />
            <i class="pi pi-angle-down" aria-hidden="true" />
          </button>
        </div>
      </template>
    </Menubar>
    <Menu ref="profileMenu" :model="profileItems" popup />

    <AppRibbon />

    <div class="desk-body">
      <Splitter :key="`${showTree}-${showDetail}`" class="desk-split">
        <SplitterPanel v-if="showTree" :size="18" :min-size="12" class="desk-pane">
          <AppModuleTree />
        </SplitterPanel>
        <SplitterPanel
          :size="showDetail && showTree ? 60 : showDetail || showTree ? 80 : 100"
          :min-size="30"
          class="desk-pane desk-center-pane"
        >
          <div class="desk-main">
            <div class="desk-tabstrip">
              <span class="desk-tab is-active">{{ tabLabel }}</span>
            </div>
            <div class="desk-page">
              <slot />
            </div>
          </div>
        </SplitterPanel>
        <SplitterPanel v-if="showDetail" :size="20" :min-size="16" class="desk-pane">
          <div class="desk-side desk-detail">
            <div class="desk-side-title desk-detail-title">
              <span>Detalles del registro</span>
              <span class="desk-detail-title-actions" aria-hidden="true">
                <i class="pi pi-ellipsis-v" />
                <i class="pi pi-angle-down" />
              </span>
            </div>
            <div class="desk-detail-scroll">
              <WorkerFicha
                v-if="detail.kind === 'worker'"
                :worker-id="detail.id"
                :doc="detail.doc"
                :tab="detail.tab"
                @edit="editFromFicha"
              />
              <ProjectFicha
                v-else-if="detail.kind === 'project'"
                :project="detail.project"
                :doc="detail.doc"
                @edit="editFromFicha"
              />
              <BudgetFicha
                v-else-if="detail.kind === 'budget'"
                :item="detail.budgetItem"
                @edit="editFromFicha"
              />
              <div v-else class="detail-empty">
                <i class="pi pi-file detail-empty-icon" />
                <strong>Seleccione un registro</strong>
                <span>La ficha aparecerá en este panel.</span>
              </div>
            </div>
          </div>
        </SplitterPanel>
      </Splitter>
    </div>

    <AppStatusbar />
    <LoanDialog
      :visible="loanPrompt.visible"
      :worker-id="loanPrompt.workerId"
      :person-name="loanPrompt.personName"
      @update:visible="setLoanVisible"
      @saved="onLoanSaved"
    />
  </div>
</template>

<script setup lang="ts">
import LoanDialog from "~/components/padron/LoanDialog.vue";

const { user, logout } = useAuth();
const { initials } = useUi();
const route = useRoute();
const desk = useDesktop();
const toast = useToast();
const { isDark, toggle: toggleThemeMode } = useTheme();
const profileMenu = ref();
const { tabLabel, showTree, showDetail, detail, globalQ, loanPrompt } = desk;

const profileItems = computed(() => [
  { label: user.value?.display_name || user.value?.username || "Usuario", disabled: true },
  { label: user.value?.company_name || user.value?.company_code || "Empresa", disabled: true },
  { separator: true },
  {
    label: "Empresas",
    icon: "pi pi-briefcase",
    command: () => navigateTo("/configuracion?tab=empresas"),
  },
  {
    label: "Configuración",
    icon: "pi pi-cog",
    command: () => navigateTo("/configuracion"),
  },
  {
    label: isDark.value ? "Tema claro" : "Tema oscuro",
    icon: isDark.value ? "pi pi-sun" : "pi pi-moon",
    command: toggleTheme,
  },
  { separator: true },
  { label: "Cerrar sesión", icon: "pi pi-sign-out", command: logout },
]);

const brand = computed(() => "PANELS");

const menu = [
  { label: "Inicio", icon: "pi pi-home", to: "/", command: () => navigateTo("/") },
  { label: "Proyectos", icon: "pi pi-building", to: "/proyectos", command: () => navigateTo("/proyectos") },
  { label: "Presupuesto", icon: "pi pi-calculator", to: "/presupuesto", command: () => navigateTo("/presupuesto") },
  { label: "Control costos", icon: "pi pi-chart-bar", to: "/control-presupuesto", command: () => navigateTo("/control-presupuesto") },
  { label: "Gastos", icon: "pi pi-money-bill", to: "/gastos", command: () => navigateTo("/gastos") },
  { label: "Almacén", icon: "pi pi-box", to: "/almacen", command: () => navigateTo("/almacen") },
  { label: "Padrón", icon: "pi pi-users", to: "/padron", command: () => navigateTo("/padron") },
  { label: "Kanban", icon: "pi pi-th-large", to: "/kanban", command: () => navigateTo("/kanban") },
  { label: "Gafetes", icon: "pi pi-id-card", to: "/gafetes", command: () => navigateTo("/gafetes") },
  { label: "Nómina", icon: "pi pi-wallet", to: "/nomina", command: () => navigateTo("/nomina") },
  { label: "Usuarios", icon: "pi pi-shield", to: "/usuarios", command: () => navigateTo("/usuarios") },
  { label: "Ayuda", icon: "pi pi-question-circle", command: showHelp },
];

function isActive(to: string) {
  if (!to) return false;
  if (to === "/") return route.path === "/";
  return route.path === to || route.path.startsWith(`${to}/`);
}

function goSearch() {
  navigateTo("/padron");
}

function showNotifications() {
  toast.add({ severity: "info", summary: "Notificaciones", detail: "No hay notificaciones nuevas.", life: 2200 });
}

function showHelp() {
  toast.add({ severity: "info", summary: `Ayuda de ${brand.value}`, detail: "Seleccione un módulo para consultar su flujo de trabajo.", life: 2800 });
}

function toggleTheme() {
  toggleThemeMode();
  toast.add({
    severity: "success",
    summary: "Tema",
    detail: isDark.value ? "Tema oscuro activado." : "Tema claro activado.",
    life: 1800,
  });
}

function toggleProfile(event: Event) {
  profileMenu.value?.toggle(event);
}

function editFromFicha() {
  const edit = desk.ribbon.value.flatMap((g) => g.items).find((i) => i.key === "edit");
  edit?.command?.();
}

function onLoanSaved() {
  desk.bumpDetail();
}

function setLoanVisible(open: boolean) {
  loanPrompt.value.visible = open;
}

watch(
  () => route.path,
  (path) => {
    const workerOk = path.startsWith("/padron") || path.startsWith("/nomina") || path.startsWith("/kanban");
    if (!workerOk && desk.detail.value.kind === "worker") desk.clearDetail();
    if (!path.startsWith("/proyectos") && desk.detail.value.kind === "project") desk.clearDetail();
    if (!path.startsWith("/presupuesto") && desk.detail.value.kind === "budget") desk.clearDetail();
  },
);
</script>