add complain registration, add view complaint inforation, add status change for marches when user click on mat

2026-03-26 17:30:30 +07:00
parent c9f230a76f
commit 7ae0fecb61
8 changed files with 518 additions and 166 deletions
@@ -0,0 +1,163 @@
+// app/ui/violations/file-page/violation-page-violations-list.tsx
+'use client'
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useRouter, usePathname } from 'next/navigation';
+import { useState } from 'react';
+import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-violation-info';
+import { useFileViolations } from '@/app/hooks/react-query/useFileViolations';
+import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
+
+export default function FilePageViolationsList({
+	currentPage,
+	fileId
+}: {
+	currentPage: number,
+	fileId: string
+}) {
+	const t = useTranslations('Global');
+	const router = useRouter();
+	const pathname = usePathname();
+	const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
+	const { data: fileViolations } = useFileViolations(fileId, currentPage);
+
+	if (!fileViolations?.violations) {
+		return null;
+	}
+
+	const handlePageChange = (page: number) => {
+		router.push(`${pathname}?page=${page}`, { scroll: false });
+	};
+
+	const getPageNumbers = () => {
+		const pages = [];
+		const maxVisible = 5;
+		const total = fileViolations.total_pages;
+
+		let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+		let end = Math.min(total, start + maxVisible - 1);
+
+		if (end - start + 1 < maxVisible) {
+			start = Math.max(1, end - maxVisible + 1);
+		}
+
+		for (let i = start; i <= end; i++) {
+			pages.push(i);
+		}
+
+		return pages;
+	};
+
+	function selectHandler(violation: ViolationFileDetail) {
+		setSelectedViolation(violation);
+	}
+
+	return (
+		<div className="block-wrapper">
+			<div className="card-header">
+				<h3 className="card-title">
+					{t('all-file-violations')}
+				</h3>
+				<span>
+					{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
+				</span>
+			</div>
+
+			<div
+				className="sources-list-wrapper"
+			>
+				<div className="sources-list">
+					{fileViolations.violations.map(item => {
+						return (
+							<div
+								className={`source-card ${selectedViolation?.id === item.id ? 'selected' : ''}`}
+								key={item.id}
+								onClick={() => {
+									selectHandler(item);
+								}}
+							>
+								{/* 								<div className="source-header">
+									<div className="source-image">
+										<img src={item.url} alt="" />
+									</div>
+
+								</div> */}
+								<div
+									className="source-header-left"
+								>
+									<div className="source-image">
+										<img src={item.url} alt="" />
+									</div>
+									<div>
+										<span
+											className="source-meta"
+										>
+											{t('source')}:
+										</span>
+										<span className="source-url">
+											{item.host}
+										</span>
+									</div>
+								</div>
+
+								<div
+									className="source-header-right"
+								>
+									<span className="source-status new">
+										{item.status}
+									</span>
+
+									<div className="source-actions">
+										<Link
+											href={item.page_url}
+											className="btn-small btn-primary-small"
+											target="_blank"
+											scroll={false}
+										>
+											{t('open')}
+										</Link>
+									</div>
+								</div>
+
+
+							</div>
+						);
+					})}
+				</div>
+
+				<FilePageViolationInfo selectedViolation={selectedViolation} />
+
+			</div>
+			{fileViolations.total_pages > 1 && (
+				<div className="pagination">
+					<button
+						onClick={() => handlePageChange(currentPage - 1)}
+						className="pagination-item pagination-item-prev"
+						disabled={!fileViolations.has_previous}
+					>
+						{t('previous')}
+					</button>
+
+					{getPageNumbers().map(pageNum => (
+						<button
+							key={pageNum}
+							onClick={() => handlePageChange(pageNum)}
+							className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
+						>
+							{pageNum}
+						</button>
+					))}
+
+					<button
+						onClick={() => handlePageChange(currentPage + 1)}
+						className="pagination-item pagination-item-next"
+						disabled={!fileViolations.has_next}
+					>
+						{t('next')}
+					</button>
+				</div>
+			)}
+		</div>
+	);
+}