@consilioweb/payload-support 0.8.2 → 0.9.5

package/dist/views/TimeDashboardView/client.cjs

@@ -2,11 +2,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var Skeleton = require('../shared/Skeleton');
 var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
+var styles = require('../../styles/TimeDashboard.module.scss');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 function formatDuration(minutes) {
   const h = Math.floor(minutes / 60);
@@ -36,7 +39,11 @@ const TimeDashboardClient = () => {
   const fetchEntries = React.useCallback(async () => {
     setLoading(true);
     try {
-      const params = new URLSearchParams({ limit: "500", depth: "2", sort: "-date" });
+      const params = new URLSearchParams({
+        limit: "500",
+        depth: "2",
+        sort: "-date"
+      });
       if (from) params.set("where[date][greater_than_equal]", from);
       if (to) params.set("where[date][less_than_equal]", to);
       const res = await fetch(`/api/time-entries?${params}`);
@@ -52,6 +59,7 @@ const TimeDashboardClient = () => {
     fetchEntries();
   }, [fetchEntries]);
   const totalMinutes = entries.reduce((sum, e) => sum + (e.duration || 0), 0);
+  const totalEntries = entries.length;
   const grouped = React__default.default.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const entry of entries) {
@@ -69,13 +77,19 @@ const TimeDashboardClient = () => {
       if (!map.has(key)) map.set(key, []);
       map.get(key).push(entry);
     }
-    return Array.from(map.entries()).map(([label, items]) => ({ label, entries: items, totalMinutes: items.reduce((sum, e) => sum + (e.duration || 0), 0) }));
+    return Array.from(map.entries()).map(([label, items]) => ({
+      label,
+      entries: items,
+      totalMinutes: items.reduce((sum, e) => sum + (e.duration || 0), 0)
+    }));
   }, [entries, groupBy]);
   const dailyChart = React__default.default.useMemo(() => {
     const dayMap = /* @__PURE__ */ new Map();
     for (const entry of entries) {
       const day = entry.date ? entry.date.split("T")[0] : null;
-      if (day) dayMap.set(day, (dayMap.get(day) || 0) + (entry.duration || 0));
+      if (day) {
+        dayMap.set(day, (dayMap.get(day) || 0) + (entry.duration || 0));
+      }
     }
     return Array.from(dayMap.entries()).sort(([a], [b]) => a.localeCompare(b)).slice(-30).map(([day, mins]) => ({ day, minutes: mins }));
   }, [entries]);
@@ -84,43 +98,32 @@ const TimeDashboardClient = () => {
     setFrom(range.from);
     setTo(range.to);
   };
-  const S = {
-    page: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" },
-    btn: { padding: "6px 12px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
-    btnPrimary: { padding: "6px 12px", borderRadius: 6, border: "none", fontSize: 12, cursor: "pointer", background: "#2563eb", color: "#fff", fontWeight: 600 },
-    kpis: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 20 },
-    kpiCard: { padding: "16px 20px", borderRadius: 10, border: "1px solid var(--theme-elevation-150)" },
-    groupCard: { marginBottom: 12, borderRadius: 10, border: "1px solid var(--theme-elevation-150)", overflow: "hidden" },
-    groupHeader: { display: "flex", justifyContent: "space-between", padding: "10px 16px", background: "var(--theme-elevation-50)", borderBottom: "1px solid var(--theme-elevation-150)" },
-    table: { width: "100%", borderCollapse: "collapse", fontSize: 12 },
-    td: { padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-100)" }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.page, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0 }, children: t("timeDashboard.title") }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 13, color: "var(--theme-elevation-500)", margin: "4px 0 0" }, children: t("timeDashboard.subtitle") })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.page, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerLeft, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: styles__default.default.title, children: t("timeDashboard.title") }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles__default.default.subtitle, children: t("timeDashboard.subtitle") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/admin/collections/time-entries/create", style: { ...S.btnPrimary, textDecoration: "none", display: "inline-block" }, children: t("timeDashboard.newEntry") })
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/admin/collections/time-entries/create", className: styles__default.default.newEntryBtn, children: t("timeDashboard.newEntry") })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, marginBottom: 8 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { style: S.btnPrimary, onClick: () => setPeriod(getMonthRange(0)), children: t("timeDashboard.filters.thisMonth") }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { style: S.btn, onClick: () => setPeriod(getMonthRange(-1)), children: t("timeDashboard.filters.lastMonth") }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { style: S.btn, onClick: () => setPeriod(getMonthRange(-2)), children: t("timeDashboard.filters.twoMonthsAgo") })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.filters, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.quickPeriod, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles__default.default.btnPrimary, onClick: () => setPeriod(getMonthRange(0)), children: t("timeDashboard.filters.thisMonth") }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles__default.default.btnSecondary, onClick: () => setPeriod(getMonthRange(-1)), children: t("timeDashboard.filters.lastMonth") }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles__default.default.btnAmber, onClick: () => setPeriod(getMonthRange(-2)), children: t("timeDashboard.filters.twoMonthsAgo") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, alignItems: "flex-end" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: 11, fontWeight: 600, display: "block", marginBottom: 4, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.filters.from") }),
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "date", value: from, onChange: (e) => setFrom(e.target.value), style: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" } })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.filterRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.fieldGroup, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, children: t("timeDashboard.filters.from") }),
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "date", value: from, onChange: (e) => setFrom(e.target.value), className: styles__default.default.input })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: 11, fontWeight: 600, display: "block", marginBottom: 4, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.filters.to") }),
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "date", value: to, onChange: (e) => setTo(e.target.value), style: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" } })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.fieldGroup, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, children: t("timeDashboard.filters.to") }),
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "date", value: to, onChange: (e) => setTo(e.target.value), className: styles__default.default.input })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: 11, fontWeight: 600, display: "block", marginBottom: 4, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.filters.groupBy") }),
-          /* @__PURE__ */ jsxRuntime.jsxs("select", { value: groupBy, onChange: (e) => setGroupBy(e.target.value), style: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.fieldGroup, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles__default.default.label, children: t("timeDashboard.filters.groupBy") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("select", { value: groupBy, onChange: (e) => setGroupBy(e.target.value), className: styles__default.default.select, children: [
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "day", children: t("timeDashboard.filters.day") }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "week", children: t("timeDashboard.filters.week") }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "project", children: t("timeDashboard.filters.project") })
@@ -128,37 +131,45 @@ const TimeDashboardClient = () => {
         ] })
       ] })
     ] }),
