siakad-itm/resources/js/components/student-status-badge.tsx
Yoga Pangestu 5994f38f01 feat: implement permission checks for academic terms, courses, departments, and user management
- Added permission checks for creating, updating, and deleting academic terms, courses, and departments.
- Updated the routes to enforce permissions for various actions in the admin panel.
- Enhanced user management by adding permissions for administrators, lecturers, and students.
- Refactored components to conditionally render actions based on user permissions.
- Updated the auth type to include optional permissions array for user roles.
2026-08-30 23:27:31 +07:00

70 lines
2.1 KiB
TypeScript

import { Badge } from '@/components/ui/badge';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
type StatusOption = { value: string; label: string };
type StudentStatusBadgeProps = {
status: string | null | undefined;
statuses: StatusOption[];
onChange: (status: string) => void;
disabled?: boolean;
};
const StudentStatusVariants: Record<
string,
'default' | 'secondary' | 'destructive' | 'outline'
> = {
active: 'default',
on_leave: 'secondary',
graduated: 'outline',
dropped_out: 'destructive',
};
export function StudentStatusBadge({
status,
statuses,
onChange,
disabled,
}: StudentStatusBadgeProps) {
const label =
statuses.find((option) => option.value === status)?.label ??
status ??
'-';
const variant = (status && StudentStatusVariants[status]) || 'outline';
return (
<DropdownMenu>
<DropdownMenuTrigger asChild disabled={disabled}>
<button
type="button"
disabled={disabled}
className="cursor-pointer rounded-full border-0 bg-transparent p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:opacity-70"
>
<Badge variant={variant}>{label}</Badge>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuRadioGroup
value={status ?? ''}
onValueChange={onChange}
>
{statuses.map((option) => (
<DropdownMenuRadioItem
key={option.value}
value={option.value}
>
{option.label}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
);
}