@burdenoff/microfe-crewfoundry 2026.704.5 → 2026.704.7

package/dist/crewfoundry/pages/HrTimeTrackingPagePage.js

@@ -1,14 +1,19 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
-import { FormModal as n, useFormModal as r } from "../components/forms/FormModal.js";
-import { getNumber as i, getText as a, newClientId as o } from "../components/forms/formValues.js";
-import { useMemo as s } from "react";
-import { CheckCircle as c, Clock as l, LogIn as u, LogOut as d, Timer as f } from "lucide-react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { Badge as h, Button as g, Card as _, CardContent as v, CardDescription as y, CardHeader as b, CardTitle as x, GlassCard as S, GradientText as C, PagePurpose as w, Pagination as T } from "@burdenoff/fe-libs/ui";
-import { usePagination as E } from "@burdenoff/fe-libs/shared/hooks";
+import { DonutChart as n } from "../components/viz/DonutChart.js";
+import { StatCard as r } from "../components/viz/StatCard.js";
+import { AvatarStack as i } from "../components/viz/AvatarStack.js";
+import "../components/viz/index.js";
+import { billableSplit as ee } from "../lib/analytics.js";
+import { FormModal as a, useFormModal as o } from "../components/forms/FormModal.js";
+import { getBool as te, getNumber as s, getText as c, newClientId as ne } from "../components/forms/formValues.js";
+import { useMemo as l, useState as u } from "react";
+import { CheckCircle as re, ChevronLeft as ie, ChevronRight as d, Clock as f, LogIn as ae, LogOut as p, Timer as m } from "lucide-react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Badge as _, Button as v, Card as y, CardContent as b, CardDescription as x, CardHeader as S, CardTitle as C, GradientText as oe, PagePurpose as se, Pagination as w } from "@burdenoff/fe-libs/ui";
+import { usePagination as ce } from "@burdenoff/fe-libs/shared/hooks";
 //#region src/crewfoundry/pages/HrTimeTrackingPagePage.tsx
