detail page done
This commit is contained in:
nabijonovdavronbek619@gmail.com
45
src/widgets/history/index.ts
Normal file
45
src/widgets/history/index.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
// Pages
|
||||
export { HistoryPage } from './ui/historyPage';
|
||||
|
||||
// Components
|
||||
export { HistoryTable } from './ui/historyTable';
|
||||
export { HistoryTableRow } from './ui/historyTableRow';
|
||||
export { ResultBadge } from './ui/resultBadge';
|
||||
export { Pagination } from './ui/pagination';
|
||||
export { EmptyState, SkeletonRow, ErrorState } from './ui/tableStates';
|
||||
|
||||
// Hook
|
||||
export { useHistory } from './lib/useHistory';
|
||||
|
||||
// Utils
|
||||
export {
|
||||
fetchPlagiarismHistory,
|
||||
fetchPlagiarismDetail,
|
||||
formatDate,
|
||||
formatAmount,
|
||||
truncateFileName,
|
||||
} from './lib/utils';
|
||||
|
||||
// Types
|
||||
export type {
|
||||
PlagiarismCheck,
|
||||
PlagiarismCheckDetail,
|
||||
CheckResult,
|
||||
HistoryApiResponse,
|
||||
HistoryTableProps,
|
||||
HistoryTableRowProps,
|
||||
ResultBadgeProps,
|
||||
FetchStatus,
|
||||
HistoryState,
|
||||
} from './lib/types';
|
||||
|
||||
// Constants
|
||||
export {
|
||||
TABLE_COLUMNS,
|
||||
RESULT_CONFIG,
|
||||
DEFAULT_PAGE_SIZE,
|
||||
API_ENDPOINTS,
|
||||
} from './lib/constants';
|
||||
|
||||
// Mock (for development/testing)
|
||||
export { DEFAULT_HISTORY_ITEMS } from './lib/mock';
|
||||
@@ -1,22 +0,0 @@
|
||||
// ─── Pricing Constants ─────────────────────────────────────────────────────────
|
||||
|
||||
export const PRICING = {
|
||||
SERVICE_FEE: 45_000,
|
||||
CERTIFICATE_FEE: 15_000,
|
||||
CURRENCY: 'UZS',
|
||||
// Payme works in tiyin (1 UZS = 100 tiyin)
|
||||
TIYIN_MULTIPLIER: 100,
|
||||
} as const;
|
||||
|
||||
// ─── Payme Config ──────────────────────────────────────────────────────────────
|
||||
|
||||
export const PAYME_CONFIG = {
|
||||
MERCHANT_ID: process.env.NEXT_PUBLIC_PAYME_MERCHANT_ID ?? 'your_merchant_id',
|
||||
BASE_URL: 'https://checkout.paycom.uz',
|
||||
// In development, point to your own backend
|
||||
API_ENDPOINT: '/api/payments/payme/create',
|
||||
RETURN_URL:
|
||||
typeof window !== 'undefined'
|
||||
? `${window.location.origin}/payment/success`
|
||||
: 'https://yourapp.uz/payment/success',
|
||||
} as const;
|
||||
47
src/widgets/history/lib/constants.ts
Normal file
47
src/widgets/history/lib/constants.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
// ─── Table Columns ─────────────────────────────────────────────────────────────
|
||||
|
||||
import { CheckResult } from './types';
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{ key: 'senderFullName', label: 'Sender' },
|
||||
{ key: 'fileName', label: 'File' },
|
||||
{ key: 'date', label: 'Date' },
|
||||
{ key: 'paymentAmount', label: 'Amount' },
|
||||
{ key: 'result', label: 'Result' },
|
||||
{ key: 'actions', label: '' },
|
||||
] as const;
|
||||
|
||||
// ─── Result Labels & Styles ────────────────────────────────────────────────────
|
||||
|
||||
export const RESULT_CONFIG: Record<
|
||||
CheckResult,
|
||||
{ label: string; className: string }
|
||||
> = {
|
||||
clean: {
|
||||
label: 'Clean',
|
||||
className: 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200',
|
||||
},
|
||||
plagiarism_found: {
|
||||
label: 'Plagiarism Found',
|
||||
className: 'bg-red-50 text-red-700 ring-1 ring-red-200',
|
||||
},
|
||||
pending: {
|
||||
label: 'Pending',
|
||||
className: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200',
|
||||
},
|
||||
failed: {
|
||||
label: 'Failed',
|
||||
className: 'bg-slate-100 text-slate-500 ring-1 ring-slate-200',
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Pagination ────────────────────────────────────────────────────────────────
|
||||
|
||||
export const DEFAULT_PAGE_SIZE = 10;
|
||||
|
||||
// ─── API ───────────────────────────────────────────────────────────────────────
|
||||
|
||||
export const API_ENDPOINTS = {
|
||||
HISTORY: '/api/plagiarism/history',
|
||||
DETAIL: (id: string) => `/api/plagiarism/${id}`,
|
||||
} as const;
|
||||
71
src/widgets/history/lib/mock.ts
Normal file
71
src/widgets/history/lib/mock.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { PlagiarismCheck } from './types';
|
||||
|
||||
/**
|
||||
* Default mock items used to preview the history table design.
|
||||
* Replace with real API data in production via useHistory() hook.
|
||||
*/
|
||||
export const DEFAULT_HISTORY_ITEMS: PlagiarismCheck[] = [
|
||||
{
|
||||
id: '1',
|
||||
senderFullName: 'Alijon Toshmatov',
|
||||
fileName: 'thesis-final-v3.pdf',
|
||||
date: '2024-03-15T10:30:00Z',
|
||||
paymentAmount: 45000,
|
||||
currency: 'UZS',
|
||||
result: 'clean',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
senderFullName: 'Malika Yusupova',
|
||||
fileName: 'research-paper-2024.docx',
|
||||
date: '2024-03-14T09:15:00Z',
|
||||
paymentAmount: 60000,
|
||||
currency: 'UZS',
|
||||
result: 'plagiarism_found',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
senderFullName: 'Bobur Rahimov',
|
||||
fileName: 'coursework-economics.pdf',
|
||||
date: '2024-03-13T14:45:00Z',
|
||||
paymentAmount: 45000,
|
||||
currency: 'UZS',
|
||||
result: 'pending',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
senderFullName: 'Zulfiya Nazarova',
|
||||
fileName: 'dissertation-chapter1.pdf',
|
||||
date: '2024-03-12T11:20:00Z',
|
||||
paymentAmount: 60000,
|
||||
currency: 'UZS',
|
||||
result: 'clean',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
senderFullName: 'Jasur Mirzayev',
|
||||
fileName: 'lab-report-chemistry.docx',
|
||||
date: '2024-03-11T16:10:00Z',
|
||||
paymentAmount: 45000,
|
||||
currency: 'UZS',
|
||||
result: 'failed',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
senderFullName: 'Nilufar Karimova',
|
||||
fileName: 'bachelor-thesis-law.pdf',
|
||||
date: '2024-03-10T08:55:00Z',
|
||||
paymentAmount: 60000,
|
||||
currency: 'UZS',
|
||||
result: 'plagiarism_found',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
senderFullName: 'Dilnoza Ergasheva',
|
||||
fileName: 'essay-history-uzbekistan.pdf',
|
||||
date: '2024-03-09T13:40:00Z',
|
||||
paymentAmount: 45000,
|
||||
currency: 'UZS',
|
||||
result: 'clean',
|
||||
},
|
||||
];
|
||||
@@ -1,48 +1,62 @@
|
||||
// ─── Domain Types ──────────────────────────────────────────────────────────────
|
||||
|
||||
export interface ServicePricing {
|
||||
serviceFee: number;
|
||||
certificateFee: number;
|
||||
export type CheckResult = 'clean' | 'plagiarism_found' | 'pending' | 'failed';
|
||||
|
||||
export interface PlagiarismCheck {
|
||||
id: string;
|
||||
senderFullName: string;
|
||||
fileName: string;
|
||||
date: string; // ISO 8601
|
||||
paymentAmount: number;
|
||||
currency: string;
|
||||
result: CheckResult;
|
||||
}
|
||||
|
||||
export interface OrderSummary {
|
||||
hasCertificate: boolean;
|
||||
pricing: ServicePricing;
|
||||
export interface PlagiarismCheckDetail extends PlagiarismCheck {
|
||||
topic: string;
|
||||
plagiarismPercentage?: number;
|
||||
reportUrl?: string;
|
||||
withCertificate: boolean;
|
||||
}
|
||||
|
||||
export interface PaymePaymentRequest {
|
||||
amount: number; // in tiyin (1 UZS = 100 tiyin)
|
||||
orderId: string;
|
||||
description: string;
|
||||
returnUrl: string;
|
||||
}
|
||||
// ─── API Response Types ────────────────────────────────────────────────────────
|
||||
|
||||
export interface PaymePaymentResponse {
|
||||
redirectUrl: string;
|
||||
transactionId: string;
|
||||
export interface HistoryApiResponse {
|
||||
items: PlagiarismCheck[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
export type PaymentStatus = 'idle' | 'loading' | 'success' | 'error';
|
||||
|
||||
// ─── Component Props ───────────────────────────────────────────────────────────
|
||||
|
||||
export interface PaymentModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
hasCertificate: boolean;
|
||||
onConfirmPayment: () => void;
|
||||
export interface HistoryTableProps {
|
||||
items: PlagiarismCheck[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export interface PriceSummaryProps {
|
||||
hasCertificate: boolean;
|
||||
pricing: ServicePricing;
|
||||
export interface HistoryTableRowProps {
|
||||
item: PlagiarismCheck;
|
||||
}
|
||||
|
||||
export interface PaymeButtonProps {
|
||||
amount: number;
|
||||
orderId: string;
|
||||
onSuccess?: (response: PaymePaymentResponse) => void;
|
||||
onError?: (error: Error) => void;
|
||||
export interface ResultBadgeProps {
|
||||
result: CheckResult;
|
||||
}
|
||||
|
||||
export interface EmptyStateProps {
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export interface SkeletonRowProps {
|
||||
columns: number;
|
||||
}
|
||||
|
||||
// ─── State Types ───────────────────────────────────────────────────────────────
|
||||
|
||||
export type FetchStatus = 'idle' | 'loading' | 'success' | 'error';
|
||||
|
||||
export interface HistoryState {
|
||||
items: PlagiarismCheck[];
|
||||
status: FetchStatus;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
53
src/widgets/history/lib/useHistory.ts
Normal file
53
src/widgets/history/lib/useHistory.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
'use client';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { DEFAULT_PAGE_SIZE } from './constants';
|
||||
import { HistoryState } from './types';
|
||||
import { DEFAULT_HISTORY_ITEMS } from './mock';
|
||||
|
||||
interface UseHistoryReturn extends HistoryState {
|
||||
refetch: () => void;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
goToPage: (page: number) => void;
|
||||
}
|
||||
|
||||
export const useHistory = (pageSize = DEFAULT_PAGE_SIZE): UseHistoryReturn => {
|
||||
const [state, setState] = useState<HistoryState>({
|
||||
items: DEFAULT_HISTORY_ITEMS,
|
||||
status: 'idle',
|
||||
error: null,
|
||||
});
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
const loadHistory = useCallback(
|
||||
async (page: number) => {
|
||||
setState((prev) => ({ ...prev, status: 'loading', error: null }));
|
||||
setTotal(0);
|
||||
console.log(page);
|
||||
},
|
||||
[pageSize],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
loadHistory(currentPage);
|
||||
}, [currentPage, loadHistory]);
|
||||
|
||||
const goToPage = useCallback((page: number) => {
|
||||
setCurrentPage(page);
|
||||
}, []);
|
||||
|
||||
const refetch = useCallback(() => {
|
||||
loadHistory(currentPage);
|
||||
}, [currentPage, loadHistory]);
|
||||
|
||||
const totalPages = Math.ceil(total / pageSize);
|
||||
|
||||
return {
|
||||
...state,
|
||||
refetch,
|
||||
currentPage,
|
||||
totalPages,
|
||||
goToPage,
|
||||
};
|
||||
};
|
||||
@@ -1,70 +0,0 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { PaymentStatus, PaymePaymentResponse } from './types';
|
||||
import {
|
||||
calculateTotal,
|
||||
createPaymePayment,
|
||||
generateOrderId,
|
||||
redirectToPayme,
|
||||
toTiyin,
|
||||
} from './utils';
|
||||
import { PAYME_CONFIG } from './constant';
|
||||
|
||||
interface UsePaymentOptions {
|
||||
hasCertificate: boolean;
|
||||
onSuccess?: (response: PaymePaymentResponse) => void;
|
||||
onError?: (error: Error) => void;
|
||||
}
|
||||
|
||||
interface UsePaymentReturn {
|
||||
status: PaymentStatus;
|
||||
error: string | null;
|
||||
totalAmount: number;
|
||||
handlePaymePayment: () => Promise<void>;
|
||||
resetError: () => void;
|
||||
}
|
||||
|
||||
export const usePayment = ({
|
||||
hasCertificate,
|
||||
onSuccess,
|
||||
onError,
|
||||
}: UsePaymentOptions): UsePaymentReturn => {
|
||||
const [status, setStatus] = useState<PaymentStatus>('idle');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const totalAmount = calculateTotal(hasCertificate);
|
||||
|
||||
const handlePaymePayment = useCallback(async () => {
|
||||
setStatus('loading');
|
||||
setError(null);
|
||||
|
||||
const orderId = generateOrderId();
|
||||
|
||||
try {
|
||||
const response = await createPaymePayment({
|
||||
amount: toTiyin(totalAmount),
|
||||
orderId,
|
||||
description: `Service fee${hasCertificate ? ' + Certificate' : ''}`,
|
||||
returnUrl: PAYME_CONFIG.RETURN_URL,
|
||||
});
|
||||
|
||||
setStatus('success');
|
||||
onSuccess?.(response);
|
||||
redirectToPayme(response.redirectUrl);
|
||||
} catch (err) {
|
||||
const paymentError =
|
||||
err instanceof Error
|
||||
? err
|
||||
: new Error('Payment failed. Please try again.');
|
||||
setStatus('error');
|
||||
setError(paymentError.message);
|
||||
onError?.(paymentError);
|
||||
}
|
||||
}, [totalAmount, hasCertificate, onSuccess, onError]);
|
||||
|
||||
const resetError = useCallback(() => {
|
||||
setError(null);
|
||||
setStatus('idle');
|
||||
}, []);
|
||||
|
||||
return { status, error, totalAmount, handlePaymePayment, resetError };
|
||||
};
|
||||
@@ -1,71 +1,73 @@
|
||||
// ─── Pricing Utilities ─────────────────────────────────────────────────────────
|
||||
// ─── API Functions ─────────────────────────────────────────────────────────────
|
||||
|
||||
import { PAYME_CONFIG, PRICING } from './constant';
|
||||
import {
|
||||
PaymePaymentRequest,
|
||||
PaymePaymentResponse,
|
||||
ServicePricing,
|
||||
} from './types';
|
||||
|
||||
export const getPricing = (): ServicePricing => ({
|
||||
serviceFee: PRICING.SERVICE_FEE,
|
||||
certificateFee: PRICING.CERTIFICATE_FEE,
|
||||
currency: PRICING.CURRENCY,
|
||||
});
|
||||
|
||||
export const calculateTotal = (hasCertificate: boolean): number => {
|
||||
const base = PRICING.SERVICE_FEE;
|
||||
return hasCertificate ? base + PRICING.CERTIFICATE_FEE : base;
|
||||
};
|
||||
|
||||
export const toTiyin = (uzs: number): number => uzs * PRICING.TIYIN_MULTIPLIER;
|
||||
|
||||
export const formatPrice = (amount: number, currency: string): string =>
|
||||
`${amount.toLocaleString('uz-UZ')} ${currency}`;
|
||||
|
||||
// ─── Order ID Generator ────────────────────────────────────────────────────────
|
||||
|
||||
export const generateOrderId = (): string => {
|
||||
const timestamp = Date.now();
|
||||
const random = Math.random().toString(36).slice(2, 8).toUpperCase();
|
||||
return `ORDER-${timestamp}-${random}`;
|
||||
};
|
||||
|
||||
// ─── Payme API ─────────────────────────────────────────────────────────────────
|
||||
import { API_ENDPOINTS } from './constants';
|
||||
import { HistoryApiResponse, PlagiarismCheckDetail } from './types';
|
||||
|
||||
/**
|
||||
* Sends payment details to the backend, which creates a Payme transaction
|
||||
* and returns a redirect URL to the Payme checkout page.
|
||||
* Fetches the paginated list of plagiarism checks for the current user.
|
||||
*/
|
||||
export const createPaymePayment = async (
|
||||
request: PaymePaymentRequest,
|
||||
): Promise<PaymePaymentResponse> => {
|
||||
const response = await fetch(PAYME_CONFIG.API_ENDPOINT, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
amount: request.amount, // in tiyin
|
||||
order_id: request.orderId,
|
||||
description: request.description,
|
||||
return_url: request.returnUrl,
|
||||
}),
|
||||
});
|
||||
export const fetchPlagiarismHistory = async (
|
||||
page = 1,
|
||||
pageSize = 10,
|
||||
): Promise<HistoryApiResponse> => {
|
||||
const url = new URL(API_ENDPOINTS.HISTORY, window.location.origin);
|
||||
url.searchParams.set('page', String(page));
|
||||
url.searchParams.set('pageSize', String(pageSize));
|
||||
|
||||
const response = await fetch(url.toString());
|
||||
|
||||
if (!response.ok) {
|
||||
const errorBody = await response.json().catch(() => ({}));
|
||||
throw new Error(
|
||||
(errorBody as { message?: string }).message ??
|
||||
`Payment request failed with status ${response.status}`,
|
||||
);
|
||||
throw new Error(`Failed to load history (${response.status})`);
|
||||
}
|
||||
|
||||
const data = (await response.json()) as PaymePaymentResponse;
|
||||
return data;
|
||||
return response.json() as Promise<HistoryApiResponse>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Redirects the user to the Payme checkout page.
|
||||
* Fetches the full detail for a single plagiarism check.
|
||||
*/
|
||||
export const redirectToPayme = (redirectUrl: string): void => {
|
||||
window.location.href = redirectUrl;
|
||||
export const fetchPlagiarismDetail = async (
|
||||
id: string,
|
||||
): Promise<PlagiarismCheckDetail> => {
|
||||
const response = await fetch(API_ENDPOINTS.DETAIL(id));
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load record (${response.status})`);
|
||||
}
|
||||
|
||||
return response.json() as Promise<PlagiarismCheckDetail>;
|
||||
};
|
||||
|
||||
// ─── Formatting Utilities ──────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Formats an ISO date string into a human-readable date.
|
||||
* e.g. "2024-03-15T10:30:00Z" → "15 Mar 2024"
|
||||
*/
|
||||
export const formatDate = (iso: string): string => {
|
||||
const date = new Date(iso);
|
||||
if (isNaN(date.getTime())) return '—';
|
||||
return date.toLocaleDateString('en-GB', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Formats a payment amount with currency.
|
||||
* e.g. (45000, "UZS") → "45,000 UZS"
|
||||
*/
|
||||
export const formatAmount = (amount: number, currency: string): string =>
|
||||
`${amount.toLocaleString('uz-UZ')} ${currency}`;
|
||||
|
||||
/**
|
||||
* Truncates a long filename for display.
|
||||
* e.g. "my-very-long-thesis-document.pdf" → "my-very-long-th….pdf"
|
||||
*/
|
||||
export const truncateFileName = (name: string, maxLength = 28): string => {
|
||||
if (name.length <= maxLength) return name;
|
||||
const ext = name.includes('.') ? name.slice(name.lastIndexOf('.')) : '';
|
||||
const base = name.slice(0, maxLength - ext.length - 1);
|
||||
return `${base}…${ext}`;
|
||||
};
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
import React from 'react';
|
||||
import { PaymentStatus } from '../lib/types';
|
||||
|
||||
// ─── Payme Logo SVG ────────────────────────────────────────────────────────────
|
||||
|
||||
const PaymeLogo: React.FC = () => (
|
||||
<svg
|
||||
width="72"
|
||||
height="18"
|
||||
viewBox="0 0 72 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Payme"
|
||||
>
|
||||
<text
|
||||
x="0"
|
||||
y="14"
|
||||
fontFamily="'Arial Black', sans-serif"
|
||||
fontWeight="900"
|
||||
fontSize="16"
|
||||
fill="white"
|
||||
letterSpacing="-0.5"
|
||||
>
|
||||
Payme
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// ─── Spinner ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const Spinner: React.FC = () => (
|
||||
<svg
|
||||
className="animate-spin h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
// ─── PaymeButton ───────────────────────────────────────────────────────────────
|
||||
|
||||
interface PaymeButtonProps {
|
||||
onClick: () => void;
|
||||
status: PaymentStatus;
|
||||
}
|
||||
|
||||
export const PaymeButton: React.FC<PaymeButtonProps> = ({
|
||||
onClick,
|
||||
status,
|
||||
}) => {
|
||||
const isLoading = status === 'loading';
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={isLoading}
|
||||
aria-busy={isLoading}
|
||||
aria-label="Pay with Payme"
|
||||
className={`
|
||||
w-full flex items-center justify-center gap-3
|
||||
rounded-xl px-6 py-4
|
||||
font-semibold text-white text-sm tracking-wide
|
||||
transition-all duration-200 ease-out
|
||||
focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500
|
||||
${
|
||||
isLoading
|
||||
? 'bg-blue-400 cursor-not-allowed opacity-80'
|
||||
: 'bg-[#00AAFF] hover:bg-[#009AEE] active:scale-[0.98] shadow-md hover:shadow-lg'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Spinner />
|
||||
<span>Connecting to Payme…</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PaymeLogo />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -1,207 +0,0 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { PaymentModalProps } from '../lib/types';
|
||||
import { getPricing } from '../lib/utils';
|
||||
import { PriceSummary } from './Pricesummary';
|
||||
import { PaymeButton } from './Paymebutton';
|
||||
|
||||
// ─── Close Button ──────────────────────────────────────────────────────────────
|
||||
|
||||
const CloseButton: React.FC<{ onClick: () => void }> = ({ onClick }) => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
aria-label="Close payment modal"
|
||||
className="
|
||||
absolute top-4 right-4
|
||||
p-2 rounded-lg text-slate-400
|
||||
hover:text-slate-700 hover:bg-slate-100
|
||||
transition-colors duration-150
|
||||
focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-300
|
||||
"
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
|
||||
// ─── Error Banner ──────────────────────────────────────────────────────────────
|
||||
|
||||
// const ErrorBanner: React.FC<{ message: string; onDismiss: () => void }> = ({
|
||||
// message,
|
||||
// onDismiss,
|
||||
// }) => (
|
||||
// <div
|
||||
// role="alert"
|
||||
// className="flex items-start gap-3 rounded-lg bg-red-50 border border-red-200 px-4 py-3"
|
||||
// >
|
||||
// <svg
|
||||
// className="shrink-0 mt-0.5 text-red-500"
|
||||
// width="16"
|
||||
// height="16"
|
||||
// viewBox="0 0 24 24"
|
||||
// fill="currentColor"
|
||||
// >
|
||||
// <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
|
||||
// </svg>
|
||||
// <p className="text-sm text-red-700 flex-1">{message}</p>
|
||||
// <button
|
||||
// onClick={onDismiss}
|
||||
// aria-label="Dismiss error"
|
||||
// className="text-red-400 hover:text-red-600 transition-colors"
|
||||
// >
|
||||
// <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||||
// <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
||||
// </svg>
|
||||
// </button>
|
||||
// </div>
|
||||
// );
|
||||
|
||||
// ─── Security Badge ────────────────────────────────────────────────────────────
|
||||
|
||||
const SecurityBadge: React.FC = () => (
|
||||
<div className="flex items-center justify-center gap-1.5 text-xs text-slate-400">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" />
|
||||
</svg>
|
||||
<span>Secured by Payme · SSL encrypted</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
// ─── PaymentModal ──────────────────────────────────────────────────────────────
|
||||
|
||||
export const PaymentModal: React.FC<PaymentModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
hasCertificate,
|
||||
onConfirmPayment,
|
||||
isLoading,
|
||||
}) => {
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
const pricing = getPricing();
|
||||
const status = isLoading ? 'loading' : 'idle';
|
||||
|
||||
// ── Close on Escape ──────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
// ── Lock body scroll ─────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
// ── Focus trap ───────────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
dialogRef.current?.focus();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
/* Backdrop */
|
||||
<div
|
||||
className="fixed inset-0 z-40 flex items-center justify-center p-4"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
aria-labelledby="payment-modal-title"
|
||||
>
|
||||
{/* Dimmed overlay */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/40 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Modal card */}
|
||||
<div
|
||||
ref={dialogRef}
|
||||
tabIndex={-1}
|
||||
className="
|
||||
relative z-10 w-full max-w-md
|
||||
bg-white rounded-2xl shadow-2xl
|
||||
outline-none
|
||||
animate-in fade-in zoom-in-95 duration-200
|
||||
"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="px-6 pt-6 pb-5 border-b border-slate-100">
|
||||
<CloseButton onClick={onClose} />
|
||||
<div className="pr-8">
|
||||
<h2
|
||||
id="payment-modal-title"
|
||||
className="text-lg font-semibold text-slate-900"
|
||||
>
|
||||
Payment
|
||||
</h2>
|
||||
<p className="mt-0.5 text-sm text-slate-500">
|
||||
Review your order and pay securely
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-6 py-5 space-y-5">
|
||||
{/* Order details */}
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-3">
|
||||
Order Summary
|
||||
</h3>
|
||||
<PriceSummary hasCertificate={hasCertificate} pricing={pricing} />
|
||||
</div>
|
||||
|
||||
{/* Certificate badge */}
|
||||
{hasCertificate && (
|
||||
<div className="flex items-center gap-2 text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3.5 py-2.5">
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className="shrink-0"
|
||||
>
|
||||
<path d="M12 1l2.753 5.527 6.247.907-4.5 4.385 1.063 6.181L12 15.027l-5.563 2.973 1.063-6.181L3 7.434l6.247-.907z" />
|
||||
</svg>
|
||||
<span>Certificate of completion included</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Payment method label */}
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-3">
|
||||
Payment Method
|
||||
</h3>
|
||||
<PaymeButton onClick={onConfirmPayment} status={status} />
|
||||
</div>
|
||||
|
||||
{/* Security note */}
|
||||
<SecurityBadge />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,80 +0,0 @@
|
||||
import React from 'react';
|
||||
import { formatPrice } from '../lib/utils';
|
||||
import { PriceSummaryProps } from '../lib/types';
|
||||
|
||||
// ─── Price Row ─────────────────────────────────────────────────────────────────
|
||||
|
||||
interface PriceRowProps {
|
||||
label: string;
|
||||
amount: number;
|
||||
currency: 'UZS' | string;
|
||||
highlight?: boolean;
|
||||
}
|
||||
|
||||
const PriceRow: React.FC<PriceRowProps> = ({
|
||||
label,
|
||||
amount,
|
||||
currency,
|
||||
highlight,
|
||||
}) => (
|
||||
<div
|
||||
className={`flex items-center justify-between py-3 ${
|
||||
highlight ? 'border-t border-slate-200 mt-1 pt-4' : ''
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
highlight
|
||||
? 'text-base font-semibold text-slate-800'
|
||||
: 'text-sm text-slate-500'
|
||||
}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
highlight
|
||||
? 'text-lg font-bold text-slate-900'
|
||||
: 'text-sm font-medium text-slate-700'
|
||||
}
|
||||
>
|
||||
{formatPrice(amount, currency)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
// ─── Price Summary ─────────────────────────────────────────────────────────────
|
||||
|
||||
export const PriceSummary: React.FC<PriceSummaryProps> = ({
|
||||
hasCertificate,
|
||||
pricing,
|
||||
}) => {
|
||||
const total = hasCertificate
|
||||
? pricing.serviceFee + pricing.certificateFee
|
||||
: pricing.serviceFee;
|
||||
|
||||
return (
|
||||
<div className="rounded-xl bg-slate-50 border border-slate-100 px-5 py-2 space-y-0">
|
||||
<PriceRow
|
||||
label="Service fee"
|
||||
amount={pricing.serviceFee}
|
||||
currency={pricing.currency}
|
||||
/>
|
||||
|
||||
{hasCertificate && (
|
||||
<PriceRow
|
||||
label="Certificate"
|
||||
amount={pricing.certificateFee}
|
||||
currency={pricing.currency}
|
||||
/>
|
||||
)}
|
||||
|
||||
<PriceRow
|
||||
label="Total"
|
||||
amount={total}
|
||||
currency={pricing.currency}
|
||||
highlight
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
46
src/widgets/history/ui/historyPage.tsx
Normal file
46
src/widgets/history/ui/historyPage.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import { useHistory } from '../lib/useHistory';
|
||||
import { HistoryTable } from './historyTable';
|
||||
import { Pagination } from './pagination';
|
||||
|
||||
// ─── Page Header ───────────────────────────────────────────────────────────────
|
||||
|
||||
const PageHeader: React.FC = () => (
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-semibold text-slate-900 tracking-tight">
|
||||
Check History
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
All plagiarism checks submitted by you
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
// ─── HistoryPage ───────────────────────────────────────────────────────────────
|
||||
|
||||
export const HistoryPage = () => {
|
||||
const { items, status, error, refetch, currentPage, totalPages, goToPage } =
|
||||
useHistory();
|
||||
|
||||
return (
|
||||
<div className=" px-4 py-10 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<PageHeader />
|
||||
|
||||
<HistoryTable
|
||||
items={items}
|
||||
isLoading={false}
|
||||
error={status === 'error' ? error : null}
|
||||
onRetry={refetch}
|
||||
/>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={goToPage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
85
src/widgets/history/ui/historyTable.tsx
Normal file
85
src/widgets/history/ui/historyTable.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import { TABLE_COLUMNS } from '../lib/constants';
|
||||
import { EmptyState, ErrorState, SkeletonRow } from './tableStates';
|
||||
import { HistoryTableRow } from './historyTableRow';
|
||||
import { HistoryTableProps } from '../lib/types';
|
||||
|
||||
interface HistoryTableFullProps extends HistoryTableProps {
|
||||
error?: string | null;
|
||||
onRetry?: () => void;
|
||||
}
|
||||
|
||||
// ─── Table Header ──────────────────────────────────────────────────────────────
|
||||
|
||||
const TableHead: React.FC = () => (
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 bg-slate-50/80">
|
||||
{TABLE_COLUMNS.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
scope="col"
|
||||
className={`px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider whitespace-nowrap ${
|
||||
col.key === 'actions' ? 'text-right' : ''
|
||||
}`}
|
||||
>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
|
||||
// ─── Table Body ────────────────────────────────────────────────────────────────
|
||||
|
||||
const TableBody: React.FC<HistoryTableFullProps> = ({
|
||||
items,
|
||||
isLoading,
|
||||
error,
|
||||
onRetry,
|
||||
}) => {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<tbody>
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<SkeletonRow key={i} columns={TABLE_COLUMNS.length} />
|
||||
))}
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
|
||||
if (false) {
|
||||
return (
|
||||
<tbody>
|
||||
<ErrorState message={error} onRetry={onRetry ?? (() => {})} />
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
|
||||
if (false) {
|
||||
return (
|
||||
<tbody>
|
||||
<EmptyState />
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<tbody>
|
||||
{items.map((item) => (
|
||||
<HistoryTableRow key={item.id} item={item} />
|
||||
))}
|
||||
</tbody>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── HistoryTable ──────────────────────────────────────────────────────────────
|
||||
|
||||
export const HistoryTable: React.FC<HistoryTableFullProps> = (props) => (
|
||||
<div className="w-full overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm">
|
||||
<table className="w-full min-w-160 border-collapse text-left">
|
||||
<TableHead />
|
||||
<TableBody {...props} />
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
93
src/widgets/history/ui/historyTableRow.tsx
Normal file
93
src/widgets/history/ui/historyTableRow.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import { HistoryTableRowProps } from '../lib/types';
|
||||
import { formatDate, truncateFileName } from '../lib/utils';
|
||||
import { ResultBadge } from './resultBadge';
|
||||
import { useRouter } from '@/shared/config/i18n/navigation';
|
||||
|
||||
export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
|
||||
const router = useRouter();
|
||||
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">
|
||||
{item.senderFullName}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* File Name */}
|
||||
<td className="px-4 py-3.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<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.fileName}
|
||||
>
|
||||
{truncateFileName(item.fileName)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Date */}
|
||||
<td className="px-4 py-3.5">
|
||||
<span className="text-sm text-slate-500 whitespace-nowrap">
|
||||
{formatDate(item.date)}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Amount */}
|
||||
<td className="px-4 py-3.5">
|
||||
<span className="text-sm font-medium text-slate-700 whitespace-nowrap tabular-nums">
|
||||
{item.paymentAmount}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Result */}
|
||||
<td className="px-4 py-3.5">
|
||||
<ResultBadge result={item.result} />
|
||||
</td>
|
||||
|
||||
{/* View Button */}
|
||||
<td className="px-4 py-3.5 text-right">
|
||||
<button
|
||||
onClick={() => router.push(`/${item.id}`)}
|
||||
aria-label={`View details for ${item.senderFullName}`}
|
||||
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
|
||||
"
|
||||
>
|
||||
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>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
115
src/widgets/history/ui/pagination.tsx
Normal file
115
src/widgets/history/ui/pagination.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
|
||||
interface PaginationProps {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPageChange: (page: number) => void;
|
||||
}
|
||||
|
||||
const ChevronIcon: React.FC<{ direction: 'left' | 'right' }> = ({
|
||||
direction,
|
||||
}) => (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
{direction === 'left' ? (
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
) : (
|
||||
<path d="M9 18l6-6-6-6" />
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Pagination: React.FC<PaginationProps> = ({
|
||||
currentPage,
|
||||
totalPages,
|
||||
onPageChange,
|
||||
}) => {
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
// Build visible page numbers with ellipsis
|
||||
const getPages = (): (number | '…')[] => {
|
||||
if (totalPages <= 7)
|
||||
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
||||
|
||||
const pages: (number | '…')[] = [1];
|
||||
if (currentPage > 3) pages.push('…');
|
||||
for (
|
||||
let i = Math.max(2, currentPage - 1);
|
||||
i <= Math.min(totalPages - 1, currentPage + 1);
|
||||
i++
|
||||
) {
|
||||
pages.push(i);
|
||||
}
|
||||
if (currentPage < totalPages - 2) pages.push('…');
|
||||
pages.push(totalPages);
|
||||
return pages;
|
||||
};
|
||||
|
||||
const btnBase =
|
||||
'inline-flex items-center justify-center w-8 h-8 text-sm rounded-lg border transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-300';
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between px-4 py-3 border-t border-slate-100">
|
||||
<span className="text-xs text-slate-400">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Prev */}
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
aria-label="Previous page"
|
||||
className={`${btnBase} border-slate-200 text-slate-500 hover:bg-slate-50 hover:text-slate-800 disabled:opacity-30 disabled:cursor-not-allowed`}
|
||||
>
|
||||
<ChevronIcon direction="left" />
|
||||
</button>
|
||||
|
||||
{/* Page numbers */}
|
||||
{getPages().map((p, i) =>
|
||||
p === '…' ? (
|
||||
<span
|
||||
key={`ellipsis-${i}`}
|
||||
className="w-8 h-8 inline-flex items-center justify-center text-sm text-slate-400"
|
||||
>
|
||||
…
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => onPageChange(p as number)}
|
||||
aria-label={`Page ${p}`}
|
||||
aria-current={p === currentPage ? 'page' : undefined}
|
||||
className={`${btnBase} ${
|
||||
p === currentPage
|
||||
? 'bg-slate-900 text-white border-slate-900'
|
||||
: 'border-slate-200 text-slate-600 hover:bg-slate-50 hover:text-slate-900'
|
||||
}`}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
),
|
||||
)}
|
||||
|
||||
{/* Next */}
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
aria-label="Next page"
|
||||
className={`${btnBase} border-slate-200 text-slate-500 hover:bg-slate-50 hover:text-slate-800 disabled:opacity-30 disabled:cursor-not-allowed`}
|
||||
>
|
||||
<ChevronIcon direction="right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
16
src/widgets/history/ui/resultBadge.tsx
Normal file
16
src/widgets/history/ui/resultBadge.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import { ResultBadgeProps } from '../lib/types';
|
||||
import { RESULT_CONFIG } from '../lib/constants';
|
||||
|
||||
export const ResultBadge: React.FC<ResultBadgeProps> = ({ result }) => {
|
||||
const { label, className } = RESULT_CONFIG[result];
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap ${className}`}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
75
src/widgets/history/ui/tableStates.tsx
Normal file
75
src/widgets/history/ui/tableStates.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import { EmptyStateProps, SkeletonRowProps } from '../lib/types';
|
||||
|
||||
// ─── Empty State ───────────────────────────────────────────────────────────────
|
||||
|
||||
export const EmptyState: React.FC<EmptyStateProps> = ({
|
||||
message = 'No plagiarism checks found.',
|
||||
}) => (
|
||||
<tr>
|
||||
<td colSpan={6}>
|
||||
<div className="flex flex-col items-center justify-center py-16 text-slate-400 gap-3">
|
||||
<svg
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
className="text-slate-300"
|
||||
>
|
||||
<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 font-medium">{message}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
// ─── Skeleton Row ──────────────────────────────────────────────────────────────
|
||||
|
||||
const SkeletonCell: React.FC<{ width?: string }> = ({ width = 'w-24' }) => (
|
||||
<td className="px-4 py-3.5">
|
||||
<div className={`h-4 ${width} bg-slate-100 rounded animate-pulse`} />
|
||||
</td>
|
||||
);
|
||||
|
||||
export const SkeletonRow: React.FC<SkeletonRowProps> = ({ columns }) => {
|
||||
const widths = ['w-32', 'w-40', 'w-20', 'w-24', 'w-20', 'w-16'];
|
||||
return (
|
||||
<tr className="border-b border-slate-100">
|
||||
{Array.from({ length: columns }).map((_, i) => (
|
||||
<SkeletonCell key={i} width={widths[i] ?? 'w-20'} />
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Error State ───────────────────────────────────────────────────────────────
|
||||
|
||||
interface ErrorStateProps {
|
||||
message: string | null | undefined;
|
||||
onRetry: () => void;
|
||||
}
|
||||
|
||||
export const ErrorState: React.FC<ErrorStateProps> = ({ message, onRetry }) => (
|
||||
<tr>
|
||||
<td colSpan={6}>
|
||||
<div className="flex flex-col items-center justify-center py-14 gap-3">
|
||||
<div className="flex items-center gap-2 text-red-600 text-sm font-medium">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
|
||||
</svg>
|
||||
{message}
|
||||
</div>
|
||||
<button
|
||||
onClick={onRetry}
|
||||
className="text-xs text-slate-500 underline underline-offset-2 hover:text-slate-800 transition-colors"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
Reference in New Issue
Block a user