-    loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.kpis, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.kpiCard, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.kpis.totalTime") }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 24, fontWeight: 700, color: "#2563eb" }, children: formatDuration(totalMinutes) })
+    loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loading, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.SkeletonDashboard, {}) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.kpis, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.kpiCardPrimary, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.kpiLabel, children: t("timeDashboard.kpis.totalTime") }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.kpiPrimary, children: formatDuration(totalMinutes) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.kpiCard, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.kpis.entries") }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 24, fontWeight: 700, color: "#d97706" }, children: entries.length })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.kpiCardAmber, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.kpiLabel, children: t("timeDashboard.kpis.entries") }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.kpiAmber, children: totalEntries })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.kpiCard, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.kpis.dailyAverage") }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 24, fontWeight: 700, color: "#ea580c" }, children: dailyChart.length > 0 ? formatDuration(Math.round(totalMinutes / dailyChart.length)) : "-" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.kpiCardOrange, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.kpiLabel, children: t("timeDashboard.kpis.dailyAverage") }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.kpiOrange, children: dailyChart.length > 0 ? formatDuration(Math.round(totalMinutes / dailyChart.length)) : "-" })
         ] })
       ] }),
-      dailyChart.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)", marginBottom: 20 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 8 }, children: t("timeDashboard.chart.title") }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 3, height: 80 }, children: dailyChart.map((d) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, background: "#3b82f6", borderRadius: "3px 3px 0 0", height: `${Math.max(d.minutes / maxDailyMinutes * 100, 4)}%` }, title: `${d.day}: ${formatDuration(d.minutes)}` }, d.day)) })
+      dailyChart.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.chartWrap, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.chartHeader, children: t("timeDashboard.chart.title") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.chartBars, children: dailyChart.map((d) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.chartBar,
+            style: { height: `${Math.max(d.minutes / maxDailyMinutes * 100, 4)}%` },
+            title: `${d.day}: ${formatDuration(d.minutes)}`
+          },
+          d.day
+        )) })
       ] }),
