Davron/plagiat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cabinet plagiet connected to backend

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-04-06 20:16:59 +05:00
parent d17b30d6ea
commit b66bf9dafe
10 changed files with 97 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/shared/config/i18n/messages/en.json
View File

@@ -61,6 +61,8 @@
"date": "Date",
"amount": "Amount",
"result": "Result",
"fileName":"File name",
"count":"N_",
"actions": "",
"state": "Payment status",
"emptyMessage": "No plagiarism checks found.",

1
src/shared/config/i18n/messages/ru.json
View File

@@ -61,6 +61,7 @@
"date": "Дата",
"amount": "Сумма",
"result": "Результат",
"count":"H_",
"actions": "",
"state": "Статус оплаты",
"emptyMessage": "Проверки на плагиат не найдены.",

2
src/shared/config/i18n/messages/uz.d.json.ts
View File

@@ -61,6 +61,8 @@ declare const messages: {
description: 'Siz tomonidan yuborilgan barcha plagiat tekshiruvlari';
sender: 'Yuboruvchi';
file: 'Fayl';
fileName: 'Fayl nomi';
count: 'N_';
date: 'Sana';
amount: 'Summa';
result: 'Natija';

2
src/shared/config/i18n/messages/uz.json
View File

@@ -58,6 +58,8 @@
"description": "Siz tomonidan yuborilgan barcha plagiat tekshiruvlari",
"sender": "Yuboruvchi",
"file": "Fayl",
"fileName":"Fayl nomi",
"count":"N_",
"date": "Sana",
"amount": "Summa",
"result": "Natija",

7
src/widgets/cabinet/ui/Sidebar.tsx
View File

@@ -134,13 +134,6 @@ export const Sidebar: React.FC<SidebarProps> = ({
);
})}
</nav>
{/* Footer */}
<div className="px-4 py-4 border-t border-slate-100">
<p className="text-[11px] text-slate-400 text-center">
© 2026 Plagat.uz
</p>
</div>
</aside>
</>
);

10
src/widgets/cabinet/ui/index.tsx
View File