-var D = [
+var T = [
 	{
 		label: "Pending",
 		value: "pending"
@@ -21,7 +26,7 @@ var D = [
 		label: "Rejected",
 		value: "rejected"
 	}
-], O = [
+], le = [
 	{
 		name: "clockOut",
 		label: "Clock-out time",
@@ -44,14 +49,41 @@ var D = [
 		name: "status",
 		label: "Status",
 		type: "select",
-		options: D
+		options: T
 	}
-];
+], E = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+], ue = [
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat",
+	"Sun"
+], de = (e) => `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`, D = (e) => {
+	let t = new Date(e.getFullYear(), e.getMonth(), e.getDate()), n = (t.getDay() + 6) % 7;
+	return t.setDate(t.getDate() - n), t;
+}, O = (e) => {
+	let [t, n, r] = e.slice(0, 10).split("-").map(Number);
+	return new Date(t, (n || 1) - 1, r || 1);
+};
 function k() {
-	let { timeEntries: k, employees: A, addTimeEntry: j, updateTimeEntry: M } = e(), N = r(), P = r(), F = s(() => A.map((e) => ({
+	let { timeEntries: k, employees: A, addTimeEntry: fe, updateTimeEntry: pe } = e(), j = o(), M = o(), [N, me] = u(null), P = l(() => new Map(A.map((e) => [e.id, e])), [A]), F = l(() => A.map((e) => ({
 		label: `${e.firstName} ${e.lastName}`,
 		value: e.id
-	})), [A]), I = s(() => [
+	})), [A]), I = l(() => [
 		{
 			name: "employeeId",
 			label: "Employee",
@@ -99,188 +131,333 @@ function k() {
 			name: "status",
 			label: "Status",
 			type: "select",
-			options: D
+			options: T
+		},
+		{
+			name: "billable",
+			label: "Billable to client",
+			type: "switch",
+			colSpan: 2
 		}
-	], [F]), L = k.reduce((e, t) => e + t.totalHours, 0), R = k.reduce((e, t) => e + t.overtime, 0), z = k.filter((e) => e.status === "approved").length, B = k.filter((e) => e.status === "pending").length, V = k.reduce((e, t) => (e[t.project] = (e[t.project] || 0) + t.totalHours, e), {}), H = Math.max(...Object.values(V), 1), U = s(() => [...k].sort((e, t) => t.date.localeCompare(e.date)), [k]), { page: W, pageSize: G, offset: K, setPage: q } = E({ initialPageSize: 8 }), J = U.slice(K, K + G), Y = async (e) => {
-		let t = a(e, "employeeId"), n = A.find((e) => e.id === t);
-		await j({
-			id: o(),
+	], [F]), [L, R] = u(0), z = l(() => {
+		let e = k.map((e) => e.date.slice(0, 10)).filter(Boolean).sort().slice(-1)[0];
+		return D(e ? O(e) : /* @__PURE__ */ new Date());
+	}, [k]), B = l(() => {
+		let e = new Date(z);
+		return e.setDate(e.getDate() + L * 7), e;
+	}, [z, L]), V = l(() => Array.from({ length: 7 }, (e, t) => {
+		let n = new Date(B);
+		return n.setDate(B.getDate() + t), {
+			iso: de(n),
+			label: `${ue[t]} ${n.getDate()}`
+		};
+	}), [B]), H = l(() => new Set(V.map((e) => e.iso)), [V]), U = V[6], W = `${E[B.getMonth()]} ${B.getDate()} – ${E[O(U.iso).getMonth()]} ${O(U.iso).getDate()}`, G = l(() => k.filter((e) => H.has(e.date.slice(0, 10))), [k, H]), he = G.reduce((e, t) => e + t.totalHours, 0), ge = G.reduce((e, t) => e + t.overtime, 0), _e = G.filter((e) => e.status === "approved").length, ve = G.filter((e) => e.status === "pending").length, K = l(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of G) {
+			let n = e.get(t.employeeId);
+			n || (n = {
+				name: t.employeeName || P.get(t.employeeId)?.firstName || "Unknown",
+				avatar: P.get(t.employeeId)?.avatar,
+				perDay: /* @__PURE__ */ new Map(),
+				total: 0,
+				statuses: /* @__PURE__ */ new Set()
+			}, e.set(t.employeeId, n));
+			let r = t.date.slice(0, 10);
+			n.perDay.set(r, (n.perDay.get(r) ?? 0) + t.totalHours), n.total += t.totalHours, n.statuses.add(t.status);
+		}
+		return [...e.entries()].map(([e, t]) => ({
+			employeeId: e,
+			name: t.name,
+			avatar: t.avatar,
+			perDay: t.perDay,
+			total: t.total,
+			status: t.statuses.has("pending") ? "pending" : t.statuses.has("rejected") ? "rejected" : "approved"
+		})).sort((e, t) => t.total - e.total);
+	}, [G, P]), q = l(() => {
+		let e = ee(G);
+		if (!e) return null;
+		let t = e.reduce((e, t) => e + t.value, 0), n = e.find((e) => e.label === "Billable")?.value ?? 0;
+		return {
+			segments: e,
+			centerValue: `${t > 0 ? Math.round(n / t * 100) : 0}%`,
+			caption: "Billable"
+		};
+	}, [G]), J = G.reduce((e, t) => (e[t.project] = (e[t.project] || 0) + t.totalHours, e), {}), ye = Math.max(...Object.values(J), 1), Y = l(() => [...k].sort((e, t) => t.date.localeCompare(e.date)), [k]), { page: be, pageSize: X, offset: Z, setPage: Q } = ce({ initialPageSize: 8 }), xe = Y.slice(Z, Z + X), $ = (e) => {
+		me(e ?? null), j.openModal();
+	}, Se = async (e) => {
+		let t = c(e, "employeeId"), n = A.find((e) => e.id === t);
+		await fe({
+			id: ne(),
 			employeeId: t,
 			employeeName: n ? `${n.firstName} ${n.lastName}` : "",
-			date: a(e, "date"),
-			clockIn: a(e, "clockIn"),
-			clockOut: a(e, "clockOut"),
-			totalHours: i(e, "totalHours"),
-			overtime: i(e, "overtime"),
-			project: a(e, "project"),
-			status: a(e, "status") || "pending"
+			date: c(e, "date"),
+			clockIn: c(e, "clockIn"),
+			clockOut: c(e, "clockOut"),
+			totalHours: s(e, "totalHours"),
+			overtime: s(e, "overtime"),
+			project: c(e, "project"),
+			status: c(e, "status") || "pending",
+			billable: te(e, "billable")
 		});
-	}, X = async (e) => {
-		let t = P.context;
-		t && await M(t.id, {
-			clockOut: a(e, "clockOut"),
-			totalHours: i(e, "totalHours"),
-			overtime: i(e, "overtime"),
-			status: a(e, "status") || t.status
+	}, Ce = async (e) => {
+		let t = M.context;
+		t && await pe(t.id, {
+			clockOut: c(e, "clockOut"),
+			totalHours: s(e, "totalHours"),
+			overtime: s(e, "overtime"),
+			status: c(e, "status") || t.status
 		});
-	}, Z = P.context ? {
-		clockOut: P.context.clockOut,
-		totalHours: P.context.totalHours,
-		overtime: P.context.overtime,
-		status: P.context.status
+	}, we = {
+		billable: !0,
+		...N ? {
+			employeeId: N.employeeId,
+			date: N.date
+		} : {}
+	}, Te = M.context ? {
+		clockOut: M.context.clockOut,
+		totalHours: M.context.totalHours,
+		overtime: M.context.overtime,
+		status: M.context.status
 	} : void 0;
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ g("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ m("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ m("div", { children: [
-					/* @__PURE__ */ p("h1", {
+			/* @__PURE__ */ g("div", {
+				className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
+				children: [/* @__PURE__ */ g("div", { children: [
+					/* @__PURE__ */ h("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ p(C, { children: "Time Tracking" })
+						children: /* @__PURE__ */ h(oe, { children: "Time Tracking" })
 					}),
-					/* @__PURE__ */ p("p", {
+					/* @__PURE__ */ h("p", {
 						className: "text-sm text-text-secondary",
 						children: "Monitor employee work hours and overtime"
 					}),
-					/* @__PURE__ */ p(w, {
+					/* @__PURE__ */ h(se, {
 						className: "mt-1",
 						children: "Track hours and attendance across your team — use it to monitor logged time, overtime, and timesheet approvals."
 					})
-				] }), /* @__PURE__ */ m(g, {
-					size: "sm",
-					onClick: () => N.openModal(),
-					children: [/* @__PURE__ */ p(f, { className: "h-4 w-4 mr-1" }), "Add Entry"]
+				] }), /* @__PURE__ */ g("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-1 rounded-lg border border-border-subtle p-1",
+						children: [
+							/* @__PURE__ */ h(v, {
+								variant: "ghost",
+								size: "sm",
+								className: "h-8 w-8 p-0",
+								"aria-label": "Previous week",
+								onClick: () => R((e) => e - 1),
+								children: /* @__PURE__ */ h(ie, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ h("span", {
+								className: "min-w-[8.5rem] text-center text-sm font-medium tabular-nums",
+								children: W
+							}),
+							/* @__PURE__ */ h(v, {
+								variant: "ghost",
+								size: "sm",
+								className: "h-8 w-8 p-0",
+								"aria-label": "Next week",
+								onClick: () => R((e) => e + 1),
+								children: /* @__PURE__ */ h(d, { className: "h-4 w-4" })
+							})
+						]
+					}), /* @__PURE__ */ g(v, {
+						size: "sm",
+						onClick: () => $(),
+						children: [/* @__PURE__ */ h(m, { className: "h-4 w-4 mr-1" }), "Log Time"]
+					})]
 				})]
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ g("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ m(S, {
-						treatment: "glass",
-						glow: !0,
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ m(b, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ p(x, {
-								className: "text-sm font-medium",
-								children: "Total Hours"
-							}), /* @__PURE__ */ p(l, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ m(v, { children: [/* @__PURE__ */ p("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: L.toFixed(1)
-						}), /* @__PURE__ */ p("p", {
-							className: "text-xs text-text-secondary",
-							children: "All logged hours"
-						})] })]
+					/* @__PURE__ */ h(r, {
+						label: "Total Hours",
+						value: he.toFixed(1),
+						icon: /* @__PURE__ */ h(f, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ m(S, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ m(b, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ p(x, {
-								className: "text-sm font-medium",
-								children: "Overtime"
-							}), /* @__PURE__ */ p(f, { className: "h-4 w-4 text-status-warning-text" })]
-						}), /* @__PURE__ */ m(v, { children: [/* @__PURE__ */ m("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: [R.toFixed(1), "h"]
-						}), /* @__PURE__ */ p("p", {
-							className: "text-xs text-text-secondary",
-							children: "Extra hours logged"
-						})] })]
+					/* @__PURE__ */ h(r, {
+						label: "Overtime",
+						value: `${ge.toFixed(1)}h`,
+						icon: /* @__PURE__ */ h(m, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ m(S, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ m(b, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ p(x, {
-								className: "text-sm font-medium",
-								children: "Approved"
-							}), /* @__PURE__ */ p(c, { className: "h-4 w-4 text-status-success-text" })]
-						}), /* @__PURE__ */ m(v, { children: [/* @__PURE__ */ p("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: z
-						}), /* @__PURE__ */ p("p", {
-							className: "text-xs text-text-secondary",
-							children: "time entries"
-						})] })]
+					/* @__PURE__ */ h(r, {
+						label: "Approved",
+						value: _e,
+						icon: /* @__PURE__ */ h(re, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ m(S, {
-						treatment: "metric",
-						className: "border-border-seam",
-						children: [/* @__PURE__ */ m(b, {
-							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ p(x, {
-								className: "text-sm font-medium",
-								children: "Pending"
-							}), /* @__PURE__ */ p(l, { className: "h-4 w-4 text-status-warning-text" })]
-						}), /* @__PURE__ */ m(v, { children: [/* @__PURE__ */ p("div", {
-							className: "text-2xl font-bold tabular-nums",
-							children: B
-						}), /* @__PURE__ */ p("p", {
-							className: "text-xs text-text-secondary",
-							children: "awaiting approval"
-						})] })]
+					/* @__PURE__ */ h(r, {
+						label: "Pending",
+						value: ve,
+						icon: /* @__PURE__ */ h(f, { className: "h-4 w-4" })
 					})
 				]
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ g("div", {
+				className: "grid gap-4 xl:grid-cols-[minmax(0,2.2fr)_minmax(0,1fr)]",
+				children: [/* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, { children: "Timesheet" }), /* @__PURE__ */ g(x, { children: [W, " · tap a day cell to log time for that person"] })] }), /* @__PURE__ */ g(b, { children: [/* @__PURE__ */ h("div", {
+					className: "overflow-x-auto",
+					children: /* @__PURE__ */ g("table", {
+						className: "w-full min-w-[46rem] border-collapse text-sm",
+						children: [/* @__PURE__ */ h("thead", { children: /* @__PURE__ */ g("tr", {
+							className: "border-b border-border-subtle text-xs text-text-secondary",
+							children: [
+								/* @__PURE__ */ h("th", {
+									className: "px-2 py-2 text-left font-medium",
+									children: "Employee"
+								}),
+								V.map((e) => /* @__PURE__ */ h("th", {
+									className: "px-1 py-2 text-center font-medium",
+									children: e.label
+								}, e.iso)),
+								/* @__PURE__ */ h("th", {
+									className: "px-2 py-2 text-right font-medium",
+									children: "Total"
+								}),
+								/* @__PURE__ */ h("th", {
+									className: "px-2 py-2 text-center font-medium",
+									children: "Status"
+								})
+							]
+						}) }), /* @__PURE__ */ h("tbody", { children: K.map((e) => /* @__PURE__ */ g("tr", {
+							className: "border-b border-border-subtle/60",
+							children: [
+								/* @__PURE__ */ h("td", {
+									className: "px-2 py-2",
+									children: /* @__PURE__ */ g("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ h(i, {
+											people: [{
+												name: e.name,
+												avatarUrl: e.avatar
+											}],
+											size: 28
+										}), /* @__PURE__ */ h("span", {
+											className: "truncate font-medium",
+											children: e.name
+										})]
+									})
+								}),
+								V.map((t) => {
+									let n = e.perDay.get(t.iso) ?? 0;
+									return /* @__PURE__ */ h("td", {
+										className: "px-1 py-2 text-center",
+										children: /* @__PURE__ */ h("button", {
+											type: "button",
+											onClick: () => $({
+												employeeId: e.employeeId,
+												date: t.iso
+											}),
+											className: `w-full rounded-md border px-1 py-1.5 text-xs tabular-nums transition-colors ${n > 0 ? "border-border-subtle text-text-primary hover:bg-bg-sunken" : "border-transparent text-text-muted hover:border-border-subtle hover:bg-bg-sunken"}`,
+											"aria-label": `Log time for ${e.name} on ${t.label}`,
+											children: n.toFixed(1)
+										})
+									}, t.iso);
+								}),
+								/* @__PURE__ */ h("td", {
+									className: "px-2 py-2 text-right font-semibold tabular-nums",
+									children: e.total.toFixed(1)
+								}),
+								/* @__PURE__ */ h("td", {
+									className: "px-2 py-2 text-center",
+									children: /* @__PURE__ */ h(_, {
+										variant: e.status === "approved" ? "default" : e.status === "pending" ? "secondary" : "destructive",
+										className: "text-[10px]",
+										children: t(e.status)
+									})
+								})
+							]
+						}, e.employeeId)) })]
+					})
+				}), K.length === 0 && /* @__PURE__ */ g("p", {
+					className: "py-8 text-center text-sm text-text-secondary",
+					children: [
+						"No time logged for ",
+						W,
+						"."
+					]
+				})] })] }), /* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, { children: "Billable split" }), /* @__PURE__ */ g(x, { children: ["Billable vs non-billable hours for ", W] })] }), /* @__PURE__ */ h(b, {
+					className: "flex flex-col items-center",
+					children: q ? /* @__PURE__ */ h(n, {
+						segments: q.segments,
+						centerLabel: q.centerValue,
+						centerCaption: q.caption,
+						valueFormatter: (e) => `${e.toFixed(1)}h`,
+						title: "Billable vs non-billable hours"
+					}) : /* @__PURE__ */ h("p", {
+						className: "py-10 text-center text-sm text-text-secondary",
+						children: "No hours logged this week."
+					})
+				})] })]
+			}),
+			/* @__PURE__ */ g("div", {
 				className: "grid gap-4 md:grid-cols-2",
-				children: [/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ m(b, { children: [/* @__PURE__ */ p(x, { children: "Hours by Project" }), /* @__PURE__ */ p(y, { children: "Time allocation across active projects" })] }), /* @__PURE__ */ p(v, {
+				children: [/* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, { children: "Hours by Project" }), /* @__PURE__ */ g(x, { children: ["Time allocation for ", W] })] }), /* @__PURE__ */ g(b, {
 					className: "space-y-3",
-					children: Object.entries(V).sort(([, e], [, t]) => t - e).map(([e, t]) => /* @__PURE__ */ m("div", {
+					children: [Object.entries(J).sort(([, e], [, t]) => t - e).map(([e, t]) => /* @__PURE__ */ g("div", {
 						className: "flex items-center gap-3",
 						children: [
-							/* @__PURE__ */ p("span", {
-								className: "w-48 text-sm truncate",
+							/* @__PURE__ */ h("span", {
+								className: "w-40 truncate text-sm",
 								children: e
 							}),
-							/* @__PURE__ */ p("div", {
-								className: "flex-1 h-4 bg-bg-sunken rounded overflow-hidden",
-								children: /* @__PURE__ */ p("div", {
-									className: "h-4 bg-action-primary-bg rounded",
-									style: { width: `${Math.round(t / H * 100)}%` }
+							/* @__PURE__ */ h("div", {
+								className: "h-4 flex-1 overflow-hidden rounded bg-bg-sunken",
+								children: /* @__PURE__ */ h("div", {
+									className: "h-4 rounded bg-action-primary-bg",
+									style: { width: `${Math.round(t / ye * 100)}%` }
 								})
 							}),
-							/* @__PURE__ */ m("span", {
-								className: "text-sm font-medium w-14 text-right",
+							/* @__PURE__ */ g("span", {
+								className: "w-14 text-right text-sm font-medium tabular-nums",
 								children: [t.toFixed(1), "h"]
 							})
 						]
-					}, e))
-				})] }), /* @__PURE__ */ m(_, { children: [/* @__PURE__ */ m(b, { children: [/* @__PURE__ */ p(x, { children: "Recent Activity" }), /* @__PURE__ */ p(y, { children: "Latest employee clock-in/out entries" })] }), /* @__PURE__ */ m(v, {
+					}, e)), Object.keys(J).length === 0 && /* @__PURE__ */ h("p", {
+						className: "py-6 text-center text-sm text-text-secondary",
+						children: "No project hours this week."
+					})]
+				})] }), /* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, { children: "Recent Activity" }), /* @__PURE__ */ h(x, { children: "Latest employee clock-in/out entries" })] }), /* @__PURE__ */ g(b, {
 					className: "space-y-3",
 					children: [
-						J.map((e) => /* @__PURE__ */ m("div", {
+						xe.map((e) => /* @__PURE__ */ g("div", {
 							className: "flex items-center justify-between rounded border p-3",
-							children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
-								className: "text-sm font-medium",
-								children: e.employeeName
-							}), /* @__PURE__ */ p("p", {
-								className: "text-xs text-text-secondary",
-								children: e.project
-							})] }), /* @__PURE__ */ m("div", {
+							children: [/* @__PURE__ */ g("div", {
+								className: "flex items-center gap-2.5",
+								children: [/* @__PURE__ */ h(i, {
+									people: [{
+										name: e.employeeName,
+										avatarUrl: P.get(e.employeeId)?.avatar
+									}],
+									size: 30
+								}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
+									className: "text-sm font-medium",
+									children: e.employeeName
+								}), /* @__PURE__ */ h("p", {
+									className: "text-xs text-text-secondary",
+									children: e.project
+								})] })]
+							}), /* @__PURE__ */ g("div", {
 								className: "flex items-center gap-3",
 								children: [
-									/* @__PURE__ */ m("div", {
+									/* @__PURE__ */ g("div", {
 										className: "text-right text-xs",
-										children: [/* @__PURE__ */ m("div", {
+										children: [/* @__PURE__ */ g("div", {
 											className: "flex items-center gap-1",
-											children: [/* @__PURE__ */ p(u, { className: "h-3 w-3 text-status-success-text" }), e.clockIn]
-										}), /* @__PURE__ */ m("div", {
+											children: [/* @__PURE__ */ h(ae, { className: "h-3 w-3 text-status-success-text" }), e.clockIn]
+										}), /* @__PURE__ */ g("div", {
 											className: "flex items-center gap-1",
-											children: [/* @__PURE__ */ p(d, { className: "h-3 w-3 text-status-error-text" }), e.clockOut]
+											children: [/* @__PURE__ */ h(p, { className: "h-3 w-3 text-status-error-text" }), e.clockOut]
 										})]
 									}),
-									/* @__PURE__ */ m("div", {
+									/* @__PURE__ */ g("div", {
 										className: "text-right",
-										children: [/* @__PURE__ */ m("p", {
+										children: [/* @__PURE__ */ g("p", {
 											className: "text-sm font-medium",
 											children: [e.totalHours, "h"]
-										}), e.overtime > 0 && /* @__PURE__ */ m("p", {
+										}), e.overtime > 0 && /* @__PURE__ */ g("p", {
 											className: "text-xs text-status-warning-text",
 											children: [
 												"+",
@@ -289,53 +466,54 @@ function k() {
 											]
 										})]
 									}),
-									/* @__PURE__ */ p(h, {
+									/* @__PURE__ */ h(_, {
 										variant: e.status === "approved" ? "default" : "secondary",
 										className: "text-[10px]",
 										children: t(e.status)
 									}),
-									/* @__PURE__ */ p(g, {
+									/* @__PURE__ */ h(v, {
 										variant: "ghost",
 										size: "sm",
 										className: "h-8 w-8 p-0",
 										"aria-label": `Clock out ${e.employeeName}`,
-										onClick: () => P.openModal(e),
-										children: /* @__PURE__ */ p(d, { className: "h-4 w-4" })
+										onClick: () => M.openModal(e),
+										children: /* @__PURE__ */ h(p, { className: "h-4 w-4" })
 									})
 								]
 							})]
 						}, e.id)),
-						U.length === 0 && /* @__PURE__ */ p("p", {
+						Y.length === 0 && /* @__PURE__ */ h("p", {
 							className: "py-6 text-center text-sm text-text-secondary",
 							children: "No time entries logged yet."
 						}),
-						U.length > G && /* @__PURE__ */ p(T, {
-							page: W,
-							pageSize: G,
-							totalItems: U.length,
-							onPageChange: q
+						Y.length > X && /* @__PURE__ */ h(w, {
+							page: be,
+							pageSize: X,
+							totalItems: Y.length,
+							onPageChange: Q
 						})
 					]
 				})] })]
 			}),
-			/* @__PURE__ */ p(n, {
-				open: N.open,
-				onOpenChange: N.onOpenChange,
-				title: "Add time entry",
+			/* @__PURE__ */ h(a, {
+				open: j.open,
+				onOpenChange: j.onOpenChange,
+				title: "Log time",
 				description: "Log a work session for a team member.",
 				fields: I,
+				initialValues: we,
 				submitLabel: "Add entry",
-				onSubmit: Y
+				onSubmit: Se
 			}),
-			/* @__PURE__ */ p(n, {
-				open: P.open,
-				onOpenChange: P.onOpenChange,
+			/* @__PURE__ */ h(a, {
+				open: M.open,
+				onOpenChange: M.onOpenChange,
 				title: "Clock out",
-				description: P.context ? `Record clock-out for ${P.context.employeeName}.` : void 0,
-				fields: O,
-				initialValues: Z,
+				description: M.context ? `Record clock-out for ${M.context.employeeName}.` : void 0,
+				fields: le,
+				initialValues: Te,
 				submitLabel: "Save",
-				onSubmit: X
+				onSubmit: Ce
 			})
 		]
 	});