-      grouped.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("timeDashboard.empty") }) : grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.groupCard, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.groupHeader, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 700 }, children: group.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 700, color: "#2563eb" }, children: formatDuration(group.totalMinutes) })
+      grouped.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.empty, children: t("timeDashboard.empty") }) : grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.groupCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.groupHeader, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.groupLabel, children: group.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.groupTotal, children: formatDuration(group.totalMinutes) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("table", { style: S.table, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: group.entries.map((entry) => {
+        /* @__PURE__ */ jsxRuntime.jsx("table", { className: styles__default.default.table, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: group.entries.map((entry) => {
           const ticket = typeof entry.ticket === "object" ? entry.ticket : null;
-          return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("td", { style: S.td, children: ticket ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: `/admin/collections/tickets/${ticket.id}`, style: { color: "#2563eb", textDecoration: "none", fontWeight: 600 }, children: ticket.ticketNumber || `#${ticket.id}` }) : "-" }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { style: S.td, children: ticket?.subject || "" }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...S.td, color: "var(--theme-elevation-500)" }, children: entry.description || "-" }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...S.td, textAlign: "right", fontWeight: 600 }, children: formatDuration(entry.duration) })
+          return /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles__default.default.entryRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: styles__default.default.tdTicket, children: ticket ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: `/admin/collections/tickets/${ticket.id}`, className: styles__default.default.ticketLink, children: ticket.ticketNumber || `#${ticket.id}` }) : "-" }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: styles__default.default.tdSubject, children: ticket?.subject || "" }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: styles__default.default.tdDescription, children: entry.description || "-" }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: styles__default.default.tdDuration, children: formatDuration(entry.duration) })
           ] }, entry.id);
         }) }) })
       ] }, group.label))

