Initial commit: TKB Timeshift Schedule Management Application

- Next.js 15.2.4 with React 19 and TypeScript
- Monthly schedule generator with Excel-like formatting
- Complete employee list from example.xlsx (18 employees)
- Excel-style column naming (A, B, C, ..., Z, AA, AB, ...)
- Counter-clockwise text rotation for data values
- Weekend highlighting and shift color coding
- Team selection for TKB, METRO, D8
- 7 days from previous month + full current month date range
- jspreadsheet integration for Excel-like interface

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/team-sidebar.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import type * as React from "react"
+import { TrainFrontTunnel, Calendar, Users } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/components/ui/sidebar"
+
+// Sample team data
+const teams = [
+  {
+    id: "tkb",
+    name: "TKB",
+    color: "bg-blue-500",
+  },
+  {
+    id: "metro",
+    name: "METRO",
+    color: "bg-green-500",
+  },
+  {
+    id: "d8",
+    name: "D8",
+    color: "bg-orange-500",
+  },
+]
+
+interface TeamSidebarProps extends React.ComponentProps<typeof Sidebar> {
+  selectedTeam: string
+  onTeamSelect: (teamId: string) => void
+}
+
+export function TeamSidebar({ selectedTeam, onTeamSelect, ...props }: TeamSidebarProps) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <div className="flex items-center gap-2">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <TrainFrontTunnel className="size-4" />
+                </div>
+                <div className="flex flex-col gap-0.5 leading-none">
+                  <span className="font-semibold">TimeShift 161</span>
+                  <span className="text-xs">Team Scheduling</span>
+                </div>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Teams</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {teams.map((team) => (
+                <SidebarMenuItem key={team.id}>
+                  <SidebarMenuButton
+                    onClick={() => onTeamSelect(team.id)}
+                    isActive={selectedTeam === team.id}
+                    className="w-full"
+                  >
+                    <div className="flex items-center gap-3 w-full">
+                      <div className={`w-3 h-3 rounded-full ${team.color}`} />
+                      <span className="font-medium">{team.name}</span>
+                    </div>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Quick Actions</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <Calendar className="size-4" />
+                  <span>View All Schedules</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <Users className="size-4" />
+                  <span>Manage Teams</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}