change matched table styles

This commit is contained in:
smanylov
2026-04-15 13:30:19 +07:00
parent 9b4fb796f9
commit 4d957ea271
6 changed files with 273 additions and 284 deletions
@@ -7,7 +7,7 @@ import { createComplaint, fetchComplainInfo } from '@/app/actions/violationActio
import { toast } from 'sonner';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { MatchStatus } from '@/app/actions/violationActions';
import {formatDate, formatDateTime} from '@/app/lib/formatDate';
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
interface complaintInfo {
id: number,
@@ -255,81 +255,53 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
return (
<div className="violation-info-case">
{complainInfo?.body.content ? (
<div>
<>
{complainInfo.body.content.map((item: complaintInfo) => {
return (
<div key={item.id}>
<div className="complaint-details">
<div
className="complaint-details-item"
>
<strong>ID:</strong> {item.id}
<div className="complaint-details-item">
<div className="complaint-details-header">
<h5>ID: {item.id}</h5>
</div>
</div>
<div
className="complaint-details-item"
>
<span
className="complaint-details-title"
>
{t('status')}:
</span>
<br />
<span
className="complaint-details-text"
>
{item.status}
</span>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('status')}:</span>
</div>
<div className="complaint-details-content">{item.status}</div>
</div>
<div
className="complaint-details-item"
>
<span
className="complaint-details-title"
>
{t('date-of-creation')}:
</span>
<br />
<span
className="complaint-details-text"
>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('date-of-creation')}:</span>
</div>
<div className="complaint-details-content">
{item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'}
</span>
</div>
</div>
<div
className="complaint-details-item"
>
<span
className="complaint-details-title"
>
{t('date-of-update')}:
</span>
<br />
<span
className="complaint-details-text"
>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('date-of-update')}:</span>
</div>
<div className="complaint-details-content">
{item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'}
</span>
</div>
</div>
<div
className="complaint-details-item"
>
<span
className="complaint-details-title"
>
{t('text-of-the-complaint')}:
</span>
<br />
<span
className="complaint-details-text"
>
{item.complaint_text}
</span>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('text-of-the-complaint')}:</span>
</div>
<div className="complaint-details-content">{item.complaint_text}</div>
</div>
</div>
</div>
);
})}
</div>
</>
) : (
<div>
{t('no-information-about-the-complaint')}