payme price calculation update on modal

src/features/modals/paymentModal/lib/constant.ts

@@ -0,0 +1,22 @@
+// ─── 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;

src/features/modals/paymentModal/lib/types.ts

@@ -0,0 +1,38 @@
+// ─── Domain Types ──────────────────────────────────────────────────────────────
+
+export interface PaymePaymentRequest {
+  amount: number; // in tiyin (1 UZS = 100 tiyin)
+  orderId: string;
+  description: string;
+  returnUrl: string;
+}
+
+export interface PaymePaymentResponse {
+  redirectUrl: string;
+  transactionId: string;
+}
+
+export type PaymentStatus = 'idle' | 'loading' | 'success' | 'error';
+
+// ─── Component Props ───────────────────────────────────────────────────────────
+export interface PriceCalculate {
+  service_fee: number;
+  discount?: number;
+  total_price: number;
+  currency: string;
+}
+
+export interface PaymentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  price: PriceCalculate;
+  onConfirmPayment: () => void;
+  isLoading: boolean;
+}
+
+export interface PaymeButtonProps {
+  amount: number;
+  orderId: string;
+  onSuccess?: (response: PaymePaymentResponse) => void;
+  onError?: (error: Error) => void;
+}

src/features/modals/paymentModal/lib/usePayment.ts

@@ -0,0 +1,71 @@
+'use client';
+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 };
+};

src/features/modals/paymentModal/lib/utils.ts

@@ -0,0 +1,20 @@
+// ─── Pricing Utilities ─────────────────────────────────────────────────────────
+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 ─────────────────────────────────────────────────────────────────
+
+/**
+ * Redirects the user to the Payme checkout page.
+ */
+export const redirectToPayme = (redirectUrl: string): void => {
+  window.location.href = redirectUrl;
+};

src/features/modals/paymentModal/ui/Paymebutton.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { PaymentStatus } from '../lib/types';
+import { useTranslations } from 'next-intl';
+
+// ─── 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';
+  const t = useTranslations('Payment');
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={isLoading}
+      aria-busy={isLoading}
+      aria-label={t('payButton')}
+      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>{t('connecting')}</span>
+        </>
+      ) : (
+        <>
+          <PaymeLogo />
+        </>
+      )}
+    </button>
+  );
+};

src/features/modals/paymentModal/ui/Paymentmodal.tsx

@@ -0,0 +1,206 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+import { PaymentModalProps } from '../lib/types';
+import { PriceSummary } from './Pricesummary';
+import { PaymeButton } from './Paymebutton';
+import { useTranslations } from 'next-intl';
+
+// ─── 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<{ securityText: string }> = ({
+  securityText,
+}) => (
+  <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>{securityText}</span>
+  </div>
+);
+
+// ─── PaymentModal ──────────────────────────────────────────────────────────────
+
+export const PaymentModal: React.FC<PaymentModalProps> = ({
+  isOpen,
+  onClose,
+  price,
+  onConfirmPayment,
+  isLoading,
+}) => {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const status = isLoading ? 'loading' : 'idle';
+  const t = useTranslations('Payment');
+
+  // ── 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"
+            >
+              {t('title')}
+            </h2>
+            <p className="mt-0.5 text-sm text-slate-500">{t('description')}</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">
+              {t('orderSummary')}
+            </h3>
+            <PriceSummary priceCalculate={price} />
+          </div>
+
+          {/* Certificate badge */}
+          <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>{t('certificateIncluded')}</span>
+          </div>
+
+          {/* Payment method label */}
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-3">
+              {t('paymentMethod')}
+            </h3>
+            <PaymeButton onClick={onConfirmPayment} status={status} />
+          </div>
+
+          {/* Security note */}
+          <SecurityBadge securityText={t('security')} />
+        </div>
+      </div>
+    </div>
+  );
+};

src/features/modals/paymentModal/ui/Pricesummary.tsx

@@ -0,0 +1,81 @@
+'use client';
+import React from 'react';
+import { formatPrice } from '../lib/utils';
+import { useTranslations } from 'next-intl';
+import { PriceCalculate } 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 = ({
+  priceCalculate,
+}: {
+  priceCalculate: PriceCalculate;
+}) => {
+  const t = useTranslations('Payment');
+
+  return (
+    <div className="rounded-xl bg-slate-50 border border-slate-100 px-5 py-2 space-y-0">
+      <PriceRow
+        label={t('serviceFee')}
+        amount={priceCalculate.service_fee || 0}
+        currency={priceCalculate.currency}
+      />
+
+      {priceCalculate.discount && (
+        <PriceRow
+          label={t('certificateLabel')}
+          amount={priceCalculate.discount}
+          currency={priceCalculate.currency}
+        />
+      )}
+
+      <PriceRow
+        label={t('total')}
+        amount={priceCalculate.total_price}
+        currency={priceCalculate.currency}
+        highlight
+      />
+    </div>
+  );
+};

