11.15-bob: Dashboard loyiha — layout, auth

  DASHBOARD ARXITEKTURASI (qatlamlar):

  ┌─────────────────────────────────────────────────────────┐
  │ ROUTING 11.9-bob — public / protected / admin sahifalar    │
  │                                                           │
  │ LAYOUT — sidebar + header + Outlet (umumiy karkas — 2.3)  │
  │                                                           │
  │ SAHIFALAR — Dashboard, Users, Products, Settings... (CRUD)│
  │                                                           │
  │ STATE — auth (Context), server (Query — 12.4), UI (local) │
  │                                                           │
  │ API QATLAMI — axios instance + interceptors (token — 2.8) │
  └─────────────────────────────────────────────────────────┘

  LOYIHA TUZILISHI (feature-based — 11.3: 2.9):
  src/
  ├── app/           App, router, providers (global setup)
  ├── components/    umumiy UI (Layout, Sidebar, Button, Table, Modal)
  ├── features/      auth/, users/, products/ (har feature: components+hooks+api)
  ├── lib/           api (axios), utils
  ├── hooks/         umumiy hooklar (useToggle, useMediaQuery)
  └── types/         umumiy turlar

   Dashboard — qatlamlar (routinglayoutsahifastateAPI); har biri aniq vazifali
   Feature-based tuzilish (katta loyiha — bog'liq narsalar birga — 11.3: 2.9, 9.3)

  LAYOUT — barcha sahifada umumiy karkas (sidebar + header), faqat kontent o'zgaradi (11.9: 2.7):

  ┌──────────┬──────────────────────────────────────┐
  │          │  HEADER (qidiruv, profil, mavzu)      │
  │ SIDEBAR  ├──────────────────────────────────────┤
  │ (menyu,  │                                        │
  │  navigat-│  <Outlet />   sahifa kontenti         │
  │  siya)   │  (Dashboard / Users / Products...)     │
  │          │                                        │
  └──────────┴──────────────────────────────────────┘

  function DashboardLayout() {
    return (
      <div className="layout">
        <Sidebar />                       {/* navigatsiya (NavLink — 11.9: 2.5) */}
        <div className="main">
          <Header />                       {/* qidiruv, profil, mavzu */}
          <main className="content">
            <Outlet />                     {/*  sahifa shu yerda (11.9: 2.7) */}
          </main>
        </div>
      </div>
    );
  }

   Layout — bir marta (sidebar/header takrorlanmaydi); Outlet — sahifaga qarab o'zgaradi
   Nested route: <Route element={<DashboardLayout/>}> ichida bola sahifalar (11.9: 2.7)

  RESPONSIVE — desktop'da sidebar doim ko'rinadi; mobilda yashirin (toggle bilan ochiladi):

  DESKTOP (≥768px):          MOBIL (<768px):
  ┌────┬──────────┐          ┌──────────────┐
  │side│ kontent  │          │  header     │    sidebar yashirin
  │bar │          │          ├──────────────┤
  │    │          │          │ kontent      │    bossa sidebar "ustidan" ochiladi
  └────┴──────────┘          └──────────────┘

  function DashboardLayout() {
    const [sidebarOpen, setSidebarOpen] = useState(false);
    const isMobile = useMediaQuery("(max-width: 768px)");   // 11.7 custom hook

    return (
      <div className="layout">
        <Sidebar open={!isMobile || sidebarOpen} onClose={() => setSidebarOpen(false)} />
        {isMobile && sidebarOpen && <div className="overlay" onClick={() => setSidebarOpen(false)} />}
        <div className="main">
          <Header onMenuClick={() => setSidebarOpen(true)} showMenu={isMobile} />
          <main><Outlet /></main>
        </div>
      </div>
    );
  }

   useMediaQuery 11.7-bob — mobil/desktop aniqlash; mobilda sidebar overlay (ustidan)
   CSS (1.5 responsive) + JS holat (sidebarOpen) — birga (mobil UX)

  AUTH OQIMI (to'liq jarayon — 5.15, 5.16 backend bilan):

  1. LOGIN — foydalanuvchi email/parol kiritadi  backend'ga so'rov (POST /auth/login)
  2. TOKEN — backend access token (+ refresh token) qaytaradi  frontend SAQLAYDI
  3. SAQLASH — token localStorage / cookie'da (sahifa yangilaganda eslab qolish — 2.6)
  4. HAR SO'ROV — token Authorization header'da yuboriladi (interceptor — 2.8)
  5. PROTECTED — token bor  himoyalangan sahifa; yo'q  login'ga 2.7-bob
  6. REFRESH — access token muddati tugasa  refresh token bilan yangilash 2.8-bob
  7. LOGOUT — token o'chiriladi  login'ga

  ┌────────────────────────────────────────────────────────────┐
  │ login  token (saqla)  har so'rovga token  protected      │
  │ token tugasa  refresh; logout  token o'chir               │
  └────────────────────────────────────────────────────────────┘

   Frontend auth — token boshqaruvi (saqlash, yuborish, yangilash, o'chirish)
   HAQIQIY tekshiruv backend'da (frontend faqat token uzatadi + UX — 5.16, 14)

  AUTH STATE — foydalanuvchi holatini butun ilovaga ulashish (Context — 11.5: 2.11):

  interface AuthContextType {
    user: User | null;
    token: string | null;
    login: (email: string, password: string) => Promise<void>;
    logout: () => void;
    isLoading: boolean;
  }

  PERSIST (sahifani yangilaganda eslab qolish — 11.7 useLocalStorage):
  - token localStorage'da saqlanadi (sahifa yangilansa — o'qiladi)
  - mount'da: token bor  foydalanuvchini tiklash (GET /auth/me yoki token'dan)

  function AuthProvider({ children }) {
    const [token, setToken] = useLocalStorage<string | null>("token", null);   // 11.7
    const [user, setUser] = useState<User | null>(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {                       // mount'da — token bor bo'lsa user'ni tikla
      if (token) fetchMe().then(setUser).finally(() => setIsLoading(false));
      else setIsLoading(false);
    }, [token]);
    // login/logout funksiyalari...
  }

   Auth state — Context (butun ilova ulashadi); token persist (localStorage — 11.7)
   isLoading — boshlang'ich tekshiruv paytida (token bor, lekin user hali yuklanmagan — 2.7)

  PROTECTED ROUTE — token/user bor  ruxsat; yo'q  login (11.9: 2.12 — auth bilan):

  function ProtectedRoute() {
    const { user, isLoading } = useAuth();
    const location = useLocation();

    if (isLoading) return <FullPageSpinner />;   //  boshlang'ich tekshiruv (2.5 — login'ga otma)
    if (!user) return <Navigate to="/login" state={{ from: location.pathname }} replace />;
    return <Outlet />;                            // himoyalangan bola sahifalar (11.9: 2.7)
  }

  ROL BILAN (RBAC — 5.17 frontend ko'rinishi):
  function RoleRoute({ allowedRoles }: { allowedRoles: string[] }) {
    const { user } = useAuth();
    if (!user) return <Navigate to="/login" replace />;
    if (!allowedRoles.includes(user.role)) return <Navigate to="/403" replace />;   // ruxsat yo'q
    return <Outlet />;
  }

  // Routing:
  <Route element={<ProtectedRoute />}>           {/* hammasi himoyalangan */}
    <Route element={<DashboardLayout />}>        {/* layout */}
      <Route path="/dashboard" element={<Dashboard />} />
      <Route element={<RoleRoute allowedRoles={["admin"]} />}>   {/* faqat admin */}
        <Route path="/users" element={<Users />} />
      </Route>
    </Route>
  </Route>

   ProtectedRoute — Outlet bilan (guruh himoya); RoleRoute — rol tekshiruvi (RBAC)
   isLoading tekshiruvi — boshlang'ich auth paytida login'ga otilib ketmaslik (2.5)

  API QATLAMI — markazlashgan so'rov boshqaruvi (axios instance — 2.18):

  // lib/api.ts — bitta sozlangan instance (butun ilova ishlatadi):
  const api = axios.create({
    baseURL: import.meta.env.VITE_API_URL,    // env (11.3: 2.10)
    timeout: 10000,
  });

  // REQUEST interceptor — HAR so'rovga token avtomatik qo'shadi:
  api.interceptors.request.use((config) => {
    const token = localStorage.getItem("token");
    if (token) config.headers.Authorization = `Bearer ${token}`;   // har so'rovga 2.4-bob
    return config;
  });

  // RESPONSE interceptor — 401 (token tugadi)  refresh yoki logout:
  api.interceptors.response.use(
    (response) => response,
    async (error) => {
      if (error.response?.status === 401) {
        // refresh token bilan yangilash (yoki logout  login)
        // ... yangi token olib, so'rovni qayta yuborish
      }
      return Promise.reject(error);
    }
  );

   axios instance — bir marta sozlash (baseURL, timeout); interceptor — har so'rovga avtomatik
   Request interceptor: token qo'shadi | Response interceptor: 401 (refresh/logout) — 2.4

  MA'LUMOT OLISH — har sahifada BIR XIL naqsh (loading/error/empty/data):

  function UsersPage() {
    const { data, isLoading, error } = useQuery({                // 12.4 (TanStack Query)
      queryKey: ["users"],
      queryFn: () => api.get("/users").then(r => r.data),
    });

    if (isLoading) return <TableSkeleton />;        // 1. yuklanmoqda (skeleton — 11.8: 2.9)
    if (error) return <ErrorState onRetry={...} />; // 2. xato (qayta urinish)
    if (!data?.length) return <EmptyState />;       // 3. bo'sh (hech narsa yo'q)
    return <UsersTable users={data} />;             // 4. ma'lumot bor
  }

  4 HOLAT (har ma'lumot sahifasi SHU naqshda):
  - LOADING  skeleton (kontent shakli — 11.8: 2.9)
  - ERROR  xato xabari + qayta urinish tugmasi
  - EMPTY  "Hali ma'lumot yo'q" (+ yaratish tugmasi)
  - DATA  asosiy kontent (jadval/karta)

   4 holat (loading/error/empty/data) — har sahifada izchil (foydalanuvchi tushunarli)
   TanStack Query 12.4-bob — bu naqshni avtomatlashtiradi (kesh, retry, refetch)

  CRUD (Create/Read/Update/Delete) — har resurs (users, products) BIR XIL naqshda:

  RO'YXAT sahifasi (Read):
  - jadval (ma'lumot — 2.8 naqsh) + qidiruv/filtr (useSearchParams — 11.9: 2.10)
  - "Yangi" tugmasi  yaratish formasi/sahifasi
  - har qator: tahrir / o'chirish tugmasi

  YARATISH/TAHRIRLASH (Create/Update) — bir xil forma (RHF + Zod — 11.10):
  - yangi: bo'sh forma  POST
  - tahrir: mavjud ma'lumot (reset — 11.10: 2.11)  PUT

  O'CHIRISH (Delete):
  - tasdiqlash modal (portal — 11.12)  DELETE  ro'yxatni yangilash

  ┌────────────────────────────────────────────────────────────┐
  │ Ro'yxat (jadval+filtr)  Yaratish/Tahrir (forma)  O'chirish │
  │ (tasdiq). Har resurs SHU naqshda (users, products, orders)  │
  └────────────────────────────────────────────────────────────┘

   CRUD naqshi — bir marta yoz, har resursga mosla (usersproducts: bir xil struktura)
   Forma (RHF+Zod — 11.10), modal (portal — 11.12), filtr (query — 11.9) birlashadi

  BILDIRISHNOMA (toast) — amal natijasini ko'rsatish (saqlandi, o'chirildi, xato):
  - portal'ga render 11.12-bob, avtomatik yo'qolish (taymer — 11.5)
  - Context yoki kutubxona (react-hot-toast, sonner — tayyor)
  toast.success("Saqlandi");  toast.error("Xato yuz berdi");

  MAVZU (dark/light) — Context + useLocalStorage (persist — 11.7):
  - mavzu localStorage'da; <html data-theme="dark"> + CSS o'zgaruvchilar 1.5-bob

  PRODUCTION TAYYORLIK (dashboard sifati):
   Error boundary (har sahifa/widget — ilova qulamasin — 11.12)
   Code splitting (har sahifa lazy — tez yuklash — 11.8)
   a11y (klaviatura, aria, fokus — sidebar/modal/forma — 1.9, 11.12)
   Loading/error holatlari (2.8 — "muzlab qolgan" ekran yo'q)
   TypeScript (type-safe — 11.14); Performance (memo/virtualizatsiya — 11.11)

   Toast — amal feedback (UX); mavzu — Context+persist; production — sifat checklist
   Dashboard sifati = error boundary + lazy + a11y + holatlar + types (hammasi birga)

  TOKENNI QAYERDA SAQLASH? — ikki asosiy variant, har birining tahdidi bor (14-QISM cross-ref):

  ┌───────────────────┬──────────────────────────┬──────────────────────────┐
  │                   │ localStorage / sessionStorage │ httpOnly cookie        │
  ├───────────────────┼──────────────────────────┼──────────────────────────┤
  │ JS o'qiy oladimi? │ HA — document orqali      │ YO'Q — JS ko'rmaydi       │
  │ XSS tahdidi       │ YUQORI (skript tokenni    │ PAST (JS o'qiy olmaydi)   │
  │                   │ o'g'irlashi mumkin)       │                          │
  │ CSRF tahdidi      │ PAST (avtomatik yubormaydi)│ BOR (cookie avtomatik    │
  │                   │                           │  ketadi  SameSite kerak) │
  │ Har so'rovga      │ QO'LDA (interceptor)      │ AVTOMATIK (brauzer)       │
  │ Sozlash           │ Oson (frontend)           │ Backend sozlaydi (Set-Cookie)│
  └───────────────────┴──────────────────────────┴──────────────────────────┘

   localStorage — qulay, lekin XSS bo'lsa token o'g'irlanadi (har skript o'qiy oladi)
   httpOnly cookie — JS o'qiy olmaydi (XSS'ga chidamli), lekin CSRF himoyasi kerak (SameSite=Strict/Lax)
   ENG XAVFSIZ naqsh: access token — xotirada (JS o'zgaruvchi), refresh token — httpOnly cookie

  ACCESS + REFRESH TOKEN — nega ikkitasi?

  ACCESS token   — qisqa umrli (masalan 15 daqiqa); har so'rovda yuboriladi.
                   O'g'irlansa ham tez muddati tugaydi (zarar cheklangan).
  REFRESH token  — uzoq umrli (masalan 7 kun); FAQAT yangi access olishga.
                   Xavfsiz saqlanadi (httpOnly cookie — 2.11).

  REFRESH OQIMI (401  yangi access  so'rovni qayta yuborish):

  so'rov  401 (access tugadi)  POST /auth/refresh  yangi access  so'rovni qayta yubor
                                        │
                                        └─ refresh ham yaroqsiz  logout  login

   MUAMMO: bir vaqtda 5 ta so'rov 401 olsa  5 marta refresh chaqiriladi (poyga)
   YECHIM: refresh navbati (queue) — birinchi 401 refresh qiladi, qolganlar KUTADI,
     keyin hammasi yangi token bilan qayta yuboriladi (bitta refresh)

  RBAC UI — foydalanuvchi ko'rmasligi kerak narsani KO'RSATMASLIK (nafaqat route, UI ham):

  3 QATLAM (hammasi kerak):
  1. ROUTE   — RoleRoute (admin sahifaga user kira olmaydi — 2.6)
  2. MENU    — sidebar'da faqat ruxsat bor havolalar ko'rinadi (user "Users" menyuni ko'rmaydi)
  3. TUGMA   — amal tugmalari rol bo'yicha (user "O'chirish" tugmasini ko'rmaydi)

  <Can role="admin">                    {/* yordamchi komponent */}
    <button onClick={onDelete}>O'chirish</button>
  </Can>

  // yoki hook:
  const { hasRole } = useAuth();
  {hasRole("admin") && <DeleteButton />}

   UI yashirish — QULAYLIK (UX), HIMOYA emas (backend baribir tekshiradi — 2.4, 5.17)
   3 qatlam: route + menu + tugma (izchil — user ko'rmasligi kerak narsani ko'rmaydi)

  SERVER STATE ≠ CLIENT STATE — server ma'lumoti alohida boshqariladi (12.4 to'liq):

  CLIENT state (useState/Context)  │  SERVER state (TanStack Query)
  - UI holati (modal ochiq?)       │  - serverdagi ma'lumot (users, products)
  - mavzu, forma qiymatlari        │  - kesh, eskirish, qayta yuklash, sinxronizatsiya
  - ilova o'zi egasi               │  - server egasi (frontend faqat "nusxa" tutadi)

  QUERY (o'qish) — kesh + avtomatik holat:
    useQuery({ queryKey: ["products"], queryFn })   data/isLoading/error 2.8-bob

  MUTATION (o'zgartirish) — POST/PUT/DELETE + keshni yangilash:
    onSuccess: invalidateQueries(["products"])    ro'yxat qayta yuklanadi (yangi ma'lumot)

  OPTIMISTIC UPDATE — javobni KUTMASDAN UI'ni darrov yangilash (tez his):
    onMutate: keshni oldindan o'zgartir  xato bo'lsa onError'da orqaga qaytar (rollback)

   Server state — TanStack Query (kesh, dedup, retry, refetch — qo'lda yozmang)
   invalidate — o'zgartirgandan keyin ro'yxatni yangilash; optimistic — tez UX

  JADVAL — dashboard'ning markaziy komponenti (ko'p ma'lumotni boshqarish):

  4 IMKONIYAT (odatda URL'da — useSearchParams — ulashiladigan/yangilashga chidamli — 11.9):
  - PAGINATION — sahifalash (?page=2&limit=20) — katta ma'lumotni bo'lib yuklash
  - SORT       — tartiblash (?sort=name&order=asc) — ustun sarlavhasiga bosish
  - FILTER     — filtrlash (?status=active) — kategoriya/holat bo'yicha
  - SEARCH     — qidirish (?search=olma) — matn bo'yicha (debounce bilan — 11.7)

  SERVER-SIDE (katta ma'lumot — tavsiya):     CLIENT-SIDE (kichik ma'lumot):
  - server pagination/sort qiladi             - hammasi yuklanadi, frontend saralaydi
  - ?page/sort/filter  backend qaytaradi     - kichik ro'yxatga (<1000) qulay
  - queryKey'ga kiradi  kesh har filtrga      - katta ma'lumotga sekin

   URL state (useSearchParams) — filtr/sahifa URL'da (ulashiladi, orqaga tugmasi ishlaydi)
   Search — debounce 11.7-bob — har harfda so'rov yubormaslik (300ms kutib, bitta so'rov)

  QO'SHIMCHA DASHBOARD ELEMENTLARI (professional to'liqlik):

  BREADCRUMB — foydalanuvchi qayerda ekanini ko'rsatadi (navigatsiya konteksti):
    Bosh sahifa / Mahsulotlar / Olma tahriri      har bo'lak — havola (11.9 route)
    (matchRoutes / useLocation'dan avtomatik quriladi)

  CHART (vizualizatsiya) — dashboard statistikasi grafikda (recharts / chart.js):
    <LineChart data={sales}>...</LineChart>        daromad, foydalanuvchi o'sishi
    (recharts — React'ga tabiiy, deklarativ; chart.js — canvas, kuchli, imperativ)

  i18n (ko'p til — react-i18next) — matnlar tarjima kalitida (8.30 backend i18n bilan):
    const { t } = useTranslation();  <h1>{t("dashboard.title")}</h1>
    (til fayllari: uz.json, en.json, ru.json; til almashtirgich header'da)

  UI KUTUBXONA — tanlov (vaqt tejash vs nazorat):
    shadcn/ui  — nusxa-joylashtir (kod sizniki, to'liq nazorat, Tailwind)
    MUI        — tayyor, boy komponentlar (Material Design, tez)
    Ant Design — enterprise/admin uchun kuchli (jadval, forma boy)

   Breadcrumb — navigatsiya konteksti; chart — ma'lumotni ko'rish; i18n — ko'p til
   UI kutubxona — o'zing yozish (nazorat) yoki tayyor (tezlik) — loyihaga qarab

LAYOUT 2.2-bob:      <Route element={<DashboardLayout/>}> + <Outlet/> (sidebar+header+kontent)
RESPONSIVE 2.3-bob:  const isMobile = useMediaQuery("(max-width:768px)")  // 11.7
AUTH CTX 2.5-bob:    createContext<AuthContextType|null>(null)  +  useAuth() (11.14: 2.13)
PERSIST 2.5-bob:     useLocalStorage<string|null>("token", null)  // 11.7
PROTECTED 2.6-bob:   if(isLoading) <Spinner/>; if(!user) <Navigate to="/login"/>; <Outlet/>
ROLE 2.6-bob:        if(!allowedRoles.includes(user.role)) <Navigate to="/403"/>
API 2.7-bob:         axios.create({baseURL}) + interceptors.request/response (token/401)
DATA 2.8-bob:        if(isLoading)skeleton; if(error)retry; if(!data.length)empty; <Data/>
CRUD 2.9-bob:        ro'yxat(jadval+filtr)  forma(RHF+Zod)  o'chir(modal tasdiq)
TOAST 2.10-bob:      toast.success(...) / toast.error(...)  // portal + taymer
REFRESH 2.12-bob:    401  POST /auth/refresh  yangi access  so'rov qayta (queue)
ROLE UI 2.13-bob:    <Can role="admin">...</Can>  |  NAV.filter(i=>i.roles.includes(user.role))
QUERY 2.14-bob:      useQuery(o'qish) + useMutation(onSuccess: invalidateQueries)
TABLE 2.15-bob:      useSearchParams: ?page&sort&search + useDebounce(search,300)  // 11.7
CHART 2.16-bob:      <ResponsiveContainer><LineChart data><Line dataKey/></LineChart>  // recharts
I18N 2.16-bob:       const {t}=useTranslation(); t("dashboard.title")  // react-i18next

import { Outlet, NavLink } from "react-router-dom";

function DashboardLayout() {
  return (
    <div className="dashboard-layout">
      <aside className="sidebar">
        <nav>
          <NavLink to="/dashboard" className={({ isActive }) => isActive ? "active" : ""} end>
             Dashboard
          </NavLink>
          <NavLink to="/users" className={({ isActive }) => isActive ? "active" : ""}>
             Foydalanuvchilar
          </NavLink>
          <NavLink to="/products"> Mahsulotlar</NavLink>
          <NavLink to="/settings"> Sozlamalar</NavLink>
        </nav>
      </aside>
      <div className="main">
        <header className="header">
          <SearchBar />
          <UserMenu />
        </header>
        <main className="content">
          <Outlet />              {/* sahifa kontenti (11.9: 2.7) */}
        </main>
      </div>
    </div>
  );
}

function DashboardLayout() {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const isMobile = useMediaQuery("(max-width: 768px)");   // 11.7

  return (
    <div className="layout">
      <aside className={`sidebar ${isMobile && !sidebarOpen ? "hidden" : ""}`}>
        <Sidebar onNavigate={() => setSidebarOpen(false)} />   {/* havolaga bossa yopil */}
      </aside>
      {isMobile && sidebarOpen && (
        <div className="overlay" onClick={() => setSidebarOpen(false)} />   {/* fon — yopadi */}
      )}
      <div className="main">
        <header>
          {isMobile && <button onClick={() => setSidebarOpen(true)} aria-label="Menyu"></button>}
        </header>
        <main><Outlet /></main>
      </div>
    </div>
  );
}

interface User { id: string; name: string; role: "user" | "admin"; }
interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
  isLoading: boolean;
}

const AuthContext = createContext<AuthContextType | null>(null);

export function AuthProvider({ children }: React.PropsWithChildren) {
  const [token, setToken] = useLocalStorage<string | null>("token", null);   // 11.7 persist
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {                          // mount'da: token bor  user'ni tikla (2.5)
    if (!token) { setIsLoading(false); return; }
    api.get("/auth/me")
      .then(r => setUser(r.data))
      .catch(() => setToken(null))           // token yaroqsiz  tozala
      .finally(() => setIsLoading(false));
  }, [token]);

  const login = async (email: string, password: string) => {
    const { data } = await api.post("/auth/login", { email, password });
    setToken(data.token);                    // saqla (persist)
    setUser(data.user);
  };
  const logout = () => { setToken(null); setUser(null); };

  return <AuthContext.Provider value={{ user, login, logout, isLoading }}>{children}</AuthContext.Provider>;
}

export function useAuth(): AuthContextType {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error("useAuth AuthProvider ichida");
  return ctx;
}

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const loginSchema = z.object({
  email: z.string().email("Email noto'g'ri"),
  password: z.string().min(6, "Kamida 6 belgi"),
});
type LoginForm = z.infer<typeof loginSchema>;

function LoginPage() {
  const { login } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from || "/dashboard";   // qaerga bormoqchi edi (11.9: 2.12)

  const { register, handleSubmit, setError, formState: { errors, isSubmitting } } =
    useForm<LoginForm>({ resolver: zodResolver(loginSchema) });

  const onSubmit = async (data: LoginForm) => {
    try {
      await login(data.email, data.password);
      navigate(from, { replace: true });             // login'dan keyin (11.9: 2.9)
    } catch {
      setError("root", { message: "Email yoki parol noto'g'ri" });   // server xatosi (11.10: 2.12)
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="Email" />
      {errors.email && <span>{errors.email.message}</span>}
      <input type="password" {...register("password")} placeholder="Parol" />
      {errors.password && <span>{errors.password.message}</span>}
      {errors.root && <p className="error">{errors.root.message}</p>}
      <button disabled={isSubmitting}>{isSubmitting ? "..." : "Kirish"}</button>
    </form>
  );
}

import { Navigate, Outlet, useLocation } from "react-router-dom";

function ProtectedRoute() {
  const { user, isLoading } = useAuth();
  const location = useLocation();
  if (isLoading) return <FullPageSpinner />;       // boshlang'ich tekshiruv (2.5)
  if (!user) return <Navigate to="/login" state={{ from: location.pathname }} replace />;
  return <Outlet />;
}

function RoleRoute({ allowedRoles }: { allowedRoles: string[] }) {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (!allowedRoles.includes(user.role)) return <Navigate to="/403" replace />;
  return <Outlet />;
}

// lib/api.ts
import axios from "axios";

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000,
});

// Request — har so'rovga token (2.7)
api.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) config.headers.Authorization = `Bearer ${JSON.parse(token)}`;
  return config;
});

// Response — 401  token tugadi (refresh yoki logout)
api.interceptors.response.use(
  (res) => res,
  async (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem("token");
      window.location.href = "/login";        // logout  login (oddiy yondashuv)
      // (ilg'or: refresh token bilan yangilash + so'rovni qayta yuborish)
    }
    return Promise.reject(error);
  }
);

import { useQuery } from "@tanstack/react-query";   // 12.4

function UsersPage() {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ["users"],
    queryFn: () => api.get<User[]>("/users").then(r => r.data),
  });

  if (isLoading) return <TableSkeleton rows={8} />;                       // 1. loading (11.8: 2.9)
  if (error) return <ErrorState message="Yuklab bo'lmadi" onRetry={refetch} />;   // 2. error
  if (!data?.length) return <EmptyState message="Foydalanuvchilar yo'q" />;       // 3. empty
  return <UsersTable users={data} />;                                    // 4. data
}
//  4 holat — har ma'lumot sahifasida izchil (foydalanuvchi har doim aniq holatni ko'radi — 2.8)

function ProductsPage() {
  const [searchParams, setSearchParams] = useSearchParams();   // 11.9: 2.10
  const search = searchParams.get("search") || "";

  const { data, isLoading } = useQuery({
    queryKey: ["products", search],
    queryFn: () => api.get(`/products?search=${search}`).then(r => r.data),
  });

  return (
    <div>
      <div className="page-header">
        <h1>Mahsulotlar</h1>
        <Link to="/products/new" className="btn-primary">+ Yangi</Link>   {/* yaratish */}
      </div>
      <input
        value={search}
        onChange={(e) => setSearchParams({ search: e.target.value })}     // filtr URL'da 11.9-bob
        placeholder="Qidirish..."
      />
      {isLoading ? <TableSkeleton /> : <ProductsTable products={data ?? []} />}
    </div>
  );
}

function ProductForm() {
  const { id } = useParams();                    // tahrir bo'lsa id bor (11.9: 2.6)
  const isEdit = Boolean(id);
  const navigate = useNavigate();

  const { register, handleSubmit, reset } = useForm<ProductInput>({ resolver: zodResolver(productSchema) });

  // Tahrir: mavjud ma'lumotni yukla (11.10: 2.11)
  const { data: product } = useQuery({
    queryKey: ["product", id],
    queryFn: () => api.get(`/products/${id}`).then(r => r.data),
    enabled: isEdit,
  });
  useEffect(() => { if (product) reset(product); }, [product, reset]);

  const onSubmit = async (data: ProductInput) => {
    if (isEdit) await api.put(`/products/${id}`, data);   // tahrir  PUT
    else await api.post("/products", data);               // yangi  POST
    toast.success(isEdit ? "Yangilandi" : "Qo'shildi");
    navigate("/products");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="Nom" />
      <input type="number" {...register("price")} placeholder="Narx" />
      <button>{isEdit ? "Saqlash" : "Qo'shish"}</button>
    </form>
  );
}

function DeleteButton({ productId, productName }: { productId: string; productName: string }) {
  const [showConfirm, setShowConfirm] = useState(false);
  const queryClient = useQueryClient();

  const { mutate, isPending } = useMutation({
    mutationFn: () => api.delete(`/products/${productId}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["products"] });   // ro'yxatni yangilash (12.4)
      toast.success("O'chirildi");
      setShowConfirm(false);
    },
  });

  return (
    <>
      <button onClick={() => setShowConfirm(true)} aria-label="O'chirish"></button>
      {showConfirm && (
        <Modal onClose={() => setShowConfirm(false)}>     {/* portal — 11.12 */}
          <p>"{productName}"ni o'chirishni tasdiqlaysizmi?</p>
          <button onClick={() => mutate()} disabled={isPending}>Ha, o'chir</button>
          <button onClick={() => setShowConfirm(false)}>Bekor</button>
        </Modal>
      )}
    </>
  );
}

function DashboardPage() {
  const { data: stats, isLoading } = useQuery({
    queryKey: ["stats"],
    queryFn: () => api.get("/stats").then(r => r.data),
  });

  if (isLoading) return <StatsSkeleton />;

  return (
    <div className="stats-grid">
      <StatCard title="Foydalanuvchilar" value={stats.users} icon="" trend="+12%" />
      <StatCard title="Buyurtmalar" value={stats.orders} icon="" trend="+5%" />
      <StatCard title="Daromad" value={`${stats.revenue} so'm`} icon="" trend="+8%" />
      <StatCard title="Faol sessiyalar" value={stats.sessions} icon="" />
    </div>
  );
}

function StatCard({ title, value, icon, trend }: { title: string; value: string | number; icon: string; trend?: string }) {
  return (
    <div className="stat-card">
      <span className="stat-icon">{icon}</span>
      <div><p className="stat-title">{title}</p><p className="stat-value">{value}</p></div>
      {trend && <span className="stat-trend">{trend}</span>}
    </div>
  );
}

const ThemeContext = createContext<{ theme: string; toggle: () => void } | null>(null);

function ThemeProvider({ children }: React.PropsWithChildren) {
  const [theme, setTheme] = useLocalStorage("theme", "light");   // 11.7 persist

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);   // <html data-theme="dark">
  }, [theme]);

  const toggle = () => setTheme(t => (t === "light" ? "dark" : "light"));
  return <ThemeContext.Provider value={{ theme, toggle }}>{children}</ThemeContext.Provider>;
}
// CSS: [data-theme="dark"] { --bg: #1a1a1a; --text: #fff; }  (1.5 o'zgaruvchilar)

import { lazy, Suspense } from "react";

const Login = lazy(() => import("./pages/Login"));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Users = lazy(() => import("./pages/Users"));
const Products = lazy(() => import("./pages/Products"));

function AppRouter() {
  return (
    <ErrorBoundary FallbackComponent={GlobalError}>   {/* 11.12 */}
      <Suspense fallback={<FullPageSpinner />}>        {/* 11.8 lazy */}
        <Routes>
          <Route path="/login" element={<Login />} />               {/* public */}
          <Route element={<ProtectedRoute />}>                      {/* himoyalangan */}
            <Route element={<DashboardLayout />}>                   {/* layout */}
              <Route path="/dashboard" element={<Dashboard />} />
              <Route path="/products" element={<Products />} />
              <Route path="/products/new" element={<ProductForm />} />
              <Route path="/products/:id/edit" element={<ProductForm />} />
              <Route element={<RoleRoute allowedRoles={["admin"]} />}>   {/* faqat admin */}
                <Route path="/users" element={<Users />} />
              </Route>
            </Route>
          </Route>
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Suspense>
    </ErrorBoundary>
  );
}

// main.tsx — barcha provider'lar to'g'ri tartibda
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";   // 12.4
import { BrowserRouter } from "react-router-dom";

const queryClient = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>     {/* data fetching 12.4-bob */}
      <ThemeProvider>                               {/* mavzu 2.10-bob */}
        <BrowserRouter>                             {/* routing 11.9-bob */}
          <AuthProvider>                            {/* auth (router ichida — useNavigate) */}
            <AppRouter />
            <Toaster />                             {/* toast 2.10-bob */}
          </AuthProvider>
        </BrowserRouter>
      </ThemeProvider>
    </QueryClientProvider>
  </StrictMode>
);
//  Provider tartibi: Query  Theme  Router  Auth (auth router ichida — navigatsiya uchun)

// lib/api.ts — 401  refresh, bir vaqtdagi so'rovlarni navbatga qo'yish
let isRefreshing = false;
let queue: Array<(token: string) => void> = [];   // refresh kutayotgan so'rovlar

api.interceptors.response.use(
  (res) => res,
  async (error) => {
    const original = error.config;
    if (error.response?.status !== 401 || original._retry) {
      return Promise.reject(error);                // 401 emas yoki allaqachon urindik
    }

    if (isRefreshing) {                            // refresh davom etmoqda  NAVBATGA
      return new Promise((resolve) => {
        queue.push((token) => {
          original.headers.Authorization = `Bearer ${token}`;
          resolve(api(original));                  // yangi token bilan qayta yubor
        });
      });
    }

    original._retry = true;
    isRefreshing = true;
    try {
      const { data } = await api.post("/auth/refresh");   // refresh (cookie yoki refresh token)
      const newToken = data.accessToken;
      localStorage.setItem("token", JSON.stringify(newToken));
      queue.forEach((cb) => cb(newToken));         // navbatdagi so'rovlarni bo'shat
      queue = [];
      original.headers.Authorization = `Bearer ${newToken}`;
      return api(original);                        // asl so'rovni qayta yubor
    } catch (refreshError) {
      queue = [];
      localStorage.removeItem("token");
      window.location.href = "/login";             // refresh ham yaroqsiz  logout
      return Promise.reject(refreshError);
    } finally {
      isRefreshing = false;
    }
  }
);
//  Bir vaqtda ko'p 401 bo'lsa — bitta refresh, qolganlar kutadi (poyga yo'q — 2.12)

// useAuth'ga hasRole qo'shilgan deb faraz qilamiz
function Can({ role, children }: { role: string | string[]; children: React.ReactNode }) {
  const { user } = useAuth();
  const roles = Array.isArray(role) ? role : [role];
  if (!user || !roles.includes(user.role)) return null;   // ruxsat yo'q  hech narsa
  return <>{children}</>;
}

// Sidebar — menyu bandlari rol bo'yicha (11.5 shartli render)
const NAV = [
  { to: "/dashboard", label: "Dashboard", roles: ["user", "admin"] },
  { to: "/products",  label: "Mahsulotlar", roles: ["user", "admin"] },
  { to: "/users",     label: "Foydalanuvchilar", roles: ["admin"] },   // faqat admin
];

function Sidebar() {
  const { user } = useAuth();
  return (
    <nav>
      {NAV.filter((i) => user && i.roles.includes(user.role)).map((i) => (
        <NavLink key={i.to} to={i.to}>{i.label}</NavLink>
      ))}
    </nav>
  );
}

// Amal tugmasi — faqat admin ko'radi:
// <Can role="admin"><DeleteButton productId={p.id} /></Can>
//  UI yashirish — QULAYLIK; haqiqiy himoya backend'da (2.13, 5.17)

function ProductsTablePage() {
  const [params, setParams] = useSearchParams();       // filtr URL'da (11.9)
  const page = Number(params.get("page") ?? 1);
  const sort = params.get("sort") ?? "name";
  const search = params.get("search") ?? "";

  const debounced = useDebounce(search, 300);          // 11.7 — har harfda so'rov yubormaslik

  const { data, isLoading } = useQuery({
    queryKey: ["products", { page, sort, search: debounced }],   // filtr  kesh kaliti (2.14)
    queryFn: () =>
      api.get("/products", { params: { page, limit: 20, sort, search: debounced } })
         .then((r) => r.data),
    placeholderData: (prev) => prev,                   // sahifa almashganda eski ma'lumot turadi
  });

  const setParam = (key: string, value: string) =>
    setParams((p) => { p.set(key, value); if (key !== "page") p.set("page", "1"); return p; });

  return (
    <div>
      <input defaultValue={search} onChange={(e) => setParam("search", e.target.value)}
             placeholder="Qidirish..." />
      <table>
        <thead>
          <tr>
            <th onClick={() => setParam("sort", "name")}>Nom {sort === "name" ? "▲" : ""}</th>
            <th onClick={() => setParam("sort", "price")}>Narx {sort === "price" ? "▲" : ""}</th>
          </tr>
        </thead>
        <tbody>
          {isLoading
            ? <tr><td colSpan={2}><TableSkeleton /></td></tr>
            : data?.items.map((p: Product) => (
                <tr key={p.id}><td>{p.name}</td><td>{p.price}</td></tr>
              ))}
        </tbody>
      </table>
      <Pagination page={page} total={data?.totalPages ?? 1}
                  onChange={(n) => setParam("page", String(n))} />
    </div>
  );
}

// Breadcrumb — URL'dan avtomatik (har bo'lak — havola)
function Breadcrumb() {
  const location = useLocation();
  const parts = location.pathname.split("/").filter(Boolean);   // ["products","olma"]
  return (
    <nav aria-label="breadcrumb">
      <Link to="/dashboard">Bosh sahifa</Link>
      {parts.map((part, i) => {
        const to = "/" + parts.slice(0, i + 1).join("/");
        return <span key={to}> / <Link to={to}>{decodeURIComponent(part)}</Link></span>;
      })}
    </nav>
  );
}

// Chart — recharts (dashboard statistikasi grafikda)
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

function SalesChart({ data }: { data: { month: string; revenue: number }[] }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="revenue" stroke="var(--primary)" />
      </LineChart>
    </ResponsiveContainer>
  );
}

 har sahifada sidebar/header qayta yozish (takror)
 DashboardLayout + Outlet (bir marta — 2.2)

 isLoading'siz protected route (token bor user sahifa yangilashda login'ga otiladi — 2.5)
 if(isLoading) <Spinner/> (boshlang'ich tekshiruv — 2.6)

 har so'rovda qo'lda token header qo'shish (takror, unutiladi)
 axios interceptor (har so'rovga avtomatik — 2.7)

 faqat data (loading/error/empty unutilgan — "muzlagan" ekran)
 4 holat: loading/error/empty/data (2.8)

 faqat frontend protected route (API ochiq — 2.4)
 frontend (UX) + backend token tekshiruvi (5.16, 14)

 error boundary/lazy/a11y yo'q (bitta xato — oq ekran; sekin; nogironlar ishlata olmaydi)
 error boundary + lazy + a11y + holatlar (2.10)

 har 401 alohida refresh chaqiradi (5 so'rov  5 refresh — poyga, token buziladi)
 isRefreshing bayrog'i + navbat (bitta refresh, qolganlar kutadi — 2.12, Misol 15)

 faqat route himoya (user "O'chirish" tugmasini ko'radi, bosib xato oladi)
 route + menu + tugma (3 qatlam izchil — foydalanuvchi ko'rmasligi kerakni ko'rmaydi — 2.13)

 server ma'lumotini useState/useEffect'da qo'lda boshqarish (kesh/retry/refetch yo'q)
 TanStack Query (useQuery/useMutation + invalidate — 2.14)

 token'ni ko'r-ko'rona localStorage'da (XSS bo'lsa o'g'irlanadi — tahdidni bilmaslik)
 tahdidni tushunish: access xotirada + refresh httpOnly cookie (production — 2.11, 14)