3216f74229
- 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>
59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
"use client"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { TimeshiftSpreadsheet } from "./timeshift-spreadsheet"
|
|
import { ScheduleHistory } from "./schedule-history"
|
|
import { ScheduleTemplates } from "./schedule-templates"
|
|
import { Calendar, History, FileIcon as FileTemplate, Table } from "lucide-react"
|
|
|
|
interface ScheduleTabsProps {
|
|
teamId: string
|
|
teamName: string
|
|
}
|
|
|
|
export function ScheduleTabs({ teamId, teamName }: ScheduleTabsProps) {
|
|
return (
|
|
<Tabs defaultValue="current" className="w-full">
|
|
<TabsList className="grid w-full grid-cols-4">
|
|
<TabsTrigger value="current" className="flex items-center gap-2">
|
|
<Table className="size-4" />
|
|
Current Schedule
|
|
</TabsTrigger>
|
|
<TabsTrigger value="history" className="flex items-center gap-2">
|
|
<History className="size-4" />
|
|
History
|
|
</TabsTrigger>
|
|
<TabsTrigger value="templates" className="flex items-center gap-2">
|
|
<FileTemplate className="size-4" />
|
|
Templates
|
|
</TabsTrigger>
|
|
<TabsTrigger value="calendar" className="flex items-center gap-2">
|
|
<Calendar className="size-4" />
|
|
Calendar View
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="current" className="mt-4">
|
|
<TimeshiftSpreadsheet teamId={teamId} teamName={teamName} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="history" className="mt-4">
|
|
<ScheduleHistory teamId={teamId} teamName={teamName} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="templates" className="mt-4">
|
|
<ScheduleTemplates teamId={teamId} teamName={teamName} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="calendar" className="mt-4">
|
|
<div className="flex items-center justify-center h-96 border-2 border-dashed border-gray-300 rounded-lg">
|
|
<div className="text-center">
|
|
<Calendar className="size-12 mx-auto mb-4 text-gray-400" />
|
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Calendar View</h3>
|
|
<p className="text-gray-500">Calendar view coming soon...</p>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
)
|
|
}
|