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>

v0_extracted/components/schedule-templates.tsx

@@ -0,0 +1,130 @@
+"use client"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { FileIcon as FileTemplate, Plus, Copy, Edit, Trash2 } from "lucide-react"
+
+interface ScheduleTemplatesProps {
+  teamId: string
+  teamName: string
+}
+
+// Sample template data
+const getTemplates = (teamId: string) => [
+  {
+    id: "1",
+    name: "Standard Week",
+    description: "Regular 5-day work week with weekend coverage",
+    shifts: ["08:00-16:00", "16:00-00:00", "00:00-08:00"],
+    employees: 8,
+    coverage: "24/7",
+  },
+  {
+    id: "2",
+    name: "Holiday Schedule",
+    description: "Reduced staffing for holidays and special events",
+    shifts: ["08:00-20:00", "20:00-08:00"],
+    employees: 4,
+    coverage: "24/7",
+  },
+  {
+    id: "3",
+    name: "Maintenance Week",
+    description: "Extended maintenance periods with adjusted shifts",
+    shifts: ["06:00-14:00", "14:00-22:00", "22:00-06:00"],
+    employees: 6,
+    coverage: "24/7",
+  },
+  {
+    id: "4",
+    name: "Emergency Response",
+    description: "Emergency staffing template for critical situations",
+    shifts: ["12-hour rotating"],
+    employees: 12,
+    coverage: "24/7",
+  },
+]
+
+export function ScheduleTemplates({ teamId, teamName }: ScheduleTemplatesProps) {
+  const templates = getTemplates(teamId)
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <FileTemplate className="size-5" />
+              {teamName} - Schedule Templates
+            </CardTitle>
+            <CardDescription>Pre-configured schedule templates for quick deployment</CardDescription>
+          </div>
+          <Button>
+            <Plus className="size-4 mr-2" />
+            Create Template
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4 md:grid-cols-2">
+          {templates.map((template) => (
+            <Card key={template.id} className="border-2 hover:border-primary/50 transition-colors">
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <CardTitle className="text-lg">{template.name}</CardTitle>
+                    <CardDescription className="mt-1">{template.description}</CardDescription>
+                  </div>
+                  <Badge variant="outline">{template.coverage}</Badge>
+                </div>
+              </CardHeader>
+              <CardContent className="pt-0">
+                <div className="space-y-3">
+                  <div>
+                    <p className="text-sm font-medium text-gray-700 mb-2">Shift Patterns:</p>
+                    <div className="flex flex-wrap gap-1">
+                      {template.shifts.map((shift, index) => (
+                        <Badge key={index} variant="secondary" className="text-xs">
+                          {shift}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center justify-between text-sm text-gray-600">
+                    <span>{template.employees} employees</span>
+                  </div>
+
+                  <div className="flex items-center gap-2 pt-2">
+                    <Button size="sm" className="flex-1">
+                      <Copy className="size-4 mr-1" />
+                      Use Template
+                    </Button>
+                    <Button variant="outline" size="sm">
+                      <Edit className="size-4" />
+                    </Button>
+                    <Button variant="outline" size="sm">
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {templates.length === 0 && (
+          <div className="text-center py-8">
+            <FileTemplate className="size-12 mx-auto mb-4 text-gray-400" />
+            <h3 className="text-lg font-medium text-gray-900 mb-2">No templates found</h3>
+            <p className="text-gray-500 mb-4">Create your first schedule template to get started</p>
+            <Button>
+              <Plus className="size-4 mr-2" />
+              Create Template
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}