package/dist/views/TimeDashboardView/client.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState, useCallback, useEffect } from 'react';
+import { SkeletonDashboard } from '../shared/Skeleton.js';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
+import styles from '../../styles/TimeDashboard.module.scss';
 
 function formatDuration(minutes) {
   const h = Math.floor(minutes / 60);
@@ -31,7 +33,11 @@ const TimeDashboardClient = () => {
   const fetchEntries = useCallback(async () => {
     setLoading(true);
     try {
-      const params = new URLSearchParams({ limit: "500", depth: "2", sort: "-date" });
+      const params = new URLSearchParams({
+        limit: "500",
+        depth: "2",
+        sort: "-date"
+      });
       if (from) params.set("where[date][greater_than_equal]", from);
       if (to) params.set("where[date][less_than_equal]", to);
       const res = await fetch(`/api/time-entries?${params}`);
@@ -47,6 +53,7 @@ const TimeDashboardClient = () => {
     fetchEntries();
   }, [fetchEntries]);
   const totalMinutes = entries.reduce((sum, e) => sum + (e.duration || 0), 0);
+  const totalEntries = entries.length;
   const grouped = React.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const entry of entries) {
@@ -64,13 +71,19 @@ const TimeDashboardClient = () => {
       if (!map.has(key)) map.set(key, []);
       map.get(key).push(entry);
     }
-    return Array.from(map.entries()).map(([label, items]) => ({ label, entries: items, totalMinutes: items.reduce((sum, e) => sum + (e.duration || 0), 0) }));
+    return Array.from(map.entries()).map(([label, items]) => ({
+      label,
+      entries: items,
+      totalMinutes: items.reduce((sum, e) => sum + (e.duration || 0), 0)
+    }));
   }, [entries, groupBy]);
   const dailyChart = React.useMemo(() => {
     const dayMap = /* @__PURE__ */ new Map();
     for (const entry of entries) {
       const day = entry.date ? entry.date.split("T")[0] : null;
-      if (day) dayMap.set(day, (dayMap.get(day) || 0) + (entry.duration || 0));
+      if (day) {
+        dayMap.set(day, (dayMap.get(day) || 0) + (entry.duration || 0));
+      }
     }
     return Array.from(dayMap.entries()).sort(([a], [b]) => a.localeCompare(b)).slice(-30).map(([day, mins]) => ({ day, minutes: mins }));
   }, [entries]);
@@ -79,43 +92,32 @@ const TimeDashboardClient = () => {
     setFrom(range.from);
     setTo(range.to);
   };
-  const S = {
-    page: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" },
-    btn: { padding: "6px 12px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
-    btnPrimary: { padding: "6px 12px", borderRadius: 6, border: "none", fontSize: 12, cursor: "pointer", background: "#2563eb", color: "#fff", fontWeight: 600 },
-    kpis: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 20 },
-    kpiCard: { padding: "16px 20px", borderRadius: 10, border: "1px solid var(--theme-elevation-150)" },
-    groupCard: { marginBottom: 12, borderRadius: 10, border: "1px solid var(--theme-elevation-150)", overflow: "hidden" },
-    groupHeader: { display: "flex", justifyContent: "space-between", padding: "10px 16px", background: "var(--theme-elevation-50)", borderBottom: "1px solid var(--theme-elevation-150)" },
-    table: { width: "100%", borderCollapse: "collapse", fontSize: 12 },
-    td: { padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-100)" }
-  };
-  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0 }, children: t("timeDashboard.title") }),
-        /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "var(--theme-elevation-500)", margin: "4px 0 0" }, children: t("timeDashboard.subtitle") })
+  return /* @__PURE__ */ jsxs("div", { className: styles.page, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.headerLeft, children: [
+        /* @__PURE__ */ jsx("h1", { className: styles.title, children: t("timeDashboard.title") }),
+        /* @__PURE__ */ jsx("p", { className: styles.subtitle, children: t("timeDashboard.subtitle") })
       ] }),
