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>
109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
"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>
|
|
)
|
|
}
|