cabinet plagiet connected to backend

src/shared/config/i18n/messages/en.json

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

src/shared/config/i18n/messages/ru.json

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

src/shared/config/i18n/messages/uz.d.json.ts

@@ -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';

src/shared/config/i18n/messages/uz.json

@@ -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",

src/widgets/cabinet/ui/Sidebar.tsx

@@ -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>
   </>
 );

src/widgets/cabinet/ui/index.tsx

@@ -6,13 +6,7 @@ import { Sidebar } from './Sidebar';
 import { CabinetNav } from './CabinetNav';
 import { Dashboard } from './dashboard';
 import { useCabinet } from '../lib/hooks/useCabinet';
-import {
+import { MOCK_USER, MOCK_STATS, MOCK_SI, MOCK_PAYMENTS } from '../lib/mock';
-  MOCK_USER,
-  MOCK_STATS,
-  MOCK_PLAGIAT,
-  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':

src/widgets/cabinet/ui/tables/PlagiatTable.tsx

@@ -1,128 +1,6 @@
 import React from 'react';
-import { Download, Clock, CheckCircle, XCircle } from 'lucide-react';
+import { HistoryPage } from '@/widgets/history';
-import type { PlagiatCheck } from '../../lib/types';
 
-// ─── Helpers ───────────────────────────────────────────────────────────────────
+export const PlagiatTable = () => {
-
+  return <HistoryPage />;
-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>
-  );
 };
-
-// ─── 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>
-);

src/widgets/history/lib/constants.ts

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

src/widgets/history/ui/historyTable.tsx

@@ -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>
   );

src/widgets/history/ui/historyTableRow.tsx

@@ -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 =
+      toast.error(err instanceof Error ? err.message : 'Xatolik yuz berdi');
-        err instanceof Error ? err.message : 'An unexpected error occurred.';
-      toast.error(message);
       setIsPaymentOpen(false);
     },
   });
 
-  const handleSubmit = ({ document_id }: { document_id: number }) => {
+  const price = item.price_calculation ?? {
-    payment.mutate({ order_id: document_id });
+    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">
+      <tr className="hover:bg-slate-50/60 transition-colors">
-        {/* Sender */}
+        {/* # */}
-        <td className="px-4 py-3.5">
+        <td className="px-5 py-3.5 text-slate-400 font-mono text-xs">
-          <span className="text-sm font-medium text-slate-800 whitespace-nowrap">
+          {String(index).padStart(2, '0')}
-            {userName}
+        </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 */}
+        {/* Fayl */}
-        <td className="px-4 py-3.5">
+        <td className="px-5 py-3.5">
-          <a
+          {item.file ? (
-            href={item.file}
+            <a
-            target="_blank"
+              href={item.file}
-            className="flex items-center gap-2 underline"
+              target="_blank"
-          >
+              rel="noopener noreferrer"
-            <svg
+              className="inline-flex items-center gap-1.5 text-slate-500 hover:text-blue-600 transition-colors"
-              width="14"
+              aria-label={tUnknown('file')}
-              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" />
+              <Download size={14} />
-            </svg>
+              <span className="text-xs font-medium">{tUnknown('file')}</span>
-            <span
+            </a>
-              className="text-sm text-slate-600 font-mono"
+          ) : (
-              title={item.file}
+            <span className="text-slate-200 text-xs">—</span>
-            >
+          )}
-              {tUnknown('file')}
-            </span>
-          </a>
         </td>
 
-        {/* Date */}
+        {/* Sana */}
-        <td className="px-4 py-3.5">
+        <td className="px-5 py-3.5 text-slate-500 text-sm whitespace-nowrap">
-          <span className="text-sm text-slate-500 whitespace-nowrap">
+          {formatDate(item.created_at)}
-            {formatDate(item.created_at)}
-          </span>
         </td>
 
-        {/* State */}
+        {/* Holat */}
-        <td className="px-4 py-3.5">
+        <td className="px-5 py-3.5">
           <span
             onClick={() => {
-              if (item.state === 'unpaid') {
+              if (item.state === 'unpaid') setIsPaymentOpen(true);
-                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 */}
+        {/* Amal */}
-        <td className="px-4 py-3.5 text-right">
+        <td className="px-5 py-3.5 text-right">
           <button
             onClick={() => {
-              if (item.state === 'paid') {
+              if (item.state === 'unpaid') {
-                router.push(`/${item.id}`);
+                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 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"
-            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
-          "
           >
-            {t('view')}
+            Ko&apos;rish
-            <svg
+            <ArrowRight size={11} />
-              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>
           </button>
         </td>
       </tr>
@@ -160,15 +134,10 @@ export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
       <PaymentModal
         isOpen={isPaymentOpen}
         onClose={() => setIsPaymentOpen(false)}
-        price={{
+        price={price}
-          service_fee: 41200,
+        onConfirmPayment={() =>
-          discount: 5200,
+          payment.mutate({ order_id: Number(item.order_id) })
-          total_price: 36000,
+        }
-          currency: 'UZS',
-        }}
-        onConfirmPayment={() => {
-          handleSubmit({ document_id: Number(item.order_id) });
-        }}
         isLoading={payment.isPending}
       />
     </>