From 0599bdc33108dc61eb7deb56b24607e6926cfe62 Mon Sep 17 00:00:00 2001
From: Nora <nora_rocks@agentmail.to>
Date: Fri, 3 Jul 2026 18:17:33 -0600
Subject: [PATCH] =?UTF-8?q?feat(water-log):=20cycle=203=20=E2=80=94=20embe?=
 =?UTF-8?q?d=20Time=20Tracking=20tab=20in=20admin=20shell?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The water-log admin panel at /admin/water-log becomes a one-stop hub for
the customer: today's entries, the headgates, who can log them, AND how
many hours those workers put in.

- New TimeTrackingTab — thin wrapper that renders the existing
  TimeTrackingAdminPanel (which already owns its own Summary / Workers
  / Tasks / Logs / Settings sub-tabs).
- Shell.tsx now exposes Today | Headgates | Users | Time Tracking; the
  new branch just passes brandId through.
- TabValue union and TABS[] updated to "time-tracking".

This is the customer-facing surface the user asked for. Cycle 4 adds
the same tab to the mobile worker portal; Cycle 5 scaffolds the
Smartsheet sync (config-deferred).
---
 src/components/admin/water-log/Shell.tsx       | 17 ++++++++++++++---
 .../admin/water-log/tabs/TimeTrackingTab.tsx   | 18 ++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 src/components/admin/water-log/tabs/TimeTrackingTab.tsx

diff --git a/src/components/admin/water-log/Shell.tsx b/src/components/admin/water-log/Shell.tsx
index 3288f27..6e4b028 100644
--- a/src/components/admin/water-log/Shell.tsx
+++ b/src/components/admin/water-log/Shell.tsx
@@ -13,7 +13,7 @@
  * Each tab is a focused component under ./tabs that consumes the
  * state slice it needs.
  *
- * Adding a new tab (e.g. Time Tracking in Cycle 3) only requires:
+ * Adding a new tab only requires:
  *   1. Create the tab component under ./tabs
  *   2. Add a TabValue + tabs[] entry below
  *   3. Render it conditionally in the {tab === X && ...} block
@@ -42,6 +42,7 @@ import { ReportPreviewModal } from "./shared/ReportPreviewModal";
 import { TodayTab } from "./tabs/TodayTab";
 import { HeadgatesTab } from "./tabs/HeadgatesTab";
 import { UsersTab } from "./tabs/UsersTab";
+import { TimeTrackingTab } from "./tabs/TimeTrackingTab";
 
 // ── Props ────────────────────────────────────────────────────────────────────
 export type ShellProps = {
@@ -53,7 +54,7 @@ export type ShellProps = {
 };
 
 // ── Tab values ───────────────────────────────────────────────────────────────
-type TabValue = "today" | "headgates" | "users";
+type TabValue = "today" | "headgates" | "users" | "time-tracking";
 
 const TABS = [
   {
@@ -69,6 +70,14 @@ const TABS = [
     value: "users" as const,
     label: "Users",
   },
+  // Cycle 3 — embed the existing TimeTrackingAdminPanel (which has
+  // its own sub-tabs) so the water-log shell becomes a one-stop hub
+  // for the customer: today's entries, the headgates, who logs them,
+  // and how many hours they put in.
+  {
+    value: "time-tracking" as const,
+    label: "Time Tracking",
+  },
 ];
 
 // ── Main component ───────────────────────────────────────────────────────────
@@ -250,7 +259,9 @@ export default function Shell({
         />
       )}
 
-      {/* Future tab: Time Tracking (Cycle 3) */}
+      {tab === "time-tracking" && (
+        <TimeTrackingTab brandId={brandId} />
+      )}
 
       <ToastNotification toast={state.toast} />
 
diff --git a/src/components/admin/water-log/tabs/TimeTrackingTab.tsx b/src/components/admin/water-log/tabs/TimeTrackingTab.tsx
new file mode 100644
index 0000000..05cd3f0
--- /dev/null
+++ b/src/components/admin/water-log/tabs/TimeTrackingTab.tsx
@@ -0,0 +1,18 @@
+/**
+ * Time Tracking tab — embeds the existing TimeTrackingAdminPanel
+ * (which already has its own sub-tabs: Summary / Workers / Tasks /
+ * Logs / Settings) inside the Water Log shell.
+ *
+ * Cycle 3 — this is the customer "hub" surface the water log now
+ * offers: one place to see today's entries, the headgates, who can
+ * log them, AND how many hours those workers put in.
+ */
+import TimeTrackingAdminPanel from "@/components/admin/TimeTrackingAdminPanel";
+
+export type TimeTrackingTabProps = {
+  brandId: string;
+};
+
+export function TimeTrackingTab({ brandId }: TimeTrackingTabProps) {
+  return <TimeTrackingAdminPanel brandId={brandId} />;
+}