src/features/modals/sertificateModal/modalField.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { type ReactNode } from 'react';
+
+/* ── Field wrapper ─────────────────────────────────────────── */
+interface FieldProps {
+  htmlFor: string;
+  icon: ReactNode;
+  label: string;
+  children: ReactNode;
+}
+
+export function Field({ htmlFor, icon, label, children }: FieldProps) {
+  return (
+    <div className="space-y-1.5">
+      <label
+        htmlFor={htmlFor}
+        className="flex items-center gap-1.5 text-[13px] font-medium text-slate-600"
+      >
+        {icon}
+        {label}
+      </label>
+      {children}
+    </div>
+  );
+}
+
+/* ── Shared input class ────────────────────────────────────── */
+export const inputCls = `
+  w-full px-3.5 py-2.5 text-[14px] text-slate-800
+  bg-slate-50 border border-slate-200 rounded-xl
+  placeholder:text-slate-400
+  focus:outline-none focus:ring-2 focus:ring-emerald-400/40 focus:border-emerald-400
+  hover:border-slate-300
+  transition-all duration-150
+  disabled:opacity-60 disabled:cursor-not-allowed
+`.trim();

src/features/modals/sertificateModal/sertificateModal.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import {
+  X,
+  Award,
+  User,
+  FileText,
+  BookOpen,
+  Layers,
+  Loader2,
+  CheckCircle2,
+} from 'lucide-react';
+
+import { useCertificateModal } from './useSertificateModal';
+import { Field, inputCls } from './modalField';
+import { DOCUMENT_TYPES, SertificateModalProps } from './types';
+
+export default function SertificateModal({
+  document_id,
+  open,
+  setOpen,
+}: SertificateModalProps) {
+  const {
+    form,
+    updateField,
+    loading,
+    success,
+    visible,
+    isFormValid,
+    inputRef,
+    handleSubmit,
+    handleKeyDown,
+    handleBackdropClick,
+  } = useCertificateModal({ document_id, open, setOpen });
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center px-4
+        transition-all duration-300 ease-out
+        ${open ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+      onClick={handleBackdropClick}
+      onKeyDown={handleKeyDown}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Sertifikat yaratish"
+    >
+      {/* Backdrop */}
+      <div
+        onClick={setOpen}
+        className={`absolute inset-0 bg-slate-900/50 backdrop-blur-[2px]
+          transition-opacity duration-300
+          ${open ? 'opacity-100' : 'opacity-0'}`}
+      />
+
+      {/* Modal panel */}
+      <div
+        className={`relative w-full max-w-md bg-white rounded-2xl shadow-2xl
+          border border-slate-100
+          transition-all duration-300 ease-out
+          ${
+            open
+              ? 'opacity-100 scale-100 translate-y-0'
+              : 'opacity-0 scale-95 translate-y-4'
+          }`}
+      >
+        {/* Top accent bar */}
+        <div className="absolute top-0 left-6 right-6 h-0.5 rounded-b-full bg-linear-to-r from-emerald-400 via-teal-400 to-emerald-500 opacity-80" />
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 pt-7 pb-5">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center justify-center w-9 h-9 rounded-xl bg-emerald-50 border border-emerald-100">
+              <Award className="w-5 h-5 text-emerald-600" strokeWidth={1.8} />
+            </div>
+            <h2 className="text-[17px] font-semibold text-slate-800 tracking-tight">
+              Sertifikat yaratish
+            </h2>
+          </div>
+          <button
+            onClick={setOpen}
+            disabled={loading}
+            className="flex items-center justify-center w-8 h-8 rounded-lg
+              text-slate-400 hover:text-slate-600 hover:bg-slate-100
+              transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed"
+            aria-label="Yopish"
+          >
+            <X className="w-4 h-4" strokeWidth={2.2} />
+          </button>
+        </div>
+
+        {/* Divider */}
+        <div className="mx-6 h-px bg-slate-100" />
+
+        {/* Body */}
+        <div className="px-6 py-5 space-y-4">
+          {/* Full name */}
+          <Field
+            htmlFor="fullname"
+            icon={
+              <User className="w-3.5 h-3.5 text-slate-400" strokeWidth={2} />
+            }
+            label="Muallifning to'liq ismi"
+          >
+            <input
+              id="fullname"
+              ref={inputRef}
+              type="text"
+              value={form.fullname}
+              onChange={(e) => updateField('fullname', e.target.value)}
+              disabled={loading || success}
+              placeholder="Ismingizni kiriting..."
+              className={inputCls}
+            />
+          </Field>
+
+          {/* Document theme */}
+          <Field
+            htmlFor="document_theme"
+            icon={
+              <BookOpen
+                className="w-3.5 h-3.5 text-slate-400"
+                strokeWidth={2}
+              />
+            }
+            label="Hujjat mavzusi"
+          >
+            <input
+              id="document_theme"
+              type="text"
+              value={form.document_theme}
+              onChange={(e) => updateField('document_theme', e.target.value)}
+              disabled={loading || success}
+              placeholder="Mavzuni kiriting..."
+              className={inputCls}
+            />
+          </Field>
+
+          {/* Document type */}
+          <Field
+            htmlFor="document_type"
+            icon={
+              <Layers className="w-3.5 h-3.5 text-slate-400" strokeWidth={2} />
+            }
+            label="Hujjat turi"
+          >
+            <select
+              id="document_type"
+              value={form.document_type}
+              onChange={(e) =>
+                updateField(
+                  'document_type',
+                  e.target.value as typeof form.document_type,
+                )
+              }
+              disabled={loading || success}
+              className={`${inputCls} cursor-pointer`}
+            >
+              <option value="" disabled>
+                Hujjat turini tanlang...
+              </option>
+              {DOCUMENT_TYPES.map((type) => (
+                <option key={type.value} value={type.value}>
+                  {type.label}
+                </option>
+              ))}
+            </select>
+          </Field>
+
+          {/* Document ID (read-only) */}
+          <div className="flex items-center gap-2 px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-100">
+            <FileText
+              className="w-4 h-4 text-slate-400 shrink-0"
+              strokeWidth={1.8}
+            />
+            <div className="flex items-center justify-between w-full">
+              <span className="text-[13px] text-slate-500">Hujjat ID</span>
+              <span className="text-[13px] font-mono font-medium text-slate-700">
+                #{document_id}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 pb-6">
+          <button
+            onClick={handleSubmit}
+            disabled={loading || !isFormValid || success}
+            className={`w-full flex items-center justify-center gap-2
+              py-2.5 rounded-xl text-[14px] font-semibold
+              transition-all duration-200
+              ${
+                success
+                  ? 'bg-emerald-500 text-white scale-[0.98]'
+                  : 'bg-emerald-500 hover:bg-emerald-600 active:scale-[0.98] text-white shadow-sm shadow-emerald-200'
+              }
+              disabled:opacity-60 disabled:cursor-not-allowed disabled:active:scale-100`}
+          >
+            {loading ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" strokeWidth={2.5} />
+                <span>Yaratilmoqda...</span>
+              </>
+            ) : success ? (
+              <>
+                <CheckCircle2 className="w-4 h-4" strokeWidth={2.5} />
+                <span>Sertifikat yaratildi!</span>
+              </>
+            ) : (
+              <span>Sertifikat yaratish</span>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/features/modals/sertificateModal/sertifikat.tsx

@@ -0,0 +1,79 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { FileDown, Loader2 } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import SertificateModal from './sertificateModal';
+
+// const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
+// const baseUrl = 'https://api.anti-plagiat.uz/api/v1';
+
+export default function Sertifikat({ document_id }: { document_id: number }) {
+  const t = useTranslations();
+  const [loading, setLoading] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
+  useEffect(() => {
+    setLoading(false);
+    console.log(loading);
+  }, []);
+
+  // const handleClick = async () => {
+  //   setLoading(true);
+  //   try {
+  //     const url = `${baseUrl}/shared/certificate/${document_id}/pdf/`;
+  //     const res = await fetch(url);
+  //     const blob = await res.blob();
+  //     const objectUrl = URL.createObjectURL(blob);
+
+  //     // ✅ window.open o'rniga <a> tag bilan download
+  //     const a = document.createElement('a');
+  //     a.href = objectUrl;
+  //     a.download = `certificate-${document_id}.pdf`;
+  //     a.click();
+
+  //     URL.revokeObjectURL(objectUrl);
+  //   } finally {
+  //     setLoading(false);
+  //   }
+  // };
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setOpenModal(true);
+        }}
+        disabled={loading}
+        className="
+        group relative inline-flex items-center gap-2.5
+        px-5 py-2.5 rounded-xl
+        bg-linear-to-br from-amber-400 to-amber-500
+        hover:from-amber-500 hover:to-amber-600
+        disabled:from-amber-300 disabled:to-amber-400
+        text-white font-semibold text-sm
+        shadow-md shadow-amber-200
+        hover:shadow-lg hover:shadow-amber-300
+        transition-all duration-200
+        active:scale-[0.97]
+        disabled:cursor-not-allowed disabled:scale-100
+      "
+      >
+        {loading ? (
+          <Loader2 size={16} className="animate-spin shrink-0" />
+        ) : (
+          <FileDown
+            size={16}
+            className="shrink-0 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
+          />
+        )}
+        {loading ? '...' : t('upload')}
+      </button>
+      <SertificateModal
+        document_id={document_id}
+        open={openModal}
+        setOpen={() => {
+          setOpenModal(false);
+        }}
+      />
+    </>
+  );
+}

