diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index b04e0dc..8a3581b 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -4718,14 +4718,14 @@ border-bottom: 1px solid rgb(226, 232, 240); } - &-case-grid { + /* &-case-grid { display: grid; grid-template-rows: 1fr 1fr; gap: 5px; flex: 1; min-height: 0; overflow: auto; - } + } */ &-case { padding: 10px; @@ -4736,6 +4736,59 @@ padding-bottom: 10px; } } + + &-choice { + height: 100%; + display: flex; + justify-content: center; + flex-direction: column; + + h4 { + text-align: center; + } + + .violation-info-choice-buttons { + display: flex; + flex-direction: column; + align-items: center; + } + } + + &-tabs-wrapper { + position: relative; + + .violation-info-choice { + padding: 20px; + text-align: center; + } + + .violation-info-choice-buttons { + display: flex; + gap: 16px; + justify-content: center; + margin-top: 16px; + } + + .violation-info-choice-btn { + padding: 12px 24px; + border: 1px solid #ccc; + border-radius: 6px; + background: white; + cursor: pointer; + } + + .violation-info-tab { + padding: 8px 16px; + border: none; + background: transparent; + cursor: pointer; + } + + .violation-info-tab--active { + border-bottom: 2px solid blue; + color: blue; + } + } } .violation-page-note { @@ -5238,7 +5291,7 @@ padding: 20px; &:first-child { -/* width: 60px; + /* width: 60px; min-width: 60px; max-width: 60px; */ display: flex; diff --git a/src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx b/src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx new file mode 100644 index 0000000..b4e7062 --- /dev/null +++ b/src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx @@ -0,0 +1,95 @@ +'use client' + +import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint'; +import CaseLegal from '@/app/ui/file-page/violation-table/case-legal'; +import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations'; +import { MatchStatus } from '@/app/actions/violationActions'; +import { useEffect, useState } from 'react'; + +type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise; + +const STATUSES_IN_WORK = ['COMPLAINT_IN_WORK', 'LEGAL_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK']; + +type TabType = 'complaint' | 'legal' + +export default function FilePageViolationInfoTabs({ selectedViolation, updateStatusHandler }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler }) { + const [activeTab, setActiveTab] = useState('complaint'); + const [showTabs, setShowTabs] = useState(false); + const isInWork = STATUSES_IN_WORK.includes(selectedViolation.status); + + useEffect(() => { + console.log(selectedViolation.status); + }, [selectedViolation]); + + useEffect(() => { + setShowTabs(false); + }, [selectedViolation.id]); + + if (!isInWork && !showTabs) { + return ( +
+

Вы можете

+
+ + + + или + + + +
+
+ ); + } + + return ( +
+
+ + +
+
+ {activeTab === 'complaint' && ( + + )} + {activeTab === 'legal' && ( + + )} +
+
+ ); +} \ No newline at end of file diff --git a/src/app/ui/file-page/violation-table/file-page-violation-info.tsx b/src/app/ui/file-page/violation-table/file-page-violation-info.tsx index 18f084c..efcd2d2 100644 --- a/src/app/ui/file-page/violation-table/file-page-violation-info.tsx +++ b/src/app/ui/file-page/violation-table/file-page-violation-info.tsx @@ -5,7 +5,7 @@ import { formatDate } from '@/app/lib/formatDate'; import { useTranslations } from 'next-intl'; import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations'; import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint'; -import CaseViolation from '@/app/ui/file-page/violation-table/case-violation'; +import CaseViolation from '@/app/ui/file-page/violation-table/case-legal'; import { updateMatchStatus } from '@/app/actions/violationActions'; import { useQueryClient } from '@tanstack/react-query'; import { useCallback, useEffect, useState } from 'react'; @@ -13,6 +13,7 @@ import { MatchStatus } from '@/app/actions/violationActions'; import { toast } from 'sonner'; import FilePageViolationEpmtyScreen from '@/app/ui/file-page/violation-table/file-page-violation-epmty-screen'; import Image from 'next/image'; +import FilePageViolationInfoTabs from '@/app/ui/file-page/violation-table/file-page-violation-info-tabs'; export default function FilePageViolationInfo({ selectedViolation }: { selectedViolation: ViolationFileDetail | null }) { const t = useTranslations('Global'); @@ -162,20 +163,10 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV -
- - -
+ ) diff --git a/src/app/ui/file-page/violation-table/file-page-violations-list.tsx b/src/app/ui/file-page/violation-table/file-page-violations-list.tsx index be2a88a..97d8f3e 100644 --- a/src/app/ui/file-page/violation-table/file-page-violations-list.tsx +++ b/src/app/ui/file-page/violation-table/file-page-violations-list.tsx @@ -37,6 +37,7 @@ export default function FilePageViolationsList({ const { data: fileViolations, error, isPending } = useFileViolations(fileId, currentPage, status); useEffect(() => { + console.log(fileViolations); if (fileViolations?.violations) { setCachedPagination({ total_pages: fileViolations.total_pages, @@ -80,6 +81,7 @@ export default function FilePageViolationsList({ const pages = []; const maxVisible = 5; const total = fileViolations.total_pages; + /* const totalPages = Math.ceil(fileViolations.total_elements / fileViolations.page_size); */ let start = Math.max(1, currentPage - Math.floor(maxVisible / 2)); let end = Math.min(total, start + maxVisible - 1);