Fix styling issues in color requests admin panel

- Add Serbian status labels instead of English status names
- Fix dark mode colors for better contrast
- Update date formatting to use Serbian locale
- Fix request count display to show proper total
- Improve text colors consistency across light/dark themes
- Tested all API endpoints (create, read, update, delete) - working correctly
- Build succeeds without errors
This commit is contained in:
DaX
2025-08-06 00:20:26 +02:00
parent fd3ba36ae2
commit 9f2dade0e3
2 changed files with 1675 additions and 1886 deletions

View File

@@ -91,13 +91,22 @@ export default function ColorRequestsAdmin() {
return colors[status as keyof typeof colors] || 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300';
};
const getStatusLabel = (status: string) => {
const labels = {
pending: 'Na čekanju',
approved: 'Odobreno',
rejected: 'Odbijeno',
completed: 'Završeno'
};
return labels[status as keyof typeof labels] || status;
};
const formatDate = (dateString: string) => {
if (!dateString) return '-';
return new Date(dateString).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
});
const date = new Date(dateString);
const month = date.toLocaleDateString('sr-RS', { month: 'short' });
const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1);
return `${capitalizedMonth} ${date.getDate()}, ${date.getFullYear()}`;
};
if (loading) {
@@ -186,26 +195,24 @@ export default function ColorRequestsAdmin() {
</td>
<td className="px-4 py-3">
<div className="text-sm">
<div>{request.material_type}</div>
<div className="text-gray-900 dark:text-gray-100">{request.material_type}</div>
{request.finish_type && (
<div className="text-gray-500">{request.finish_type}</div>
<div className="text-gray-500 dark:text-gray-400">{request.finish_type}</div>
)}
</div>
</td>
<td className="px-4 py-3">
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300">
{request.request_count} {request.request_count === 1 ? 'zahtev' : 'zahteva'}
{request.request_count || 1} {(request.request_count || 1) === 1 ? 'zahtev' : 'zahteva'}
</span>
</td>
<td className="px-4 py-3">
<div className="text-sm">
{request.user_name && <div>{request.user_name}</div>}
{request.user_email && (
<a href={`mailto:${request.user_email}`} className="text-blue-600 hover:underline">
{request.user_email ? (
<a href={`mailto:${request.user_email}`} className="text-blue-600 dark:text-blue-400 hover:underline">
{request.user_email}
</a>
)}
{!request.user_name && !request.user_email && (
) : (
<span className="text-gray-400 dark:text-gray-500">Anonimno</span>
)}
</div>
@@ -235,7 +242,7 @@ export default function ColorRequestsAdmin() {
) : (
<div>
<span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusBadge(request.status)}`}>
{request.status}
{getStatusLabel(request.status)}
</span>
{request.admin_notes && (
<div className="text-xs text-gray-500 mt-1">{request.admin_notes}</div>
@@ -248,10 +255,12 @@ export default function ColorRequestsAdmin() {
</div>
)}
</td>
<td className="px-4 py-3 text-sm text-gray-500">
<div>{formatDate(request.created_at)}</div>
<td className="px-4 py-3">
<div className="text-sm text-gray-600 dark:text-gray-400">
{formatDate(request.created_at)}
</div>
{request.processed_at && (
<div className="text-xs">
<div className="text-xs text-gray-500 dark:text-gray-500">
Obrađeno: {formatDate(request.processed_at)}
</div>
)}
@@ -315,7 +324,7 @@ export default function ColorRequestsAdmin() {
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
<div className="text-sm text-gray-500 dark:text-gray-400">Ukupno Zahteva</div>
<div className="text-2xl font-bold text-gray-800 dark:text-gray-100">
{requests.reduce((sum, r) => sum + r.request_count, 0)}
{requests.length}
</div>
</div>
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">

3516
package-lock.json generated

File diff suppressed because it is too large Load Diff