vulneribilty fixed

2026-04-09 12:00:06 +05:00
parent dfb8d3bdbc
commit 73158a1972
26 changed files with 553 additions and 175 deletions
--- a/src/widgets/cabinet/lib/hooks/useProfile.ts
+++ b/src/widgets/cabinet/lib/hooks/useProfile.ts
@@ -1,6 +1,7 @@
 'use client';
 import { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { apiRequest } from '@/shared/request/apiRequest';
 import { links } from '@/shared/request/links';
 import type { UserProfile } from '../types';
@@ -8,13 +9,27 @@ import type { UserProfile } from '../types';
 interface ProfileFormState {
  first_name: string;
  last_name: string;
-  phone: string;
+  phone: string; // 9 digits only, without 998 prefix
  password: string;
 }

+export interface ProfileFormErrors {
+  first_name?: string;
+  last_name?: string;
+  phone?: string;
+  password?: string;
+}
+
+function stripPrefix(phone: string): string {
+  if (phone.startsWith('998')) return phone.slice(3);
+  return phone;
+}
+
 export const useProfile = () => {
+  const t = useTranslations('Cabinet');
  const queryClient = useQueryClient();
  const [saved, setSaved] = useState(false);
+  const [errors, setErrors] = useState<ProfileFormErrors>({});
  const [form, setForm] = useState<ProfileFormState>({
    first_name: '',
    last_name: '',
@@ -33,7 +48,7 @@ export const useProfile = () => {
      setForm({
        first_name: profile.first_name,
        last_name: profile.last_name,
-        phone: profile.phone,
+        phone: stripPrefix(profile.phone ?? ''),
        password: '',
      });
    }
@@ -51,15 +66,28 @@ export const useProfile = () => {

  const handleChange = (field: keyof ProfileFormState, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
+    setErrors((prev) => ({ ...prev, [field]: undefined }));
    setSaved(false);
  };

+  const validate = (): boolean => {
+    const next: ProfileFormErrors = {};
+    if (!form.first_name.trim()) next.first_name = t('firstNameRequired');
+    if (!form.last_name.trim()) next.last_name = t('lastNameRequired');
+    if (form.phone && form.phone.length !== 9) next.phone = t('phoneInvalid');
+    if (form.password && form.password.length < 8)
+      next.password = t('passwordTooShort');
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
  const handleSave = () => {
+    if (!validate()) return;
    const payload: Record<string, string> = {
      first_name: form.first_name,
      last_name: form.last_name,
    };
-    if (form.phone) payload.phone = form.phone;
+    if (form.phone) payload.phone = `998${form.phone}`;
    if (form.password) payload.password = form.password;
    mutate(payload);
  };
@@ -70,6 +98,7 @@ export const useProfile = () => {
    isLoading,
    isSaving,
    saved,
+    errors,
    handleChange,
    handleSave,
  };
--- a/src/widgets/cabinet/ui/Sidebar.tsx
+++ b/src/widgets/cabinet/ui/Sidebar.tsx
@@ -33,9 +33,10 @@ export const Sidebar: React.FC<SidebarProps> = ({
  userName,
 }) => {
  const t = useTranslations('Cabinet');
+  console.log(userName);

  const NAV_ITEMS = [
-    { id: 'home' as const, label: t('home'), icon: Home, href: '/' },
+    { id: 'home' as const, label: t('home'), icon: Home, href: '/plagiat' },
    {
      id: 'dashboard' as CabinetSection,
      label: t('dashboard'),
@@ -82,7 +83,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
        </div>

        {/* User pill */}
-        <div className="px-3 pt-4 pb-2">
+        {/* <div className="px-3 pt-4 pb-2">
          <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-slate-50 border border-slate-100">
            <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center shrink-0">
              <span className="text-blue-600 text-xs font-semibold">
@@ -98,7 +99,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
              </p>
            </div>
          </div>
-        </div>
+        </div> */}

        {/* Navigation */}
        <nav className="flex-1 px-3 py-2 space-y-0.5 overflow-y-auto">
--- a/src/widgets/cabinet/ui/dashboard/CtaCards.tsx
+++ b/src/widgets/cabinet/ui/dashboard/CtaCards.tsx
@@ -12,7 +12,7 @@ export const CtaCards = () => {
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {/* Plagiat */}
        <Link
-          href={'/plagat'}
+          href={'/plagiat'}
          className="group relative overflow-hidden rounded-2xl bg-linear-to-br from-blue-500 to-blue-600 p-6 text-left shadow-md hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 active:shadow-md"
        >
          <div className="absolute right-3 top-3 opacity-10 pointer-events-none">
--- a/src/widgets/cabinet/ui/dashboard/ModulesSection.tsx
+++ b/src/widgets/cabinet/ui/dashboard/ModulesSection.tsx
@@ -1,4 +1,6 @@
+'use client';
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import {
  MODULE_CATEGORIES,
  MODULE_STATS,
@@ -8,26 +10,29 @@ import {

 // ─── Module stats mini-cards ───────────────────────────────────────────────────

-const ModuleStats: React.FC = () => (
-  <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-    {[
-      { value: MODULE_STATS.total, label: 'Jami modullar' },
-      { value: MODULE_STATS.freeInternet, label: 'Bepul internet manbalari' },
-      { value: MODULE_STATS.aiModules, label: 'AI tahlil modullari' },
-      { value: MODULE_STATS.categories, label: 'Kategoriya' },
-    ].map(({ value, label }) => (
-      <div
-        key={label}
-        className="bg-slate-50 border border-slate-100 rounded-xl px-4 py-3"
-      >
-        <p className="text-2xl font-bold text-slate-900 tabular-nums leading-none">
-          {value}
-        </p>
-        <p className="text-xs text-slate-500 mt-1">{label}</p>
-      </div>
-    ))}
-  </div>
-);
+const ModuleStats: React.FC = () => {
+  const t = useTranslations('Cabinet');
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+      {[
+        { value: MODULE_STATS.total, label: t('totalModules') },
+        { value: MODULE_STATS.freeInternet, label: t('freeInternetSources') },
+        { value: MODULE_STATS.aiModules, label: t('aiAnalysisModules') },
+        { value: MODULE_STATS.categories, label: t('categories') },
+      ].map(({ value, label }) => (
+        <div
+          key={label}
+          className="bg-slate-50 border border-slate-100 rounded-xl px-4 py-3"
+        >
+          <p className="text-2xl font-bold text-slate-900 tabular-nums leading-none">
+            {value}
+          </p>
+          <p className="text-xs text-slate-500 mt-1">{label}</p>
+        </div>
+      ))}
+    </div>
+  );
+};

 // ─── Tag badge ─────────────────────────────────────────────────────────────────

@@ -62,7 +67,6 @@ interface ModuleCardProps {

 const ModuleCard: React.FC<ModuleCardProps> = ({ name, desc, tags, index }) => (
  <div className="bg-white border border-slate-100 rounded-xl p-4 flex items-start gap-3 hover:border-slate-200 hover:shadow-sm transition-all duration-150">
-    {/* Index number */}
    <span className="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center text-[10px] font-semibold text-slate-500 shrink-0 mt-0.5">
      {index}
    </span>
@@ -83,7 +87,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ name, desc, tags, index }) => (
 // ─── Modules section ───────────────────────────────────────────────────────────

 export const ModulesSection: React.FC = () => {
-  // running counter across all categories
+  const t = useTranslations('Cabinet');
  let counter = 0;

  return (
@@ -91,14 +95,14 @@ export const ModulesSection: React.FC = () => {
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-sm font-semibold text-slate-800">
-            Tekshiruv modullari
+            {t('checkModules')}
          </h3>
          <p className="text-xs text-slate-400 mt-0.5">
-            Plagiat aniqlashda foydalaniladigan barcha manbalar
+            {t('checkModulesDesc')}
          </p>
        </div>
        <span className="text-xs text-slate-400 bg-slate-100 px-2.5 py-1 rounded-lg font-medium">
-          {MODULE_STATS.total} ta modul
+          {t('modulesCount', { count: MODULE_STATS.total })}
        </span>
      </div>

--- a/src/widgets/cabinet/ui/dashboard/StatsCards.tsx
+++ b/src/widgets/cabinet/ui/dashboard/StatsCards.tsx
@@ -1,6 +1,8 @@
+'use client';
 import React from 'react';
 import { TrendingUp, Calendar, Wallet, Loader2 } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { apiRequest } from '@/shared/request/apiRequest';
 import { links } from '@/shared/request/links';

@@ -54,6 +56,7 @@ const StatCardSkeleton = () => (
 // ─── Grid ──────────────────────────────────────────────────────────────────────

 export const StatsCards = () => {
+  const t = useTranslations('Cabinet');
  const { data, isLoading } = useQuery({
    queryKey: ['statistics'],
    queryFn: (): Promise<Stats> =>
@@ -74,7 +77,7 @@ export const StatsCards = () => {
    return (
      <div className="flex items-center justify-center py-10 gap-2 text-slate-400">
        <Loader2 size={18} className="animate-spin" />
-        <span className="text-sm">Ma&apos;lumot topilmadi</span>
+        <span className="text-sm">{t('noData')}</span>
      </div>
    );
  }
@@ -83,21 +86,21 @@ export const StatsCards = () => {
    <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
      <StatCard
        icon={TrendingUp}
-        label="Jami tekshiruvlar"
+        label={t('totalChecks')}
        value={String(data.total_documents)}
        iconColor="text-blue-600"
        iconBg="bg-blue-50"
      />
      <StatCard
        icon={Calendar}
-        label="Bu oy"
+        label={t('thisMonth')}
        value={String(data.this_month_documents)}
        iconColor="text-emerald-600"
        iconBg="bg-emerald-50"
      />
      <StatCard
        icon={Wallet}
-        label="To'langan summa"
+        label={t('paidAmount')}
        value={`${data.paid_price.toLocaleString('uz-UZ')} UZS`}
        iconColor="text-violet-600"
        iconBg="bg-violet-50"
--- a/src/widgets/cabinet/ui/dashboard/index.tsx
+++ b/src/widgets/cabinet/ui/dashboard/index.tsx
@@ -1,4 +1,6 @@
+'use client';
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { CtaCards } from './CtaCards';
 import { StatsCards } from './StatsCards';
 import { ModulesSection } from './ModulesSection';
@@ -7,28 +9,29 @@ interface DashboardProps {
  userName: string;
 }

-export const Dashboard: React.FC<DashboardProps> = ({ userName }) => (
-  <div className="space-y-6">
-    <div>
-      <h2 className="text-xl font-bold text-slate-900">
-        Xush kelibsiz, {userName} 👋
-      </h2>
-      <p className="text-sm text-slate-500 mt-0.5">
-        Shaxsiy kabinetingizga xush kelibsiz
-      </p>
-    </div>
+export const Dashboard: React.FC<DashboardProps> = ({ userName }) => {
+  const t = useTranslations('Cabinet');
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-bold text-slate-900">
+          {t('welcome', { userName })}
+        </h2>
+        <p className="text-sm text-slate-500 mt-0.5">{t('welcomeDesc')}</p>
+      </div>

-    <StatsCards />
+      <StatsCards />

-    <div>
-      <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
-        Tezkor harakatlar
-      </h3>
-      <CtaCards />
-    </div>
+      <div>
+        <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
+          {t('quickActions')}
+        </h3>
+        <CtaCards />
+      </div>

-    <div className="border-t border-slate-100 pt-6">
-      <ModulesSection />
+      <div className="border-t border-slate-100 pt-6">
+        <ModulesSection />
+      </div>
    </div>
-  </div>
-);
+  );
+};
--- a/src/widgets/cabinet/ui/profile/ProfileForm.tsx
+++ b/src/widgets/cabinet/ui/profile/ProfileForm.tsx
@@ -1,7 +1,9 @@
 'use client';
-import React from 'react';
-import { User, Phone, Lock, Save, CheckCircle } from 'lucide-react';
+import React, { useState } from 'react';
+import { User, Lock, Save, CheckCircle, Phone } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useProfile } from '../../lib/hooks/useProfile';
+import { formatPhone, normalizeDigits } from '@/shared/lib/formatPhone';

 // ─── Input field ───────────────────────────────────────────────────────────────

@@ -13,6 +15,7 @@ interface InputFieldProps {
  icon: React.ElementType;
  placeholder?: string;
  disabled?: boolean;
+  error?: string;
 }

 const InputField: React.FC<InputFieldProps> = ({
@@ -23,6 +26,7 @@ const InputField: React.FC<InputFieldProps> = ({
  icon: Icon,
  placeholder,
  disabled,
+  error,
 }) => (
  <div>
    <label className="block text-xs font-semibold text-slate-600 mb-1.5">
@@ -39,19 +43,73 @@ const InputField: React.FC<InputFieldProps> = ({
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        disabled={disabled}
-        className="
+        className={`
          w-full pl-9 pr-4 py-2.5 text-sm rounded-xl
-          border border-slate-200 bg-white
+          border bg-white
          text-slate-800 placeholder:text-slate-300
          focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400
          disabled:bg-slate-50 disabled:text-slate-400 disabled:cursor-not-allowed
          transition-all duration-150
-        "
+          ${error ? 'border-rose-400 bg-rose-50' : 'border-slate-200'}
+        `}
      />
    </div>
+    {error && <p className="mt-1 text-xs text-rose-500">{error}</p>}
  </div>
 );

+// ─── Phone input ───────────────────────────────────────────────────────────────
+
+interface PhoneFieldProps {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}
+
+const PhoneField: React.FC<PhoneFieldProps> = ({ value, onChange, error }) => {
+  const t = useTranslations('Cabinet');
+  const [isFocused, setIsFocused] = useState(false);
+  return (
+    <div>
+      <label className="block text-xs font-semibold text-slate-600 mb-1.5">
+        {t('phone')}
+      </label>
+      <div className="relative">
+        {/* +998 prefix */}
+        <div className="absolute left-3.5 top-1/2 -translate-y-1/2 flex items-center gap-1.5 pointer-events-none">
+          <Phone
+            size={14}
+            className={isFocused ? 'text-blue-500' : 'text-slate-400'}
+          />
+          <span
+            className={`text-sm font-semibold ${isFocused ? 'text-blue-500' : 'text-slate-400'}`}
+          >
+            +998
+          </span>
+          <span className="text-slate-300">|</span>
+        </div>
+        <input
+          type="tel"
+          value={formatPhone(value)}
+          onChange={(e) => onChange(normalizeDigits(e.target.value))}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          placeholder="90 123 45 67"
+          className={`
+            w-full pl-24 pr-4 py-2.5 text-sm rounded-xl
+            border bg-white
+            text-slate-800 placeholder:text-slate-300
+            focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400
+            transition-all duration-150
+            ${error ? 'border-rose-400 bg-rose-50' : 'border-slate-200'}
+          `}
+        />
+      </div>
+      {error && <p className="mt-1 text-xs text-rose-500">{error}</p>}
+    </div>
+  );
+};
+
 // ─── Skeleton ──────────────────────────────────────────────────────────────────

 const FieldSkeleton = () => (
@@ -64,12 +122,14 @@ const FieldSkeleton = () => (
 // ─── Form ──────────────────────────────────────────────────────────────────────

 export const ProfileForm: React.FC = () => {
+  const t = useTranslations('Cabinet');
  const {
    form,
    profile,
    isLoading,
    isSaving,
    saved,
+    errors,
    handleChange,
    handleSave,
  } = useProfile();
@@ -79,7 +139,7 @@ export const ProfileForm: React.FC = () => {
      {/* Personal info */}
      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-6">
        <h3 className="text-sm font-semibold text-slate-800 mb-4">
-          Shaxsiy ma&apos;lumotlar
+          {t('personalInfo')}
        </h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {isLoading ? (
@@ -92,28 +152,28 @@ export const ProfileForm: React.FC = () => {
          ) : (
            <>
              <InputField
-                label="Ism"
+                label={t('firstName')}
                value={form.first_name}
                onChange={(v) => handleChange('first_name', v)}
                icon={User}
                placeholder="Ali"
+                error={errors.first_name}
              />
              <InputField
-                label="Familiya"
+                label={t('lastName')}
                value={form.last_name}
                onChange={(v) => handleChange('last_name', v)}
                icon={User}
                placeholder="Karimov"
+                error={errors.last_name}
              />
-              <InputField
-                label="Telefon"
+              <PhoneField
                value={form.phone}
                onChange={(v) => handleChange('phone', v)}
-                icon={Phone}
-                placeholder="+998 90 123 45 67"
+                error={errors.phone}
              />
              <InputField
-                label="Email"
+                label={t('email')}
                value={profile?.email ?? ''}
                onChange={() => {}}
                icon={User}
@@ -128,16 +188,17 @@ export const ProfileForm: React.FC = () => {
      {/* Password */}
      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-6">
        <h3 className="text-sm font-semibold text-slate-800 mb-4">
-          Parol o&apos;zgartirish
+          {t('changePassword')}
        </h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <InputField
-            label="Yangi parol"
+            label={t('newPassword')}
            value={form.password}
            onChange={(v) => handleChange('password', v)}
            type="password"
            icon={Lock}
            placeholder="••••••••"
+            error={errors.password}
          />
        </div>
      </div>
@@ -161,16 +222,16 @@ export const ProfileForm: React.FC = () => {
        >
          {saved ? (
            <>
-              <CheckCircle size={15} /> Saqlandi
+              <CheckCircle size={15} /> {t('saved')}
            </>
          ) : isSaving ? (
            <>
              <span className="w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" />
-              Saqlanmoqda…
+              {t('saving')}
            </>
          ) : (
            <>
-              <Save size={15} /> Saqlash
+              <Save size={15} /> {t('save')}
            </>
          )}
        </button>
--- a/src/widgets/cabinet/ui/profile/index.tsx
+++ b/src/widgets/cabinet/ui/profile/index.tsx
@@ -1,5 +1,6 @@
+'use client';
 import React from 'react';
-import { DiscountProgress } from './DiscountProgress';
+import { useTranslations } from 'next-intl';
 import { ProfileForm } from './ProfileForm';
 import type { CabinetStats } from '../../lib/types';

@@ -7,16 +8,18 @@ interface ProfileSectionProps {
  stats: CabinetStats;
 }

-export const ProfileSection: React.FC<ProfileSectionProps> = ({ stats }) => (
-  <div className="space-y-6">
-    <div>
-      <h2 className="text-xl font-bold text-slate-900">Profil</h2>
-      <p className="text-sm text-slate-500 mt-0.5">
-        Ma&apos;lumotlaringizni boshqaring
-      </p>
-    </div>
+export const ProfileSection: React.FC<ProfileSectionProps> = ({ stats }) => {
+  const t = useTranslations('Cabinet');
+  console.log(stats);
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-bold text-slate-900">{t('profile')}</h2>
+        <p className="text-sm text-slate-500 mt-0.5">{t('profileDesc')}</p>
+      </div>

-    <DiscountProgress stats={stats} />
-    <ProfileForm />
-  </div>
-);
+      {/* <DiscountProgress stats={stats} /> */}
+      <ProfileForm />
+    </div>
+  );
+};
--- a/src/widgets/cabinet/ui/tables/PaymentsTable.tsx
+++ b/src/widgets/cabinet/ui/tables/PaymentsTable.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import { Clock, XCircle, ReceiptText } from 'lucide-react';
 import { useMutation, useQuery } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { apiRequest } from '@/shared/request/apiRequest';
 import { links } from '@/shared/request/links';
 import PaymentStatus from '@/widgets/detail/paidStatus';
@@ -36,6 +37,7 @@ function formatPrice(price: string) {
 // ─── Component ─────────────────────────────────────────────────────────────────

 export function PaymentsTable() {
+  const t = useTranslations('Cabinet');
  const [isPaymentOpen, setIsPaymentOpen] = useState(false);
  const { data, isLoading } = useQuery({
    queryKey: ['pay_history'],
@@ -50,9 +52,7 @@ export function PaymentsTable() {
    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) => {
@@ -75,11 +75,9 @@ export function PaymentsTable() {
    <>
      <div className="space-y-4">
        <div>
-          <h2 className="text-xl font-bold text-slate-900">
-            To&apos;lovlar tarixi
-          </h2>
+          <h2 className="text-xl font-bold text-slate-900">{t('payments')}</h2>
          <p className="text-sm text-slate-500 mt-0.5">
-            {data?.length ?? 0} ta to&apos;lov
+            {t('paymentsCount', { count: data?.length ?? 0 })}
          </p>
        </div>

@@ -87,28 +85,33 @@ export function PaymentsTable() {
          {isLoading ? (
            <div className="flex items-center justify-center py-16 gap-3 text-slate-400">
              <Clock size={20} className="animate-spin" />
-              <span className="text-sm">Yuklanmoqda...</span>
+              <span className="text-sm">{t('loading')}</span>
            </div>
          ) : !data || data.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 gap-3 text-slate-400">
              <ReceiptText size={40} strokeWidth={1.5} />
-              <p className="text-sm">To&apos;lovlar tarixi mavjud emas</p>
+              <p className="text-sm">{t('noPayments')}</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-slate-50 border-b border-slate-100">
-                    {['#', 'Xizmat', 'Summa', 'Chegirma', 'Sana', 'Holat'].map(
-                      (h) => (
-                        <th
-                          key={h}
-                          className="text-left px-5 py-3 text-[11px] font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap"
-                        >
-                          {h}
-                        </th>
-                      ),
-                    )}
+                    {[
+                      t('tableNum'),
+                      t('service'),
+                      t('amount'),
+                      t('discount'),
+                      t('date'),
+                      t('status'),
+                    ].map((h) => (
+                      <th
+                        key={h}
+                        className="text-left px-5 py-3 text-[11px] font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap"
+                      >
+                        {h}
+                      </th>
+                    ))}
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-50">
@@ -155,7 +158,7 @@ export function PaymentsTable() {
                          ) : (
                            <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium text-slate-400 bg-slate-50">
                              <XCircle size={12} />
-                              Noma&apos;lum
+                              {t('unknown')}
                            </span>
                          )}
                        </td>
--- a/src/widgets/cabinet/ui/tables/SiTable.tsx
+++ b/src/widgets/cabinet/ui/tables/SiTable.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { Download, CreditCard, Eye } from 'lucide-react';
 import { useMutation } from '@tanstack/react-query';
+import { useTranslations } from 'next-intl';
 import { useSiHistory } from '../../lib/hooks/useSiHistory';
 import { formatDate } from '@/widgets/history/lib/utils';
 import { apiRequest } from '@/shared/request/apiRequest';
@@ -14,6 +15,7 @@ import { useRouter, useParams } from 'next/navigation';
 // ─── State badge ───────────────────────────────────────────────────────────────

 const StateBadge: React.FC<{ state: 'paid' | 'unpaid' }> = ({ state }) => {
+  const t = useTranslations('Cabinet');
  const isPaid = state === 'paid';
  return (
    <span
@@ -28,7 +30,7 @@ const StateBadge: React.FC<{ state: 'paid' | 'unpaid' }> = ({ state }) => {
          isPaid ? 'bg-emerald-500' : 'bg-rose-500',
        ].join(' ')}
      />
-      {isPaid ? "To'langan" : "To'lanmagan"}
+      {isPaid ? t('paid') : t('unpaid')}
    </span>
  );
 };
@@ -68,21 +70,27 @@ const SkeletonRow = () => (

 // ─── Empty / Error states ──────────────────────────────────────────────────────

-const EmptyState = () => (
-  <tr>
-    <td colSpan={7} className="px-5 py-12 text-center text-slate-400 text-sm">
-      Hozircha SI tekshiruvlar yo&apos;q
-    </td>
-  </tr>
-);
+const EmptyState = () => {
+  const t = useTranslations('Cabinet');
+  return (
+    <tr>
+      <td colSpan={7} className="px-5 py-12 text-center text-slate-400 text-sm">
+        {t('noSiChecks')}
+      </td>
+    </tr>
+  );
+};

-const ErrorState = () => (
-  <tr>
-    <td colSpan={7} className="px-5 py-12 text-center text-red-400 text-sm">
-      Ma&apos;lumotlarni yuklashda xatolik yuz berdi
-    </td>
-  </tr>
-);
+const ErrorState = () => {
+  const t = useTranslations('Cabinet');
+  return (
+    <tr>
+      <td colSpan={7} className="px-5 py-12 text-center text-red-400 text-sm">
+        {t('loadError')}
+      </td>
+    </tr>
+  );
+};

 // ─── Row ───────────────────────────────────────────────────────────────────────

@@ -90,6 +98,7 @@ const SiRow: React.FC<{ item: SiDocument; index: number }> = ({
  item,
  index,
 }) => {
+  const t = useTranslations('Cabinet');
  const router = useRouter();
  const { locale } = useParams() as { locale: string };

@@ -107,19 +116,14 @@ const SiRow: React.FC<{ item: SiDocument; index: number }> = ({

  return (
    <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>
-
-      {/* Fayl */}
      <td className="px-5 py-3.5">
        {item.file ? (
          <a
@@ -129,19 +133,15 @@ const SiRow: React.FC<{ item: SiDocument; index: number }> = ({
            className="inline-flex items-center gap-1.5 text-slate-500 hover:text-blue-600 transition-colors"
          >
            <Download size={14} />
-            <span className="text-xs font-medium">Fayl</span>
+            <span className="text-xs font-medium">{t('tableFile')}</span>
          </a>
        ) : (
          <span className="text-slate-200 text-xs">—</span>
        )}
      </td>
-
-      {/* So'z */}
      <td className="px-5 py-3.5 text-slate-500 tabular-nums text-sm">
        {item.total_words > 0 ? item.total_words.toLocaleString() : '—'}
      </td>
-
-      {/* SI% */}
      <td className="px-5 py-3.5">
        {item.si_percantage != null && item.result != null ? (
          <SiPercentBadge value={item.si_percantage} />
@@ -149,18 +149,12 @@ const SiRow: React.FC<{ item: SiDocument; index: number }> = ({
          <span className="text-slate-300 text-xs">—</span>
        )}
      </td>
-
-      {/* Sana */}
      <td className="px-5 py-3.5 text-slate-500 text-sm whitespace-nowrap">
        {formatDate(item.created_at)}
      </td>
-
-      {/* Holat */}
      <td className="px-5 py-3.5">
        <StateBadge state={item.state} />
      </td>
-
-      {/* Amal */}
      <td className="px-5 py-3.5 text-right">
        {item.state === 'unpaid' ? (
          <button
@@ -169,7 +163,7 @@ const SiRow: React.FC<{ item: SiDocument; index: number }> = ({
            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-white bg-violet-600 hover:bg-violet-700 active:scale-95 transition-all duration-150 disabled:opacity-60"
          >
            <CreditCard size={11} />
-            {pay.isPending ? '...' : "To'lash"}
+            {pay.isPending ? '...' : t('pay')}
          </button>
        ) : (
          <button
@@ -177,7 +171,7 @@ const SiRow: React.FC<{ item: SiDocument; index: number }> = ({
            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 active:scale-95 transition-all duration-150"
          >
            <Eye size={11} />
-            Ko&apos;rish
+            {t('view')}
          </button>
        )}
      </td>
@@ -188,15 +182,16 @@ const SiRow: React.FC<{ item: SiDocument; index: number }> = ({
 // ─── SiTable ───────────────────────────────────────────────────────────────────

 export const SiTable: React.FC = () => {
+  const t = useTranslations('Cabinet');
  const { items, isLoading, isError } = useSiHistory();

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
-          <h2 className="text-xl font-bold text-slate-900">SI detektor</h2>
+          <h2 className="text-xl font-bold text-slate-900">{t('siNav')}</h2>
          <p className="text-sm text-slate-500 mt-0.5">
-            {isLoading ? '...' : `${items.length} ta tekshiruv`}
+            {isLoading ? '...' : t('checksCount', { count: items.length })}
          </p>
        </div>
        <SiButton />
@@ -208,14 +203,14 @@ export const SiTable: React.FC = () => {
            <thead>
              <tr className="bg-slate-50 border-b border-slate-100">
                {[
-                  '#',
-                  'Sarlavha',
-                  'Fayl',
-                  "So'z",
+                  t('tableNum'),
+                  t('tableTitle'),
+                  t('tableFile'),
+                  t('words'),
                  'SI%',
-                  'Sana',
-                  'Holat',
-                  'Amal',
+                  t('date'),
+                  t('status'),
+                  t('action'),
                ].map((h) => (
                  <th
                    key={h}
--- a/src/widgets/history/ui/historyPage.tsx
+++ b/src/widgets/history/ui/historyPage.tsx
@@ -22,7 +22,7 @@ const PageHeader: React.FC = () => {
        <p className="mt-1 text-sm text-slate-500">{t('description')}</p>
      </div>
      <Link
-        href={'/plagat'}
+        href={'/plagiat'}
        className={`${pathname === '/cabinet' ? 'flex' : 'hidden'} 
          items-center gap-2 px-2 py-1 group relative overflow-hidden rounded-sm bg-linear-to-br 
          from-blue-500 to-blue-600 text-left shadow-md hover:shadow-xl transition-all duration-200 
--- a/src/widgets/history/ui/historyTableRow.tsx
+++ b/src/widgets/history/ui/historyTableRow.tsx
@@ -17,6 +17,7 @@ export const StateBadge: React.FC<{ state: 'paid' | 'unpaid' }> = ({
  state,
 }) => {
  const isPaid = state === 'paid';
+  const t = useTranslations();
  return (
    <span
      className={[
@@ -30,7 +31,7 @@ export const StateBadge: React.FC<{ state: 'paid' | 'unpaid' }> = ({
          isPaid ? 'bg-emerald-500' : 'bg-rose-500',
        ].join(' ')}
      />
-      {isPaid ? "To'langan" : "To'lanmagan"}
+      {isPaid ? t('Cabinet.paid') : t('Cabinet.unpaid')}
    </span>
  );
 };
@@ -127,7 +128,7 @@ export const HistoryTableRow: React.FC<
            }}
            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"
          >
-            Ko&apos;rish
+            {tUnknown('HistoryPage.view')}
            <ArrowRight size={11} />
          </button>
        </td>
--- a/src/widgets/home/index.tsx
+++ b/src/widgets/home/index.tsx
@@ -12,7 +12,7 @@ const PlagiarismLanding = () => {
    const data = localStorage.getItem('user');

    if (data) {
-      route.push('/plagat');
+      route.push('/plagiat');
    }
  }, []);
  return (
--- a/src/widgets/plagiatCheck/lib/validation.ts
+++ b/src/widgets/plagiatCheck/lib/validation.ts
@@ -42,6 +42,11 @@ export function validatePlagiarismForm(
    }
  }

+  // docuemnt - type validation
+  if (!state.type) {
+    errors.type = 'Type is required!';
+  }
+
  return errors;
 }

--- a/src/widgets/plagiatCheck/ui/Plagiraismcheckform.tsx
+++ b/src/widgets/plagiatCheck/ui/Plagiraismcheckform.tsx
@@ -182,6 +182,8 @@ export function PlagiarismCheckForm() {
                  value={form.type}
                  onChange={setOption}
                  disabled={submission.status === 'success'}
+                  hasError={!!errors.type}
+                  error={errors.type}
                />

                {/* Submit */}
--- a/src/widgets/plagiatCheck/ui/documentsType.tsx
+++ b/src/widgets/plagiatCheck/ui/documentsType.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
 import { FieldWrapper } from './Plagiraismui';
 import { useQuery } from '@tanstack/react-query';
@@ -16,12 +16,16 @@ interface DocumentsTypesProps {
  value: number;
  onChange: (value: number) => void;
  disabled?: boolean;
+  hasError?: boolean;
+  error?: string;
 }

 export default function DocumentsTypes({
  value,
  onChange,
  disabled,
+  hasError,
+  error,
 }: DocumentsTypesProps) {
  const t = useTranslations('DocumentTypes');
  const { data, isLoading } = useQuery({
@@ -32,18 +36,29 @@ export default function DocumentsTypes({
      ),
  });

-  const selected = data?.find((item) => item.id === value);
+  useEffect(() => {
+    console.log({ value });
+  }, [value]);

  return (
-    <FieldWrapper htmlFor="document_type" label={t('label')}>
+    <FieldWrapper
+      htmlFor="document_type"
+      label={t('label')}
+      error={error}
+      required
+    >
      <select
        id="document_type"
-        value={selected?.name}
+        value={value || ''}
        onChange={(e) => {
          onChange(Number(e.target.value));
        }}
        disabled={isLoading || disabled}
-        className={`${inputCls} cursor-pointer`}
+        className={`${inputCls} cursor-pointer ${
+          hasError
+            ? 'border-rose-400 bg-rose-50 hover:bg-rose-50'
+            : 'border-stone-300 bg-stone-50 hover:border-blue-500 hover:bg-blue-50'
+        }`}
      >
        <option value="" disabled>
          {isLoading ? t('loading') : t('placeholder')}