@tekkare/auriga 0.2.192 → 0.2.198

package/dist/runtime/components/argProjectDashboard.vue

@@ -0,0 +1,631 @@
+<template>
+  <div class="arg_dashboard_container">
+    <slot name="toolbar" />
+
+    <!-- Loading state -->
+    <div v-if="loading" class="arg_dashboard_loading">
+      <div v-for="n in 4" :key="n" class="arg_dashboard_skeleton">
+        <div class="arg_dashboard_skeleton_header">
+          <div class="arg_dashboard_skeleton_bar" style="width: 140px"></div>
+          <div class="arg_dashboard_skeleton_bar" style="width: 40px"></div>
+        </div>
+        <div class="arg_dashboard_skeleton_body">
+          <div class="arg_dashboard_skeleton_bar" style="width: 100%; height: 12px"></div>
+          <div class="arg_dashboard_skeleton_bar" style="width: 80%; height: 12px"></div>
+          <div class="arg_dashboard_skeleton_bar" style="width: 60%; height: 12px"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Dashboard grid -->
+    <div v-else-if="visibleSections.length > 0" ref="gridContainer" class="arg_dashboard_grid">
+      <div
+        v-for="section in visibleSections"
+        :key="section.id"
+        class="arg_dashboard_item"
+        :class="getWidthClass(section.id)"
+        :data-section-id="section.id"
+      >
+        <div class="arg_dashboard_item_content">
+        <arg-dashboard-section
+          :title="section.title"
+          :icon="section.icon"
+          :count="section.data.length"
+          :default-collapsed="section.defaultCollapsed || false"
+          :max-height="section.maxHeight || 300"
+          @collapse-change="onCollapseChange(section.id, $event)"
+        >
+          <template #headerActions>
+            <!-- View mode toggles -->
+            <div class="arg_dashboard_view_toggles">
+              <button
+                v-for="mode in getViewModes(section)"
+                :key="mode"
+                class="arg_dashboard_toggle_btn"
+                :class="{ arg_dashboard_toggle_active: getSectionState(section.id).viewMode === mode }"
+                :title="mode"
+                @click="setViewMode(section.id, mode)"
+              >
+                <arg-icon :name="viewModeIcon(mode)" size="16" color="currentColor" />
+              </button>
+            </div>
+
+            <!-- Width toggles -->
+            <div class="arg_dashboard_width_toggles">
+              <button
+                class="arg_dashboard_toggle_btn"
+                :class="{ arg_dashboard_toggle_active: getSectionState(section.id).width === 'full' }"
+                title="Full width"
+                @click="setWidth(section.id, 'full')"
+              >
+                <arg-icon name="ArrowsOutSimple" size="16" color="currentColor" />
+              </button>
+              <button
+                class="arg_dashboard_toggle_btn"
+                :class="{ arg_dashboard_toggle_active: getSectionState(section.id).width === 'half' }"
+                title="Half width"
+                @click="setWidth(section.id, 'half')"
+              >
+                <arg-icon name="SplitHorizontal" size="16" color="currentColor" />
+              </button>
+            </div>
+          </template>
+
+          <!-- Table view -->
+          <arg-resource-table
+            v-if="getSectionState(section.id).viewMode === 'table'"
+            :data="section.data"
+            :variant="section.variant || 'default'"
+            :show-source-tag="section.showSourceTag || false"
+            :max-height="section.maxHeight || 300"
+            @on-remove="(item) => emit('onRemove', item)"
+            @on-annotate="(item) => emit('onAnnotate', item)"
+            @on-open="(item) => emit('onOpen', item)"
+          />
+
+          <!-- Cards view -->
+          <div
+            v-else-if="getSectionState(section.id).viewMode === 'cards'"
+            class="arg_dashboard_cards_grid"
+          >
+            <arg-resource-card
+              v-for="item in section.data"
+              :key="item.id"
+              :data="item"
+              :hide-provider="section.hideProviderOnCards || false"
+              @on-remove="(item) => emit('onRemove', item)"
+              @on-annotate="(item) => emit('onAnnotate', item)"
+              @on-open="(item) => emit('onOpen', item)"
+            />
+          </div>
+
+          <!-- Chart view (grouped) -->
+          <div
+            v-else-if="getSectionState(section.id).viewMode === 'chart' && section.chartMode !== 'carousel'"
+            class="arg_dashboard_chart_view"
+          >
+            <arg-chart
+              v-if="section.chartData"
+              type="bar"
+              :categories="section.chartData.categories"
+              :series="section.chartData.series"
+              height="300"
+            />
+            <arg-table
+              v-if="section.chartData"
+              :heads="['Name', ...section.chartData.categories]"
+              :contents="chartTableContents(section)"
+              :sort="true"
+              :full-table-scroll="true"
+              :max-height="200"
+            />
+          </div>
+
+          <!-- Chart view (carousel) -->
+          <div
+            v-else-if="getSectionState(section.id).viewMode === 'chart' && section.chartMode === 'carousel'"
+            class="arg_dashboard_chart_view"
+          >
+            <div v-if="section.carouselItems && section.carouselItems.length" class="arg_dashboard_carousel">
+              <div class="arg_dashboard_carousel_nav">
+                <button
+                  class="arg_dashboard_carousel_btn"
+                  :disabled="getSectionState(section.id).carouselIndex <= 0"
+                  @click="carouselPrev(section.id)"
+                >
+                  <arg-icon name="CaretLeft" size="16" color="currentColor" />
+                </button>
+                <span class="arg_dashboard_carousel_label">
+                  {{ section.carouselItems[getSectionState(section.id).carouselIndex]?.label || '' }}
+                  <span class="arg_dashboard_carousel_counter">
+                    ({{ getSectionState(section.id).carouselIndex + 1 }}/{{ section.carouselItems.length }})
+                  </span>
+                </span>
+                <button
+                  class="arg_dashboard_carousel_btn"
+                  :disabled="getSectionState(section.id).carouselIndex >= section.carouselItems.length - 1"
+                  @click="carouselNext(section.id, section.carouselItems.length)"
+                >
+                  <arg-icon name="CaretRight" size="16" color="currentColor" />
+                </button>
+              </div>
+              <arg-chart
+                type="bar"
+                :categories="currentCarouselItem(section)?.chartData?.categories || []"
+                :series="currentCarouselItem(section)?.chartData?.series || []"
+                height="300"
+              />
+              <arg-table
+                v-if="currentCarouselItem(section)?.chartData"
+                :heads="['Name', ...(currentCarouselItem(section)?.chartData?.categories || [])]"
+                :contents="carouselTableContents(section)"
+                :sort="true"
+                :full-table-scroll="true"
+                :max-height="200"
+              />
+            </div>
+          </div>
+        </arg-dashboard-section>
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else class="arg_dashboard_empty">
+      <slot name="empty">
+        <div class="arg_dashboard_empty_content">
+          <arg-icon name="FolderOpen" size="48" color="var(--medium)" />
+          <h3 class="arg_dashboard_empty_title">{{ emptyTitle }}</h3>
+          <p class="arg_dashboard_empty_text">{{ emptyText }}</p>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, reactive, nextTick } from "vue";
+
+interface ResourceItem {
+  id: string;
+  title: string;
+  identification?: string;
+  publication_date?: string;
+  source?: { flag: string; label: string };
+  resourceType?: string;
+  card_link?: string;
+  resource_link?: string;
+  countAnnotation?: number;
+  countryName?: string;
+  price?: number;
+  priceVariation?: number;
+  currency?: string;
+  currencySymbol?: string;
+  atcCode?: string;
+  manufacturer?: string;
+  diagnosisLabel?: string;
+  diagnosisType?: string;
+  year?: string;
+  hospitalizations?: number | null;
+  cancerCode?: string;
+  cases?: number | null;
+  rate?: number | null;
+  metricType?: string;
+  geneName?: string;
+  linkedCount?: number;
+  linkedLabel?: string;
+  icd10Codes?: string[];
+  provider?: string;
+  icon?: string;
+}
+
+export interface DashboardSectionConfig {
+  id: string;
+  title: string;
+  icon: string;
+  variant?: string;
+  data: ResourceItem[];
+  viewModes?: ("table" | "cards" | "chart")[];
+  showSourceTag?: boolean;
+  hideProviderOnCards?: boolean;
+  defaultWidth?: "full" | "half";
+  defaultCollapsed?: boolean;
+  maxHeight?: number;
+  chartData?: {
+    categories: string[];
+    series: { name: string; data: number[]; resourceRef?: any }[];
+  };
+  chartMode?: "grouped" | "carousel";
+  carouselItems?: {
+    label: string;
+    chartData: { categories: string[]; series: any[] };
+    resourceRef?: any;
+  }[];
+}
+
+interface SectionState {
+  viewMode: "table" | "cards" | "chart";
+  width: "full" | "half";
+  carouselIndex: number;
+}
+
+const props = withDefaults(
+  defineProps<{
+    sections?: DashboardSectionConfig[];
+    loading?: boolean;
+    emptyTitle?: string;
+    emptyText?: string;
+    dragEnabled?: boolean;
+  }>(),
+  {
+    sections: () => [],
+    loading: false,
+    emptyTitle: "No resource found",
+    emptyText: "Please add resources to the project",
+    dragEnabled: true,
+  }
+);
+
+const emit = defineEmits<{
+  onRemove: [item: ResourceItem];
+  onAnnotate: [item: ResourceItem];
+  onOpen: [item: ResourceItem];
+  onOrderChange: [order: string[]];
+}>();
+
+const gridContainer = ref<HTMLElement | null>(null);
+let muuriInstance: any = null;
+
+const sectionStates = reactive<Record<string, SectionState>>({});
+
+const visibleSections = computed(() =>
+  props.sections.filter((s) => s.data && s.data.length > 0)
+);
+
+function getSectionState(id: string): SectionState {
+  if (!sectionStates[id]) {
+    const section = props.sections.find((s) => s.id === id);
+    sectionStates[id] = {
+      viewMode: section?.viewModes?.[0] || "table",
+      width: section?.defaultWidth || "full",
+      carouselIndex: 0,
+    };
+  }
+  return sectionStates[id];
+}
+
+function getViewModes(section: DashboardSectionConfig): string[] {
+  return section.viewModes || ["table", "cards"];
+}
+
+function viewModeIcon(mode: string): string {
+  switch (mode) {
+    case "table":
+      return "Table";
+    case "cards":
+      return "SquaresFour";
+    case "chart":
+      return "ChartBar";
+    default:
+      return "Table";
+  }
+}
+
+function setViewMode(sectionId: string, mode: "table" | "cards" | "chart") {
+  getSectionState(sectionId).viewMode = mode;
+  refreshLayout();
+}
+
+function setWidth(sectionId: string, width: "full" | "half") {
+  getSectionState(sectionId).width = width;
+  refreshLayout();
+}
+
+function getWidthClass(sectionId: string): string {
+  return getSectionState(sectionId).width === "half"
+    ? "arg_dashboard_item_half"
+    : "arg_dashboard_item_full";
+}
+
+function onCollapseChange(_sectionId: string, _collapsed: boolean) {
+  refreshLayout();
+}
+
+// Carousel
+function carouselPrev(sectionId: string) {
+  const state = getSectionState(sectionId);
+  if (state.carouselIndex > 0) state.carouselIndex--;
+}
+
+function carouselNext(sectionId: string, total: number) {
+  const state = getSectionState(sectionId);
+  if (state.carouselIndex < total - 1) state.carouselIndex++;
+}
+
+function currentCarouselItem(section: DashboardSectionConfig) {
+  if (!section.carouselItems?.length) return null;
+  const idx = getSectionState(section.id).carouselIndex;
+  return section.carouselItems[idx] || null;
+}
+
+// Chart table helpers
+function chartTableContents(section: DashboardSectionConfig) {
+  if (!section.chartData) return [];
+  return section.chartData.series.map((s) => ({
+    values: [s.name, ...s.data],
+  }));
+}
+
+function carouselTableContents(section: DashboardSectionConfig) {
+  const item = currentCarouselItem(section);
+  if (!item?.chartData) return [];
+  return item.chartData.series.map((s: any) => ({
+    values: [s.name, ...s.data],
+  }));
+}
+
+// Muuri integration
+async function initMuuri() {
+  if (!props.dragEnabled || !gridContainer.value) return;
+
+  const Muuri = (await import("muuri")).default;
+  muuriInstance = new Muuri(gridContainer.value, {
+    dragEnabled: true,
+    dragHandle: ".arg_dashboard_drag_handle",
+    dragContainer: document.body,
+    layoutDuration: 300,
+    layoutEasing: "ease",
+    dragStartPredicate: { distance: 10, delay: 0 },
+    dragPlaceholder: {
+      enabled: true,
+      createElement: (item: any) => {
+        const el = item.getElement().cloneNode(true);
+        el.style.opacity = "0.3";
+        return el;
+      },
+    },
+  });
+
+  muuriInstance.on("dragEnd", () => {
+    const items = muuriInstance.getItems();
+    const order = items
+      .map((item: any) => item.getElement()?.getAttribute("data-section-id"))
+      .filter(Boolean) as string[];
+    emit("onOrderChange", order);
+  });
+}
+
+function refreshLayout() {
+  nextTick(() => {
+    muuriInstance?.refreshItems?.();
+    muuriInstance?.layout?.();
+  });
+}
+
+watch(
+  () => props.sections,
+  () => {
+    nextTick(() => {
+      refreshLayout();
+    });
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  initMuuri();
+});
+
+onBeforeUnmount(() => {
+  muuriInstance?.destroy?.();
+  muuriInstance = null;
+});
+</script>
+
+<!-- Unscoped: Muuri manipulates DOM outside the component (dragContainer: body)
+     and adds its own classes (muuri-item-*). These must not be scoped. -->
+<style>
+.arg_dashboard_grid{position:relative}.arg_dashboard_item{box-sizing:border-box;padding:8px;position:absolute;z-index:1}.arg_dashboard_item_full{width:100%}.arg_dashboard_item_half{width:50%}.arg_dashboard_item_content{position:relative}.arg_dashboard_item.muuri-item-dragging{cursor:grabbing;z-index:3}.arg_dashboard_item.muuri-item-releasing{z-index:2}.arg_dashboard_item.muuri-item-hidden{z-index:0}
+</style>
+
+<style scoped>
+.arg_dashboard_container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+/* Loading skeleton */
+.arg_dashboard_loading {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.arg_dashboard_skeleton {
+  background: var(--base-white, #fff);
+  border: 1px solid var(--light, #ececf2);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.arg_dashboard_skeleton_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: var(--lightest, #f5f5fa);
+  border-bottom: 1px solid var(--light, #ececf2);
+}
+
+.arg_dashboard_skeleton_body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+}
+
+.arg_dashboard_skeleton_bar {
+  height: 16px;
+  background: linear-gradient(90deg, var(--light, #ececf2) 25%, var(--lightest, #f5f5fa) 50%, var(--light, #ececf2) 75%);
+  background-size: 200% 100%;
+  border-radius: 4px;
+  animation: arg_dashboard_shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes arg_dashboard_shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* View mode toggles */
+.arg_dashboard_view_toggles,
+.arg_dashboard_width_toggles {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--base-white, #fff);
+  border-radius: 6px;
+  padding: 2px;
+  border: 1px solid var(--light, #ececf2);
+}
+
+.arg_dashboard_toggle_btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--medium, #9999b0);
+  transition: all 0.15s ease;
+}
+
+.arg_dashboard_toggle_btn:hover {
+  color: var(--dark, #6c6c8a);
+  background: var(--lightest, #f5f5fa);
+}
+
+.arg_dashboard_toggle_active {
+  color: var(--primary, #2176ff);
+  background: rgba(33, 118, 255, 0.1);
+}
+
+.arg_dashboard_toggle_active:hover {
+  color: var(--primary, #2176ff);
+  background: rgba(33, 118, 255, 0.15);
+}
+
+/* Cards grid */
+.arg_dashboard_cards_grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+  padding: 12px;
+}
+
+/* Chart view */
+.arg_dashboard_chart_view {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Carousel */
+.arg_dashboard_carousel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.arg_dashboard_carousel_nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.arg_dashboard_carousel_btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--light, #ececf2);
+  background: var(--base-white, #fff);
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--dark, #6c6c8a);
+  transition: all 0.15s ease;
+}
+
+.arg_dashboard_carousel_btn:hover:not(:disabled) {
+  background: var(--lightest, #f5f5fa);
+  border-color: var(--medium, #9999b0);
+}
+
+.arg_dashboard_carousel_btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.arg_dashboard_carousel_label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--darkest, #1a1a2e);
+}
+
+.arg_dashboard_carousel_counter {
+  font-weight: 400;
+  color: var(--medium, #9999b0);
+}
+
+/* Empty state */
+.arg_dashboard_empty {
+  display: flex;
+  justify-content: center;
+  padding: 64px 24px;
+}
+
+.arg_dashboard_empty_content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.arg_dashboard_empty_title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--darkest, #1a1a2e);
+  margin: 0;
+}
+
+.arg_dashboard_empty_text {
+  font-size: 14px;
+  color: var(--dark, #6c6c8a);
+  margin: 0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .arg_dashboard_cards_grid {
+    grid-template-columns: 1fr;
+  }
+
+  .arg_dashboard_loading {
+    grid-template-columns: 1fr;
+  }
+}
+</style>