import { _ as _sfc_main$1$1, a as _sfc_main$3 } from './LineAreaChart-BKRLleJI.mjs';
import { _ as __nuxt_component_0 } from './client-only-bjZkSkO2.mjs';
import { defineComponent, mergeProps, computed, withCtx, createVNode, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrRenderComponent } from 'vue/server-renderer';
import { u as useTheme } from './useTheme-BJEBqOKH.mjs';
import './server.mjs';
import '../_/nitro.mjs';
import 'node:http';
import 'node:https';
import 'node:events';
import 'node:buffer';
import 'node:fs';
import 'node:path';
import 'node:crypto';
import 'node:url';
import '../routes/renderer.mjs';
import 'vue-bundle-renderer/runtime';
import 'unhead/server';
import 'devalue';
import 'unhead/utils';
import 'unhead/plugins';
import 'vue-router';

const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  __name: "BarComparisonChart",
  __ssrInlineRender: true,
  props: {
    items: {}
  },
  setup(__props) {
    const props = __props;
    const { isDark } = useTheme();
    computed(() => [
      {
        name: "Score",
        data: props.items.map((item) => item.value)
      }
    ]);
    computed(() => {
      return {
        chart: {
          type: "bar",
          toolbar: { show: false },
          background: isDark.value ? "#0F172A" : "#FFFFFF",
          foreColor: isDark.value ? "#94A3B8" : "#64748B",
          parentHeightOffset: 0,
          animations: { enabled: true, easing: "easeinout", speed: 700 }
        },
        plotOptions: {
          bar: {
            borderRadius: 8,
            columnWidth: "46%"
          }
        },
        colors: ["#4F8CFF"],
        dataLabels: { enabled: false },
        grid: {
          borderColor: isDark.value ? "#334155" : "#E5EEF9",
          strokeDashArray: 4,
          padding: { top: 0, right: 8, bottom: 0, left: 8 }
        },
        xaxis: {
          categories: props.items.map((item) => item.label),
          labels: {
            style: {
              colors: isDark.value ? "#94A3B8" : "#6B7280",
              fontSize: "11px"
            }
          }
        },
        yaxis: {
          labels: {
            style: {
              colors: isDark.value ? "#94A3B8" : "#6B7280",
              fontSize: "11px"
            }
          }
        },
        tooltip: {
          theme: isDark.value ? "dark" : "light"
        },
        theme: {
          mode: isDark.value ? "dark" : "light",
          monochrome: { enabled: false }
        },
        legend: { show: false }
      };
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_ClientOnly = __nuxt_component_0;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "rounded-xl border border-surface-border bg-white p-3 dark:bg-slate-900/60" }, _attrs))}>`);
      _push(ssrRenderComponent(_component_ClientOnly, null, {
        fallback: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<div class="h-[220px] animate-pulse rounded-lg bg-brand-50 dark:bg-slate-800"${_scopeId}></div>`);
          } else {
            return [
              createVNode("div", { class: "h-[220px] animate-pulse rounded-lg bg-brand-50 dark:bg-slate-800" })
            ];
          }
        })
      }, _parent));
      _push(`</div>`);
    };
  }
});
const _sfc_setup$2 = _sfc_main$2.setup;
_sfc_main$2.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/ui/BarComparisonChart.vue");
  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "HeatmapGrid",
  __ssrInlineRender: true,
  props: {
    values: {},
    columns: { default: 7 }
  },
  setup(__props) {
    const props = __props;
    const { isDark } = useTheme();
    computed(() => {
      const weekCount = Math.ceil(props.values.length / props.columns);
      return Array.from({ length: weekCount }, (_, weekIndex) => {
        const start = weekIndex * props.columns;
        const row = props.values.slice(start, start + props.columns);
        return {
          name: `Week ${weekIndex + 1}`,
          data: row.map((value, dayIndex) => ({
            x: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][dayIndex] || `D${dayIndex + 1}`,
            y: value
          }))
        };
      });
    });
    computed(() => {
      return {
        chart: {
          toolbar: { show: false },
          background: isDark.value ? "#0F172A" : "#FFFFFF",
          foreColor: isDark.value ? "#94A3B8" : "#64748B",
          parentHeightOffset: 0,
          animations: { enabled: true, easing: "easeinout", speed: 500 }
        },
        dataLabels: { enabled: false },
        legend: { show: false },
        xaxis: {
          labels: { show: false },
          axisTicks: { show: false },
          axisBorder: { show: false }
        },
        yaxis: {
          labels: {
            style: {
              colors: isDark.value ? "#94A3B8" : "#6B7280",
              fontSize: "11px"
            }
          }
        },
        tooltip: {
          theme: isDark.value ? "dark" : "light",
          y: {
            formatter: (val) => `${val}% activity`
          }
        },
        plotOptions: {
          heatmap: {
            shadeIntensity: 0.2,
            radius: 6,
            distributed: false,
            colorScale: {
              ranges: [
                { from: 0, to: 20, color: isDark.value ? "#1E293B" : "#E2E8F0" },
                { from: 21, to: 40, color: isDark.value ? "#334155" : "#DBEAFE" },
                { from: 41, to: 60, color: "#93C5FD" },
                { from: 61, to: 80, color: "#60A5FA" },
                { from: 81, to: 100, color: "#3B82F6" }
              ]
            }
          }
        },
        grid: {
          borderColor: isDark.value ? "#334155" : "#E5EEF9",
          strokeDashArray: 4,
          padding: { top: 0, right: 4, bottom: 0, left: 4 }
        },
        theme: {
          mode: isDark.value ? "dark" : "light",
          monochrome: { enabled: false }
        }
      };
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_ClientOnly = __nuxt_component_0;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "rounded-xl border border-surface-border bg-white p-3 dark:bg-slate-900/60" }, _attrs))}><div class="mb-3 flex items-center justify-between"><p class="text-xs text-text-secondary">Last 4 weeks activity</p><div class="flex items-center gap-1.5 text-[11px] text-text-secondary"><span>Low</span><span class="h-2.5 w-2.5 rounded bg-slate-200 dark:bg-slate-700"></span><span class="h-2.5 w-2.5 rounded bg-brand-100"></span><span class="h-2.5 w-2.5 rounded bg-brand-300"></span><span class="h-2.5 w-2.5 rounded bg-brand-500"></span><span>High</span></div></div>`);
      _push(ssrRenderComponent(_component_ClientOnly, null, {
        fallback: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<div class="h-[220px] animate-pulse rounded-lg bg-brand-50 dark:bg-slate-800"${_scopeId}></div>`);
          } else {
            return [
              createVNode("div", { class: "h-[220px] animate-pulse rounded-lg bg-brand-50 dark:bg-slate-800" })
            ];
          }
        })
      }, _parent));
      _push(`</div>`);
    };
  }
});
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/ui/HeatmapGrid.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "analytics",
  __ssrInlineRender: true,
  setup(__props) {
    const weeklyLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    const miniLabels = ["W1", "W2", "W3", "W4", "W5", "W6", "W7"];
    const productivityTrend = [74, 79, 76, 83, 88, 81, 90];
    const weeklyStats = [62, 68, 71, 70, 75, 81, 84];
    const divisionComparison = [
      { label: "IT", value: 92 },
      { label: "HR", value: 78 },
      { label: "FIN", value: 74 },
      { label: "MKT", value: 84 },
      { label: "OPS", value: 80 }
    ];
    const heatmapValues = [
      10,
      20,
      60,
      80,
      35,
      45,
      75,
      90,
      20,
      50,
      70,
      40,
      25,
      35,
      60,
      70,
      20,
      10,
      50,
      85,
      95,
      30,
      65,
      40,
      78,
      52,
      15,
      45,
      67,
      89,
      36,
      28,
      56,
      92,
      80,
      47,
      35,
      60,
      72,
      22,
      40,
      62,
      84,
      90,
      50,
      34,
      66,
      74,
      59,
      21,
      38,
      70
    ];
    return (_ctx, _push, _parent, _attrs) => {
      const _component_UiStatCard = _sfc_main$1$1;
      const _component_UiLineAreaChart = _sfc_main$3;
      const _component_UiBarComparisonChart = _sfc_main$2;
      const _component_UiHeatmapGrid = _sfc_main$1;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "space-y-6" }, _attrs))}><header><h1 class="text-2xl font-semibold">Analytics &amp; Performance</h1><p class="text-sm text-text-secondary">Premium insight layer for team productivity and division comparison.</p></header><section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">`);
      _push(ssrRenderComponent(_component_UiStatCard, {
        title: "Completion Rate",
        value: "94%",
        trend: "+2.4%"
      }, null, _parent));
      _push(ssrRenderComponent(_component_UiStatCard, {
        title: "Monthly Performance",
        value: "89.2",
        trend: "+5.1%"
      }, null, _parent));
      _push(ssrRenderComponent(_component_UiStatCard, {
        title: "Most Active Team",
        value: "IT Division",
        trend: "Top"
      }, null, _parent));
      _push(ssrRenderComponent(_component_UiStatCard, {
        title: "Blocker Resolution",
        value: "86%",
        trend: "+3.7%"
      }, null, _parent));
      _push(`</section><section class="grid gap-4 lg:grid-cols-2"><article class="card p-5"><h2 class="font-semibold">Team Productivity Graph</h2><div class="mt-4 h-64">`);
      _push(ssrRenderComponent(_component_UiLineAreaChart, {
        values: productivityTrend,
        labels: weeklyLabels
      }, null, _parent));
      _push(`</div></article><article class="card p-5"><h2 class="font-semibold">Division Comparison</h2><div class="mt-4">`);
      _push(ssrRenderComponent(_component_UiBarComparisonChart, { items: divisionComparison }, null, _parent));
      _push(`</div></article></section><section class="grid gap-4 lg:grid-cols-3"><article class="card p-5"><h2 class="font-semibold">Weekly Statistics</h2><div class="mt-4 h-36">`);
      _push(ssrRenderComponent(_component_UiLineAreaChart, {
        values: weeklyStats,
        labels: miniLabels
      }, null, _parent));
      _push(`</div></article><article class="card p-5"><h2 class="font-semibold">Activity Heatmap</h2><div class="mt-4">`);
      _push(ssrRenderComponent(_component_UiHeatmapGrid, {
        values: heatmapValues,
        columns: 7
      }, null, _parent));
      _push(`</div></article><article class="card p-5"><h2 class="font-semibold">Most Active Employees</h2><ul class="mt-4 space-y-2 text-sm"><li class="card-muted p-3">Ardi Putra - 31 reports</li><li class="card-muted p-3">Nadia Pram - 30 reports</li><li class="card-muted p-3">Gita M - 30 reports</li></ul></article></section></div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/analytics.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};

export { _sfc_main as default };
//# sourceMappingURL=analytics-G3FjhEmv.mjs.map
