cabinet plagiet connected to backend
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -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">
|
||||
<a
|
||||
href={item.file}
|
||||
target="_blank"
|
||||
className="flex items-center gap-2 underline"
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.75"
|
||||
className="text-slate-400 shrink-0"
|
||||
{/* Fayl */}
|
||||
<td className="px-5 py-3.5">
|
||||
{item.file ? (
|
||||
<a
|
||||
href={item.file}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 text-slate-500 hover:text-blue-600 transition-colors"
|
||||
aria-label={tUnknown('file')}
|
||||
>
|
||||
<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>
|
||||
</a>
|
||||
<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">
|
||||
{formatDate(item.created_at)}
|
||||
</span>
|
||||
{/* Sana */}
|
||||
<td className="px-5 py-3.5 text-slate-500 text-sm whitespace-nowrap">
|
||||
{formatDate(item.created_at)}
|
||||
</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'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}
|
||||
/>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user