-      /* @__PURE__ */ jsx("a", { href: "/admin/collections/time-entries/create", style: { ...S.btnPrimary, textDecoration: "none", display: "inline-block" }, children: t("timeDashboard.newEntry") })
+      /* @__PURE__ */ jsx("a", { href: "/admin/collections/time-entries/create", className: styles.newEntryBtn, children: t("timeDashboard.newEntry") })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginBottom: 8 }, children: [
-        /* @__PURE__ */ jsx("button", { style: S.btnPrimary, onClick: () => setPeriod(getMonthRange(0)), children: t("timeDashboard.filters.thisMonth") }),
-        /* @__PURE__ */ jsx("button", { style: S.btn, onClick: () => setPeriod(getMonthRange(-1)), children: t("timeDashboard.filters.lastMonth") }),
-        /* @__PURE__ */ jsx("button", { style: S.btn, onClick: () => setPeriod(getMonthRange(-2)), children: t("timeDashboard.filters.twoMonthsAgo") })
+    /* @__PURE__ */ jsxs("div", { className: styles.filters, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.quickPeriod, children: [
+        /* @__PURE__ */ jsx("button", { className: styles.btnPrimary, onClick: () => setPeriod(getMonthRange(0)), children: t("timeDashboard.filters.thisMonth") }),
+        /* @__PURE__ */ jsx("button", { className: styles.btnSecondary, onClick: () => setPeriod(getMonthRange(-1)), children: t("timeDashboard.filters.lastMonth") }),
+        /* @__PURE__ */ jsx("button", { className: styles.btnAmber, onClick: () => setPeriod(getMonthRange(-2)), children: t("timeDashboard.filters.twoMonthsAgo") })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, alignItems: "flex-end" }, children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { style: { fontSize: 11, fontWeight: 600, display: "block", marginBottom: 4, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.filters.from") }),
-          /* @__PURE__ */ jsx("input", { type: "date", value: from, onChange: (e) => setFrom(e.target.value), style: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" } })
+      /* @__PURE__ */ jsxs("div", { className: styles.filterRow, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("timeDashboard.filters.from") }),
+          /* @__PURE__ */ jsx("input", { type: "date", value: from, onChange: (e) => setFrom(e.target.value), className: styles.input })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { style: { fontSize: 11, fontWeight: 600, display: "block", marginBottom: 4, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.filters.to") }),
-          /* @__PURE__ */ jsx("input", { type: "date", value: to, onChange: (e) => setTo(e.target.value), style: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" } })
+        /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("timeDashboard.filters.to") }),
+          /* @__PURE__ */ jsx("input", { type: "date", value: to, onChange: (e) => setTo(e.target.value), className: styles.input })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { style: { fontSize: 11, fontWeight: 600, display: "block", marginBottom: 4, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.filters.groupBy") }),
-          /* @__PURE__ */ jsxs("select", { value: groupBy, onChange: (e) => setGroupBy(e.target.value), style: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("timeDashboard.filters.groupBy") }),
+          /* @__PURE__ */ jsxs("select", { value: groupBy, onChange: (e) => setGroupBy(e.target.value), className: styles.select, children: [
             /* @__PURE__ */ jsx("option", { value: "day", children: t("timeDashboard.filters.day") }),
             /* @__PURE__ */ jsx("option", { value: "week", children: t("timeDashboard.filters.week") }),
             /* @__PURE__ */ jsx("option", { value: "project", children: t("timeDashboard.filters.project") })
@@ -123,37 +125,45 @@ const TimeDashboardClient = () => {
         ] })
       ] })
     ] }),
-    loading ? /* @__PURE__ */ jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { style: S.kpis, children: [
-        /* @__PURE__ */ jsxs("div", { style: S.kpiCard, children: [
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.kpis.totalTime") }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 24, fontWeight: 700, color: "#2563eb" }, children: formatDuration(totalMinutes) })
+    loading ? /* @__PURE__ */ jsx("div", { className: styles.loading, children: /* @__PURE__ */ jsx(SkeletonDashboard, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.kpis, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.kpiCardPrimary, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.kpiLabel, children: t("timeDashboard.kpis.totalTime") }),
+          /* @__PURE__ */ jsx("div", { className: styles.kpiPrimary, children: formatDuration(totalMinutes) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: S.kpiCard, children: [
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.kpis.entries") }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 24, fontWeight: 700, color: "#d97706" }, children: entries.length })
+        /* @__PURE__ */ jsxs("div", { className: styles.kpiCardAmber, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.kpiLabel, children: t("timeDashboard.kpis.entries") }),
+          /* @__PURE__ */ jsx("div", { className: styles.kpiAmber, children: totalEntries })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: S.kpiCard, children: [
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("timeDashboard.kpis.dailyAverage") }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 24, fontWeight: 700, color: "#ea580c" }, children: dailyChart.length > 0 ? formatDuration(Math.round(totalMinutes / dailyChart.length)) : "-" })
+        /* @__PURE__ */ jsxs("div", { className: styles.kpiCardOrange, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.kpiLabel, children: t("timeDashboard.kpis.dailyAverage") }),
+          /* @__PURE__ */ jsx("div", { className: styles.kpiOrange, children: dailyChart.length > 0 ? formatDuration(Math.round(totalMinutes / dailyChart.length)) : "-" })
         ] })
       ] }),
-      dailyChart.length > 0 && /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)", marginBottom: 20 }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 8 }, children: t("timeDashboard.chart.title") }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 3, height: 80 }, children: dailyChart.map((d) => /* @__PURE__ */ jsx("div", { style: { flex: 1, background: "#3b82f6", borderRadius: "3px 3px 0 0", height: `${Math.max(d.minutes / maxDailyMinutes * 100, 4)}%` }, title: `${d.day}: ${formatDuration(d.minutes)}` }, d.day)) })
+      dailyChart.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles.chartWrap, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.chartHeader, children: t("timeDashboard.chart.title") }),
+        /* @__PURE__ */ jsx("div", { className: styles.chartBars, children: dailyChart.map((d) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.chartBar,
+            style: { height: `${Math.max(d.minutes / maxDailyMinutes * 100, 4)}%` },
+            title: `${d.day}: ${formatDuration(d.minutes)}`
+          },
+          d.day
+        )) })
       ] }),