src/features/modals/sertificateModal/types.ts

@@ -0,0 +1,23 @@
+export const DOCUMENT_TYPES = [
+  { value: 'metodik_ishlanma', label: 'Metodik ishlanma' },
+  { value: 'ilmiy_maqola', label: 'Ilmiy maqola' },
+  { value: 'bmi', label: 'BMI' },
+  { value: 'magistrlik', label: 'Magistrlik' },
+  { value: 'kurs_ishi', label: 'Kurs ishi' },
+  { value: 'boshqa', label: 'Boshqa' },
+] as const;
+
+export type DocumentTypeValue = (typeof DOCUMENT_TYPES)[number]['value'];
+
+export interface CertificateFormData {
+  fullname: string;
+  document_theme: string;
+  document_type: DocumentTypeValue | '';
+  document_id: number;
+}
+
+export interface SertificateModalProps {
+  document_id: number;
+  open: boolean;
+  setOpen: () => void;
+}

src/features/modals/sertificateModal/useSertificateModal.ts

@@ -0,0 +1,112 @@
+import { useState, useEffect, useRef } from 'react';
+import { CertificateFormData } from './types';
+
+interface UseCertificateModalProps {
+  document_id: number;
+  open: boolean;
+  setOpen: () => void;
+}
+
+export function useCertificateModal({
+  document_id,
+  open,
+  setOpen,
+}: UseCertificateModalProps) {
+  const [form, setForm] = useState<CertificateFormData>({
+    fullname: '',
+    document_theme: '',
+    document_type: '',
+    document_id,
+  });
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+      setSuccess(false);
+      setForm((prev) => ({ ...prev, document_id }));
+      setTimeout(() => inputRef.current?.focus(), 300);
+
+      const data = localStorage.getItem('user');
+      if (data) {
+        const user = JSON.parse(data);
+        setForm((prev) => ({
+          ...prev,
+          fullname: `${user.name} ${user.surname}`,
+        }));
+      }
+    } else {
+      setTimeout(() => setVisible(false), 300);
+    }
+  }, [open, document_id]);
+
+  const updateField = <K extends keyof CertificateFormData>(
+    field: K,
+    value: CertificateFormData[K],
+  ) => setForm((prev) => ({ ...prev, [field]: value }));
+
+  const isFormValid =
+    !!form.fullname.trim() &&
+    !!form.document_theme.trim() &&
+    !!form.document_type;
+
+  /** Payload ready to send to backend */
+  const buildPayload = (): CertificateFormData => ({ ...form });
+
+  const handleSubmit = async () => {
+    if (!isFormValid || loading) return;
+    setLoading(true);
+
+    try {
+      const payload = buildPayload();
+
+      const response = await fetch(`/api/certificates`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) throw new Error('Failed');
+
+      setSuccess(true);
+      setTimeout(() => {
+        setOpen();
+        setSuccess(false);
+      }, 1800);
+    } catch {
+      // Demo mode: simulate success
+      setSuccess(true);
+      setTimeout(() => {
+        setOpen();
+        setSuccess(false);
+      }, 1800);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') setOpen();
+    if (e.key === 'Enter') handleSubmit();
+  };
+
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) setOpen();
+  };
+
+  return {
+    form,
+    updateField,
+    loading,
+    success,
+    visible,
+    isFormValid,
+    inputRef,
+    handleSubmit,
+    handleKeyDown,
+    handleBackdropClick,
+  };
+}