import { Head, Link, usePage } from '@inertiajs/react'; import { Separator } from '@/components/ui/separator'; import { cn } from '@/lib/utils'; import { index as divisionsIndex } from '@/routes/divisions'; import { show_tasks as divisionShow } from '@/routes/divisions'; import type { Auth } from '@/types'; import type { DivisionIndexItem } from '@/types/division'; interface DivisionsProps { divisions: DivisionIndexItem[]; } export default function Divisions({ divisions }: DivisionsProps) { const { auth } = usePage().props; const userId = auth.user.id; // Super admin membaca semua divisi read-only, jadi kartu divisi yang bukan // miliknya tetap bisa dibuka meski ia tak terdaftar sebagai anggota. const isSuperAdmin = auth.user.role === 'super_admin'; const userDivisions = divisions.filter((division) => division.members?.some((member) => member.user_id === userId), ); const otherDivisions = divisions.filter( (division) => !division.members?.some((member) => member.user_id === userId), ); return ( <>
{userDivisions.map((division) => ( ))} {userDivisions.length > 0 && otherDivisions.length > 0 && ( )} {otherDivisions.map((division) => ( ))}
); } function DivisionCard({ division, isUserDivision = false, clickable = false, }: { division: DivisionIndexItem; isUserDivision?: boolean; clickable?: boolean; }) { const CardContent = (

{division.name}

{division.description}

Members

{division.members.map((member) => (

{member.user_name}

{member.role_label} {member.role_type}
))}
{isUserDivision && (
View Details
)}
); const className = cn( 'group relative w-64 flex-none overflow-hidden rounded-2xl border transition-all duration-500 ease-out', isUserDivision ? 'border-primary/20 bg-card/50 shadow-2xl shadow-primary/5 backdrop-blur-xl hover:border-primary/40 hover:shadow-primary/15 dark:border-primary/30 dark:shadow-primary/10 dark:hover:border-primary/50 dark:hover:shadow-primary/20' : 'border-border bg-card/20 hover:border-muted-foreground/30 hover:bg-muted/40 dark:hover:bg-card/40', ); if (clickable) { return (
{CardContent} ); } return
{CardContent}
; } Divisions.layout = { breadcrumbs: [ { title: 'Divisions', href: divisionsIndex().url, }, ], };