combine complaint and cases
This commit is contained in:
smanylov
@@ -0,0 +1,239 @@
|
||||
'use client';
|
||||
|
||||
import { useLastComplaints } from '@/app/hooks/react-query/useLastComplaints';
|
||||
import { useLastCases } from '@/app/hooks/react-query/useLastCases';
|
||||
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination } from 'swiper/modules';
|
||||
import { IconEye } from '@/app/ui/icons/icons';
|
||||
import Link from 'next/link';
|
||||
|
||||
type FilterState = {
|
||||
complaints: boolean;
|
||||
claims: boolean;
|
||||
};
|
||||
|
||||
export default function ViolationsLastCombinedCases() {
|
||||
const t = useTranslations('Global');
|
||||
const [filters, setFilters] = useState<FilterState>({
|
||||
complaints: true,
|
||||
claims: true,
|
||||
});
|
||||
|
||||
const { data: dataComplaint } = useLastComplaints({
|
||||
page: 1,
|
||||
size: 5,
|
||||
sort_by: 'createdAt',
|
||||
sort_direction: 'desc'
|
||||
});
|
||||
|
||||
const { data: dataCases } = useLastCases({
|
||||
page: 1,
|
||||
size: 5,
|
||||
sort_by: 'createdAt',
|
||||
sort_direction: 'desc'
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log(dataCases);
|
||||
console.log(dataComplaint);
|
||||
}, [dataComplaint, dataCases])
|
||||
|
||||
const getCombinedItems = () => {
|
||||
const complaints = (dataComplaint?.content || []).map(item => ({
|
||||
...item,
|
||||
type: 'complaint' as const,
|
||||
displayId: `COM-${item.id}`,
|
||||
title: item.complaint_text,
|
||||
status: item.status,
|
||||
createdAt: item.created_at,
|
||||
updatedAt: item.updated_at,
|
||||
lawyer: null,
|
||||
}));
|
||||
|
||||
const claims = (dataCases?.content || []).map(item => ({
|
||||
...item,
|
||||
type: 'claim' as const,
|
||||
displayId: item.name,
|
||||
title: item.description,
|
||||
status: item.type,
|
||||
createdAt: item.createdAt,
|
||||
updatedAt: item.updatedAt,
|
||||
lawyer: item.lawyer,
|
||||
}));
|
||||
|
||||
let combined = [...complaints, ...claims];
|
||||
|
||||
combined.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
|
||||
return combined;
|
||||
};
|
||||
|
||||
const getFilteredItems = () => {
|
||||
const allItems = getCombinedItems();
|
||||
|
||||
return allItems.filter(item => {
|
||||
if (item.type === 'complaint') return filters.complaints;
|
||||
if (item.type === 'claim') return filters.claims;
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleFilter = (filterType: 'complaints' | 'claims') => {
|
||||
if (filters.claims && !filters.complaints && filterType === 'claims') {
|
||||
return
|
||||
}
|
||||
|
||||
if (!filters.claims && filters.complaints && filterType === 'complaints') {
|
||||
return
|
||||
}
|
||||
|
||||
setFilters(prev => ({
|
||||
...prev,
|
||||
[filterType]: !prev[filterType]
|
||||
}));
|
||||
};
|
||||
|
||||
const filteredItems = getFilteredItems();
|
||||
const MAX_VISIBLE_ITEMS = 5;
|
||||
|
||||
const getSlidesPerView = () => {
|
||||
if (!filteredItems || filteredItems.length === 0) return 1;
|
||||
return Math.min(MAX_VISIBLE_ITEMS, filteredItems.length);
|
||||
};
|
||||
|
||||
const slidesPerViewCount = getSlidesPerView();
|
||||
|
||||
const swiperSettings = {
|
||||
modules: [Navigation, Pagination],
|
||||
breakpoints: {
|
||||
0: {
|
||||
slidesPerView: Math.min(slidesPerViewCount, 1),
|
||||
spaceBetween: 20,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: Math.min(slidesPerViewCount, 2),
|
||||
spaceBetween: 30,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: Math.min(slidesPerViewCount, 3),
|
||||
spaceBetween: 30,
|
||||
},
|
||||
1792: {
|
||||
slidesPerView: slidesPerViewCount,
|
||||
spaceBetween: 30,
|
||||
}
|
||||
},
|
||||
loop: filteredItems.length > 3,
|
||||
};
|
||||
|
||||
const isLoading = (!dataComplaint || !dataCases);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="violations-my-cases-section">
|
||||
<div className="my-cases-header">
|
||||
<h3 className="my-cases-title">
|
||||
{t('recent-cases')}
|
||||
</h3>
|
||||
<div className="my-cases-tabs">
|
||||
<button className="tab-button tab-button-complaints">
|
||||
{t('complaints')}
|
||||
</button>
|
||||
<button className="tab-button tab-button-claims">
|
||||
{t('claims')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cases-carousel-track">
|
||||
<div className="loading-animation">
|
||||
<div className="global-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isAllSelected = filters.complaints && filters.claims;
|
||||
const isNothingSelected = !filters.complaints && !filters.claims;
|
||||
|
||||
return (
|
||||
<div className="violations-my-cases-section">
|
||||
<div className="my-cases-header">
|
||||
<h3 className="my-cases-title">
|
||||
{t('recent-cases')}
|
||||
</h3>
|
||||
<div className="my-cases-tabs">
|
||||
<button
|
||||
className={`tab-button tab-button-complaints ${filters.complaints ? 'active' : ''}`}
|
||||
onClick={() => toggleFilter('complaints')}
|
||||
>
|
||||
{t('complaints')}
|
||||
</button>
|
||||
<button
|
||||
className={`tab-button tab-button-claims ${filters.claims ? 'active' : ''}`}
|
||||
onClick={() => toggleFilter('claims')}
|
||||
>
|
||||
{t('claims')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cases-carousel-track">
|
||||
{isNothingSelected ? (
|
||||
<div className="empty-state">
|
||||
{t('select-at-least-one-filter')}
|
||||
</div>
|
||||
) : filteredItems.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
{t('no-items-found')}
|
||||
</div>
|
||||
) : (
|
||||
<Swiper {...swiperSettings}>
|
||||
{filteredItems.map((item) => (
|
||||
<SwiperSlide key={`${item.type}-${item.id}`}>
|
||||
<div className="case-card">
|
||||
<div className="case-card-header">
|
||||
<div className="case-number">
|
||||
{item.displayId}
|
||||
</div>
|
||||
<span className="case-status-badge status-submitted">
|
||||
{item.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="case-card-meta">
|
||||
<div>
|
||||
<strong>{t('date-of-creation')}:</strong> {item.createdAt ? `${formatDate(item.createdAt)} ${formatDateTime(item.createdAt)}` : '---'}
|
||||
</div>
|
||||
<div>
|
||||
<strong>{t('date-of-update')}:</strong> {item.updatedAt ? `${formatDate(item.updatedAt)} ${formatDateTime(item.updatedAt)}` : '---'}
|
||||
</div>
|
||||
{item.type === 'claim' && (
|
||||
<div>
|
||||
<strong>{t('lawyer')}: </strong>
|
||||
<span style={{ color: '#f59e0b' }}>{item.lawyer ? item.lawyer : t('not-assigned')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
href={`/pages/file/${item.displayId}`}
|
||||
className="mt-auto"
|
||||
title={t('view')}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<IconEye />
|
||||
</Link>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user