├── src
    ├── vite-env.d.ts
    ├── lib
    │   └── API.ts
    ├── pages
    │   ├── NotFound.tsx
    │   ├── Loading.tsx
    │   ├── Error.tsx
    │   ├── Login.tsx
    │   ├── Blogs.tsx
    │   ├── Admins.tsx
    │   └── Trainers.tsx
    ├── middlewares
    │   ├── Axios.tsx
    │   └── Fetcher.tsx
    ├── index.css
    ├── layouts
    │   └── RootLayout.tsx
    ├── main.tsx
    ├── Store
    │   └── indexStore.tsx
    ├── Types
    │   └── indexTypes.tsx
    ├── Slicers
    │   └── UserSlicer.tsx
    ├── components
    │   ├── ui
    │   │   ├── Header.tsx
    │   │   ├── PhotoCarousel.tsx
    │   │   └── UserDropDown.tsx
    │   └── shared
    │   │   ├── AdminModal.tsx
    │   │   ├── AdminEditModal.tsx
    │   │   ├── ChangePassword.tsx
    │   │   ├── BlogModal.tsx
    │   │   ├── TrainerModal.tsx
    │   │   ├── TrainerEditModal.tsx
    │   │   └── BlogEditModal.tsx
    └── App.tsx
├── postcss.config.js
├── vercel.json
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
├── .gitignore
├── index.html
├── tsconfig.node.json
├── tsconfig.app.json
├── eslint.config.js
├── package.json
└── README.md


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/lib/API.ts:
--------------------------------------------------------------------------------
1 | // export const BASE_URL = 'http://localhost:3000/api/'
2 | export const BASE_URL = "https://server.7sportcenter.uz/api/"
3 | 


