soufiane
c7c2a3f56c
- Delete unused page-advanced.tsx and page-backup.tsx (dashboard duplicates) - Add useApi hook for centralized API calls with auth token - Add LoadingState, ErrorState, StatusBadge reusable components - Create shared ProfilePage component for admin/employee profiles - Refactor admin and employee profile pages to use shared component This refactoring addresses SonarQube quality gate failure for duplicated lines. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
112 lines
2.8 KiB
TypeScript
112 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { cn } from '@/utils/helpers';
|
|
|
|
type RoleType = 'ADMIN' | 'EMPLOYEE' | 'CLIENT' | string;
|
|
type TicketStatusType = 'AVAILABLE' | 'CLAIMED' | 'PENDING' | 'EXPIRED' | string;
|
|
type StatusType = 'active' | 'inactive' | 'verified' | 'unverified' | string;
|
|
|
|
interface StatusBadgeProps {
|
|
type: 'role' | 'ticket' | 'status' | 'custom';
|
|
value: string;
|
|
className?: string;
|
|
}
|
|
|
|
const roleColors: Record<string, string> = {
|
|
ADMIN: 'bg-red-100 text-red-800',
|
|
EMPLOYEE: 'bg-blue-100 text-blue-800',
|
|
CLIENT: 'bg-green-100 text-green-800',
|
|
};
|
|
|
|
const ticketColors: Record<string, string> = {
|
|
AVAILABLE: 'bg-gray-100 text-gray-800',
|
|
CLAIMED: 'bg-green-100 text-green-800',
|
|
PENDING: 'bg-yellow-100 text-yellow-800',
|
|
EXPIRED: 'bg-red-100 text-red-800',
|
|
};
|
|
|
|
const statusColors: Record<string, string> = {
|
|
active: 'bg-green-100 text-green-800',
|
|
inactive: 'bg-gray-100 text-gray-800',
|
|
verified: 'bg-green-100 text-green-800',
|
|
unverified: 'bg-yellow-100 text-yellow-800',
|
|
};
|
|
|
|
const roleLabels: Record<string, string> = {
|
|
ADMIN: 'Admin',
|
|
EMPLOYEE: 'Employé',
|
|
CLIENT: 'Client',
|
|
};
|
|
|
|
const ticketLabels: Record<string, string> = {
|
|
AVAILABLE: 'Disponible',
|
|
CLAIMED: 'Réclamé',
|
|
PENDING: 'En attente',
|
|
EXPIRED: 'Expiré',
|
|
};
|
|
|
|
const statusLabels: Record<string, string> = {
|
|
active: 'Actif',
|
|
inactive: 'Inactif',
|
|
verified: 'Vérifié',
|
|
unverified: 'Non vérifié',
|
|
};
|
|
|
|
/**
|
|
* Reusable status badge component for roles, ticket status, and general status
|
|
*/
|
|
export const StatusBadge: React.FC<StatusBadgeProps> = ({
|
|
type,
|
|
value,
|
|
className,
|
|
}) => {
|
|
let colorClass = 'bg-gray-100 text-gray-800';
|
|
let label = value;
|
|
|
|
switch (type) {
|
|
case 'role':
|
|
colorClass = roleColors[value] || colorClass;
|
|
label = roleLabels[value] || value;
|
|
break;
|
|
case 'ticket':
|
|
colorClass = ticketColors[value] || colorClass;
|
|
label = ticketLabels[value] || value;
|
|
break;
|
|
case 'status':
|
|
colorClass = statusColors[value] || colorClass;
|
|
label = statusLabels[value] || value;
|
|
break;
|
|
case 'custom':
|
|
// Use value as-is for custom badges
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'px-2 py-1 inline-flex text-xs font-semibold rounded-full',
|
|
colorClass,
|
|
className
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
// Utility functions for getting colors (for backward compatibility)
|
|
export const getRoleBadgeColor = (role: RoleType): string => {
|
|
return roleColors[role] || 'bg-gray-100 text-gray-800';
|
|
};
|
|
|
|
export const getTicketStatusColor = (status: TicketStatusType): string => {
|
|
return ticketColors[status] || 'bg-gray-100 text-gray-800';
|
|
};
|
|
|
|
export const getStatusColor = (status: StatusType): string => {
|
|
return statusColors[status] || 'bg-gray-100 text-gray-800';
|
|
};
|
|
|
|
export default StatusBadge;
|