diff --git a/src/app/[locale]/pages/violations/page.tsx b/src/app/[locale]/pages/violations/page.tsx index f817ee3..740562e 100644 --- a/src/app/[locale]/pages/violations/page.tsx +++ b/src/app/[locale]/pages/violations/page.tsx @@ -6,6 +6,7 @@ import ViolationsStatistic from '@/app/ui/violations/violations-statistic'; import AnalyticsCardGeography from '@/app/ui/reports/analytics-card-geography'; import AnalyticsCardDistribution from '@/app/ui/reports/analytics-card-distribution'; import ViolationsMyClaims from '@/app/ui/violations/violations-my-claims'; +import ViolationsLastCombinedCases from '@/app/ui/violations/violations-last-combined-cases'; export default function Page() { return ( @@ -17,13 +18,14 @@ export default function Page() { - - + +{/* + */}
- + ) } \ No newline at end of file diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index ac21c4e..b7aa73b 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -2598,30 +2598,9 @@ } .my-cases-title { - font-size: 1.5rem; - font-weight: 800; - color: #1e293b; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - background-clip: text; - -webkit-text-fill-color: transparent; - } - - .btn-outline-small { - background: transparent; - color: #667eea; - border: 2px solid #667eea; - padding: 10px 20px; - border-radius: 10px; - font-weight: 700; - font-size: 0.9rem; - text-decoration: none; - transition: all 0.3s ease; - - &:hover { - background: #667eea; - color: white; - transform: translateY(-2px); - } + font-size: 18px; + font-weight: 600; + color: v.$text-p; } .case-card { @@ -2650,7 +2629,7 @@ left: 0; width: 4px; height: 100%; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: #667eea; opacity: 0; transition: opacity 0.3s ease; border-radius: 16px 0 0 16px; @@ -2728,20 +2707,47 @@ letter-spacing: 0.3px; white-space: nowrap; } + + a { + color: v.$status-showed; + + &:hover { + color: #667eea; + } + } } .cases-carousel-track { position: relative; -/* .swiper-wrapper { - align-items: stretch; - } */ - .swiper-slide { height: auto; display: flex; } } + + .my-cases-tabs { + display: flex; + gap: 10px; + } + + .tab-button { + cursor: pointer; + padding: 4px 10px; + border-radius: 20px; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.3px; + white-space: nowrap; + + background: v.$b-color-1; + + &.active { + background: #dbeafe; + color: #1e40af; + } + } } .violation-check-all-section { diff --git a/src/app/ui/violations/violations-last-combined-cases.tsx b/src/app/ui/violations/violations-last-combined-cases.tsx new file mode 100644 index 0000000..f473530 --- /dev/null +++ b/src/app/ui/violations/violations-last-combined-cases.tsx @@ -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({ + 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 ( +
+
+

+ {t('recent-cases')} +

+
+ + +
+
+
+
+
+
+
+
+ ); + } + + const isAllSelected = filters.complaints && filters.claims; + const isNothingSelected = !filters.complaints && !filters.claims; + + return ( +
+
+

+ {t('recent-cases')} +

+
+ + +
+
+
+ {isNothingSelected ? ( +
+ {t('select-at-least-one-filter')} +
+ ) : filteredItems.length === 0 ? ( +
+ {t('no-items-found')} +
+ ) : ( + + {filteredItems.map((item) => ( + +
+
+
+ {item.displayId} +
+ + {item.status} + +
+ +
+
+ {t('date-of-creation')}: {item.createdAt ? `${formatDate(item.createdAt)} ${formatDateTime(item.createdAt)}` : '---'} +
+
+ {t('date-of-update')}: {item.updatedAt ? `${formatDate(item.updatedAt)} ${formatDateTime(item.updatedAt)}` : '---'} +
+ {item.type === 'claim' && ( +
+ {t('lawyer')}: + {item.lawyer ? item.lawyer : t('not-assigned')} +
+ )} +
+ { + e.preventDefault(); + }} + > + + +
+
+ ))} +
+ )} +
+
+ ); +} \ No newline at end of file diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 605c8d9..0e7a849 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -441,7 +441,11 @@ "week": "week", "month": "month", "every": "every", - "country": "Country" + "country": "Country", + "claims": "Claims", + "complaints": "Complaints", + "recent-cases": "Recent cases", + "select-at-least-one-filter": "Select at least one filter" }, "Login-register-form": { "and": "and", @@ -582,7 +586,5 @@ "user-verification": "User verification", "Status": "Status" }, - "Countryes": { - - } + "Countryes": {} } \ No newline at end of file diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index 815ad4f..b0f6775 100644 --- a/src/i18n/messages/ru.json +++ b/src/i18n/messages/ru.json @@ -441,7 +441,11 @@ "week_accusative": "неделю", "month": "месяц", "every": "каждый", - "country": "Страна" + "country": "Страна", + "claims": "Претензии", + "complaints": "Жалобы", + "recent-cases": "Недавние дела", + "select-at-least-one-filter": "Выберите хотя бы один фильтр" }, "Login-register-form": { "and": "и",