--------------------------------------------------------------------------------
/src/pages/NotFound.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export const NotFound: React.FC = () => {
4 |   return <div>NotFound</div>;
5 | };
6 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |     "rewrites": [
3 |       {
4 |         "source": "/:path*",
5 |         "destination": "/index.html"
6 |       }
7 |     ]
8 |   }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files": [],
3 |   "references": [
4 |     { "path": "./tsconfig.app.json" },
5 |     { "path": "./tsconfig.node.json" }
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | 
4 | export default defineConfig({
5 |   plugins: [react()],
6 | 
7 | });
8 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/src/middlewares/Axios.tsx:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import { BASE_URL } from "../lib/API";
 3 | 
 4 | const token = localStorage.getItem("ssctoken") || "";
 5 | 
 6 | export const Axios = axios.create({
 7 |   baseURL: BASE_URL,
 8 |   headers: {
 9 |     Authorization: token,
10 |   },
11 | });
12 | 


--------------------------------------------------------------------------------
/src/pages/Loading.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Clipboard from "react-spinners/ClipLoader";
 3 | 
 4 | export const Loading: React.FC = () => {
 5 |   return (
 6 |     <section className="flex h-screen items-center justify-center">
 7 |       <Clipboard />
 8 |     </section>
 9 |   );
10 | };
11 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | * {
 8 |   font-family: "Rubik", serif;
 9 | }
10 | 
11 | a.active {
12 |   text-decoration: underline;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/middlewares/Fetcher.tsx:
--------------------------------------------------------------------------------
 1 | import { BASE_URL } from "../lib/API";
 2 | 
 3 | const token = localStorage.getItem("ssctoken") || "";
 4 | 
 5 | export const fetcher = (url: string) =>
 6 |   fetch(`${BASE_URL}${url}`, {
 7 |     headers: {
 8 |       Authorization: `${token}`,
 9 |     },
10 |   }).then((res) => res.json());
11 | 


--------------------------------------------------------------------------------
/src/layouts/RootLayout.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from "react-router-dom";
 2 | import Header from "../components/ui/Header";
 3 | 
 4 | function RootLayout() {
 5 |   return (
 6 |     <>
 7 |       <Header />
 8 |       <main>
 9 |         <Outlet />
10 |       </main>
11 |     </>
12 |   );
13 | }
14 | 
15 | export default RootLayout;
16 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import App from "./App.tsx";
 2 | import { createRoot } from "react-dom/client";
 3 | import { Provider } from "react-redux";
 4 | import { store } from "./Store/indexStore.tsx";
 5 | import "./index.css";
 6 | 
 7 | createRoot(document.getElementById("root")!).render(
 8 |   <Provider store={store}>
 9 |     <App />
10 |   </Provider>
11 | );
12 | 


--------------------------------------------------------------------------------
/src/Store/indexStore.tsx:
--------------------------------------------------------------------------------
 1 | import { configureStore } from "@reduxjs/toolkit";
 2 | import UserSlicer from "../Slicers/UserSlicer";
 3 | 
 4 | export const store = configureStore({
 5 |   reducer: {
 6 |     user: UserSlicer,
 7 |   },
 8 | });
 9 | 
10 | export type RootState = ReturnType<typeof store.getState>;
11 | export type AppDispatch = typeof store.dispatch;
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link rel="icon" href="http://localhost:3001/_next/image?url=%2Fmainlogo.webp&w=128&q=75">
 7 |     <title>7sportcenter</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/Types/indexTypes.tsx:
--------------------------------------------------------------------------------
 1 | export interface UserTypes {
 2 |   fullName: string;
 3 |   password: string;
 4 |   phoneNumber: string;
 5 |   _id: string;
 6 | }
 7 | 
 8 | export interface TrainerTypes {
 9 |   photo: null | any;
10 |   fullName: string;
11 |   experience: string;
12 |   level: string;
13 |   students: string;
14 |   _id: string;
15 | }
16 | 
17 | export interface BlogTypes {
18 |   title: string;
19 |   description: string;
20 |   photos: string[];
21 |   _id: string;
22 |   createdAt: string;
23 | }
24 | 


--------------------------------------------------------------------------------
/src/pages/Error.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | export const Error: React.FC = () => {
 5 |   return (
 6 |     <div className="h-screen flex items-center justify-center flex-col gap-5">
 7 |       <h1 className="font-bold text-8xl">404</h1>
 8 |       <p className="font-bold">что-то не так, пожалуйста, вернитесь назад</p>
 9 |       <Link
10 |         to={"/"}
11 |         className="bg-black py-2 px-5 font-bold text-white rounded-md"
12 |       >
13 |         Назад
14 |       </Link>
15 |     </div>
16 |   );
17 | };
18 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 4 |     "target": "ES2022",
 5 |     "lib": ["ES2023"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 | 
16 |     /* Linting */
17 |     "strict": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     "noUncheckedSideEffectImports": true
22 |   },
23 |   "include": ["vite.config.ts"]
24 | }
25 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 4 |     "target": "ES2020",
 5 |     "useDefineForClassFields": true,
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "module": "ESNext",
 8 |     "skipLibCheck": true,
 9 | 
10 |     /* Bundler mode */
11 |     "moduleResolution": "bundler",
12 |     "allowImportingTsExtensions": true,
13 |     "isolatedModules": true,
14 |     "moduleDetection": "force",
15 |     "noEmit": true,
16 |     "jsx": "react-jsx",
17 | 
18 |     /* Linting */
19 |     "strict": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "noFallthroughCasesInSwitch": true,
23 |     "noUncheckedSideEffectImports": true
24 |   },
25 |   "include": ["src"]
26 | }
27 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ['**/*.{ts,tsx}'],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       'react-hooks': reactHooks,
18 |       'react-refresh': reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       'react-refresh/only-export-components': [
23 |         'warn',
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | )
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "falcon-admin",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@reduxjs/toolkit": "^2.5.0",
14 |     "axios": "^1.7.9",
15 |     "lucide-react": "^0.469.0",
16 |     "react": "^18.3.1",
17 |     "react-dom": "^18.3.1",
18 |     "react-redux": "^9.2.0",
19 |     "react-router-dom": "^7.1.0",
20 |     "react-spinners": "^0.15.0",
21 |     "swr": "^2.3.2"
22 |   },
23 |   "devDependencies": {
24 |     "@eslint/js": "^9.17.0",
25 |     "@types/react": "^18.3.17",
26 |     "@types/react-dom": "^18.3.5",
27 |     "@vitejs/plugin-react": "^4.3.4",
28 |     "autoprefixer": "^10.4.20",
29 |     "eslint": "^9.17.0",
30 |     "eslint-plugin-react-hooks": "^5.0.0",
31 |     "eslint-plugin-react-refresh": "^0.4.16",
32 |     "globals": "^15.13.0",
33 |     "postcss": "^8.4.49",
34 |     "tailwindcss": "^3.4.17",
35 |     "typescript": "~5.6.2",
36 |     "typescript-eslint": "^8.18.1",
37 |     "vite": "^6.0.3"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/Slicers/UserSlicer.tsx:
--------------------------------------------------------------------------------
 1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 2 | import { UserTypes } from "../Types/indexTypes";
 3 | 
 4 | interface UserState {
 5 |   data: UserTypes;
 6 |   isPending: boolean;
 7 |   error: string;
 8 |   isAuth: boolean;
 9 | }
10 | 
11 | const initialState: UserState = {
12 |   data: {
13 |     fullName: "",
14 |     password: "",
15 |     phoneNumber: "",
16 |     _id: "",
17 |   },
18 |   isPending: false,
19 |   error: "",
20 |   isAuth: false,
21 | };
22 | 
23 | const UserSlicer = createSlice({
24 |   name: "User",
25 |   initialState,
26 |   reducers: {
27 |     setUser(state, { payload }: PayloadAction<UserTypes>) {
28 |       state.data = payload;
29 |       state.isPending = false;
30 |       state.isAuth = true;
31 |       state.error = "";
32 |     },
33 |     setPending(state) {
34 |       state.isPending = true;
35 |     },
36 |     setError(state, { payload }: PayloadAction<string>) {
37 |       state.error = payload;
38 |       state.isPending = false;
39 |       state.isAuth = false;
40 |     },
41 |   },
42 | });
43 | 
44 | export const { setUser, setPending, setError } = UserSlicer.actions;
45 | export default UserSlicer.reducer;
46 | 


--------------------------------------------------------------------------------
/src/components/ui/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { NavLink } from "react-router-dom";
 2 | import { useState } from "react";
 3 | import UserDropdown from "./UserDropDown";
 4 | import { useSelector } from "react-redux";
 5 | import { RootState } from "../../Store/indexStore";
 6 | import ChangePasswordDialog from "../shared/ChangePassword";
 7 | 
 8 | function Header() {
 9 |   const { data } = useSelector((state: RootState) => state.user);
10 |   const [showPasswordDialog, setShowPasswordDialog] = useState(false);
11 | 
12 |   return (
13 |     <nav className="px-4 h-[50px] bg-black sticky left-0 top-0 w-full flex justify-between items-center">
14 |       <ul className="h-full flex items-center gap-4 text-white">
15 |         <li>
16 |           <NavLink to={"/"}>Админы</NavLink>
17 |         </li>
18 |         <li>
19 |           <NavLink to={"/trainers"}>Трейнеры</NavLink>
20 |         </li>
21 |         <li>
22 |           <NavLink to={"/blogs"}>Блоги</NavLink>
23 |         </li>
24 |       </ul>
25 |       <UserDropdown user={data} setShowPasswordDialog={setShowPasswordDialog} />
26 |       <ChangePasswordDialog open={showPasswordDialog} onOpenChange={setShowPasswordDialog}/>
27 |     </nav>
28 |   );
29 | }
30 | 
31 | export default Header;
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React + TypeScript + Vite
 2 | 
 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 4 | 
 5 | Currently, two official plugins are available:
 6 | 
 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 9 | 
10 | ## Expanding the ESLint configuration
11 | 
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 | 
14 | - Configure the top-level `parserOptions` property like this:
15 | 
16 | ```js
17 | export default tseslint.config({
18 |   languageOptions: {
19 |     // other options...
20 |     parserOptions: {
21 |       project: ['./tsconfig.node.json', './tsconfig.app.json'],
22 |       tsconfigRootDir: import.meta.dirname,
23 |     },
24 |   },
25 | })
26 | ```
27 | 
28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29 | - Optionally add `...tseslint.configs.stylisticTypeChecked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31 | 
32 | ```js
33 | // eslint.config.js
34 | import react from 'eslint-plugin-react'
35 | 
36 | export default tseslint.config({
37 |   // Set the react version
38 |   settings: { react: { version: '18.3' } },
39 |   plugins: {
40 |     // Add the react plugin
41 |     react,
42 |   },
43 |   rules: {
44 |     // other rules...
45 |     // Enable its recommended rules
46 |     ...react.configs.recommended.rules,
47 |     ...react.configs['jsx-runtime'].rules,
48 |   },
49 | })
50 | ```
51 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { createBrowserRouter, RouterProvider } from "react-router-dom";
 2 | import RootLayout from "./layouts/RootLayout";
 3 | import { Admins } from "./pages/Admins";
 4 | import { useDispatch, useSelector } from "react-redux";
 5 | import { Axios } from "./middlewares/Axios";
 6 | import { setError, setPending, setUser } from "./Slicers/UserSlicer";
 7 | import { useEffect, useMemo } from "react";
 8 | import { RootState } from "./Store/indexStore";
 9 | import { Loading } from "./pages/Loading";
10 | import { Login } from "./pages/Login";
11 | import { Error } from "./pages/Error";
12 | import { Trainers } from "./pages/Trainers";
13 | import { Blogs } from "./pages/Blogs";
14 | 
15 | function App() {
16 |   const { isPending, isAuth } = useSelector((state: RootState) => state.user);
17 |   const dispatch = useDispatch();
18 | 
19 |   useEffect(() => {
20 |     async function getMyData() {
21 |       try {
22 |         dispatch(setPending());
23 |         const response = await Axios.get("admin/profile");
24 | 
25 |         if (!response.data.message) {
26 |           dispatch(setUser(response.data));
27 |         } else {
28 |           dispatch(setError(response.data.message));
29 |         }
30 |       } catch (error: any) {
31 |         dispatch(setError(error.response?.data || "Unknown Token"));
32 |       }
33 |     }
34 |     getMyData();
35 |   }, [dispatch]);
36 | 
37 |   const router = useMemo(() => {
38 |     if (isPending) {
39 |       return createBrowserRouter([
40 |         {
41 |           path: "/",
42 |           element: <Loading />,
43 |         },
44 |       ]);
45 |     }
46 |     if (isAuth) {
47 |       return createBrowserRouter([
48 |         {
49 |           path: "/",
50 |           element: <RootLayout />,
51 |           children: [
52 |             {
53 |               index: true,
54 |               element: <Admins />,
55 |             },
56 |             {
57 |               path: "trainers",
58 |               element: <Trainers />,
59 |             },
60 |             {
61 |               path: "blogs",
62 |               element: <Blogs />,
63 |             },
64 |             {
65 |               path: "*",
66 |               element: <Error />,
67 |             },
68 |           ],
69 |         },
70 |       ]);
71 |     } else {
72 |       return createBrowserRouter([
73 |         {
74 |           path: "/",
75 |           element: <Login />,
76 |         },
77 |         {
78 |           path: "*",
79 |           element: <Error />,
80 |         },
81 |       ]);
82 |     }
83 |   }, [isAuth, isPending]);
84 | 
85 |   return <RouterProvider router={router} />;
86 | }
87 | 
88 | export default App;
89 | 


--------------------------------------------------------------------------------
/src/components/ui/PhotoCarousel.tsx:
--------------------------------------------------------------------------------
 1 | import type React from "react";
 2 | 
 3 | import { useState } from "react";
 4 | import { ChevronLeft, ChevronRight } from "lucide-react";
 5 | 
 6 | interface PhotoCarouselProps {
 7 |   photos: string[];
 8 |   altText?: string;
 9 | }
10 | 
11 | export const PhotoCarousel: React.FC<PhotoCarouselProps> = ({
12 |   photos,
13 |   altText = "",
14 | }) => {
15 |   const [currentIndex, setCurrentIndex] = useState(0);
16 | 
17 |   if (!photos || photos.length === 0) {
18 |     return (
19 |       <div className="h-[300px] w-full bg-gray-300 flex items-center justify-center">
20 |         <p className="text-gray-600">Нет фото</p>
21 |       </div>
22 |     );
23 |   }
24 | 
25 |   const goToPrevious = () => {
26 |     const isFirstSlide = currentIndex === 0;
27 |     const newIndex = isFirstSlide ? photos.length - 1 : currentIndex - 1;
28 |     setCurrentIndex(newIndex);
29 |   };
30 | 
31 |   const goToNext = () => {
32 |     const isLastSlide = currentIndex === photos.length - 1;
33 |     const newIndex = isLastSlide ? 0 : currentIndex + 1;
34 |     setCurrentIndex(newIndex);
35 |   };
36 | 
37 |   const goToSlide = (slideIndex: number) => {
38 |     setCurrentIndex(slideIndex);
39 |   };
40 | 
41 |   return (
42 |     <div className="relative h-[300px] w-full rounded-t-lg overflow-hidden">
43 |       {photos.length > 1 && (
44 |         <>
45 |           <button
46 |             onClick={goToPrevious}
47 |             className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/30 hover:bg-black/50 text-white p-1 rounded-full"
48 |             aria-label="Previous photo"
49 |           >
50 |             <ChevronLeft size={20} />
51 |           </button>
52 |           <button
53 |             onClick={goToNext}
54 |             className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/30 hover:bg-black/50 text-white p-1 rounded-full"
55 |             aria-label="Next photo"
56 |           >
57 |             <ChevronRight size={20} />
58 |           </button>
59 |         </>
60 |       )}
61 | 
62 |       <div className="h-full w-full">
63 |         <img
64 |           src={photos[currentIndex] || "/placeholder.svg"}
65 |           alt={altText}
66 |           className="h-full w-full object-cover transition-opacity duration-300"
67 |         />
68 |       </div>
69 | 
70 |       {photos.length > 1 && (
71 |         <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1.5">
72 |           {photos.map((_, slideIndex) => (
73 |             <button
74 |               key={slideIndex}
75 |               onClick={() => goToSlide(slideIndex)}
76 |               className={`w-2 h-2 rounded-full ${
77 |                 slideIndex === currentIndex ? "bg-white" : "bg-white/50"
78 |               }`}
79 |               aria-label={`Go to slide ${slideIndex + 1}`}
80 |             />
81 |           ))}
82 |         </div>
83 |       )}
84 |     </div>
85 |   );
86 | };
87 | 


--------------------------------------------------------------------------------
/src/components/ui/UserDropDown.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useRef, useEffect } from "react";
  2 | import { Settings, LogOut } from "lucide-react";
  3 | 
  4 | interface UserDropdownProps {
  5 |   user: {
  6 |     fullName: string;
  7 |     phoneNumber: string;
  8 |   } | null;
  9 |   setShowPasswordDialog: (show: boolean) => void;
 10 | }
 11 | 
 12 | const UserDropdown = ({ user, setShowPasswordDialog }: UserDropdownProps) => {
 13 |   const [isOpen, setIsOpen] = useState(false);
 14 |   
 15 |   const dropdownRef = useRef<HTMLDivElement>(null);
 16 | 
 17 |   const getInitials = (name: string | undefined) => {
 18 |     if (!name) return "U";
 19 |     return name
 20 |       .split(" ")
 21 |       .map((word) => word.charAt(0))
 22 |       .join("")
 23 |       .toUpperCase()
 24 |       .slice(0, 2);
 25 |   };
 26 | 
 27 |   // Close dropdown when clicking outside
 28 |   useEffect(() => {
 29 |     const handleClickOutside = (event: MouseEvent) => {
 30 |       if (
 31 |         dropdownRef.current &&
 32 |         !dropdownRef.current.contains(event.target as Node)
 33 |       ) {
 34 |         setIsOpen(false);
 35 |       }
 36 |     };
 37 | 
 38 |     document.addEventListener("mousedown", handleClickOutside);
 39 |     return () => {
 40 |       document.removeEventListener("mousedown", handleClickOutside);
 41 |     };
 42 |   }, []);
 43 | 
 44 |   const handlePasswordChange = () => {
 45 |     setShowPasswordDialog(true);
 46 |     setIsOpen(false);
 47 |   };
 48 | 
 49 |   const handleLogout = () => {
 50 |     if (window.confirm("Вы реально хотите выйти?")) {
 51 |       localStorage.removeItem("ssctoken");
 52 |       window.location.href = "/";
 53 |     }
 54 |     setIsOpen(false);
 55 |   };
 56 | 
 57 |   return (
 58 |     <div className="flex items-center space-x-4">
 59 |       <div className="relative" ref={dropdownRef}>
 60 |         {/* Avatar Button */}
 61 |         <button
 62 |           onClick={() => setIsOpen(!isOpen)}
 63 |           className="relative h-8 w-8 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200 flex items-center justify-center text-sm font-medium"
 64 |         >
 65 |           {getInitials(user?.fullName)}
 66 |         </button>
 67 | 
 68 |         {/* Dropdown Menu */}
 69 |         {isOpen && (
 70 |           <div className="absolute right-0 mt-2 w-56 bg-white border border-gray-200 rounded-md shadow-lg z-50">
 71 |             {/* User Info */}
 72 |             <div className="px-4 py-3 border-b border-gray-100">
 73 |               <div className="flex flex-col space-y-1">
 74 |                 <p className="text-sm font-medium leading-none text-gray-900">
 75 |                   {user?.fullName}
 76 |                 </p>
 77 |                 <p className="text-xs leading-none text-gray-500">
 78 |                   {user?.phoneNumber}
 79 |                 </p>
 80 |               </div>
 81 |             </div>
 82 | 
 83 |             {/* Menu Items */}
 84 |             <div className="py-1">
 85 |               <button
 86 |                 onClick={handlePasswordChange}
 87 |                 className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200"
 88 |               >
 89 |                 <Settings className="mr-2 h-4 w-4" />
 90 |                 <span>Parolni o'zgartirish</span>
 91 |               </button>
 92 | 
 93 |               <button
 94 |                 onClick={handleLogout}
 95 |                 className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200"
 96 |               >
 97 |                 <LogOut className="mr-2 h-4 w-4" />
 98 |                 <span>Chiqish</span>
 99 |               </button>
100 |             </div>
101 |           </div>
102 |         )}
103 |       </div>
104 |     </div>
105 |   );
106 | };
107 | 
108 | export default UserDropdown;
109 | 


--------------------------------------------------------------------------------
/src/pages/Login.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { Axios } from "../middlewares/Axios";
  3 | 
  4 | interface LoginResponse {
  5 |   token: string;
  6 |   message: string;
  7 | }
  8 | 
  9 | export const Login: React.FC = () => {
 10 |   const [formData, setFormData] = useState({
 11 |     phoneNumber: "",
 12 |     password: "",
 13 |   });
 14 | 
 15 |   const [isLoading, setIsLoading] = useState(false);
 16 |   const [error, setError] = useState("");
 17 |   const [errors, setErrors] = useState({
 18 |     phoneNumber: "",
 19 |     password: "",
 20 |   });
 21 | 
 22 |   const validateForm = () => {
 23 |     let valid = true;
 24 |     const newErrors = { phoneNumber: "", password: "" };
 25 | 
 26 |     if (!formData.phoneNumber.trim()) {
 27 |       newErrors.phoneNumber = "Введите номер телефона";
 28 |       valid = false;
 29 |     } else if (!/^\d{9}$/.test(formData.phoneNumber)) {
 30 |       newErrors.phoneNumber = "Номер телефона должен содержать ровно 9 цифр";
 31 |       valid = false;
 32 |     }
 33 | 
 34 |     if (!formData.password.trim()) {
 35 |       newErrors.password = "Введите пароль";
 36 |       valid = false;
 37 |     } else if (formData.password.length < 6) {
 38 |       newErrors.password = "Пароль должен содержать не менее 6 символов";
 39 |       valid = false;
 40 |     }
 41 | 
 42 |     setErrors(newErrors);
 43 |     return valid;
 44 |   };
 45 | 
 46 |   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 47 |     const { name, value } = e.target;
 48 |     setFormData((prevData) => ({ ...prevData, [name]: value }));
 49 |     setErrors((prevErrors) => ({ ...prevErrors, [name]: "" }));
 50 |   };
 51 | 
 52 |   const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 53 |     e.preventDefault();
 54 |     if (!validateForm()) return;
 55 | 
 56 |     setIsLoading(true);
 57 |     try {
 58 |       const response = (
 59 |         await Axios.post<LoginResponse>("/admin/login", formData)
 60 |       ).data;
 61 | 
 62 |       if (response.token) {
 63 |         localStorage.setItem("ssctoken", response.token);
 64 |         window.location.href = "/";
 65 |       }
 66 |     } catch (error: any) {
 67 |       setError(
 68 |         error.response?.data?.message ||
 69 |           "Что-то пошло не так, попробуйте ещё раз"
 70 |       );
 71 |     } finally {
 72 |       setIsLoading(false);
 73 |     }
 74 |   };
 75 | 
 76 |   return (
 77 |     <section className="flex justify-center items-center h-screen p-4 bg-slate-100">
 78 |       <form
 79 |         style={{ boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px" }}
 80 |         className="w-full md:max-w-md flex flex-col gap-6 p-10 bg-white rounded-md"
 81 |         onSubmit={handleFormSubmit}
 82 |       >
 83 |         <div className="text-center">
 84 |           <h1 className="text-3xl font-extrabold text-gray-900 bg-clip-text text-transparent bg-gradient-to-r from-red-700 to-red-500">
 85 |             7sportcenter
 86 |           </h1>
 87 |           <p className="mt-2 text-sm text-gray-600">
 88 |             Войдите, чтобы получить доступ к панели управления
 89 |           </p>
 90 |         </div>
 91 |         {error && (
 92 |           <p className="text-red-600 text-center bg-red-100 py-2 rounded-md">
 93 |             {error}
 94 |           </p>
 95 |         )}
 96 |         <label className="flex flex-col gap-2">
 97 |           <p className="text-sm">
 98 |             Номер телефона
 99 |             <span className="text-red-600">*</span>
100 |           </p>
101 |           <input
102 |             type="text"
103 |             name="phoneNumber"
104 |             placeholder="90 123 45 67"
105 |             className={`outline-none border text-sm p-2 ${
106 |               errors.phoneNumber ? "border-red-600" : "border-gray-500"
107 |             } rounded-md`}
108 |             value={formData.phoneNumber}
109 |             onChange={handleInputChange}
110 |           />
111 |           {errors.phoneNumber && (
112 |             <p className="text-red-600 text-sm">{errors.phoneNumber}</p>
113 |           )}
114 |         </label>
115 |         <label className="flex flex-col gap-2">
116 |           <p className="text-sm">
117 |             Пароль <span className="text-red-600">*</span>
118 |           </p>
119 |           <input
120 |             type="password"
121 |             name="password"
122 |             placeholder="EasyPass1234"
123 |             className={`outline-none border text-sm p-2 ${
124 |               errors.password ? "border-red-600" : "border-gray-500"
125 |             } rounded-md`}
126 |             value={formData.password}
127 |             onChange={handleInputChange}
128 |           />
129 |           {errors.password && (
130 |             <p className="text-red-600 text-sm">{errors.password}</p>
131 |           )}
132 |         </label>
133 |         <button
134 |           type="submit"
135 |           className={`bg-red-600 text-white py-3 text-sm uppercase font-semibold rounded-md ${
136 |             isLoading ? "opacity-50" : ""
137 |           }`}
138 |           disabled={isLoading}
139 |         >
140 |           {isLoading ? "Загрузка..." : "Войти"}
141 |         </button>
142 |       </form>
143 |     </section>
144 |   );
145 | };
146 | 


--------------------------------------------------------------------------------
/src/components/shared/AdminModal.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { Axios } from "../../middlewares/Axios";
  3 | 
  4 | type ModalProps = {
  5 |   setIsModalActive: React.Dispatch<React.SetStateAction<boolean>>;
  6 |   mutate: any;
  7 | };
  8 | 
  9 | export const AdminModal: React.FC<ModalProps> = ({
 10 |   setIsModalActive,
 11 |   mutate,
 12 | }) => {
 13 |   const [formData, setFormData] = useState({
 14 |     fullName: "",
 15 |     phoneNumber: "",
 16 |     password: "",
 17 |   });
 18 | 
 19 |   const [errors, setErrors] = useState({
 20 |     fullName: "",
 21 |     phoneNumber: "",
 22 |     password: "",
 23 |   });
 24 | 
 25 |   const validateForm = () => {
 26 |     let valid = true;
 27 |     const newErrors = { fullName: "", phoneNumber: "", password: "" };
 28 | 
 29 |     if (!formData.fullName.trim()) {
 30 |       newErrors.fullName = "Введите ваше полное имя";
 31 |       valid = false;
 32 |     }
 33 | 
 34 |     if (!formData.phoneNumber.trim()) {
 35 |       newErrors.phoneNumber = "Введите номер телефона";
 36 |       valid = false;
 37 |     } else if (!/^\d{9}$/.test(formData.phoneNumber)) {
 38 |       newErrors.phoneNumber = "Номер телефона должен содержать ровно 9 цифр";
 39 |       valid = false;
 40 |     }
 41 | 
 42 |     if (!formData.password.trim()) {
 43 |       newErrors.password = "Введите пароль";
 44 |       valid = false;
 45 |     } else if (formData.password.length < 6) {
 46 |       newErrors.password = "Пароль должен содержать не менее 6 символов";
 47 |       valid = false;
 48 |     }
 49 | 
 50 |     setErrors(newErrors);
 51 |     return valid;
 52 |   };
 53 | 
 54 |   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 55 |     const { name, value } = e.target;
 56 |     setFormData((prevData) => ({ ...prevData, [name]: value }));
 57 |     setErrors((prevErrors) => ({ ...prevErrors, [name]: "" }));
 58 |   };
 59 | 
 60 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 61 |     e.preventDefault();
 62 |     if (!validateForm()) return;
 63 | 
 64 |     try {
 65 |       const response = await Axios.post("admin/register", formData);
 66 |       if (response.data) {
 67 |         alert("Администратор успешно добавлен!");
 68 |         setIsModalActive(false);
 69 |         mutate();
 70 |       }
 71 |     } catch (error: any) {
 72 |       alert(error.response?.data.message || "Произошла ошибка");
 73 |     }
 74 |   };
 75 | 
 76 |   const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
 77 |     if ((e.target as HTMLElement).classList.contains("modal-overlay")) {
 78 |       setIsModalActive(false);
 79 |     }
 80 |   };
 81 | 
 82 |   return (
 83 |     <div
 84 |       className="w-full h-screen fixed left-0 top-0 bg-black bg-opacity-75 backdrop-blur-md flex justify-end modal-overlay"
 85 |       onClick={handleOutsideClick}
 86 |     >
 87 |       <form
 88 |         onSubmit={handleSubmit}
 89 |         className="h-full w-full md:max-w-lg flex flex-col gap-6 p-6 bg-white"
 90 |       >
 91 |         <h1 className="text-center text-xl font-bold">
 92 |           Создать нового администратора
 93 |         </h1>
 94 |         <label className="flex flex-col gap-2 text-[14px]">
 95 |           <p>
 96 |             Введите ваше полное имя <span className="text-red-600">*</span>
 97 |           </p>
 98 |           <input
 99 |             type="text"
100 |             name="fullName"
101 |             className={`outline-none border p-2 rounded-md ${
102 |               errors.fullName ? "border-red-600" : "border-black"
103 |             }`}
104 |             value={formData.fullName}
105 |             onChange={handleInputChange}
106 |           />
107 |           {errors.fullName && <p className="text-red-600">{errors.fullName}</p>}
108 |         </label>
109 |         <label className="flex flex-col gap-2 text-[14px]">
110 |           <p>
111 |             Введите ваш номер телефона <span className="text-red-600">*</span>
112 |           </p>
113 |           <input
114 |             type="text"
115 |             name="phoneNumber"
116 |             className={`outline-none border p-2 rounded-md ${
117 |               errors.phoneNumber ? "border-red-600" : "border-black"
118 |             }`}
119 |             value={formData.phoneNumber}
120 |             onChange={handleInputChange}
121 |           />
122 |           {errors.phoneNumber && (
123 |             <p className="text-red-600">{errors.phoneNumber}</p>
124 |           )}
125 |         </label>
126 |         <label className="flex flex-col gap-2 text-[14px]">
127 |           <p>
128 |             Введите ваш пароль <span className="text-red-600">*</span>
129 |           </p>
130 |           <input
131 |             type="password"
132 |             name="password"
133 |             className={`outline-none border p-2 rounded-md ${
134 |               errors.password ? "border-red-600" : "border-black"
135 |             }`}
136 |             value={formData.password}
137 |             onChange={handleInputChange}
138 |           />
139 |           {errors.password && <p className="text-red-600">{errors.password}</p>}
140 |         </label>
141 |         <div className="flex justify-end gap-2">
142 |           <button
143 |             type="button"
144 |             onClick={() => setIsModalActive(false)}
145 |             className="bg-red-600 text-white px-2 rounded-md"
146 |           >
147 |             Назад
148 |           </button>
149 |           <button type="submit" className="bg-black text-white px-2 rounded-md">
150 |             Создать
151 |           </button>
152 |         </div>
153 |       </form>
154 |     </div>
155 |   );
156 | };
157 | 


--------------------------------------------------------------------------------
/src/components/shared/AdminEditModal.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { Axios } from "../../middlewares/Axios";
  3 | import useSWR from "swr";
  4 | import { fetcher } from "../../middlewares/Fetcher";
  5 | import { UserTypes } from "../../Types/indexTypes";
  6 | 
  7 | type EditDataTypes = {
  8 |   id: string;
  9 |   isEditing: boolean;
 10 | };
 11 | 
 12 | type ModalProps = {
 13 |   editData: EditDataTypes;
 14 |   setEditData: React.Dispatch<React.SetStateAction<EditDataTypes>>;
 15 | };
 16 | 
 17 | export const AdminEditModal: React.FC<ModalProps> = ({
 18 |   editData,
 19 |   setEditData,
 20 | }) => {
 21 |   const { data, error, isLoading, mutate } = useSWR<UserTypes[]>(
 22 |     `/admin`,
 23 |     fetcher
 24 |   );
 25 | 
 26 |   const [formData, setFormData] = useState<UserTypes>({
 27 |     _id: "",
 28 |     fullName: "",
 29 |     phoneNumber: "",
 30 |     password: "",
 31 |   });
 32 | 
 33 |   const [errors, setErrors] = useState({
 34 |     fullName: "",
 35 |     phoneNumber: "",
 36 |     password: "",
 37 |   });
 38 | 
 39 |   useEffect(() => {
 40 |     if (data) {
 41 |       const user = data.find((user) => user._id === editData.id);
 42 |       if (user) setFormData({ ...user, password: "" });
 43 |     }
 44 |   }, [data, editData.id]);
 45 | 
 46 |   const validateForm = () => {
 47 |     let valid = true;
 48 |     const newErrors = { fullName: "", phoneNumber: "", password: "" };
 49 | 
 50 |     if (!formData.fullName.trim()) {
 51 |       newErrors.fullName = "Введите ваше полное имя";
 52 |       valid = false;
 53 |     }
 54 | 
 55 |     if (!formData.phoneNumber.trim()) {
 56 |       newErrors.phoneNumber = "Введите номер телефона";
 57 |       valid = false;
 58 |     } else if (!/^\d{9}$/.test(formData.phoneNumber)) {
 59 |       newErrors.phoneNumber = "Номер телефона должен содержать ровно 9 цифр";
 60 |       valid = false;
 61 |     }
 62 | 
 63 |     if (!formData.password.trim()) {
 64 |       newErrors.password = "Пароль обязателен";
 65 |       valid = false;
 66 |     } else if (formData.password.length < 6) {
 67 |       newErrors.password = "Пароль должен содержать не менее 6 символов";
 68 |       valid = false;
 69 |     }
 70 | 
 71 |     setErrors(newErrors);
 72 |     return valid;
 73 |   };
 74 | 
 75 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 76 |     e.preventDefault();
 77 |     if (!validateForm()) return;
 78 | 
 79 |     try {
 80 |       const response = await Axios.put(`admin/${editData.id}`, formData);
 81 |       if (response.data) {
 82 |         setEditData((prevData) => ({ ...prevData, isEditing: false }));
 83 |         mutate();
 84 |       }
 85 |     } catch (error: any) {
 86 |       alert(error.response?.data.message || "Произошла ошибка");
 87 |     }
 88 |   };
 89 | 
 90 |   const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
 91 |     if ((e.target as HTMLElement).classList.contains("modal-overlay")) {
 92 |       setEditData((prevData) => ({ ...prevData, isEditing: false }));
 93 |     }
 94 |   };
 95 | 
 96 |   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 97 |     const { name, value } = e.target;
 98 |     setFormData((prevData) => ({ ...prevData, [name]: value }));
 99 |     setErrors((prevErrors) => ({ ...prevErrors, [name]: "" }));
100 |   };
101 | 
102 |   if (isLoading) {
103 |     return (
104 |       <div className="h-screen flex justify-center items-center">
105 |         <span className="h-16 w-16 border-[6px] border-dotted border-black animate-spin rounded-full"></span>
106 |       </div>
107 |     );
108 |   }
109 | 
110 |   if (error) {
111 |     return (
112 |       <div className="flex justify-center items-center h-40">
113 |         <p className="text-lg font-medium text-red-600">{error}</p>
114 |       </div>
115 |     );
116 |   }
117 | 
118 |   return (
119 |     <div
120 |       className="w-full h-screen fixed left-0 top-0 bg-black bg-opacity-75 backdrop-blur-md flex justify-end modal-overlay"
121 |       onClick={handleOutsideClick}
122 |     >
123 |       <form
124 |         onSubmit={handleSubmit}
125 |         className="h-full w-full md:max-w-lg flex flex-col gap-6 p-6 bg-white"
126 |       >
127 |         <h1 className="text-center text-xl font-bold">
128 |           Редактировать администратора
129 |         </h1>
130 |         <label className="flex flex-col gap-2 text-[14px]">
131 |           <p>
132 |             Введите ваше полное имя <span className="text-red-600">*</span>
133 |           </p>
134 |           <input
135 |             type="text"
136 |             name="fullName"
137 |             onChange={handleInputChange}
138 |             value={formData.fullName}
139 |             className={`outline-none border p-2 rounded-md ${
140 |               errors.fullName ? "border-red-600" : "border-black"
141 |             }`}
142 |           />
143 |           {errors.fullName && <p className="text-red-600">{errors.fullName}</p>}
144 |         </label>
145 |         <label className="flex flex-col gap-2 text-[14px]">
146 |           <p>
147 |             Введите ваш номер телефона <span className="text-red-600">*</span>
148 |           </p>
149 |           <input
150 |             type="text"
151 |             name="phoneNumber"
152 |             onChange={handleInputChange}
153 |             value={formData.phoneNumber}
154 |             className={`outline-none border p-2 rounded-md ${
155 |               errors.phoneNumber ? "border-red-600" : "border-black"
156 |             }`}
157 |           />
158 |           {errors.phoneNumber && (
159 |             <p className="text-red-600">{errors.phoneNumber}</p>
160 |           )}
161 |         </label>
162 |         <label className="flex flex-col gap-2 text-[14px]">
163 |           <p>Введите новый пароль</p>
164 |           <input
165 |             type="password"
166 |             name="password"
167 |             onChange={handleInputChange}
168 |             className={`outline-none border p-2 rounded-md ${
169 |               errors.password ? "border-red-600" : "border-black"
170 |             }`}
171 |           />
172 |           {errors.password && <p className="text-red-600">{errors.password}</p>}
173 |         </label>
174 |         <div className="flex justify-end gap-4">
175 |           <button
176 |             type="button"
177 |             className="bg-red-600 text-white p-2 text-sm uppercase rounded-md"
178 |             onClick={() =>
179 |               setEditData((prevData) => ({ ...prevData, isEditing: false }))
180 |             }
181 |           >
182 |             Отмена
183 |           </button>
184 |           <button
185 |             type="submit"
186 |             className="bg-black text-white p-2 text-sm uppercase rounded-md"
187 |           >
188 |             Сохранить
189 |           </button>
190 |         </div>
191 |       </form>
192 |     </div>
193 |   );
194 | };
195 | 


--------------------------------------------------------------------------------
/src/pages/Blogs.tsx:
--------------------------------------------------------------------------------
  1 | import type React from "react";
  2 | import { useState, useRef, useEffect } from "react";
  3 | import useSWR from "swr";
  4 | import type { BlogTypes } from "../Types/indexTypes";
  5 | import { fetcher } from "../middlewares/Fetcher";
  6 | import { Axios } from "../middlewares/Axios";
  7 | import BlogModal from "../components/shared/BlogModal";
  8 | import BlogEditModal from "../components/shared/BlogEditModal";
  9 | import { PhotoCarousel } from "../components/ui/PhotoCarousel";
 10 | import { MoreVertical, Edit, Trash2 } from "lucide-react";
 11 | 
 12 | export const Blogs: React.FC = () => {
 13 |   const [isModalActive, setIsModalActive] = useState(false);
 14 |   const [isEditModalActive, setIsEditModalActive] = useState(false);
 15 |   const [selectedBlog, setSelectedBlog] = useState<BlogTypes | undefined>(
 16 |     undefined
 17 |   );
 18 |   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
 19 |   const dropdownRef = useRef<HTMLDivElement>(null);
 20 | 
 21 |   const { data, error, isLoading, mutate } = useSWR<BlogTypes[]>(
 22 |     `/blog`,
 23 |     fetcher
 24 |   );
 25 | 
 26 |   // Close dropdown when clicking outside
 27 |   useEffect(() => {
 28 |     const handleClickOutside = (event: MouseEvent) => {
 29 |       if (
 30 |         dropdownRef.current &&
 31 |         !dropdownRef.current.contains(event.target as Node)
 32 |       ) {
 33 |         setActiveDropdown(null);
 34 |       }
 35 |     };
 36 | 
 37 |     document.addEventListener("mousedown", handleClickOutside);
 38 |     return () => {
 39 |       document.removeEventListener("mousedown", handleClickOutside);
 40 |     };
 41 |   }, []);
 42 | 
 43 |   const handleDeleteBlog = async (id: string) => {
 44 |     const isConfirmed = window.confirm("Вы уверены, что хотите удалить блог?");
 45 |     if (!isConfirmed) return;
 46 | 
 47 |     try {
 48 |       await Axios.delete(`/blog/${id}`);
 49 |       alert("Блог успешно удален!");
 50 |       mutate((prevState) => prevState?.filter((blog) => blog._id !== id));
 51 |       setActiveDropdown(null);
 52 |     } catch (error) {
 53 |       alert("Произошла ошибка при удалении блога.");
 54 |     }
 55 |   };
 56 | 
 57 |   const handleEditBlog = (blog: BlogTypes) => {
 58 |     setSelectedBlog(blog);
 59 |     setIsEditModalActive(true);
 60 |     setActiveDropdown(null);
 61 |   };
 62 | 
 63 |   const handleAddNewBlog = () => {
 64 |     setIsModalActive(true);
 65 |   };
 66 | 
 67 |   const toggleDropdown = (blogId: string) => {
 68 |     setActiveDropdown(activeDropdown === blogId ? null : blogId);
 69 |   };
 70 | 
 71 |   if (isLoading) {
 72 |     return (
 73 |       <div className="h-screen flex justify-center items-center">
 74 |         <span className="h-16 w-16 border-[6px] border-dotted border-black animate-spin rounded-full"></span>
 75 |       </div>
 76 |     );
 77 |   }
 78 | 
 79 |   if (error) {
 80 |     return (
 81 |       <div className="flex justify-center items-center h-40">
 82 |         <p className="text-lg font-medium text-red-600">{error}</p>
 83 |       </div>
 84 |     );
 85 |   }
 86 | 
 87 |   return (
 88 |     <>
 89 |       <section className="p-4">
 90 |         <div className="flex justify-between items-center mb-4 gap-3 flex-wrap">
 91 |           <h1 className="text-2xl uppercase font-bold">Блоги</h1>
 92 |           <button
 93 |             className="bg-black text-white px-4 py-2 rounded-md text-sm"
 94 |             onClick={handleAddNewBlog}
 95 |           >
 96 |             Новый блог
 97 |           </button>
 98 |         </div>
 99 | 
100 |         {data && data?.length <= 0 ? (
101 |           <div className="h-[30vh] flex items-center justify-center">
102 |             <h1 className="text-xl text-gray-500">Нет блогов</h1>
103 |           </div>
104 |         ) : (
105 |           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
106 |             {data?.map((blog: BlogTypes) => (
107 |               <div key={blog._id} className="bg-gray-200 shadow-lg">
108 |                 <PhotoCarousel photos={blog.photos} altText={blog.title} />
109 |                 <div className="p-4 space-y-2">
110 |                   <div className="flex justify-between items-center">
111 |                     <h2 className="text-lg font-semibold truncate">
112 |                       {blog.title}
113 |                     </h2>
114 |                     <div className="relative inline-block" ref={dropdownRef}>
115 |                       <button
116 |                         onClick={() => toggleDropdown(blog._id)}
117 |                         className="p-2 hover:bg-gray-100 rounded-full transition-colors duration-200 relative z-10"
118 |                         aria-label="Действия"
119 |                       >
120 |                         <MoreVertical size={16} className="text-gray-600" />
121 |                       </button>
122 | 
123 |                       {activeDropdown === blog._id && (
124 |                         <div className="absolute right-0 mt-1 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-50 min-w-max">
125 |                           <div className="py-1">
126 |                             <button
127 |                               onClick={() => handleEditBlog(blog)}
128 |                               className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200 whitespace-nowrap"
129 |                             >
130 |                               <Edit size={14} className="mr-2" />
131 |                               Изменить
132 |                             </button>
133 |                             <button
134 |                               onClick={() => handleDeleteBlog(blog._id)}
135 |                               className="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors duration-200 whitespace-nowrap"
136 |                             >
137 |                               <Trash2 size={14} className="mr-2" />
138 |                               Удалить
139 |                             </button>
140 |                           </div>
141 |                         </div>
142 |                       )}
143 |                     </div>
144 |                   </div>
145 |                   <h3 className="text-sm text-gray-600 line-clamp-2">
146 |                     {blog.description}
147 |                   </h3>
148 |                 </div>
149 |               </div>
150 |             ))}
151 |           </div>
152 |         )}
153 |       </section>
154 | 
155 |       {isModalActive && (
156 |         <BlogModal setIsModalActive={setIsModalActive} mutate={mutate} />
157 |       )}
158 | 
159 |       {isEditModalActive && selectedBlog && (
160 |         <BlogEditModal
161 |           setIsModalActive={setIsEditModalActive}
162 |           mutate={mutate}
163 |           blogData={selectedBlog}
164 |         />
165 |       )}
166 |     </>
167 |   );
168 | };
169 | 


--------------------------------------------------------------------------------
/src/pages/Admins.tsx:
--------------------------------------------------------------------------------
  1 | import type React from "react";
  2 | import { useState, useRef, useEffect } from "react";
  3 | import useSWR from "swr";
  4 | import type { UserTypes } from "../Types/indexTypes";
  5 | import { fetcher } from "../middlewares/Fetcher";
  6 | import { AdminModal } from "../components/shared/AdminModal";
  7 | import { AdminEditModal } from "../components/shared/AdminEditModal";
  8 | import { Axios } from "../middlewares/Axios";
  9 | import { MoreVertical, Edit, Trash2 } from "lucide-react";
 10 | import { useSelector } from "react-redux";
 11 | import { RootState } from "../Store/indexStore";
 12 | 
 13 | export const Admins: React.FC = () => {
 14 |   const { data: currentUser } = useSelector((state: RootState) => state.user);
 15 |   const [isModalActive, setIsModalActive] = useState(false);
 16 |   const [editData, setEditData] = useState({
 17 |     id: "",
 18 |     isEditing: false,
 19 |   });
 20 |   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
 21 |   const dropdownRef = useRef<HTMLDivElement>(null);
 22 | 
 23 |   const { data, error, isLoading, mutate } = useSWR<UserTypes[]>(
 24 |     `/admin`,
 25 |     fetcher
 26 |   );
 27 | 
 28 |   useEffect(() => {
 29 |     const handleClickOutside = (event: MouseEvent) => {
 30 |       if (
 31 |         dropdownRef.current &&
 32 |         !dropdownRef.current.contains(event.target as Node)
 33 |       ) {
 34 |         setActiveDropdown(null);
 35 |       }
 36 |     };
 37 | 
 38 |     document.addEventListener("mousedown", handleClickOutside);
 39 |     return () => {
 40 |       document.removeEventListener("mousedown", handleClickOutside);
 41 |     };
 42 |   }, []);
 43 | 
 44 |   const handleDeleteAdmin = async (id: string) => {
 45 |     const isConfirmed = window.confirm(
 46 |       "Haqiqatan ham administratorni olib tashlamoqchimisiz?"
 47 |     );
 48 |     if (!isConfirmed) return;
 49 | 
 50 |     try {
 51 |       await Axios.delete(`admin/${id}`);
 52 |       alert("Administrator muvaffaqiyatli olib tashlandi!");
 53 |       mutate((prevState) => prevState?.filter((admin) => admin._id !== id));
 54 |       setActiveDropdown(null);
 55 |     } catch (error) {
 56 |       alert("Administratorni oʻchirishda xatolik yuz berdi.");
 57 |     }
 58 |   };
 59 | 
 60 |   const handleEditAdmin = (adminId: string) => {
 61 |     setEditData((prevData) => ({
 62 |       ...prevData,
 63 |       id: adminId,
 64 |       isEditing: true,
 65 |     }));
 66 |     setActiveDropdown(null);
 67 |   };
 68 | 
 69 |   const toggleDropdown = (adminId: string) => {
 70 |     setActiveDropdown(activeDropdown === adminId ? null : adminId);
 71 |   };
 72 | 
 73 |   function formatUzPhone(number: string) {
 74 |     return `+998 ${number.slice(0, 2)} ${number.slice(2, 5)} ${number.slice(
 75 |       5,
 76 |       7
 77 |     )} ${number.slice(7, 9)}`;
 78 |   }
 79 | 
 80 |   if (isLoading) {
 81 |     return (
 82 |       <div className="h-screen flex justify-center items-center">
 83 |         <span className="h-16 w-16 border-[6px] border-dotted border-black animate-spin rounded-full"></span>
 84 |       </div>
 85 |     );
 86 |   }
 87 | 
 88 |   if (error) {
 89 |     return (
 90 |       <div className="flex justify-center items-center h-40">
 91 |         <p className="text-lg font-medium text-red-600">{error}</p>
 92 |       </div>
 93 |     );
 94 |   }
 95 | 
 96 |   return (
 97 |     <>
 98 |       <section className="p-4">
 99 |         <div className="flex justify-between items-center mb-4 gap-3 flex-wrap">
100 |           <h1 className="text-2xl uppercase font-bold">Administratorlar</h1>
101 |           <button
102 |             className="bg-black text-white px-4 py-2 rounded-md text-sm"
103 |             onClick={() => setIsModalActive(true)}
104 |           >
105 |             Yangi admin
106 |           </button>
107 |         </div>
108 | 
109 |         <table className="w-full border-collapse border border-gray-200 shadow-md bg-white">
110 |           <thead>
111 |             <tr className="bg-gray-100 text-left">
112 |               <th className="p-3 border border-gray-200">Foydalanuvchi</th>
113 |               <th className="p-3 border border-gray-200 text-right">Action</th>
114 |             </tr>
115 |           </thead>
116 |           <tbody>
117 |             {data?.map((admin: UserTypes) => (
118 |               <tr key={admin._id} className="hover:bg-gray-50">
119 |                 <td className="p-3 border border-gray-200">
120 |                   <div className="flex items-center gap-2">
121 |                     <span> {admin.fullName}</span>
122 |                     {currentUser._id === admin._id ? (
123 |                       <span className="bg-green-500 rounded-full h-3 w-3 inline-block"></span>
124 |                     ) : null}
125 |                   </div>
126 |                   <a
127 |                     href={`tel: +998${admin.phoneNumber}`}
128 |                     className="text-sm opacity-50"
129 |                   >
130 |                     {formatUzPhone(admin.phoneNumber)}
131 |                   </a>
132 |                 </td>
133 |                 <td className="p-3 border border-gray-200 text-right">
134 |                   <div className="relative inline-block" ref={dropdownRef}>
135 |                     <button
136 |                       onClick={() => toggleDropdown(admin._id)}
137 |                       className="p-2 hover:bg-gray-100 rounded-full transition-colors duration-200"
138 |                       aria-label="Действия"
139 |                     >
140 |                       <MoreVertical size={16} className="text-gray-600" />
141 |                     </button>
142 | 
143 |                     {activeDropdown === admin._id && (
144 |                       <div className="absolute right-0 mt-1 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10">
145 |                         <div className="py-1">
146 |                           <button
147 |                             onClick={() => handleEditAdmin(admin._id)}
148 |                             className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200"
149 |                           >
150 |                             <Edit size={14} className="mr-2" />
151 |                             O'zgartirish
152 |                           </button>
153 |                           <button
154 |                             onClick={() => handleDeleteAdmin(admin._id)}
155 |                             className="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors duration-200"
156 |                           >
157 |                             <Trash2 size={14} className="mr-2" />
158 |                             Olib tashlash
159 |                           </button>
160 |                         </div>
161 |                       </div>
162 |                     )}
163 |                   </div>
164 |                 </td>
165 |               </tr>
166 |             ))}
167 |           </tbody>
168 |         </table>
169 |       </section>
170 | 
171 |       {isModalActive && (
172 |         <AdminModal setIsModalActive={setIsModalActive} mutate={mutate} />
173 |       )}
174 | 
175 |       {editData.isEditing && (
176 |         <AdminEditModal editData={editData} setEditData={setEditData} />
177 |       )}
178 |     </>
179 |   );
180 | };
181 | 


--------------------------------------------------------------------------------
/src/components/shared/ChangePassword.tsx:
--------------------------------------------------------------------------------
  1 | import type React from "react";
  2 | import { useState } from "react";
  3 | import { Axios } from "../../middlewares/Axios";
  4 | 
  5 | interface ChangePasswordDialogProps {
  6 |   open: boolean;
  7 |   onOpenChange: (open: boolean) => void;
  8 | }
  9 | 
 10 | const ChangePasswordDialog = ({
 11 |   open,
 12 |   onOpenChange,
 13 | }: ChangePasswordDialogProps) => {
 14 |   const [loading, setLoading] = useState(false);
 15 |   const [formData, setFormData] = useState({
 16 |     currentPassword: "",
 17 |     newPassword: "",
 18 |     confirmPassword: "",
 19 |   });
 20 | 
 21 |   const handleSubmit = async (e: React.FormEvent) => {
 22 |     e.preventDefault();
 23 | 
 24 |     if (formData.newPassword !== formData.confirmPassword) {
 25 |       console.log({
 26 |         title: "Xatolik",
 27 |         description: "Yangi parollar mos kelmaydi",
 28 |         variant: "destructive",
 29 |       });
 30 |       return;
 31 |     }
 32 | 
 33 |     if (formData.newPassword.length < 6) {
 34 |       console.log({
 35 |         title: "Xatolik",
 36 |         description: "Parol kamida 6 ta belgidan iborat bo'lishi kerak",
 37 |         variant: "destructive",
 38 |       });
 39 |       return;
 40 |     }
 41 | 
 42 |     setLoading(true);
 43 |     try {
 44 |       await Axios.post("auth/change-password", {
 45 |         currentPassword: formData.currentPassword,
 46 |         newPassword: formData.newPassword,
 47 |       });
 48 |       console.log({
 49 |         title: "Muvaffaqiyat",
 50 |         description: "Parol muvaffaqiyatli o'zgartirildi",
 51 |       });
 52 |       onOpenChange(false);
 53 |       setFormData({
 54 |         currentPassword: "",
 55 |         newPassword: "",
 56 |         confirmPassword: "",
 57 |       });
 58 |     } catch (error: any) {
 59 |       console.log({
 60 |         title: "Xatolik",
 61 |         description:
 62 |           error.response?.data?.message || "Parolni o'zgartirishda xatolik",
 63 |         variant: "destructive",
 64 |       });
 65 |     } finally {
 66 |       setLoading(false);
 67 |     }
 68 |   };
 69 | 
 70 |   const handleBackdropClick = (e: React.MouseEvent) => {
 71 |     if (e.target === e.currentTarget) {
 72 |       onOpenChange(false);
 73 |     }
 74 |   };
 75 | 
 76 |   if (!open) return null;
 77 | 
 78 |   return (
 79 |     <div
 80 |       className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4"
 81 |       onClick={handleBackdropClick}
 82 |     >
 83 |       <div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-auto">
 84 |         {/* Header */}
 85 |         <div className="px-6 py-4 border-b border-gray-200">
 86 |           <h2 className="text-lg font-semibold text-gray-900">
 87 |             Parolni o'zgartirish
 88 |           </h2>
 89 |           <p className="text-sm text-gray-600 mt-1">
 90 |             Yangi parolni kiriting. Parol kamida 6 ta belgidan iborat bo'lishi
 91 |             kerak.
 92 |           </p>
 93 |         </div>
 94 | 
 95 |         {/* Form */}
 96 |         <form onSubmit={handleSubmit}>
 97 |           <div className="px-6 py-4 space-y-4">
 98 |             {/* Current Password */}
 99 |             <div>
100 |               <label
101 |                 htmlFor="currentPassword"
102 |                 className="block text-sm font-medium text-gray-700 mb-1"
103 |               >
104 |                 Joriy parol
105 |               </label>
106 |               <input
107 |                 id="currentPassword"
108 |                 type="password"
109 |                 value={formData.currentPassword}
110 |                 onChange={(e) =>
111 |                   setFormData((prev) => ({
112 |                     ...prev,
113 |                     currentPassword: e.target.value,
114 |                   }))
115 |                 }
116 |                 required
117 |                 className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
118 |                 placeholder="Joriy parolni kiriting"
119 |               />
120 |             </div>
121 | 
122 |             {/* New Password */}
123 |             <div>
124 |               <label
125 |                 htmlFor="newPassword"
126 |                 className="block text-sm font-medium text-gray-700 mb-1"
127 |               >
128 |                 Yangi parol
129 |               </label>
130 |               <input
131 |                 id="newPassword"
132 |                 type="password"
133 |                 value={formData.newPassword}
134 |                 onChange={(e) =>
135 |                   setFormData((prev) => ({
136 |                     ...prev,
137 |                     newPassword: e.target.value,
138 |                   }))
139 |                 }
140 |                 required
141 |                 className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
142 |                 placeholder="Yangi parolni kiriting"
143 |               />
144 |             </div>
145 | 
146 |             {/* Confirm Password */}
147 |             <div>
148 |               <label
149 |                 htmlFor="confirmPassword"
150 |                 className="block text-sm font-medium text-gray-700 mb-1"
151 |               >
152 |                 Yangi parolni tasdiqlang
153 |               </label>
154 |               <input
155 |                 id="confirmPassword"
156 |                 type="password"
157 |                 value={formData.confirmPassword}
158 |                 onChange={(e) =>
159 |                   setFormData((prev) => ({
160 |                     ...prev,
161 |                     confirmPassword: e.target.value,
162 |                   }))
163 |                 }
164 |                 required
165 |                 className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
166 |                 placeholder="Yangi parolni qayta kiriting"
167 |               />
168 |             </div>
169 |           </div>
170 | 
171 |           {/* Footer */}
172 |           <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
173 |             <button
174 |               type="button"
175 |               onClick={() => onOpenChange(false)}
176 |               className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
177 |             >
178 |               Bekor qilish
179 |             </button>
180 |             <button
181 |               type="submit"
182 |               disabled={loading}
183 |               className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center"
184 |             >
185 |               {loading && (
186 |                 <svg
187 |                   className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
188 |                   xmlns="http://www.w3.org/2000/svg"
189 |                   fill="none"
190 |                   viewBox="0 0 24 24"
191 |                 >
192 |                   <circle
193 |                     className="opacity-25"
194 |                     cx="12"
195 |                     cy="12"
196 |                     r="10"
197 |                     stroke="currentColor"
198 |                     strokeWidth="4"
199 |                   />
200 |                   <path
201 |                     className="opacity-75"
202 |                     fill="currentColor"
203 |                     d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
204 |                   />
205 |                 </svg>
206 |               )}
207 |               O'zgartirish
208 |             </button>
209 |           </div>
210 |         </form>
211 |       </div>
212 |     </div>
213 |   );
214 | };
215 | 
216 | export default ChangePasswordDialog;
217 | 


--------------------------------------------------------------------------------
/src/pages/Trainers.tsx:
--------------------------------------------------------------------------------
  1 | import type React from "react";
  2 | import { useState, useRef, useEffect } from "react";
  3 | import useSWR from "swr";
  4 | import type { TrainerTypes } from "../Types/indexTypes";
  5 | import { fetcher } from "../middlewares/Fetcher";
  6 | import { Axios } from "../middlewares/Axios";
  7 | import TrainerEditModal from "../components/shared/TrainerEditModal";
  8 | import TrainerModal from "../components/shared/TrainerModal";
  9 | import { MoreVertical, Edit, Trash2 } from "lucide-react";
 10 | 
 11 | export const Trainers: React.FC = () => {
 12 |   const [isModalActive, setIsModalActive] = useState(false);
 13 |   const [editData, setEditData] = useState({
 14 |     id: "",
 15 |     isEditing: false,
 16 |   });
 17 |   const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
 18 |   const dropdownRef = useRef<HTMLDivElement>(null);
 19 | 
 20 |   const { data, error, isLoading, mutate } = useSWR<TrainerTypes[]>(
 21 |     `/trainer`,
 22 |     fetcher
 23 |   );
 24 | 
 25 |   // Close dropdown when clicking outside
 26 |   useEffect(() => {
 27 |     const handleClickOutside = (event: MouseEvent) => {
 28 |       if (
 29 |         dropdownRef.current &&
 30 |         !dropdownRef.current.contains(event.target as Node)
 31 |       ) {
 32 |         setActiveDropdown(null);
 33 |       }
 34 |     };
 35 | 
 36 |     document.addEventListener("mousedown", handleClickOutside);
 37 |     return () => {
 38 |       document.removeEventListener("mousedown", handleClickOutside);
 39 |     };
 40 |   }, []);
 41 | 
 42 |   const handleDeleteTrainer = async (id: string) => {
 43 |     const isConfirmed = window.confirm(
 44 |       "Вы уверены, что хотите удалить трейнера?"
 45 |     );
 46 |     if (!isConfirmed) return;
 47 | 
 48 |     try {
 49 |       await Axios.delete(`/trainer/${id}`);
 50 |       alert("Трейнер успешно удален!");
 51 |       mutate((prevState) => prevState?.filter((trainer) => trainer._id !== id));
 52 |       setActiveDropdown(null);
 53 |     } catch (error) {
 54 |       alert("Произошла ошибка при удалении трейнера.");
 55 |     }
 56 |   };
 57 | 
 58 |   const handleEditTrainer = (trainerId: string) => {
 59 |     setEditData((prevData) => ({
 60 |       ...prevData,
 61 |       id: trainerId,
 62 |       isEditing: true,
 63 |     }));
 64 |     setActiveDropdown(null);
 65 |   };
 66 | 
 67 |   const toggleDropdown = (trainerId: string) => {
 68 |     setActiveDropdown(activeDropdown === trainerId ? null : trainerId);
 69 |   };
 70 | 
 71 |   if (isLoading) {
 72 |     return (
 73 |       <div className="h-screen flex justify-center items-center">
 74 |         <span className="h-16 w-16 border-[6px] border-dotted border-black animate-spin rounded-full"></span>
 75 |       </div>
 76 |     );
 77 |   }
 78 | 
 79 |   if (error) {
 80 |     return (
 81 |       <div className="flex justify-center items-center h-40">
 82 |         <p className="text-lg font-medium text-red-600">{error}</p>
 83 |       </div>
 84 |     );
 85 |   }
 86 | 
 87 |   return (
 88 |     <>
 89 |       <section className="p-4">
 90 |         <div className="flex justify-between items-center mb-4 gap-3 flex-wrap">
 91 |           <h1 className="text-2xl uppercase font-bold">Трейнеры</h1>
 92 |           <button
 93 |             className="bg-black text-white px-4 py-2 rounded-md text-sm"
 94 |             onClick={() => setIsModalActive(true)}
 95 |           >
 96 |             Новый трейнер
 97 |           </button>
 98 |         </div>
 99 | 
100 |         {data && data?.length <= 0 ? (
101 |           <div className="h-[30vh] flex items-center justify-center">
102 |             <h1 className="text-xl text-gray-500">Нет трейнеров</h1>
103 |           </div>
104 |         ) : (
105 |           <div className="overflow-visible">
106 |             <table className="w-full border-collapse border border-gray-200 shadow-md bg-white">
107 |               <thead>
108 |                 <tr className="bg-gray-100 text-left">
109 |                   <th className="p-3 border border-gray-200">Фото</th>
110 |                   <th className="p-3 border border-gray-200">Имя</th>
111 |                   <th className="p-3 border border-gray-200">Опыт</th>
112 |                   <th className="p-3 border border-gray-200 text-right">
113 |                     Действия
114 |                   </th>
115 |                 </tr>
116 |               </thead>
117 |               <tbody>
118 |                 {data?.map((trainer: TrainerTypes) => (
119 |                   <tr key={trainer._id} className="hover:bg-gray-50">
120 |                     <td className="p-3 border border-gray-200">
121 |                       <div className="w-16 h-16 rounded-full overflow-hidden bg-gray-200">
122 |                         <img
123 |                           className="w-full h-full object-cover"
124 |                           src={trainer.photo || "/placeholder.svg"}
125 |                           alt={trainer.fullName}
126 |                           onError={(e) => {
127 |                             const target = e.target as HTMLImageElement;
128 |                             target.src = "/placeholder.svg?height=64&width=64";
129 |                           }}
130 |                         />
131 |                       </div>
132 |                     </td>
133 |                     <td className="p-3 border border-gray-200">
134 |                       <div className="font-semibold text-gray-900">
135 |                         {trainer.fullName}
136 |                       </div>
137 |                     </td>
138 |                     <td className="p-3 border border-gray-200">
139 |                       <span className="text-gray-600">
140 |                         {trainer.experience} лет опыта
141 |                       </span>
142 |                     </td>
143 |                     <td className="p-3 border border-gray-200 text-right">
144 |                       <div className="relative inline-block" ref={dropdownRef}>
145 |                         <button
146 |                           onClick={() => toggleDropdown(trainer._id)}
147 |                           className="p-2 hover:bg-gray-100 rounded-full transition-colors duration-200 relative z-10"
148 |                           aria-label="Действия"
149 |                         >
150 |                           <MoreVertical size={16} className="text-gray-600" />
151 |                         </button>
152 | 
153 |                         {activeDropdown === trainer._id && (
154 |                           <div className="absolute right-0 mt-1 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-50 min-w-max">
155 |                             <div className="py-1">
156 |                               <button
157 |                                 onClick={() => handleEditTrainer(trainer._id)}
158 |                                 className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200 whitespace-nowrap"
159 |                               >
160 |                                 <Edit size={14} className="mr-2" />
161 |                                 Изменить
162 |                               </button>
163 |                               <button
164 |                                 onClick={() => handleDeleteTrainer(trainer._id)}
165 |                                 className="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors duration-200 whitespace-nowrap"
166 |                               >
167 |                                 <Trash2 size={14} className="mr-2" />
168 |                                 Удалить
169 |                               </button>
170 |                             </div>
171 |                           </div>
172 |                         )}
173 |                       </div>
174 |                     </td>
175 |                   </tr>
176 |                 ))}
177 |               </tbody>
178 |             </table>
179 |           </div>
180 |         )}
181 |       </section>
182 | 
183 |       {isModalActive && (
184 |         <TrainerModal setIsModalActive={setIsModalActive} mutate={mutate} />
185 |       )}
186 | 
187 |       {editData.isEditing && (
188 |         <TrainerEditModal editData={editData} setEditData={setEditData} />
189 |       )}
190 |     </>
191 |   );
192 | };
193 | 


--------------------------------------------------------------------------------
/src/components/shared/BlogModal.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { Axios } from "../../middlewares/Axios";
  3 | import { X } from "lucide-react";
  4 | 
  5 | type ModalProps = {
  6 |   setIsModalActive: React.Dispatch<React.SetStateAction<boolean>>;
  7 |   mutate: any;
  8 | };
  9 | 
 10 | export default function BlogModal({ setIsModalActive, mutate }: ModalProps) {
 11 |   const [formData, setFormData] = useState({
 12 |     title: "",
 13 |     description: "",
 14 |     photos: [] as File[],
 15 |   });
 16 | 
 17 |   const [errors, setErrors] = useState<Record<string, string>>({});
 18 |   const [isUploading, setIsUploading] = useState(false);
 19 |   const [previews, setPreviews] = useState<string[]>([]);
 20 | 
 21 |   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 22 |     const { name, value } = e.target;
 23 |     setFormData((prevData) => ({ ...prevData, [name]: value }));
 24 |     setErrors((prevErrors) => ({ ...prevErrors, [name]: "" }));
 25 |   };
 26 | 
 27 |   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 28 |     if (!e.target.files || e.target.files.length === 0) return;
 29 | 
 30 |     const filesArray = Array.from(e.target.files);
 31 | 
 32 |     const newPreviews = filesArray.map((file) => URL.createObjectURL(file));
 33 | 
 34 |     setFormData((prevData) => ({
 35 |       ...prevData,
 36 |       photos: [...prevData.photos, ...filesArray],
 37 |     }));
 38 | 
 39 |     setPreviews((prev) => [...prev, ...newPreviews]);
 40 | 
 41 |     e.target.value = "";
 42 |   };
 43 | 
 44 |   const removePhoto = (index: number) => {
 45 |     setFormData((prevData) => ({
 46 |       ...prevData,
 47 |       photos: prevData.photos.filter((_, i) => i !== index),
 48 |     }));
 49 | 
 50 |     setPreviews((prev) => prev.filter((_, i) => i !== index));
 51 | 
 52 |     setErrors((prev) => ({ ...prev, photos: "" }));
 53 |   };
 54 | 
 55 |   const validateForm = () => {
 56 |     let isValid = true;
 57 |     const newErrors: Record<string, string> = {};
 58 | 
 59 |     if (!formData.title.trim()) {
 60 |       newErrors.title = "Название блога обязательно";
 61 |       isValid = false;
 62 |     }
 63 | 
 64 |     if (!formData.description.trim()) {
 65 |       newErrors.description = "Описание обязательно";
 66 |       isValid = false;
 67 |     }
 68 | 
 69 |     if (formData.photos.length === 0) {
 70 |       newErrors.photos = "Добавьте хотя бы одну фотографию";
 71 |       isValid = false;
 72 |     }
 73 | 
 74 |     setErrors(newErrors);
 75 |     return isValid;
 76 |   };
 77 | 
 78 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 79 |     e.preventDefault();
 80 |     if (!validateForm()) return;
 81 | 
 82 |     try {
 83 |       setIsUploading(true);
 84 |       const formDataToSend = new FormData();
 85 |       formDataToSend.append("title", formData.title);
 86 |       formDataToSend.append("description", formData.description);
 87 | 
 88 |       formData.photos.forEach((photo) => {
 89 |         formDataToSend.append(`photos`, photo);
 90 |       });
 91 | 
 92 |       await Axios.post("/blog", formDataToSend);
 93 |       alert("Блог успешно добавлен!");
 94 |       setIsModalActive(false);
 95 |       mutate();
 96 |     } catch (error: any) {
 97 |       alert(error.response?.data.message || "Произошла ошибка");
 98 |     } finally {
 99 |       setIsUploading(false);
100 |     }
101 |   };
102 | 
103 |   const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
104 |     if ((e.target as HTMLElement).classList.contains("modal-overlay")) {
105 |       setIsModalActive(false);
106 |     }
107 |   };
108 | 
109 |   React.useEffect(() => {
110 |     return () => {
111 |       previews.forEach((url) => URL.revokeObjectURL(url));
112 |     };
113 |   }, [previews]);
114 | 
115 |   return (
116 |     <div
117 |       className="w-full h-screen fixed left-0 top-0 bg-black bg-opacity-75 backdrop-blur-md flex justify-end modal-overlay z-50"
118 |       onClick={handleOutsideClick}
119 |     >
120 |       <form
121 |         onSubmit={handleSubmit}
122 |         className="h-full w-full md:max-w-lg flex flex-col gap-6 p-6 bg-white overflow-y-auto"
123 |       >
124 |         <h1 className="text-center text-xl font-bold">Добавить новый блог</h1>
125 |         <label className="flex flex-col gap-2 text-[14px]">
126 |           <p>
127 |             Введите название блога<span className="text-red-600">*</span>
128 |           </p>
129 |           <input
130 |             type="text"
131 |             name="title"
132 |             className={`outline-none border p-2 rounded-md ${
133 |               errors.title ? "border-red-600" : "border-black"
134 |             }`}
135 |             value={formData.title}
136 |             onChange={handleInputChange}
137 |           />
138 |           {errors.title && (
139 |             <p className="text-red-600 text-sm">{errors.title}</p>
140 |           )}
141 |         </label>
142 |         <label className="flex flex-col gap-2 text-[14px]">
143 |           <p>
144 |             Введите описание
145 |             <span className="text-red-600">*</span>
146 |           </p>
147 |           <input
148 |             type="text"
149 |             name="description"
150 |             className={`outline-none border p-2 rounded-md ${
151 |               errors.description ? "border-red-600" : "border-black"
152 |             }`}
153 |             value={formData.description}
154 |             onChange={handleInputChange}
155 |           />
156 |           {errors.description && (
157 |             <p className="text-red-600 text-sm">{errors.description}</p>
158 |           )}
159 |         </label>
160 |         <div className="space-y-2">
161 |           <label htmlFor="photo" className="block text-sm">
162 |             Фотографии
163 |             <span className="text-red-600">*</span>
164 |           </label>
165 | 
166 |           {previews.length > 0 && (
167 |             <div className="grid grid-cols-3 gap-2 mb-4">
168 |               {previews.map((preview, index) => (
169 |                 <div key={index} className="relative group">
170 |                   <img
171 |                     src={preview || "/placeholder.svg"}
172 |                     alt={`Preview ${index + 1}`}
173 |                     className="w-full h-24 object-cover rounded-md"
174 |                   />
175 |                   <button
176 |                     type="button"
177 |                     onClick={() => removePhoto(index)}
178 |                     className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
179 |                     aria-label="Remove photo"
180 |                   >
181 |                     <X size={14} />
182 |                   </button>
183 |                 </div>
184 |               ))}
185 |             </div>
186 |           )}
187 | 
188 |           <div className="space-y-4 relative flex justify-center items-center">
189 |             <label
190 |               htmlFor="photo"
191 |               className={`flex items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
192 |                 errors.photos ? "border-red-600" : "border-gray-600"
193 |               }`}
194 |             >
195 |               <span className="text-sm text-gray-400">
196 |                 Загрузить фотографию
197 |               </span>
198 |               <input
199 |                 id="photo"
200 |                 type="file"
201 |                 name="photos"
202 |                 multiple
203 |                 accept="image/*"
204 |                 onChange={handleFileChange}
205 |                 className="hidden"
206 |               />
207 |             </label>
208 |           </div>
209 |           {errors.photos && (
210 |             <p className="text-red-600 text-sm">{errors.photos}</p>
211 |           )}
212 |           {formData.photos.length > 0 && (
213 |             <p className="text-sm text-gray-500">
214 |               Выбрано файлов: {formData.photos.length}
215 |             </p>
216 |           )}
217 |         </div>
218 | 
219 |         <div className="flex justify-end gap-4 mt-auto">
220 |           <button
221 |             type="button"
222 |             onClick={() => setIsModalActive(false)}
223 |             className="bg-red-600 text-white p-2 uppercase rounded-md text-sm"
224 |           >
225 |             Назад
226 |           </button>
227 |           <button
228 |             type="submit"
229 |             className="bg-black text-white p-2 uppercase rounded-md text-sm disabled:bg-gray-400"
230 |             disabled={isUploading}
231 |           >
232 |             {isUploading ? "Загрузка..." : "Создать"}
233 |           </button>
234 |         </div>
235 |       </form>
236 |     </div>
237 |   );
238 | }
239 | 


--------------------------------------------------------------------------------
/src/components/shared/TrainerModal.tsx:
--------------------------------------------------------------------------------
  1 | import type React from "react";
  2 | import { useState } from "react";
  3 | import { Axios } from "../../middlewares/Axios";
  4 | 
  5 | type ModalProps = {
  6 |   setIsModalActive: React.Dispatch<React.SetStateAction<boolean>>;
  7 |   mutate: any;
  8 | };
  9 | 
 10 | export default function TrainerModal({ setIsModalActive, mutate }: ModalProps) {
 11 |   const [formData, setFormData] = useState({
 12 |     photo: null as File | null,
 13 |     fullName: "",
 14 |     experience: "",
 15 |     level: "",
 16 |     students: "",
 17 |   });
 18 | 
 19 |   const [errors, setErrors] = useState<Record<string, string>>({});
 20 | 
 21 |   const [isUploading, setIsUploading] = useState(false);
 22 | 
 23 |   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 24 |     const { name, value } = e.target;
 25 |     setFormData((prevData) => ({ ...prevData, [name]: value }));
 26 |     setErrors((prevErrors) => ({ ...prevErrors, [name]: "" }));
 27 |   };
 28 | 
 29 |   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 30 |     if (!e.target.files || e.target.files.length === 0) return;
 31 |     const file = e.target.files[0];
 32 | 
 33 |     if (!file.type.startsWith("image/")) {
 34 |       setErrors((prevErrors) => ({
 35 |         ...prevErrors,
 36 |         photo: "Файл должен быть изображением.",
 37 |       }));
 38 |       return;
 39 |     }
 40 | 
 41 |     setFormData((prevData) => ({ ...prevData, photo: file }));
 42 |   };
 43 | 
 44 |   const validateForm = () => {
 45 |     let isValid = true;
 46 |     const newErrors: Record<string, string> = {};
 47 | 
 48 |     if (!formData.fullName.trim()) {
 49 |       newErrors.fullName = "Полное имя обязательно";
 50 |       isValid = false;
 51 |     }
 52 | 
 53 |     if (!formData.level.trim()) {
 54 |       newErrors.level = "Уровень (пояс) обязателен";
 55 |       isValid = false;
 56 |     }
 57 | 
 58 |     if (!formData.students.trim() || isNaN(Number(formData.students))) {
 59 |       newErrors.experience = "Число студентов должен быть числом";
 60 |       isValid = false;
 61 |     }
 62 | 
 63 |     if (!formData.photo) {
 64 |       newErrors.photo = "Фото обязательно";
 65 |       isValid = false;
 66 |     }
 67 | 
 68 |     setErrors(newErrors);
 69 |     return isValid;
 70 |   };
 71 | 
 72 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 73 |     e.preventDefault();
 74 |     if (!validateForm()) return;
 75 | 
 76 |     try {
 77 |       setIsUploading(true);
 78 |       const formDataToSend = new FormData();
 79 |       formDataToSend.append("fullName", formData.fullName);
 80 |       formDataToSend.append("experience", formData.experience);
 81 |       formDataToSend.append("level", formData.level);
 82 |       formDataToSend.append("students", formData.students);
 83 |       if (formData.photo) formDataToSend.append("photo", formData.photo);
 84 | 
 85 |       await Axios.post("/trainer", formDataToSend);
 86 |       alert("Тренер успешно добавлен!");
 87 |       setIsModalActive(false);
 88 |       mutate();
 89 |     } catch (error: any) {
 90 |       alert(error.response?.data.message || "Произошла ошибка");
 91 |     } finally {
 92 |       setIsUploading(false);
 93 |     }
 94 |   };
 95 | 
 96 |   const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
 97 |     if ((e.target as HTMLElement).classList.contains("modal-overlay")) {
 98 |       setIsModalActive(false);
 99 |     }
100 |   };
101 | 
102 |   return (
103 |     <div
104 |       className="w-full h-screen fixed left-0 top-0 bg-black bg-opacity-75 backdrop-blur-md flex justify-end modal-overlay"
105 |       onClick={handleOutsideClick}
106 |     >
107 |       <form
108 |         onSubmit={handleSubmit}
109 |         className="h-full w-full md:max-w-lg flex flex-col gap-6 p-6 bg-white"
110 |       >
111 |         <h1 className="text-center text-xl font-bold">
112 |           Добавить нового трейнера
113 |         </h1>
114 |         <label className="flex flex-col gap-2 text-[14px]">
115 |           <p>
116 |             Введите полное имя трейнера<span className="text-red-600">*</span>
117 |           </p>
118 |           <input
119 |             type="text"
120 |             name="fullName"
121 |             className={`outline-none border p-2 rounded-md ${
122 |               errors.fullName ? "border-red-600" : "border-black"
123 |             }`}
124 |             value={formData.fullName}
125 |             onChange={handleInputChange}
126 |           />
127 |           {errors.fullName && (
128 |             <p className="text-red-600 text-sm">{errors.fullName}</p>
129 |           )}
130 |         </label>
131 |         <label className="flex flex-col gap-2 text-[14px]">
132 |           <p>
133 |             Введите опыт трейнера (в годах)
134 |             <span className="text-red-600">*</span>
135 |           </p>
136 |           <input
137 |             type="text"
138 |             name="experience"
139 |             className={`outline-none border p-2 rounded-md ${
140 |               errors.experience ? "border-red-600" : "border-black"
141 |             }`}
142 |             value={formData.experience}
143 |             onChange={handleInputChange}
144 |           />
145 |           {errors.experience && (
146 |             <p className="text-red-600 text-sm">{errors.experience}</p>
147 |           )}
148 |         </label>
149 |         <label className="flex flex-col gap-2 text-[14px]">
150 |           <p>
151 |             Выберите уровень трейнера (пояс)
152 |             <span className="text-red-600">*</span>
153 |           </p>
154 |           <select
155 |             name="level"
156 |             className={`outline-none border p-2 rounded-md ${
157 |               errors.level ? "border-red-600" : "border-black"
158 |             }`}
159 |             value={formData.level}
160 |             onChange={(e) => {
161 |               setFormData((prevData) => ({
162 |                 ...prevData,
163 |                 level: e.target.value,
164 |               }));
165 |               setErrors((prevErrors) => ({ ...prevErrors, level: "" }));
166 |             }}
167 |           >
168 |             <option value="">Выберите цвет пояса</option>
169 |             <option value="Oq">Белый (Oq)</option>
170 |             <option value="Sariq">Желтый (Sariq)</option>
171 |             <option value="Apelsin">Оранжевый (Apelsin)</option>
172 |             <option value="Yashil">Зеленый (Yashil)</option>
173 |             <option value="Ko'k">Синий (Ko'k)</option>
174 |             <option value="Jigarrang">Коричневый (Jigarrang)</option>
175 |             <option value="Qora">Черный (Qora)</option>
176 |           </select>
177 |           {errors.level && (
178 |             <p className="text-red-600 text-sm">{errors.level}</p>
179 |           )}
180 |         </label>
181 |         <label className="flex flex-col gap-2 text-[14px]">
182 |           <p>
183 |             количество студентов
184 |             <span className="text-red-600">*</span>
185 |           </p>
186 |           <input
187 |             type="text"
188 |             name="students"
189 |             className={`outline-none border p-2 rounded-md ${
190 |               errors.students ? "border-red-600" : "border-black"
191 |             }`}
192 |             value={formData.students}
193 |             onChange={handleInputChange}
194 |           />
195 |           {errors.students && (
196 |             <p className="text-red-600 text-sm">{errors.students}</p>
197 |           )}
198 |         </label>
199 | 
200 |         <div className="space-y-2">
201 |           <label htmlFor="photo" className="block text-sm">
202 |             Фотография
203 |             <span className={`text-red-600`}>*</span>
204 |           </label>
205 |           <div className="space-y-4 relative flex justify-center items-center">
206 |             <label
207 |               htmlFor="photo"
208 |               className="flex items-center justify-center w-full h-32 border-2 border-dashed border-gray-600 rounded-lg cursor-pointer hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
209 |             >
210 |               {formData.photo ? (
211 |                 <img
212 |                   src={
213 |                     URL.createObjectURL(formData.photo) || "/placeholder.svg"
214 |                   }
215 |                   alt="Preview"
216 |                   className="w-full h-full object-cover rounded-lg"
217 |                 />
218 |               ) : (
219 |                 <span className="text-sm text-gray-400">
220 |                   Загрузить фотографию
221 |                 </span>
222 |               )}
223 |               <input
224 |                 id="photo"
225 |                 type="file"
226 |                 name="file"
227 |                 onChange={handleFileChange}
228 |                 className="hidden"
229 |               />
230 |             </label>
231 |             {formData.photo && (
232 |               <button
233 |                 type="button"
234 |                 onClick={() => setFormData({ ...formData, photo: null })}
235 |                 className="px-4 py-2 text-sm font-medium text-white bg-red-500 rounded-lg hover:bg-red-600 absolute"
236 |               >
237 |                 Убрать
238 |               </button>
239 |             )}
240 |           </div>
241 |           {errors.photo && (
242 |             <p className="text-red-600 text-sm">{errors.photo}</p>
243 |           )}
244 |         </div>
245 | 
246 |         <div className="flex justify-end gap-4">
247 |           <button
248 |             type="button"
249 |             onClick={() => setIsModalActive(false)}
250 |             className="bg-red-600 text-white p-2 uppercase rounded-md text-sm"
251 |           >
252 |             Назад
253 |           </button>
254 |           <button
255 |             type="submit"
256 |             className="bg-black text-white p-2 uppercase rounded-md text-sm"
257 |             disabled={isUploading}
258 |           >
259 |             Создать
260 |           </button>
261 |         </div>
262 |       </form>
263 |     </div>
264 |   );
265 | }
266 | 


--------------------------------------------------------------------------------
/src/components/shared/TrainerEditModal.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { Axios } from "../../middlewares/Axios";
  3 | import useSWR from "swr";
  4 | import { fetcher } from "../../middlewares/Fetcher";
  5 | import { TrainerTypes } from "../../Types/indexTypes";
  6 | 
  7 | type EditDataTypes = {
  8 |   id: string;
  9 |   isEditing: boolean;
 10 | };
 11 | 
 12 | type ModalProps = {
 13 |   editData: EditDataTypes;
 14 |   setEditData: React.Dispatch<React.SetStateAction<EditDataTypes>>;
 15 | };
 16 | 
 17 | export default function AdminEditModal({ editData, setEditData }: ModalProps) {
 18 |   const { data, error, isLoading, mutate } = useSWR<TrainerTypes[]>(
 19 |     `/trainer`,
 20 |     fetcher
 21 |   );
 22 | 
 23 |   const [formData, setFormData] = useState({
 24 |     _id: "",
 25 |     photo: null as File | null,
 26 |     fullName: "",
 27 |     experience: "",
 28 |     level: "",
 29 |     students: "",
 30 |   });
 31 | 
 32 |   const [errors, setErrors] = useState<Record<string, string>>({});
 33 | 
 34 |   const [isUploading, setIsUploading] = useState(false);
 35 | 
 36 |   useEffect(() => {
 37 |     if (data) {
 38 |       const trainer = data.find((user) => user._id === editData.id);
 39 |       if (trainer) setFormData(trainer);
 40 |       return;
 41 |     }
 42 |   }, [data, editData.id]);
 43 | 
 44 |   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 45 |     if (!e.target.files || e.target.files.length === 0) return;
 46 |     const file = e.target.files[0];
 47 | 
 48 |     if (!file.type.startsWith("image/")) {
 49 |       setErrors((prevErrors) => ({
 50 |         ...prevErrors,
 51 |         photo: "Файл должен быть изображением.",
 52 |       }));
 53 |       return;
 54 |     }
 55 | 
 56 |     setFormData((prevData) => ({ ...prevData, photo: file }));
 57 |   };
 58 | 
 59 |   const validateForm = () => {
 60 |     let isValid = true;
 61 |     const newErrors: Record<string, string> = {};
 62 | 
 63 |     if (!formData.fullName.trim()) {
 64 |       newErrors.fullName = "Полное имя обязательно";
 65 |       isValid = false;
 66 |     }
 67 | 
 68 |     if (!formData.level.trim()) {
 69 |       newErrors.level = "Уровень (пояс) обязателен";
 70 |       isValid = false;
 71 |     }
 72 | 
 73 |     if (!formData.students.trim() || isNaN(Number(formData.students))) {
 74 |       newErrors.experience = "Число студентов должен быть числом";
 75 |       isValid = false;
 76 |     }
 77 | 
 78 |     if (!formData.photo) {
 79 |       newErrors.photo = "Фото обязательно";
 80 |       isValid = false;
 81 |     }
 82 | 
 83 |     setErrors(newErrors);
 84 |     return isValid;
 85 |   };
 86 | 
 87 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 88 |     e.preventDefault();
 89 |     if (!validateForm()) return;
 90 | 
 91 |     try {
 92 |       setIsUploading(true);
 93 |       const formDataToSend = new FormData();
 94 |       formDataToSend.append("fullName", formData.fullName);
 95 |       formDataToSend.append("experience", formData.experience);
 96 |       formDataToSend.append("level", formData.level);
 97 |       formDataToSend.append("students", formData.students);
 98 |       if (formData.photo) formDataToSend.append("photo", formData.photo);
 99 |       await Axios.put(`/trainer/${formData._id}`, formDataToSend);
100 |       alert("Тренер успешно изменен!");
101 |       setEditData((prevData) => ({ ...prevData, isEditing: false, id: "" }));
102 |       mutate();
103 |     } catch (error: any) {
104 |       alert(error.response?.data.message || "Произошла ошибка");
105 |     } finally {
106 |       setIsUploading(false);
107 |     }
108 |   };
109 | 
110 |   const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
111 |     if ((e.target as HTMLElement).classList.contains("modal-overlay")) {
112 |       setEditData((prevData) => ({ ...prevData, isEditing: false }));
113 |     }
114 |   };
115 | 
116 |   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
117 |     const { name, value } = e.target;
118 |     setFormData((prevData) => ({ ...prevData, [name]: value }));
119 |     setErrors((prevErrors) => ({ ...prevErrors, [name]: "" }));
120 |   };
121 | 
122 |   if (isLoading) {
123 |     return (
124 |       <div className="h-screen flex justify-center items-center">
125 |         <span className="h-16 w-16 border-[6px] border-dotted border-black animate-spin rounded-full"></span>
126 |       </div>
127 |     );
128 |   }
129 | 
130 |   if (error) {
131 |     return (
132 |       <div className="flex justify-center items-center h-40">
133 |         <p className="text-lg font-medium text-red-600">{error}</p>
134 |       </div>
135 |     );
136 |   }
137 | 
138 |   return (
139 |     <div
140 |       className="w-full h-screen fixed left-0 top-0 bg-black bg-opacity-75 backdrop-blur-md flex justify-end modal-overlay"
141 |       onClick={handleOutsideClick}
142 |     >
143 |       <form
144 |         onSubmit={handleSubmit}
145 |         className="h-full w-full md:max-w-lg flex flex-col gap-6 p-6 bg-white"
146 |       >
147 |         <h1 className="text-center text-xl font-bold">
148 |           Редактировать администратора
149 |         </h1>
150 |         <label className="flex flex-col gap-2 text-[14px]">
151 |           <p>
152 |             Введите ваше полное имя <span className="text-red-600">*</span>
153 |           </p>
154 |           <input
155 |             type="text"
156 |             name="fullName"
157 |             onChange={handleInputChange}
158 |             value={formData.fullName}
159 |             className={`outline-none border p-2 rounded-md ${
160 |               errors.fullName ? "border-red-600" : "border-black"
161 |             }`}
162 |           />
163 |           {errors.fullName && <p className="text-red-600">{errors.fullName}</p>}
164 |         </label>
165 | 
166 |         <label className="flex flex-col gap-2 text-[14px]">
167 |           <p>
168 |             Введите опыт трейнера (в годах)
169 |             <span className="text-red-600">*</span>
170 |           </p>
171 |           <input
172 |             type="text"
173 |             name="experience"
174 |             className={`outline-none border p-2 rounded-md ${
175 |               errors.experience ? "border-red-600" : "border-black"
176 |             }`}
177 |             value={formData.experience}
178 |             onChange={handleInputChange}
179 |           />
180 |           {errors.experience && (
181 |             <p className="text-red-600 text-sm">{errors.experience}</p>
182 |           )}
183 |         </label>
184 |         <label className="flex flex-col gap-2 text-[14px]">
185 |           <p>
186 |             Выберите уровень трейнера (пояс)
187 |             <span className="text-red-600">*</span>
188 |           </p>
189 |           <select
190 |             name="level"
191 |             className={`outline-none border p-2 rounded-md ${
192 |               errors.level ? "border-red-600" : "border-black"
193 |             }`}
194 |             value={formData.level}
195 |             onChange={(e) => {
196 |               setFormData((prevData) => ({
197 |                 ...prevData,
198 |                 level: e.target.value,
199 |               }));
200 |               setErrors((prevErrors) => ({ ...prevErrors, level: "" }));
201 |             }}
202 |           >
203 |             <option value="">Выберите цвет пояса</option>
204 |             <option value="Oq">Белый (Oq)</option>
205 |             <option value="Sariq">Желтый (Sariq)</option>
206 |             <option value="Apelsin">Оранжевый (Apelsin)</option>
207 |             <option value="Yashil">Зеленый (Yashil)</option>
208 |             <option value="Ko'k">Синий (Ko'k)</option>
209 |             <option value="Jigarrang">Коричневый (Jigarrang)</option>
210 |             <option value="Qora">Черный (Qora)</option>
211 |           </select>
212 |           {errors.level && (
213 |             <p className="text-red-600 text-sm">{errors.level}</p>
214 |           )}
215 |         </label>
216 |         <label className="flex flex-col gap-2 text-[14px]">
217 |           <p>
218 |             количество студентов
219 |             <span className="text-red-600">*</span>
220 |           </p>
221 |           <input
222 |             type="text"
223 |             name="students"
224 |             className={`outline-none border p-2 rounded-md ${
225 |               errors.students ? "border-red-600" : "border-black"
226 |             }`}
227 |             value={formData.students}
228 |             onChange={handleInputChange}
229 |           />
230 |           {errors.students && (
231 |             <p className="text-red-600 text-sm">{errors.students}</p>
232 |           )}
233 |         </label>
234 | 
235 |         <div className="space-y-2">
236 |           <label htmlFor="photo" className="block text-sm">
237 |             Фотография
238 |             <span className={`text-red-600`}>*</span>
239 |           </label>
240 |           <div className="space-y-4 relative flex justify-center items-center">
241 |             <label
242 |               htmlFor="photo"
243 |               className="flex items-center justify-center w-full h-32 border-2 border-dashed border-gray-600 rounded-lg cursor-pointer hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
244 |             >
245 |               {formData.photo ? (
246 |                 <img
247 |                   src={
248 |                     typeof formData.photo === "string"
249 |                       ? formData.photo
250 |                       : URL.createObjectURL(formData.photo)
251 |                   }
252 |                   alt="Preview"
253 |                   className="w-full h-full object-cover rounded-lg"
254 |                 />
255 |               ) : (
256 |                 <span className="text-sm text-gray-400">
257 |                   Загрузить фотографию
258 |                 </span>
259 |               )}
260 |               <input
261 |                 id="photo"
262 |                 type="file"
263 |                 name="file"
264 |                 onChange={handleFileChange}
265 |                 className="hidden"
266 |               />
267 |             </label>
268 |             {formData.photo && (
269 |               <button
270 |                 type="button"
271 |                 onClick={() => setFormData({ ...formData, photo: null })}
272 |                 className="px-4 py-2 text-sm font-medium text-white bg-red-500 rounded-lg hover:bg-red-600 absolute"
273 |               >
274 |                 Убрать
275 |               </button>
276 |             )}
277 |           </div>
278 |           {errors.photo && (
279 |             <p className="text-red-600 text-sm">{errors.photo}</p>
280 |           )}
281 |         </div>
282 | 
283 |         <div className="flex justify-end gap-4">
284 |           <button
285 |             type="button"
286 |             className="bg-red-600 text-white p-2 text-sm uppercase rounded-md"
287 |             onClick={() =>
288 |               setEditData((prevData) => ({ ...prevData, isEditing: false }))
289 |             }
290 |           >
291 |             Отмена
292 |           </button>
293 |           <button
294 |             type="submit"
295 |             className="bg-black text-white p-2 text-sm uppercase rounded-md"
296 |             disabled={isUploading}
297 |           >
298 |             Сохранить
299 |           </button>
300 |         </div>
301 |       </form>
302 |     </div>
303 |   );
304 | }
305 | 


--------------------------------------------------------------------------------
/src/components/shared/BlogEditModal.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { Axios } from "../../middlewares/Axios";
  3 | import { X } from "lucide-react";
  4 | 
  5 | type BlogData = {
  6 |   _id: string;
  7 |   title: string;
  8 |   description: string;
  9 |   photos: string[];
 10 | };
 11 | 
 12 | type EditModalProps = {
 13 |   setIsModalActive: React.Dispatch<React.SetStateAction<boolean>>;
 14 |   mutate: any;
 15 |   blogData: BlogData;
 16 | };
 17 | 
 18 | export default function BlogEditModal({
 19 |   setIsModalActive,
 20 |   mutate,
 21 |   blogData,
 22 | }: EditModalProps) {
 23 |   const [formData, setFormData] = useState({
 24 |     title: "",
 25 |     description: "",
 26 |     photos: [] as File[],
 27 |   });
 28 | 
 29 |   const [existingPhotos, setExistingPhotos] = useState<string[]>([]);
 30 |   const [errors, setErrors] = useState<Record<string, string>>({});
 31 |   const [isUploading, setIsUploading] = useState(false);
 32 |   const [previews, setPreviews] = useState<string[]>([]);
 33 | 
 34 |   // Load existing data
 35 |   useEffect(() => {
 36 |     if (blogData) {
 37 |       setFormData({
 38 |         title: blogData.title || "",
 39 |         description: blogData.description || "",
 40 |         photos: [],
 41 |       });
 42 | 
 43 |       // Set existing photos
 44 |       if (blogData.photos && blogData.photos.length > 0) {
 45 |         setExistingPhotos(blogData.photos);
 46 |       }
 47 |     }
 48 |   }, [blogData]);
 49 | 
 50 |   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 51 |     const { name, value } = e.target;
 52 |     setFormData((prevData) => ({ ...prevData, [name]: value }));
 53 |     setErrors((prevErrors) => ({ ...prevErrors, [name]: "" }));
 54 |   };
 55 | 
 56 |   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 57 |     if (!e.target.files || e.target.files.length === 0) return;
 58 | 
 59 |     const filesArray = Array.from(e.target.files);
 60 |     const newPreviews = filesArray.map((file) => URL.createObjectURL(file));
 61 | 
 62 |     setFormData((prevData) => ({
 63 |       ...prevData,
 64 |       photos: [...prevData.photos, ...filesArray],
 65 |     }));
 66 | 
 67 |     setPreviews((prev) => [...prev, ...newPreviews]);
 68 |     e.target.value = "";
 69 |   };
 70 | 
 71 |   const removeNewPhoto = (index: number) => {
 72 |     setFormData((prevData) => ({
 73 |       ...prevData,
 74 |       photos: prevData.photos.filter((_, i) => i !== index),
 75 |     }));
 76 | 
 77 |     setPreviews((prev) => prev.filter((_, i) => i !== index));
 78 |     setErrors((prev) => ({ ...prev, photos: "" }));
 79 |   };
 80 | 
 81 |   const removeExistingPhoto = (index: number) => {
 82 |     setExistingPhotos((prev) => prev.filter((_, i) => i !== index));
 83 |     setErrors((prev) => ({ ...prev, photos: "" }));
 84 |   };
 85 | 
 86 |   const validateForm = () => {
 87 |     let isValid = true;
 88 |     const newErrors: Record<string, string> = {};
 89 | 
 90 |     if (!formData.title.trim()) {
 91 |       newErrors.title = "Название блога обязательно";
 92 |       isValid = false;
 93 |     }
 94 | 
 95 |     if (!formData.description.trim()) {
 96 |       newErrors.description = "Описание обязательно";
 97 |       isValid = false;
 98 |     }
 99 | 
100 |     if (existingPhotos.length === 0 && formData.photos.length === 0) {
101 |       newErrors.photos = "Добавьте хотя бы одну фотографию";
102 |       isValid = false;
103 |     }
104 | 
105 |     setErrors(newErrors);
106 |     return isValid;
107 |   };
108 | 
109 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
110 |     e.preventDefault();
111 |     if (!validateForm()) return;
112 | 
113 |     try {
114 |       setIsUploading(true);
115 |       const formDataToSend = new FormData();
116 |       formDataToSend.append("title", formData.title);
117 |       formDataToSend.append("description", formData.description);
118 | 
119 |       existingPhotos.forEach((photo) => {
120 |         formDataToSend.append(`existingPhotos`, photo);
121 |       });
122 | 
123 |       formData.photos.forEach((photo) => {
124 |         formDataToSend.append(`photos`, photo);
125 |       });
126 | 
127 |       await Axios.put(`/blog/${blogData._id}`, formDataToSend);
128 |       alert("Блог успешно обновлен!");
129 | 
130 |       setIsModalActive(false);
131 |       mutate();
132 |     } catch (error: any) {
133 |       alert(
134 |         error.response?.data.message || "Произошла ошибка при обновлении блога"
135 |       );
136 |     } finally {
137 |       setIsUploading(false);
138 |     }
139 |   };
140 | 
141 |   const handleOutsideClick = (e: React.MouseEvent<HTMLDivElement>) => {
142 |     if ((e.target as HTMLElement).classList.contains("modal-overlay")) {
143 |       setIsModalActive(false);
144 |     }
145 |   };
146 | 
147 |   React.useEffect(() => {
148 |     return () => {
149 |       previews.forEach((url) => URL.revokeObjectURL(url));
150 |     };
151 |   }, [previews]);
152 | 
153 |   return (
154 |     <div
155 |       className="w-full h-screen fixed left-0 top-0 bg-black bg-opacity-75 backdrop-blur-md flex justify-end modal-overlay z-50"
156 |       onClick={handleOutsideClick}
157 |     >
158 |       <form
159 |         onSubmit={handleSubmit}
160 |         className="h-full w-full md:max-w-lg flex flex-col gap-6 p-6 bg-white overflow-y-auto"
161 |       >
162 |         <h1 className="text-center text-xl font-bold">Редактировать блог</h1>
163 |         <label className="flex flex-col gap-2 text-[14px]">
164 |           <p>
165 |             Название блога<span className="text-red-600">*</span>
166 |           </p>
167 |           <input
168 |             type="text"
169 |             name="title"
170 |             className={`outline-none border p-2 rounded-md ${
171 |               errors.title ? "border-red-600" : "border-black"
172 |             }`}
173 |             value={formData.title}
174 |             onChange={handleInputChange}
175 |           />
176 |           {errors.title && (
177 |             <p className="text-red-600 text-sm">{errors.title}</p>
178 |           )}
179 |         </label>
180 |         <label className="flex flex-col gap-2 text-[14px]">
181 |           <p>
182 |             Описание
183 |             <span className="text-red-600">*</span>
184 |           </p>
185 |           <input
186 |             type="text"
187 |             name="description"
188 |             className={`outline-none border p-2 rounded-md ${
189 |               errors.description ? "border-red-600" : "border-black"
190 |             }`}
191 |             value={formData.description}
192 |             onChange={handleInputChange}
193 |           />
194 |           {errors.description && (
195 |             <p className="text-red-600 text-sm">{errors.description}</p>
196 |           )}
197 |         </label>
198 |         <div className="space-y-2">
199 |           <label htmlFor="edit-photo" className="block text-sm">
200 |             Фотографии
201 |             <span className="text-red-600">*</span>
202 |           </label>
203 | 
204 |           {/* Existing photos section */}
205 |           {existingPhotos.length > 0 && (
206 |             <>
207 |               <p className="text-sm font-medium mb-2">
208 |                 Существующие фотографии:
209 |               </p>
210 |               <div className="grid grid-cols-3 gap-2 mb-4">
211 |                 {existingPhotos.map((photo, index) => (
212 |                   <div key={`existing-${index}`} className="relative group">
213 |                     <img
214 |                       src={photo || "/placeholder.svg"}
215 |                       alt={`Existing photo ${index + 1}`}
216 |                       className="w-full h-24 object-cover rounded-md"
217 |                     />
218 |                     <button
219 |                       type="button"
220 |                       onClick={() => removeExistingPhoto(index)}
221 |                       className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
222 |                       aria-label="Remove photo"
223 |                     >
224 |                       <X size={14} />
225 |                     </button>
226 |                   </div>
227 |                 ))}
228 |               </div>
229 |             </>
230 |           )}
231 | 
232 |           {/* New photos preview section */}
233 |           {previews.length > 0 && (
234 |             <>
235 |               <p className="text-sm font-medium mb-2">Новые фотографии:</p>
236 |               <div className="grid grid-cols-3 gap-2 mb-4">
237 |                 {previews.map((preview, index) => (
238 |                   <div key={`new-${index}`} className="relative group">
239 |                     <img
240 |                       src={preview || "/placeholder.svg"}
241 |                       alt={`New photo ${index + 1}`}
242 |                       className="w-full h-24 object-cover rounded-md"
243 |                     />
244 |                     <button
245 |                       type="button"
246 |                       onClick={() => removeNewPhoto(index)}
247 |                       className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
248 |                       aria-label="Remove photo"
249 |                     >
250 |                       <X size={14} />
251 |                     </button>
252 |                   </div>
253 |                 ))}
254 |               </div>
255 |             </>
256 |           )}
257 | 
258 |           <div className="space-y-4 relative flex justify-center items-center">
259 |             <label
260 |               htmlFor="edit-photo"
261 |               className={`flex items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
262 |                 errors.photos ? "border-red-600" : "border-gray-600"
263 |               }`}
264 |             >
265 |               <span className="text-sm text-gray-400">
266 |                 Добавить новые фотографии
267 |               </span>
268 |               <input
269 |                 id="edit-photo"
270 |                 type="file"
271 |                 name="photos"
272 |                 multiple
273 |                 accept="image/*"
274 |                 onChange={handleFileChange}
275 |                 className="hidden"
276 |               />
277 |             </label>
278 |           </div>
279 |           {errors.photos && (
280 |             <p className="text-red-600 text-sm">{errors.photos}</p>
281 |           )}
282 | 
283 |           {/* Photo count summary */}
284 |           {(existingPhotos.length > 0 || formData.photos.length > 0) && (
285 |             <p className="text-sm text-gray-500">
286 |               Всего фотографий: {existingPhotos.length + formData.photos.length}
287 |               {existingPhotos.length > 0 &&
288 |                 ` (${existingPhotos.length} существующих)`}
289 |               {formData.photos.length > 0 &&
290 |                 ` (${formData.photos.length} новых)`}
291 |             </p>
292 |           )}
293 |         </div>
294 | 
295 |         <div className="flex justify-end gap-4 mt-auto">
296 |           <button
297 |             type="button"
298 |             onClick={() => setIsModalActive(false)}
299 |             className="bg-red-600 text-white p-2 uppercase rounded-md text-sm"
300 |           >
301 |             Отмена
302 |           </button>
303 |           <button
304 |             type="submit"
305 |             className="bg-black text-white p-2 uppercase rounded-md text-sm disabled:bg-gray-400"
306 |             disabled={isUploading}
307 |           >
308 |             {isUploading ? "Сохранение..." : "Сохранить изменения"}
309 |           </button>
310 |         </div>
311 |       </form>
312 |     </div>
313 |   );
314 | }
315 | 


--------------------------------------------------------------------------------