-      grouped.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("timeDashboard.empty") }) : grouped.map((group) => /* @__PURE__ */ jsxs("div", { style: S.groupCard, children: [
-        /* @__PURE__ */ jsxs("div", { style: S.groupHeader, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: 700 }, children: group.label }),
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, color: "#2563eb" }, children: formatDuration(group.totalMinutes) })
+      grouped.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.empty, children: t("timeDashboard.empty") }) : grouped.map((group) => /* @__PURE__ */ jsxs("div", { className: styles.groupCard, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.groupHeader, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.groupLabel, children: group.label }),
+          /* @__PURE__ */ jsx("span", { className: styles.groupTotal, children: formatDuration(group.totalMinutes) })
         ] }),
-        /* @__PURE__ */ jsx("table", { style: S.table, children: /* @__PURE__ */ jsx("tbody", { children: group.entries.map((entry) => {
+        /* @__PURE__ */ jsx("table", { className: styles.table, children: /* @__PURE__ */ jsx("tbody", { children: group.entries.map((entry) => {
           const ticket = typeof entry.ticket === "object" ? entry.ticket : null;
-          return /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("td", { style: S.td, children: ticket ? /* @__PURE__ */ jsx("a", { href: `/admin/collections/tickets/${ticket.id}`, style: { color: "#2563eb", textDecoration: "none", fontWeight: 600 }, children: ticket.ticketNumber || `#${ticket.id}` }) : "-" }),
-            /* @__PURE__ */ jsx("td", { style: S.td, children: ticket?.subject || "" }),
-            /* @__PURE__ */ jsx("td", { style: { ...S.td, color: "var(--theme-elevation-500)" }, children: entry.description || "-" }),
-            /* @__PURE__ */ jsx("td", { style: { ...S.td, textAlign: "right", fontWeight: 600 }, children: formatDuration(entry.duration) })
+          return /* @__PURE__ */ jsxs("tr", { className: styles.entryRow, children: [
+            /* @__PURE__ */ jsx("td", { className: styles.tdTicket, children: ticket ? /* @__PURE__ */ jsx("a", { href: `/admin/collections/tickets/${ticket.id}`, className: styles.ticketLink, children: ticket.ticketNumber || `#${ticket.id}` }) : "-" }),
+            /* @__PURE__ */ jsx("td", { className: styles.tdSubject, children: ticket?.subject || "" }),
+            /* @__PURE__ */ jsx("td", { className: styles.tdDescription, children: entry.description || "-" }),
+            /* @__PURE__ */ jsx("td", { className: styles.tdDuration, children: formatDuration(entry.duration) })
           ] }, entry.id);
         }) }) })
       ] }, group.label))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consilioweb/payload-support",
-  "version": "0.8.2",
+  "version": "0.9.5",
   "description": "Payload CMS plugin — professional support & ticketing system with AI, SLA, time tracking, live chat, and more",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -52,7 +52,7 @@
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "pnpm build"
+    "prepublishOnly": "npm run build"
   },
   "keywords": [
     "payload",
@@ -96,7 +96,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "payload": "^3.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lucide-react": ">=0.300.0"
   },
   "peerDependenciesMeta": {
     "@payloadcms/ui": {
@@ -108,6 +109,9 @@
     "@payloadcms/next": {
       "optional": true
     },
+    "lucide-react": {
+      "optional": true
+    },
     "next": {
       "optional": true
     },