update matched table styles, add loading animation for some blocks

This commit is contained in:
smanylov
2026-04-18 14:25:20 +07:00
parent 1b4ad64ef6
commit 85b77aeb91
9 changed files with 167 additions and 77 deletions
@@ -279,29 +279,40 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('Status')}:</span> {item.status}
<div className="complaint-details-title">{t('Status')}:</div>
<div
className="complaint-details-content"
>
{item.status}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('date-of-creation')}: {item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'}</span>
<div className="complaint-details-title">{t('date-of-creation')}:</div>
<div
className="complaint-details-content"
>
{item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('date-of-update')}: {item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'}</span>
<div className="complaint-details-title">{t('date-of-update')}:</div>
<div
className="complaint-details-content"
>
{item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('text-of-the-complaint')}:
<br />
{item.complaint_text}
</span>
<div className="complaint-details-title">{t('text-of-the-complaint')}:
</div>
<div
className="complaint-details-content"
>
{item.complaint_text}
</div>
</div>
</div>
@@ -220,47 +220,71 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
<div key={item.id}>
<div className="complaint-details">
<div className="complaint-details-item">
<div className="complaint-details-header">
<h5>{item.name}</h5>
<h5>{item.name}</h5>
</div>
<div className="complaint-details-item">
<div className="complaint-details-title">
{t('Status')}:
</div>
<div
className="complaint-details-content"
>
{item.type}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('Status')}: {item.type}</span>
<div className="complaint-details-title">
{t('date-of-creation')}:
</div>
<div
className="complaint-details-content"
>
{item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('date-of-creation')}: {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}</span>
<div className="complaint-details-title">
{t('date-of-update')}:
</div>
<div
className="complaint-details-content"
>
{item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('date-of-update')}: {item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'}</span>
<div className="complaint-details-title">
{t('amount-of-damage')}:
</div>
<div
className="complaint-details-content"
>
{item.amount}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('amount-of-damage')}: {item.amount}</span>
<div className="complaint-details-title">
{t('lawyer')}:
</div>
<div
className="complaint-details-content"
>
{item.lawyer}
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('lawyer')}: {item.lawyer}</span>
<div className="complaint-details-title">
{t('description')}:
</div>
</div>
<div className="complaint-details-item">
<div className="complaint-details-header">
<span className="complaint-details-title">{t('description')}:
<br />
{item.description}
</span>
<div
className="complaint-details-content"
>
{item.description}
</div>
</div>
</div>