@@ -6,13 +6,7 @@ import { Sidebar } from './Sidebar';
import { CabinetNav } from './CabinetNav';
import { Dashboard } from './dashboard';
import { useCabinet } from '../lib/hooks/useCabinet';
import {
MOCK_USER,
MOCK_STATS,
MOCK_PLAGIAT,
MOCK_SI,
MOCK_PAYMENTS,
} from '../lib/mock';
import { MOCK_USER, MOCK_STATS, MOCK_SI, MOCK_PAYMENTS } from '../lib/mock';
import type { CabinetSection } from '../lib/types';
// ─── Lazy sections (separate JS chunks) ───────────────────────────────────────
@@ -53,7 +47,7 @@ function SectionContent({ section }: { section: CabinetSection }) {
case 'dashboard':
return <Dashboard stats={MOCK_STATS} userName={MOCK_USER.name} />;
case 'plagiat':
return <PlagiatTable data={MOCK_PLAGIAT} />;
return <PlagiatTable />;
case 'si':
return <SiTable data={MOCK_SI} />;
case 'payments':

128
src/widgets/cabinet/ui/tables/PlagiatTable.tsx
View File

@@ -1,128 +1,6 @@
import React from 'react';
import { Download, Clock, CheckCircle, XCircle } from 'lucide-react';
import type { PlagiatCheck } from '../../lib/types';
import { HistoryPage } from '@/widgets/history';
// ─── Helpers ───────────────────────────────────────────────────────────────────
const STATUS_MAP = {
completed: {
label: 'Yakunlandi',
icon: CheckCircle,
cls: 'text-emerald-600 bg-emerald-50',
},
pending: {
label: 'Kutilmoqda',
icon: Clock,
cls: 'text-amber-600 bg-amber-50',
},
failed: { label: 'Xato', icon: XCircle, cls: 'text-red-600 bg-red-50' },
} as const;
const PercentBadge: React.FC<{ value: number }> = ({ value }) => {
const cls =
value < 15
? 'text-emerald-700 bg-emerald-50'
: value < 30
? 'text-amber-700 bg-amber-50'
: 'text-red-700 bg-red-50';
return (
<span
className={`inline-block px-2 py-0.5 rounded-md text-xs font-semibold ${cls}`}
>
{value}%
</span>
);
export const PlagiatTable = () => {
return <HistoryPage />;
};
// ─── Component ─────────────────────────────────────────────────────────────────
interface PlagiatTableProps {
data: PlagiatCheck[];
}
export const PlagiatTable: React.FC<PlagiatTableProps> = ({ data }) => (
<div className="space-y-4">
<div>
<h2 className="text-xl font-bold text-slate-900">Plagiat tekshiruvlar</h2>
<p className="text-sm text-slate-500 mt-0.5">
{data.length} ta tekshiruv
</p>
</div>
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="bg-slate-50 border-b border-slate-100">
{['#', 'Fayl', 'Turi', '%', 'Sana', 'Holat', 'Yuklab olish'].map(
(h) => (
<th
key={h}
className="text-left px-5 py-3 text-[11px] font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap last:text-center"
>
{h}
</th>
),
)}
</tr>
</thead>
<tbody className="divide-y divide-slate-50">
{data.map((row) => {
const s = STATUS_MAP[row.status];
const Icon = s.icon;
return (
<tr
key={row.id}
className="hover:bg-slate-50/60 transition-colors"
>
<td className="px-5 py-3.5 text-slate-400 font-mono text-xs">
{String(row.id).padStart(2, '0')}
</td>
<td className="px-5 py-3.5">
<span className="text-slate-800 font-medium max-w-[150px] truncate block">
{row.file}
</span>
</td>
<td className="px-5 py-3.5 text-slate-500 whitespace-nowrap">
{row.type}
</td>
<td className="px-5 py-3.5">
{row.status === 'pending' ? (
<span className="text-slate-300 text-xs">—</span>
) : (
<PercentBadge value={row.percent} />
)}
</td>
<td className="px-5 py-3.5 text-slate-500 whitespace-nowrap">
{row.date}
</td>
<td className="px-5 py-3.5">
<span
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${s.cls}`}
>
<Icon size={12} />
{s.label}
</span>
</td>
<td className="px-5 py-3.5 text-center">
{row.downloadUrl ? (
<a
href={row.downloadUrl}
className="inline-flex items-center justify-center w-8 h-8 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
aria-label="Yuklab olish"
>
<Download size={15} />
</a>
) : (
<span className="text-slate-200 text-xs">—</span>
)}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
);

5
src/widgets/history/lib/constants.ts
View File

@@ -3,8 +3,9 @@
import { CheckResult } from './types';
export const TABLE_COLUMNS = [
{ key: 'senderFullName', labelKey: 'sender' },
{ key: 'fileName', labelKey: 'file' },
{ key: 'id', labelKey: 'count' },
{ key: 'fileName', labelKey: 'fileName' },
{ key: 'file', labelKey: 'file' },
{ key: 'date', labelKey: 'date' },
{ key: 'state', labelKey: 'state' },
{ key: 'actions', labelKey: 'actions' },

2
src/widgets/history/ui/historyTable.tsx
View File

@@ -72,7 +72,7 @@ const TableBody: React.FC<HistoryTableFullProps> = ({
return (
<tbody>
{items.map((item) => (
<HistoryTableRow key={item.id} item={item} />
<HistoryTableRow key={item.id} index={item.id} item={item} />
))}
</tbody>
);

183
src/widgets/history/ui/historyTableRow.tsx
View File

@@ -1,158 +1,132 @@
'use client';
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import { useTranslations } from 'next-intl';
import { ArrowRight, Download } from 'lucide-react';
import { HistoryTableRowProps } from '../lib/types';
import { formatDate } from '../lib/utils';
import { useRouter } from '@/shared/config/i18n/navigation';
import { useUserPlagiatStore } from '@/shared/zustand/user';
import PaymentStatus from '@/widgets/detail/paidStatus';
import { useMutation } from '@tanstack/react-query';
import { apiRequest } from '@/shared/request/apiRequest';
import { links } from '@/shared/request/links';
import { toast } from 'react-toastify';
import { PaymentModal } from '@/features/modals/paymentModal/ui/Paymentmodal';
export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
// ─── State badge ───────────────────────────────────────────────────────────────
const StateBadge: React.FC<{ state: 'paid' | 'unpaid' }> = ({ state }) => {
const isPaid = state === 'paid';
return (
<span
className={[
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold whitespace-nowrap select-none',
isPaid ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-600',
].join(' ')}
>
<span
className={[
'w-1.5 h-1.5 rounded-full shrink-0',
isPaid ? 'bg-emerald-500' : 'bg-rose-500',
].join(' ')}
/>
{isPaid ? "To'langan" : "To'lanmagan"}
</span>
);
};
// ─── Row ───────────────────────────────────────────────────────────────────────
export const HistoryTableRow: React.FC<
HistoryTableRowProps & { index: number }
> = ({ item, index }) => {
const router = useRouter();
const t = useTranslations('HistoryPage');
const tPay = useTranslations('Payment');
const tUnknown = useTranslations();
const user = useUserPlagiatStore((state) => state.user);
const [isPaymentOpen, setIsPaymentOpen] = useState(false);
const [localUser, setLocalUser] = useState<{
id: number;
name: string;
surname: string;
} | null>(null);
useEffect(() => {
const data = localStorage.getItem('user');
if (data) {
setLocalUser(JSON.parse(data));
} else {
setLocalUser(null);
}
}, [user]);
const userName = localUser
? `${localUser.name} ${localUser.surname}`
: tUnknown('unknownUser');
const payment = useMutation({
mutationKey: ['payload'],
mutationKey: ['payment', item.order_id],
mutationFn: ({ order_id }: { order_id: number }) =>
apiRequest<{ payment_link: string }>('POST', links.payment(order_id)),
onSuccess: (res) => {
console.log('payment res: ', res);
window.open(res.data.payment_link, '_self');
//route.push(`/${document_id}`);
setIsPaymentOpen(false);
},
onError: (err) => {
const message =
err instanceof Error ? err.message : 'An unexpected error occurred.';
toast.error(message);
toast.error(err instanceof Error ? err.message : 'Xatolik yuz berdi');
setIsPaymentOpen(false);
},
});
const handleSubmit = ({ document_id }: { document_id: number }) => {
payment.mutate({ order_id: document_id });
const price = item.price_calculation ?? {
service_fee: 41200,
discount: 0,
total_price: 41200,
currency: 'UZS',
};
return (
<>
<tr className="border-b border-slate-100 hover:bg-slate-50/70 transition-colors duration-100 group">
{/* Sender */}
<td className="px-4 py-3.5">
<span className="text-sm font-medium text-slate-800 whitespace-nowrap">
{userName}
<tr className="hover:bg-slate-50/60 transition-colors">
{/* # */}
<td className="px-5 py-3.5 text-slate-400 font-mono text-xs">
{String(index).padStart(2, '0')}
</td>
{/* Sarlavha */}
<td className="px-5 py-3.5">
<span className="text-slate-800 font-medium max-w-45 truncate block text-sm">
{item.title || '—'}
</span>
</td>
{/* File Name */}
<td className="px-4 py-3.5">
{/* Fayl */}
<td className="px-5 py-3.5">
{item.file ? (
<a
href={item.file}
target="_blank"
className="flex items-center gap-2 underline"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 text-slate-500 hover:text-blue-600 transition-colors"
aria-label={tUnknown('file')}
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
className="text-slate-400 shrink-0"
>
<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span
className="text-sm text-slate-600 font-mono"
title={item.file}
>
{tUnknown('file')}
</span>
<Download size={14} />
<span className="text-xs font-medium">{tUnknown('file')}</span>
</a>
) : (
<span className="text-slate-200 text-xs">—</span>
)}
</td>
{/* Date */}
<td className="px-4 py-3.5">
<span className="text-sm text-slate-500 whitespace-nowrap">
{/* Sana */}
<td className="px-5 py-3.5 text-slate-500 text-sm whitespace-nowrap">
{formatDate(item.created_at)}
</span>
</td>
{/* State */}
<td className="px-4 py-3.5">
{/* Holat */}
<td className="px-5 py-3.5">
<span
onClick={() => {
if (item.state === 'unpaid') {
setIsPaymentOpen(true);
}
if (item.state === 'unpaid') setIsPaymentOpen(true);
}}
className="text-sm font-medium text-slate-700 whitespace-nowrap tabular-nums"
className={item.state === 'unpaid' ? 'cursor-pointer' : ''}
>
<PaymentStatus status={item.state} />
<StateBadge state={item.state} />
</span>
</td>
{/* View Button */}
<td className="px-4 py-3.5 text-right">
{/* Amal */}
<td className="px-5 py-3.5 text-right">
<button
onClick={() => {
if (item.state === 'paid') {
router.push(`/${item.id}`);
if (item.state === 'unpaid') {
toast.error("To'lov qilinmagan");
} else {
toast.error(tPay('paymentRequired'));
router.push(`/${item.id}`);
}
}}
aria-label={t('viewDetails', { sender: item.title })}
className="
inline-flex items-center gap-1.5 px-3 py-1.5
text-xs font-medium text-slate-600
bg-white border border-slate-200 rounded-lg
hover:border-slate-300 hover:text-slate-900 hover:bg-slate-50
active:scale-95
transition-all duration-150
focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-300
"
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-slate-600 bg-white border border-slate-200 hover:border-slate-300 hover:text-slate-900 hover:bg-slate-50 active:scale-95 transition-all duration-150"
>
{t('view')}
<svg
width="11"
height="11"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
Ko&apos;rish
<ArrowRight size={11} />
</button>
</td>
</tr>
@@ -160,15 +134,10 @@ export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
<PaymentModal
isOpen={isPaymentOpen}
onClose={() => setIsPaymentOpen(false)}
price={{
service_fee: 41200,
discount: 5200,
total_price: 36000,
currency: 'UZS',
}}
onConfirmPayment={() => {
handleSubmit({ document_id: Number(item.order_id) });
}}
price={price}
onConfirmPayment={() =>
payment.mutate({ order_id: Number(item.order_id) })
}
isLoading={payment.isPending}
/>
</>