panels-origin/web-panel/components/AppStatusbar.vue

<template>
  <Toolbar class="statusbar">
    <template #start>
      <span class="statusbar-item statusbar-user">
        <span class="statusbar-online" />
        <span>Usuario: <strong>{{ user?.display_name || user?.username || "—" }}</strong></span>
      </span>
      <Divider layout="vertical" />
      <span class="statusbar-item">
        <i class="pi pi-sitemap" />
        <span>Proyecto: <strong>{{ projectLabel }}</strong></span>
      </span>
      <Divider layout="vertical" />
      <span class="statusbar-item">
        <i class="pi pi-briefcase" />
        <span>Empresa: <strong>{{ user?.company_name || user?.company_code || "—" }}</strong></span>
      </span>
      <Divider layout="vertical" />
      <span class="statusbar-item">
        <i class="pi pi-box" />
        <span>Versión: <strong>1.0.0</strong></span>
      </span>
    </template>
    <template #end>
      <DeskStatusMessages />
    </template>
  </Toolbar>
</template>

<script setup lang="ts">
import type { TreeNode } from "primevue/treenode";
import DeskStatusMessages from "~/components/DeskStatusMessages.vue";

const { user } = useAuth();
const { tree, treeKey } = useDesktop();

function findNode(nodes: TreeNode[] | undefined, key: string): TreeNode | undefined {
  for (const node of nodes || []) {
    if (node.key === key) return node;
    const hit = findNode(node.children, key);
    if (hit) return hit;
  }
}

const projectLabel = computed(() => {
  if (!treeKey.value.startsWith("p:")) return "Todos los proyectos";
  const node = findNode(tree.value, treeKey.value);
  return String(node?.label || "Proyecto seleccionado");
});
</script>