diff --git a/jsconfig.json b/jsconfig.json
index b30b1c0f..680d82bb 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,8 +1,10 @@
 {
   "compilerOptions": {
+           "jsx": "react-jsx",
+
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
     },
   },
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 44f14fa6..307cb018 100644
--- a/package.json
+++ b/package.json
@@ -11,14 +11,19 @@
   "dependencies": {
     "@heroicons/react": "2.0.18",
     "@material-tailwind/react": "2.1.4",
+    "@tanstack/react-query": "^5.83.0",
     "apexcharts": "3.44.0",
+    "axios": "^1.10.0",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-apexcharts": "1.4.1",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.17.0"
+    "react-loader-spinner": "^6.1.6",
+    "react-router-dom": "6.17.0",
+    "react-select": "^5.10.2"
   },
   "devDependencies": {
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@types/react": "18.2.31",
     "@types/react-dom": "18.2.14",
     "@vitejs/plugin-react": "4.1.0",
@@ -27,6 +32,6 @@
     "prettier": "3.0.3",
     "prettier-plugin-tailwindcss": "0.5.6",
     "tailwindcss": "3.3.4",
-    "vite": "4.5.0"
+    "vite": "^4.5.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.jsx b/src/App.jsx
index 87826600..2429bf57 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,65 @@
-import { Routes, Route, Navigate } from "react-router-dom";
+import React, {useEffect} from "react";
+import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
 import { Dashboard, Auth } from "@/layouts";
-
+import VideoFarmById from "./pages/dashboard/VideoFarms/VideoById";
+import VideoLikeList from "./pages/dashboard/VideoFarms/VideoLikeList";
+import PostDetail from "./pages/dashboard/post/PostDetail";
+import CommentPostbyId from "./pages/dashboard/AdminCommentPost/CommentPostbyId";
+import CommentPostbyIdPost from "./pages/dashboard/AdminCommentPost/CommentPostbyIdPost";
+import CommentPostByIdUser from "./pages/dashboard/AdminCommentPost/CommentPostByIdUser";
+import FarmDetail from "./pages/dashboard/farm/FarmDetail";
+import { Farms } from "./pages/dashboard/farm/farms";
+import UserDetail from "./pages/dashboard/user/UserDetail";
+import VideoById from "./pages/dashboard/VideoFarms/VideoById";
 function App() {
+  const navigate = useNavigate();
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      navigate("/auth/sign-in");
+    }
+
+    const handleUnload = () => {
+      if (performance.getEntriesByType("navigation")[0].type !== "reload") {
+      localStorage.removeItem("token");
+      localStorage.removeItem("refreshToken");
+      localStorage.removeItem("apiBaseUrl");
+    }
+    };
+
+    window.addEventListener("beforeunload", handleUnload);
+
+
+    return () => {
+      window.removeEventListener("beforeunload", handleUnload);
+    }
+  }, [navigate]);
+
   return (
-    <Routes>
-      <Route path="/dashboard/*" element={<Dashboard />} />
+ <Routes>
+      <Route path="/dashboard/*" element={<Dashboard />}>
+        <Route path="VideoFarmById/:farmId" element={<VideoFarmById />} />
+        <Route path="video-like/:videoId" element={<VideoLikeList />} />
+        <Route path="post/:id" element={<PostDetail />} />
+        <Route path="CommentPostbyId/:id" element={<CommentPostbyId />} />
+        <Route path="CommentPostbyIdPost/:postId" element={<CommentPostbyIdPost />} />
+        <Route path="CommentPostByIdUser/:id" element={<CommentPostByIdUser />} />
+        <Route path="VideoFarms/VideoById/:id" element={<VideoById />} />
+        <Route path="users/:id" element={<UserDetail />} />
+        {/* <Route path="/dashboard/users/:id" element={<UserDetail />} /> */}
+      </Route>
       <Route path="/auth/*" element={<Auth />} />
+      <Route path="/admin/Farms" element={<Farms />} />
+      <Route path="/admin/farms/:id" element={<FarmDetail />} />
       <Route path="*" element={<Navigate to="/dashboard/home" replace />} />
+
     </Routes>
   );
 }
 
-export default App;
+ 
+
+  
+
+ 
+export default App;
\ No newline at end of file
diff --git a/src/components/AnswerDetailDialog.jsx b/src/components/AnswerDetailDialog.jsx
new file mode 100644
index 00000000..8c8de809
--- /dev/null
+++ b/src/components/AnswerDetailDialog.jsx
@@ -0,0 +1,55 @@
+// src/components/AnswerDetailDialog.jsx
+import React from "react";
+import {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Typography,
+  Button,
+} from "@material-tailwind/react";
+
+const AnswerDetailDialog = ({ open, onClose, data }) => {
+  if (!data) return null;
+  return (
+    <Dialog open={open} handler={onClose} size="md">
+      <DialogHeader>Chi tiết câu trả lời</DialogHeader>
+      <DialogBody className="space-y-4">
+        <Typography variant="small"><strong>Farm ID:</strong> {data.farmId}</Typography>
+        <Typography variant="small"><strong>Question ID:</strong> {data.questionId}</Typography>
+        <Typography variant="small">
+          <strong>Selected Options:</strong> {data.selectedOptions?.join(", ") || "—"}
+        </Typography>
+        <Typography variant="small"><strong>Other Text:</strong> {data.otherText || "—"}</Typography>
+        <Typography variant="small"><strong>User ID:</strong> {data.userId || "—"}</Typography>
+        <div>
+          <strong>Tệp đính kèm:</strong>
+          <div className="mt-1">
+            {data.uploadedFiles?.length > 0 ? (
+              data.uploadedFiles.map((file, idx) => (
+                <a
+                  key={idx}
+                  href={file}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block text-blue-600 underline"
+                >
+                  File {idx + 1}
+                </a>
+              ))
+            ) : (
+              <Typography variant="small">Không có</Typography>
+            )}
+          </div>
+        </div>
+      </DialogBody>
+      <DialogFooter>
+        <Button variant="outlined" onClick={onClose}>
+          Đóng
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export default AnswerDetailDialog;
diff --git a/src/components/LikeButton.jsx b/src/components/LikeButton.jsx
new file mode 100644
index 00000000..6c67aab1
--- /dev/null
+++ b/src/components/LikeButton.jsx
@@ -0,0 +1,69 @@
+// src/components/LikeButton.jsx
+
+import React, { useState } from 'react';
+import axios from 'axios';
+import { BaseUrl } from '@/ipconfig';
+import { useNavigate } from 'react-router-dom';
+
+export default function LikeButton({ videoId }) {
+  const [liked, setLiked] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const token = localStorage.getItem('token');
+  const navigate = useNavigate();
+
+  const handleLikeToggle = async () => {
+    if (!videoId || !token) return;
+    setLoading(true);
+
+    try {
+      if (liked) {
+        // ✅ GỌI API UNLIKE CHUẨN BE
+        await axios.post(
+          `${BaseUrl}/video-like/${videoId}/unlike`,
+          {},
+          { headers: { Authorization: `Bearer ${token}` } }
+        );
+      } else {
+        // ✅ GỌI API LIKE CHUẨN BE
+        await axios.post(
+          `${BaseUrl}/video-like/${videoId}/like`,
+          {},
+          { headers: { Authorization: `Bearer ${token}` } }
+        );
+      }
+
+      // Toggle trạng thái
+      setLiked(!liked);
+    } catch (error) {
+      console.error('Lỗi khi Like/Unlike video:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleViewLikes = () => {
+    // Điều hướng đến trang hiển thị danh sách users đã Like
+    navigate(`/dashboard/video-like/${videoId}`);
+  };
+
+  return (
+    <div className="flex gap-2">
+      <button
+        onClick={handleLikeToggle}
+        disabled={loading}
+        className={`px-3 py-1 rounded text-white text-sm font-semibold shadow ${
+          liked ? 'bg-red-500 hover:bg-red-600' : 'bg-gray-600 hover:bg-gray-700'
+        }`}
+      >
+        {loading ? '...' : liked ? 'Bỏ Like' : 'Like'}
+      </button>
+
+      <button
+        onClick={handleViewLikes}
+        className="px-3 py-1 rounded text-blue-700 bg-blue-100 hover:bg-blue-200 text-sm font-semibold shadow"
+      >
+        👥 Xem Like
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/VideoLikeBox.jsx b/src/components/VideoLikeBox.jsx
new file mode 100644
index 00000000..08c3d7da
--- /dev/null
+++ b/src/components/VideoLikeBox.jsx
@@ -0,0 +1,57 @@
+// src/components/VideoLikeBox.jsx
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { BaseUrl } from '@/ipconfig';
+
+export default function VideoLikeBox({ videoId, refreshKey }) {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const token = localStorage.getItem('token');
+
+  const fetchLikes = async () => {
+    if (!videoId || videoId === ':videoId') return;
+    setLoading(true);
+    try {
+      const res = await axios.get(`${BaseUrl}/video-like/${videoId}/users`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      const usersList = Array.isArray(res.data.data)
+        ? res.data.data
+        : res.data?.users || [];
+
+      setUsers(usersList);
+    } catch (err) {
+      console.error('Lỗi khi lấy danh sách like:', err);
+      setError('Không thể lấy danh sách người like.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLikes();
+  }, [videoId, refreshKey]);
+
+  return (
+    <div className="mt-2 px-3 py-2 bg-gray-50 rounded border border-blue-100">
+      <p className="text-sm font-semibold text-gray-700">Người đã like:</p>
+      {loading ? (
+        <span className="text-xs italic text-gray-400">Đang tải...</span>
+      ) : error ? (
+        <span className="text-xs text-red-500">{error}</span>
+      ) : users.length === 0 ? (
+        <span className="text-xs italic text-gray-400">Chưa có ai like</span>
+      ) : (
+        <ul className="list-disc pl-4 text-sm text-gray-800">
+          {users.map((user, idx) => (
+            <li key={idx}>
+              {user.fullName || user.username || 'Ẩn danh'}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/src/context/index.jsx b/src/context/index.jsx
index 653a362d..169d1528 100644
--- a/src/context/index.jsx
+++ b/src/context/index.jsx
@@ -24,6 +24,9 @@ export function reducer(state, action) {
     case "OPEN_CONFIGURATOR": {
       return { ...state, openConfigurator: action.value };
     }
+    case "AUTH_STATUS": {
+      return { ...state, isAuthenticated: action.value}
+    }
     default: {
       throw new Error(`Unhandled action type: ${action.type}`);
     }
@@ -33,11 +36,12 @@ export function reducer(state, action) {
 export function MaterialTailwindControllerProvider({ children }) {
   const initialState = {
     openSidenav: false,
-    sidenavColor: "dark",
+    sidenavColor: "blue-gray", 
     sidenavType: "white",
     transparentNavbar: true,
     fixedNavbar: false,
     openConfigurator: false,
+    isAuthenticated: Boolean(localStorage.getItem("token")),
   };
 
   const [controller, dispatch] = React.useReducer(reducer, initialState);
@@ -83,3 +87,5 @@ export const setFixedNavbar = (dispatch, value) =>
   dispatch({ type: "FIXED_NAVBAR", value });
 export const setOpenConfigurator = (dispatch, value) =>
   dispatch({ type: "OPEN_CONFIGURATOR", value });
+export const setAuthStatus = (dispatch, value) => 
+  dispatch({type: "AUTH_STATUS", value})
diff --git a/src/ipconfig.jsx b/src/ipconfig.jsx
new file mode 100644
index 00000000..995e4dd3
--- /dev/null
+++ b/src/ipconfig.jsx
@@ -0,0 +1 @@
+export const BaseUrl= `https://api-ndolv2.nongdanonline.cc`
\ No newline at end of file
diff --git a/src/layouts/auth.jsx b/src/layouts/auth.jsx
index c7a21165..7810f8c8 100644
--- a/src/layouts/auth.jsx
+++ b/src/layouts/auth.jsx
@@ -16,7 +16,7 @@ export function Auth() {
       icon: ChartPieIcon,
     },
     {
-      name: "profile",
+      name: "User",
       path: "/dashboard/home",
       icon: UserIcon,
     },
diff --git a/src/layouts/dashboard.jsx b/src/layouts/dashboard.jsx
index 888a627a..8fe90237 100644
--- a/src/layouts/dashboard.jsx
+++ b/src/layouts/dashboard.jsx
@@ -1,6 +1,9 @@
 import { Routes, Route } from "react-router-dom";
+import { useState } from "react";
 import { Cog6ToothIcon } from "@heroicons/react/24/solid";
 import { IconButton } from "@material-tailwind/react";
+import { Outlet } from "react-router-dom";
+
 import {
   Sidenav,
   DashboardNavbar,
@@ -14,15 +17,22 @@ export function Dashboard() {
   const [controller, dispatch] = useMaterialTailwindController();
   const { sidenavType } = controller;
 
+  const [collapsed, setCollapsed] = useState(false); 
+
   return (
-    <div className="min-h-screen bg-blue-gray-50/50">
+    <div className="min-h-screen bg-blue-gray-50/50 flex">
       <Sidenav
         routes={routes}
         brandImg={
           sidenavType === "dark" ? "/img/logo-ct.png" : "/img/logo-ct-dark.png"
         }
+        onCollapse={(value) => setCollapsed(value)} 
       />
-      <div className="p-4 xl:ml-80">
+      <div
+        className={`p-4 transition-all duration-300 w-full ${
+          collapsed ? "xl:ml-24" : "xl:ml-64"
+        }`}
+      >
         <DashboardNavbar />
         <Configurator />
         <IconButton
@@ -34,6 +44,7 @@ export function Dashboard() {
         >
           <Cog6ToothIcon className="h-5 w-5" />
         </IconButton>
+
         <Routes>
           {routes.map(
             ({ layout, pages }) =>
@@ -43,6 +54,7 @@ export function Dashboard() {
               ))
           )}
         </Routes>
+        <Outlet />
         <div className="text-blue-gray-600">
           <Footer />
         </div>
diff --git a/src/main.jsx b/src/main.jsx
index a28f5a60..dc0c35e0 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -16,13 +16,17 @@ import { BrowserRouter } from "react-router-dom";
 import { ThemeProvider } from "@material-tailwind/react";
 import { MaterialTailwindControllerProvider } from "@/context";
 import "../public/css/tailwind.css";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <BrowserRouter>
       <ThemeProvider>
         <MaterialTailwindControllerProvider>
+            <QueryClientProvider client={queryClient}>
           <App />
+          </QueryClientProvider>
         </MaterialTailwindControllerProvider>
       </ThemeProvider>
     </BrowserRouter>
diff --git a/src/pages/auth/sign-in.jsx b/src/pages/auth/sign-in.jsx
index 3b3da41a..7289f322 100644
--- a/src/pages/auth/sign-in.jsx
+++ b/src/pages/auth/sign-in.jsx
@@ -1,22 +1,77 @@
+import React, { useRef, useState } from "react";
 import {
-  Card,
-  Input,
-  Checkbox,
-  Button,
-  Typography,
+  Card, Input, Checkbox, Button, Typography, Radio
 } from "@material-tailwind/react";
-import { Link } from "react-router-dom";
-
+import { Link, useNavigate } from "react-router-dom";
+import { useMaterialTailwindController, setAuthStatus } from "@/context";
 
 export function SignIn() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+  const [env, setEnv] = useState("dev");
+  const navigate = useNavigate();
+  const [, dispatch] = useMaterialTailwindController();
+  const emailRef = useRef();
+  const passwordRef = useRef();
+
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+
+    setEmailError("");
+    setPasswordError("");
+
+    if (!email.trim()) {
+      setEmailError("Vui lòng nhập Email");
+      emailRef.current?.focus();
+      return;
+    }
+
+    if (!password.trim()) {
+      setPasswordError("Vui lòng nhập Password");
+      passwordRef.current?.focus();
+      return;
+    }
+
+    try {
+      const BASE_URL = env === "dev"? "https://api-ndolv2.nongdanonline.cc" : "https://api-ndol-v2-prod.nongdanonline.cc/";
+      localStorage.setItem("apiBaseUrl", BASE_URL);
+
+      const res = await fetch("https://api-ndolv2.nongdanonline.cc/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        localStorage.setItem("token", data.accessToken);
+        localStorage.setItem("refreshToken", data.refreshToken);
+        setAuthStatus(dispatch, true);
+        navigate("/dashboard/home");
+      } else {
+        alert(data.message || "Đăng nhập thất bại");
+      }
+    } catch (error) {
+      console.error("Login error:", error);
+      alert("Không thể kết nối tới máy chủ, thử lại sau");
+    }
+  };
+
+
   return (
     <section className="m-8 flex gap-4">
       <div className="w-full lg:w-3/5 mt-24">
         <div className="text-center">
           <Typography variant="h2" className="font-bold mb-4">Sign In</Typography>
-          <Typography variant="paragraph" color="blue-gray" className="text-lg font-normal">Enter your email and password to Sign In.</Typography>
+          <Typography variant="paragraph" color="blue-gray" className="text-lg font-normal">
+            Enter your email and password to Sign In.
+          </Typography>
         </div>
-        <form className="mt-8 mb-2 mx-auto w-80 max-w-screen-lg lg:w-1/2">
+        <form className="mt-8 mb-2 mx-auto w-80 max-w-screen-lg lg:w-1/2" onSubmit={handleLogin}>
           <div className="mb-1 flex flex-col gap-6">
             <Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
               Your email
@@ -24,11 +79,15 @@ export function SignIn() {
             <Input
               size="lg"
               placeholder="name@mail.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
               className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-              labelProps={{
-                className: "before:content-none after:content-none",
-              }}
+              labelProps={{ className: "before:content-none after:content-none" }}
+              inputRef={emailRef}
             />
+            {emailError && (
+              <Typography variant="small" className="text-red-500 -mt-4">{emailError}</Typography>
+            )}
             <Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
               Password
             </Typography>
@@ -36,89 +95,62 @@ export function SignIn() {
               type="password"
               size="lg"
               placeholder="********"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
               className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-              labelProps={{
-                className: "before:content-none after:content-none",
-              }}
+              labelProps={{ className: "before:content-none after:content-none" }}
+              inputRef={passwordRef}
             />
+            {passwordError && (
+              <Typography variant="small" className="text-red-500 -mt-4">{passwordError}</Typography>
+            )}
+          </div>
+
+          <div className="mt-4">
+            <Typography variant="small" className="font-medium mb-2">
+              Chọn môi trường API:
+            </Typography>
+            <div className="flex gap-4">
+              <Radio
+                id="env-dev"
+                name="environment"
+                label="Dev (Mặc định)"
+                value="dev"
+                checked={env === "dev"}
+                onChange={() => setEnv("dev")}
+              />
+              <Radio
+                id="env-prod"
+                name="environment"
+                label="Production"
+                value="prod"
+                checked={env === "prod"}
+                onChange={() => setEnv("prod")}
+              />
+            </div>
           </div>
-          <Checkbox
-            label={
-              <Typography
-                variant="small"
-                color="gray"
-                className="flex items-center justify-start font-medium"
-              >
-                I agree the&nbsp;
-                <a
-                  href="#"
-                  className="font-normal text-black transition-colors hover:text-gray-900 underline"
-                >
-                  Terms and Conditions
-                </a>
-              </Typography>
-            }
-            containerProps={{ className: "-ml-2.5" }}
-          />
-          <Button className="mt-6" fullWidth>
-            Sign In
-          </Button>
+
+
+          <Button className="mt-6" type="submit" fullWidth>Sign In</Button>
 
           <div className="flex items-center justify-between gap-2 mt-6">
             <Checkbox
               label={
-                <Typography
-                  variant="small"
-                  color="gray"
-                  className="flex items-center justify-start font-medium"
-                >
+                <Typography variant="small" color="gray" className="flex items-center justify-start font-medium">
                   Subscribe me to newsletter
                 </Typography>
               }
               containerProps={{ className: "-ml-2.5" }}
             />
             <Typography variant="small" className="font-medium text-gray-900">
-              <a href="#">
-                Forgot Password
-              </a>
+              <Link to="/auth/forgot-password">Forgot Password</Link>
             </Typography>
           </div>
-          <div className="space-y-4 mt-8">
-            <Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
-              <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <g clipPath="url(#clip0_1156_824)">
-                  <path d="M16.3442 8.18429C16.3442 7.64047 16.3001 7.09371 16.206 6.55872H8.66016V9.63937H12.9813C12.802 10.6329 12.2258 11.5119 11.3822 12.0704V14.0693H13.9602C15.4741 12.6759 16.3442 10.6182 16.3442 8.18429Z" fill="#4285F4" />
-                  <path d="M8.65974 16.0006C10.8174 16.0006 12.637 15.2922 13.9627 14.0693L11.3847 12.0704C10.6675 12.5584 9.7415 12.8347 8.66268 12.8347C6.5756 12.8347 4.80598 11.4266 4.17104 9.53357H1.51074V11.5942C2.86882 14.2956 5.63494 16.0006 8.65974 16.0006Z" fill="#34A853" />
-                  <path d="M4.16852 9.53356C3.83341 8.53999 3.83341 7.46411 4.16852 6.47054V4.40991H1.51116C0.376489 6.67043 0.376489 9.33367 1.51116 11.5942L4.16852 9.53356Z" fill="#FBBC04" />
-                  <path d="M8.65974 3.16644C9.80029 3.1488 10.9026 3.57798 11.7286 4.36578L14.0127 2.08174C12.5664 0.72367 10.6469 -0.0229773 8.65974 0.000539111C5.63494 0.000539111 2.86882 1.70548 1.51074 4.40987L4.1681 6.4705C4.8001 4.57449 6.57266 3.16644 8.65974 3.16644Z" fill="#EA4335" />
-                </g>
-                <defs>
-                  <clipPath id="clip0_1156_824">
-                    <rect width="16" height="16" fill="white" transform="translate(0.5)" />
-                  </clipPath>
-                </defs>
-              </svg>
-              <span>Sign in With Google</span>
-            </Button>
-            <Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
-              <img src="/img/twitter-logo.svg" height={24} width={24} alt="" />
-              <span>Sign in With Twitter</span>
-            </Button>
-          </div>
-          <Typography variant="paragraph" className="text-center text-blue-gray-500 font-medium mt-4">
-            Not registered?
-            <Link to="/auth/sign-up" className="text-gray-900 ml-1">Create account</Link>
-          </Typography>
         </form>
-
       </div>
       <div className="w-2/5 h-full hidden lg:block">
-        <img
-          src="/img/pattern.png"
-          className="h-full w-full object-cover rounded-3xl"
-        />
+        <img src="/img/pattern.png" className="h-full w-full object-cover rounded-3xl" />
       </div>
-
     </section>
   );
 }
diff --git a/src/pages/dashboard/AdminCommentPost/CommentPost.jsx b/src/pages/dashboard/AdminCommentPost/CommentPost.jsx
new file mode 100644
index 00000000..26a50462
--- /dev/null
+++ b/src/pages/dashboard/AdminCommentPost/CommentPost.jsx
@@ -0,0 +1,173 @@
+import { BaseUrl } from '@/ipconfig'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import { Audio } from 'react-loader-spinner'
+import { Navigate, useNavigate } from 'react-router-dom'
+import { Button } from '@material-tailwind/react'
+export const CommentPost = () => {
+  const tokenUser = localStorage.getItem('token')
+  const [loading, setLoading] = useState(true)
+  const navigate=useNavigate()
+   const [page, setPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1);
+    const limit = 50;
+const [comment,setComment]=useState([])
+const [post,setPost]=useState([])
+const gotoCommentId=(id)=>{
+navigate(`/dashboard/CommentPostbyId/${id}`)
+}
+console.log(post)
+
+
+
+const gotoCommentByIdPost=(postId)=>{
+navigate(`/dashboard/CommentPostbyIdPost/${postId}`)
+}
+
+const callApiCommentPost=async()=>{
+try {
+
+const res= await axios.get(`${BaseUrl}/admin-comment-post/?page=${page}&limit=${limit}`,{
+    headers:{Authorization:`Bearer ${tokenUser}`}
+})
+
+if(res.status===200){
+setComment(res.data.data)
+setTotalPages(res.data.totalPages)
+ setLoading(false) 
+}
+} catch (error) {
+    console.log("Lỗi nè",error)
+    setLoading(false)
+}
+
+}
+// console.log(comment)
+
+useEffect(()=>{
+  setLoading(true)
+callApiCommentPost()
+},[page])
+
+useEffect(() => {
+ getPost()
+}, [comment]);
+
+const postMap = React.useMemo(() => {
+  const map = {};
+  post.forEach(p => {
+    // Dùng cả id và _id, ép kiểu về chuỗi, loại bỏ khoảng trắng
+    map[String(p.id ?? p._id).trim()] = p;
+  });
+  return map;
+}, [post]);
+
+const getPost = async () => {
+  try {
+    const uniqueIds = [...new Set(comment.map(item => item.postId))]; // loại bỏ trùng
+    if (uniqueIds.length === 0) return;
+
+    const res = await axios.get(`${BaseUrl}/admin-post-feed?ids=${uniqueIds.join(',')}`, {
+      headers: { Authorization: `Bearer ${tokenUser}` }
+    });
+
+    if (res.status === 200) {
+      console.log('API trả về post:', res.data.data);
+
+      setPost(res.data.data);
+      setLoading(false);
+    }
+  } catch (error) {
+    setLoading(false);
+    console.error("Lỗi getPost:", error);
+  }
+};
+
+
+  return (
+    <div>
+{loading?
+(<div>
+     <Audio
+             height="80"
+                width="80"
+                radius="9"
+                color="green"
+                ariaLabel="loading"
+              />
+    </div>
+    ):(
+comment.map((item) => {
+ const postInfo = postMap[String(item.postId).trim()];
+  const title = postInfo && postInfo.title && postInfo.title.trim()
+    ? postInfo.title
+    : "Bài viết đã bị xóa hoặc không xác định";
+  return (
+    <div onClick={() => gotoCommentByIdPost(item.postId)} key={item.postId} className="mb-4 p-4 border rounded bg-white">
+      <div className="cursor-pointer font-bold mb-2 w-full flex flex-col">
+        Tiêu đề bài viết: {title}
+
+        <span>
+          Ngày đăng: {item.createdAt ? new Date(item.createdAt).toLocaleDateString() : "Chưa cập nhật"}
+        </span>
+        {item.comments.map((cmt, index) => (
+          <div key={index} className="mb-2 pl-2 border-l">
+            <div className="flex items-center gap-2">
+              <img
+                src={
+                  cmt.userId.avatar?.startsWith('http')
+                    ? cmt.userId.avatar
+                    : `${BaseUrl}${cmt.userId.avatar}`
+                }
+                alt=""
+                className="w-6 h-6 rounded-full"
+              />
+              <span className="font-medium">{cmt.userId.fullName}</span>
+              <span className="text-xs text-gray-500 ml-2">{new Date(cmt.createdAt).toLocaleDateString()}</span>
+            </div>
+            <div className="ml-8">{cmt.comment}</div>
+            {cmt.replies && cmt.replies.length > 0 && (
+              <div className="ml-12 mt-1">
+                {cmt.replies.map((rep, ridx) => (
+                  <div key={ridx} className="flex items-center gap-2 text-sm text-gray-700">
+                    <img alt="" className="w-5 h-5 rounded-full" />
+                    <span className="font-medium">{rep.userId.fullName}:</span>
+                    <span>{rep.comment}</span>
+                    <span>{new Date(rep.createdAt).toLocaleDateString()}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+})
+        )
+        
+        }
+          <div className="flex justify-center items-center gap-2 mt-4">
+            <Button
+              size="sm"
+              variant="outlined"
+              disabled={page <= 1}
+              onClick={() => setPage(prev => prev - 1)}
+            >
+              Trang trước
+            </Button>
+            <span>Trang {page} / {totalPages}</span>
+            <Button
+              size="sm"
+              variant="outlined"
+              disabled={page >= totalPages}
+              onClick={() => setPage(prev => prev + 1)}
+            >
+              Trang sau
+            </Button>
+          </div>
+    </div>
+  )
+}
+
+export default CommentPost
\ No newline at end of file
diff --git a/src/pages/dashboard/AdminCommentPost/CommentPostByIdUser.jsx b/src/pages/dashboard/AdminCommentPost/CommentPostByIdUser.jsx
new file mode 100644
index 00000000..81b8e1e9
--- /dev/null
+++ b/src/pages/dashboard/AdminCommentPost/CommentPostByIdUser.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const CommentPostByIdUser = () => {
+  return (
+    <div>CommentPostByIdUser</div>
+  )
+}
+
+export default CommentPostByIdUser
\ No newline at end of file
diff --git a/src/pages/dashboard/AdminCommentPost/CommentPostbyId.jsx b/src/pages/dashboard/AdminCommentPost/CommentPostbyId.jsx
new file mode 100644
index 00000000..40c8c74e
--- /dev/null
+++ b/src/pages/dashboard/AdminCommentPost/CommentPostbyId.jsx
@@ -0,0 +1,37 @@
+import { BaseUrl } from '@/ipconfig';
+import axios from 'axios';
+import React, { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+export const CommentPostbyId = () => {
+    const [commentDetail,setCommentDetail]=useState()
+        const [loading, setLoading] = useState(true)
+      const tokenUser = localStorage.getItem('token');
+    const {id}=useParams()
+   const getCommentById=async()=>{
+try {
+    const res= await axios.get(`${BaseUrl}/admin-comment-post/${id}`,
+        {headers:{Authorization:`Bearer ${tokenUser}` }})
+  if(res.status===200){
+setCommentDetail(res.data)
+  }
+
+} catch (error) {
+    console.log("Lỗi nè",error)
+    setLoading(false)
+}
+    }
+console.log("data nè",commentDetail)
+
+    useEffect(()=>{
+getCommentById()
+    },[])
+    setLoading(false)
+  return (
+    <div>
+
+
+    </div>
+  )
+}
+
+export default CommentPostbyId
\ No newline at end of file
diff --git a/src/pages/dashboard/AdminCommentPost/CommentPostbyIdPost.jsx b/src/pages/dashboard/AdminCommentPost/CommentPostbyIdPost.jsx
new file mode 100644
index 00000000..5716e07e
--- /dev/null
+++ b/src/pages/dashboard/AdminCommentPost/CommentPostbyIdPost.jsx
@@ -0,0 +1,247 @@
+import React from 'react'
+import { useState } from 'react'
+import { useEffect } from 'react'
+import { BaseUrl } from '@/ipconfig'
+import { useParams } from 'react-router-dom'
+import axios from 'axios'
+import { Audio } from 'react-loader-spinner'
+import { Typography } from '@material-tailwind/react'
+export const CommentPostbyIdPost = () => {
+
+    const [CommentByIdPost,setCommentByIdPost]=useState([])
+     const [loading, setLoading] = useState(true)
+    const tokenUser = localStorage.getItem('token');
+    const [editCommentIndex, setEditCommentIndex] = useState(null);
+    const [editComment, setEditComment] = useState(null);
+    const [editContent, setEditContent] = useState("");
+    const [post, setPost] = useState("");
+
+
+    const {postId}=useParams()
+   const getCommentById=async()=>{
+try {
+    const res= await axios.get(`${BaseUrl}/admin-comment-post/post/${postId}`,
+        {headers:{Authorization:`Bearer ${tokenUser}` }})
+  if(res.status===200){
+   setCommentByIdPost(res.data)
+
+  }
+
+} catch (error) {
+    console.log("Lỗi nè",error)
+    setLoading(false)
+}
+    }
+const handleEditComment=async(comment,index)=>{
+  // console.log(comment)
+  setEditComment(comment)
+  setEditCommentIndex(index);
+setEditContent(comment.comment)
+}
+
+const callPost=async()=>{
+try {
+
+ const res = await axios.get(`${BaseUrl}/admin-post-feed/${postId}`, {
+      headers: { Authorization: `Bearer ${tokenUser}` }
+    });
+
+if(res.status===200){
+setPost(res.data)
+// setTotalPages(res.data.totalPages)
+ setLoading(false) 
+}
+} catch (error) {
+    console.log("Lỗi nè",error)
+    setLoading(false)
+}
+
+}
+
+console.log(post)
+    const handleUpdateComment=async()=>{
+try {
+    const res= await axios.put(`${BaseUrl}/admin-comment-post/${postId}/comment/${editCommentIndex}`,
+       { comment: editContent },
+        {headers:{Authorization:`Bearer ${tokenUser}` }})
+  if(res.status===200){
+setEditComment(null);
+      getCommentById();
+  }
+
+} catch (error) {
+    alert("Lỗi khi cập nhật bình luận");
+    setLoading(false)
+}
+    }
+
+   const handleDeleteComment=async(comment,index)=>{
+try {
+    const res= await axios.delete(`${BaseUrl}/admin-comment-post/${postId}/comment/${index}`,
+       { data: { status: false },
+        headers:{Authorization:`Bearer ${tokenUser}` }})
+  if(res.status===200){
+      getCommentById();
+      alert("Xóa thành công")
+  }
+
+} catch (error) {
+    alert("Lỗi khi xóa bình luận");
+    setLoading(false)
+}
+    }
+
+
+// console.log("data nè",CommentByIdPost.comments.length)
+
+    useEffect(()=>{
+getCommentById()
+callPost()
+    setLoading(false)
+
+    },[])
+
+  return (
+  <div className="max-w-2xl mx-auto p-4">
+     <Typography variant="h5" color="blue-gray" className="font-semibold mb-4">
+            Quản lý Bình luận
+          </Typography>
+    {loading ? (
+      <div className="flex justify-center items-center h-40">
+        <Audio
+          height="80"
+          width="80"
+          radius="9"
+          color="green"
+          ariaLabel="loading"
+        />
+      </div>
+    ) : (
+      <div>
+        <div className="border bg-white rounded-lg shadow p-4 mb-6">
+          <div className="mb-2 text-gray-700 font-semibold">
+            Bài viết: <span className="font-normal">{post.title}</span>
+          </div>
+          <div className="mb-2 text-gray-700">
+            Ngày đăng: <span className="font-medium">{CommentByIdPost.createdAt ? new Date(CommentByIdPost.createdAt).toLocaleDateString() : ""}</span>
+          </div>
+          <div className="mb-2 text-gray-700">
+            Chỉnh sửa: <span className="font-medium">{CommentByIdPost.updatedAt ? new Date(CommentByIdPost.updatedAt).toLocaleDateString() : ""}</span>
+          </div>
+          {CommentByIdPost.content && (
+            <div className="mt-2 text-base text-gray-800 border-t pt-2">
+              {CommentByIdPost.content}
+            </div>
+          )}
+        </div>
+{editComment && (
+  <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
+    <div className="bg-white p-6 rounded shadow-lg max-w-md w-full">
+      <h2 className="font-bold mb-2">Sửa bình luận</h2>
+      <textarea
+        className="w-full border rounded p-2 mb-4"
+        value={editContent}
+        onChange={e => setEditContent(e.target.value)}
+      />
+      <div className="flex gap-2 justify-end">
+        <button
+          className="px-3 py-1 bg-gray-300 rounded"
+          onClick={() => setEditComment(null)}
+        >
+          Hủy
+        </button>
+        <button
+          className="px-3 py-1 bg-blue-500 text-white rounded"
+          onClick={handleUpdateComment}
+        >
+          Lưu
+        </button>
+      </div>
+    </div>
+  </div>
+)}
+        {CommentByIdPost && Array.isArray(CommentByIdPost.comments) && CommentByIdPost.comments.length > 0 ? (
+          CommentByIdPost.comments.map((item,index) =>  {
+            return(
+<div
+              key={index}
+              className="border rounded-lg bg-gray-50 p-4 mb-4 shadow-sm"
+            >
+              <div className="flex items-center gap-3 mb-2">
+                <img
+                  src={
+                    item.userId.avatar?.startsWith('http')
+                      ? item.userId.avatar
+                      : `${BaseUrl}${item.userId.avatar}`
+                  }
+                  alt=""
+                  className="w-8 h-8 rounded-full border"
+                />
+                <span className="font-semibold text-gray-800">{item.userId?.fullName}</span>
+                <span className="text-xs text-gray-500 ml-2">
+                  {item.createdAt ? new Date(item.createdAt).toLocaleDateString() : ""}
+                </span>
+              </div>
+     <div className="ml-auto flex gap-2">
+      <button
+        className="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs shadow transition"
+        onClick={() => handleEditComment(item, index)}
+      >
+        Sửa
+      </button>
+      <button
+        className="px-3 py-1 bg-red-500 hover:bg-red-600 text-white rounded text-xs shadow transition"
+        onClick={() => handleDeleteComment(item, index)}
+      >
+        Xóa
+      </button>
+    </div>
+              <div className="ml-11 text-gray-700 mb-2">{item.comment}</div>
+              
+              {item.replies && item.replies.length > 0 && (
+                <div className="ml-11 mt-2 border-l-2 border-blue-200 pl-4">
+                  {item.replies.map((rep) => (
+                    <div
+                      key={rep._id}
+                      className="flex items-start gap-2 text-sm text-gray-700 mb-2"
+                    >
+                      <img
+                        src={
+                          rep.userId?.avatar?.startsWith('http')
+                            ? rep.userId.avatar
+                            : `${BaseUrl}${rep.userId?.avatar || ''}`
+                        }
+                        alt=""
+                        className="w-6 h-6 rounded-full border"
+                      />
+                      <div>
+                        <span className="font-semibold text-gray-700">{rep.userId?.fullName}:</span>
+                        <span className="ml-1">{rep.comment}</span>
+                        <span className="ml-2 text-xs text-gray-400">
+                          {rep.createdAt ? new Date(rep.createdAt).toLocaleDateString() : ""}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            )
+})
+        ) : (
+          <div className="text-center text-gray-500">Không có dữ liệu</div>
+        )}
+      </div>
+
+      
+    )}
+         
+  </div>
+)
+  
+}
+
+export default CommentPostbyIdPost
+
+ 
\ No newline at end of file
diff --git a/src/pages/dashboard/AdminReports.jsx b/src/pages/dashboard/AdminReports.jsx
new file mode 100644
index 00000000..c6f68991
--- /dev/null
+++ b/src/pages/dashboard/AdminReports.jsx
@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { BaseUrl } from '@/ipconfig';
+
+export function AdminReports() {
+  const [reports, setReports] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [selectedReport, setSelectedReport] = useState(null);
+  const [status, setStatus] = useState('NEW');
+  const [type, setType] = useState('USER');
+  const token = localStorage.getItem('token');
+
+  const fetchReports = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.get(
+        `${BaseUrl}/admin-reports?status=${status}&type=${type}&page=${page}&limit=5`,
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      setReports(res.data.reports || []);
+      setTotalPages(res.data.totalPages || 1);
+    } catch (err) {
+      console.error('Lỗi khi lấy danh sách báo cáo:', err.response?.data || err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchReports();
+  }, [page, status, type]);
+
+  const handleApprove = async (reportId) => {
+    try {
+      await axios.post(
+        `${BaseUrl}/admin-reports/${reportId}/approve`,
+        {},
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      alert('Đã duyệt thành công!');
+      fetchReports();
+    } catch (err) {
+      console.error('Lỗi khi duyệt báo cáo:', err.response?.data || err);
+      alert('Không thể duyệt báo cáo.');
+    }
+  };
+
+  return (
+    <div className="p-4">
+      <h1 className="text-xl font-semibold mb-4">Danh sách báo cáo</h1>
+
+      {/* Bộ lọc */}
+      <div className="flex gap-4 mb-4">
+        <select
+          className="border rounded px-2 py-1"
+          value={status}
+          onChange={(e) => setStatus(e.target.value)}
+        >
+          <option value="NEW">NEW</option>
+          <option value="RESOLVED">RESOLVED</option>
+        </select>
+        <select
+          className="border rounded px-2 py-1"
+          value={type}
+          onChange={(e) => setType(e.target.value)}
+        >
+          <option value="USER">USER</option>
+          <option value="POST">POST</option>
+        </select>
+      </div>
+
+      {loading ? (
+        <p>Đang tải...</p>
+      ) : reports.length === 0 ? (
+        <p>Không có báo cáo nào.</p>
+      ) : (
+        <div className="space-y-3">
+          {reports.map((report) => (
+            <div key={report.id} className="p-3 border rounded bg-gray-50">
+              <div className="flex justify-between items-center">
+                <div>
+                  <p><strong>ID:</strong> {report.id}</p>
+                  <p><strong>Loại:</strong> {report.type}</p>
+                  <p><strong>Lý do:</strong> {report.reason}</p>
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => setSelectedReport(report)}
+                    className="px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"
+                  >
+                    Xem chi tiết
+                  </button>
+                  {report.status === 'NEW' && (
+                    <button
+                      onClick={() => handleApprove(report.id)}
+                      className="px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
+                    >
+                      Duyệt
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Phân trang */}
+      <div className="flex justify-center mt-4 gap-2">
+        <button
+          onClick={() => setPage((p) => Math.max(1, p - 1))}
+          disabled={page === 1}
+          className="px-3 py-1 border rounded disabled:opacity-50"
+        >
+          Trước
+        </button>
+        <span className="px-3 py-1">{page} / {totalPages}</span>
+        <button
+          onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+          disabled={page === totalPages}
+          className="px-3 py-1 border rounded disabled:opacity-50"
+        >
+          Sau
+        </button>
+      </div>
+
+      {/* Modal chi tiết */}
+      {selectedReport && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded p-4 w-96">
+            <h2 className="font-semibold text-lg mb-2">Chi tiết báo cáo</h2>
+            <pre className="text-xs bg-gray-100 p-2 rounded overflow-auto max-h-60">
+              {JSON.stringify(selectedReport, null, 2)}
+            </pre>
+            <div className="flex justify-end mt-2">
+              <button
+                onClick={() => setSelectedReport(null)}
+                className="px-3 py-1 bg-gray-500 text-white rounded hover:bg-gray-600 text-sm"
+              >
+                Đóng
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/dashboard/Questions/AddQuestion.jsx b/src/pages/dashboard/Questions/AddQuestion.jsx
new file mode 100644
index 00000000..c064377b
--- /dev/null
+++ b/src/pages/dashboard/Questions/AddQuestion.jsx
@@ -0,0 +1,113 @@
+import React from 'react'
+
+export const AddQuestion = ({
+  handleAddChange,
+  handleAddSave,
+  handleCloseAddDialog,
+  handleOpenAddDialog,
+  addDialog,
+  addValue,
+  setAddValue
+}) => {
+  return (
+    <div>
+      <button
+        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 shadow"
+        onClick={handleOpenAddDialog}
+      >
+        Thêm câu hỏi
+      </button>
+      
+
+      {addDialog && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 z-50">
+          <div className="bg-white rounded-lg shadow-lg p-6 min-w-[350px] max-w-[90vw]">
+            <div className="font-bold text-lg mb-4">Thêm câu hỏi mới</div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium mb-1">Nội dung câu hỏi</label>
+              <input
+                name="text"
+                value={addValue.text}
+                onChange={handleAddChange}
+                className="border px-3 py-2 rounded w-full"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium mb-1">Loại câu hỏi</label>
+              <select
+                name="type"
+                value={addValue.type}
+                onChange={handleAddChange}
+                className="border px-3 py-2 rounded w-full mb-2"
+              >
+                <option value="single-choice">Chọn 1 đáp án</option>
+                <option value="multi-choice">Chọn nhiều đáp án</option>
+                <option value="text">Nhập thông tin</option>
+                <option value="upload">Upload ảnh</option>
+              </select>
+            </div>
+<div className="flex gap-4 mt-8">
+</div>
+            {[ "single-choice", "multiple-choice", "multi-choice"].includes(addValue.type) && Array.isArray(addValue.options) && (
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-1">Tùy chọn đáp án</label>
+                {addValue.options.length === 0 && (
+                  <div className="text-gray-400 italic mb-2">Chưa có đáp án nào, hãy thêm đáp án mới.</div>
+                )}
+              
+                {addValue.options.map((opt, idx) => (
+                  <div key={idx} className="flex gap-2 mb-2 items-center">
+                    <span className="w-6 text-gray-500 font-semibold">{String.fromCharCode(65 + idx)}.</span>
+                    <input
+                      value={opt}
+                      onChange={e => handleAddChange(e, idx)}
+                      className="border px-3 py-2 rounded w-full"
+                      placeholder={`Đáp án ${String.fromCharCode(65 + idx)}`}
+                    />
+                    <button
+                      type="button"
+                      className="px-2 py-1 bg-red-400 text-white rounded hover:bg-red-600"
+                      onClick={() => {
+                        const newOptions = addValue.options.filter((_, i) => i !== idx);
+                        setAddValue({ ...addValue, options: newOptions });
+                      }}
+                      disabled={addValue.options.length <= 1}
+                      title={addValue.options.length <= 1 ? 'Phải có ít nhất 1 đáp án' : 'Xóa đáp án'}
+                    >
+                      Xóa
+                    </button>
+                  </div>
+                ))}
+                <button
+                  type="button"
+                  className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 mt-2"
+                  onClick={() => setAddValue({ ...addValue, options: [...addValue.options, ''] })}
+                >
+                  Thêm đáp án
+                </button>
+              </div>
+            )}
+
+          
+            <div className="flex justify-end gap-2 mt-6">
+              <button
+                className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
+                onClick={handleCloseAddDialog}
+              >
+                Hủy
+              </button>
+              <button
+                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                onClick={handleAddSave}
+              >
+                Lưu
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AddQuestion
\ No newline at end of file
diff --git a/src/pages/dashboard/Questions/EditQuestion.jsx b/src/pages/dashboard/Questions/EditQuestion.jsx
new file mode 100644
index 00000000..19691192
--- /dev/null
+++ b/src/pages/dashboard/Questions/EditQuestion.jsx
@@ -0,0 +1,110 @@
+import React from 'react'
+
+export const EditQuestion = ({openDialog,editData,editValue,handleEditChange,handleSave,handleCloseDialog,setEditValue}) => {
+  return (
+    <div>
+  {openDialog && editData && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 z-50">
+          <div className="bg-white rounded-lg shadow-lg p-6 min-w-[350px] max-w-[90vw]">
+            <div className="font-bold text-lg mb-4">Sửa câu hỏi</div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium mb-1">
+                Nội dung câu hỏi
+              </label>
+              <input
+                name="text"
+                value={editValue.text}
+                onChange={handleEditChange}
+                className="border px-3 py-2 rounded w-full"
+              />
+            </div>
+            {[ 'single-choice', 'multiple-choice', 'multi-choice'].includes(
+              editData.type
+            ) && Array.isArray(editValue.options) && (
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-1">
+                  Tùy chọn đáp án
+                </label>
+                {editValue.options.length === 0 && (
+                  <div className="text-gray-400 italic mb-2">
+                    Chưa có đáp án nào, hãy thêm đáp án mới.
+                  </div>
+                )}
+                {editValue.options.map((opt, idx) => (
+                  <div key={idx} className="flex gap-2 mb-2 items-center">
+                    <span className="w-6 text-gray-500 font-semibold">
+                      {String.fromCharCode(65 + idx)}.
+                    </span> 
+                    <input
+                      value={opt}
+                      onChange={(e) => handleEditChange(e, idx)} 
+                      className="border px-3 py-2 rounded w-full"
+                      placeholder={`Đáp án ${String.fromCharCode(65 + idx)}`}
+                    />
+                    <button
+                      type="button"
+                      className="px-2 py-1 bg-red-400 text-white rounded hover:bg-red-600"
+                      onClick={() => {
+                        const newOptions = editValue.options.filter((_, i) => i !== idx);
+                        setEditValue({ ...editValue, options: newOptions });
+                      }}
+                      disabled={editValue.options.length <= 1}
+                      title={
+                        editValue.options.length <= 1
+                          ? 'Phải có ít nhất 1 đáp án'
+                          : 'Xóa đáp án'
+                      }
+                    >
+                      Xóa
+                    </button>
+                  </div>
+                ))}
+                <button
+                  type="button"
+                  className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600 mt-2"
+                  onClick={() =>
+                    setEditValue({
+                      ...editValue,
+                      options: [...editValue.options, ''],
+                    })
+                  }
+                >
+                  Thêm đáp án
+                </button>
+              </div>
+            )}
+            {editData.type === 'link' && (
+              <div className="mb-4">
+                <label className="block text-sm font-medium mb-1">Link</label>
+                <input
+                  name="link"
+                  value={editValue.link}
+                  onChange={handleEditChange}
+                  className="border px-3 py-2 rounded w-full"
+                />
+              </div>
+            )}
+            <div className="flex justify-end gap-2 mt-6">
+              <button
+                className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
+                onClick={handleCloseDialog}
+              >
+                Hủy
+              </button>
+              <button
+                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                onClick={handleSave}
+              >
+                Lưu
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+
+    </div>
+  )
+}
+
+export default EditQuestion
\ No newline at end of file
diff --git a/src/pages/dashboard/Questions/Questions.jsx b/src/pages/dashboard/Questions/Questions.jsx
new file mode 100644
index 00000000..f45d7abc
--- /dev/null
+++ b/src/pages/dashboard/Questions/Questions.jsx
@@ -0,0 +1,312 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { BaseUrl } from '@/ipconfig';
+import { Oval } from 'react-loader-spinner';
+import AddQuestion from './AddQuestion';
+import AnswersTable from './answerstable';
+import {
+  Dialog,
+  DialogBody,
+  DialogHeader,
+  DialogFooter,
+  Button,
+} from '@material-tailwind/react';
+import EditQuestion from './EditQuestion';
+export const Questions = () => {
+
+  const [loading, setLoading] = useState(true);
+  const [questions, setQuestions] = useState([]);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [editData, setEditData] = useState(null);
+  const [editValue, setEditValue] = useState({ options: [] });
+  const [currentPage, setCurrentPage] = useState(1);
+const questionsPerPage = 5;
+  const [addDialog, setAddDialog] = useState(false);
+  const [addValue, setAddValue] = useState({ text: '', options: [''], type: 'option', link: '' });
+
+  const [showAnswersDialog, setShowAnswersDialog] = useState(false);
+
+  const tokenUser = localStorage.getItem('token');
+const indexOfLastQuestion = currentPage * questionsPerPage;
+const indexOfFirstQuestion = indexOfLastQuestion - questionsPerPage;
+const paginatedQuestions = questions.slice(indexOfFirstQuestion, indexOfLastQuestion);
+const totalPages = Math.ceil(questions.length / questionsPerPage);
+
+
+  const getData = async () => {
+    try {
+      const res = await axios.get(`${BaseUrl}/admin-questions?limit=30`, {
+        headers: { Authorization: `Bearer ${tokenUser}` },
+      });
+      if (res.status === 200) {
+        setQuestions(res.data.data);
+      }
+    } catch (error) {
+      console.log('Lỗi nè:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+  const handleOpenDialog = (item) => {
+    setEditData(item);
+    setEditValue({
+      text: item.text,
+      options: Array.isArray(item.options) ? [...item.options] : [],
+      type: item.type,
+      link: item.link || '',
+    });
+    setOpenDialog(true);
+  };
+
+  const handleCloseDialog = () => {
+    setOpenDialog(false);
+    setEditData(null);
+    setEditValue({ options: [] });
+  };
+
+  const handleEditChange = (e, idx) => {
+    if (
+      editData &&
+      ['option', 'single-choice', 'multiple-choice', 'multi-choice'].includes(editData.type) &&
+      typeof idx === 'number'
+    ) {
+      const newOptions = [...editValue.options];
+      newOptions[idx] = e.target.value;
+      setEditValue({ ...editValue, options: newOptions });
+    } else {
+      setEditValue({ ...editValue, [e.target.name]: e.target.value });
+    }
+  };
+
+  const handleSave = async () => {
+    if (
+      ['option', 'single-choice', 'multiple-choice', 'multi-choice'].includes(editData.type) &&
+      Array.isArray(editValue.options) &&
+      editValue.options.some(opt => !opt || opt.trim() === '')
+    ) {
+      alert('Vui lòng điền đủ tất cả các đáp án!');
+      return;
+    } else if (!editValue.text || editValue.text.trim() === '') {
+      alert('Vui lòng nhập nội dung câu hỏi!');
+      return;
+    }
+    try {
+      await axios.put(
+        `${BaseUrl}/admin-questions/${editData._id}`,
+        editValue,
+        {
+          headers: { Authorization: `Bearer ${tokenUser}` },
+        }
+      );
+      alert("Lưu thành công");
+      handleCloseDialog();
+      getData();
+    } catch (error) {
+      console.log('Lỗi khi cập nhật:', error);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Bạn có chắc muốn xóa câu hỏi này?')) return;
+    try {
+      await axios.delete(`${BaseUrl}/admin-questions/${id}`, {
+        headers: { Authorization: `Bearer ${tokenUser}` },
+      });
+      alert('Xóa thành công!');
+      getData();
+    } catch (error) {
+      alert('Lỗi khi xóa!');
+      console.log('Lỗi khi xóa:', error);
+    }
+  };
+
+  const handleOpenAddDialog = () => {
+    setAddValue({ text: '', options: [''], type: 'option', link: '' });
+    setAddDialog(true);
+  };
+
+  const handleCloseAddDialog = () => {
+    setAddDialog(false);
+    setAddValue({ text: '', options: [''], type: 'option', link: '' });
+  };
+
+  const handleAddChange = (e, idx) => {
+    if (["option", "single-choice", "multiple-choice", "multi-choice"].includes(addValue.type) && typeof idx === "number") {
+      const newOptions = [...addValue.options];
+      newOptions[idx] = e.target.value;
+      setAddValue({ ...addValue, options: newOptions });
+    } else {
+      setAddValue({ ...addValue, [e.target.name]: e.target.value });
+    }
+  };
+
+  const handleAddSave = async () => {
+    if (!addValue.text || addValue.text.trim() === '') {
+      alert('Vui lòng nhập nội dung câu hỏi!');
+      return;
+    }
+    if (["option", "single-choice", "multiple-choice", "multi-choice"].includes(addValue.type) && addValue.options.some(opt => !opt || opt.trim() === '')) {
+      alert('Vui lòng điền đủ tất cả các đáp án!');
+      return;
+    }
+    try {
+      await axios.post(`${BaseUrl}/admin-questions`, addValue, {
+        headers: { Authorization: `Bearer ${tokenUser}` },
+      });
+      alert('Thêm thành công!');
+      handleCloseAddDialog();
+      getData();
+    } catch (error) {
+      alert('Lỗi khi thêm!');
+      console.log('Lỗi khi thêm:', error);
+    }
+  };
+
+  return (
+    <div>
+      <div className="flex justify-between mb-4">
+        <AddQuestion
+          handleAddChange={handleAddChange}
+          handleAddSave={handleAddSave}
+          handleCloseAddDialog={handleCloseAddDialog}
+          handleOpenAddDialog={handleOpenAddDialog}
+          addDialog={addDialog}
+          addValue={addValue}
+          setAddValue={setAddValue}
+        />
+
+        <Button
+          color="blue"
+          onClick={() => setShowAnswersDialog(true)}
+        >
+          Danh sách câu trả lời
+        </Button>
+      </div>
+
+      <Dialog open={showAnswersDialog} handler={() => setShowAnswersDialog(false)} size="xl">
+        <DialogHeader>Danh sách câu trả lời</DialogHeader>
+        <DialogBody className="max-h-[70vh] overflow-y-auto">
+          <AnswersTable />
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="text" onClick={() => setShowAnswersDialog(false)}>
+            Đóng
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {loading ? (
+        <div className="flex justify-center items-center h-40">
+          <Oval
+            height={80}
+            width={80}
+            color="blue"
+            visible={true}
+            ariaLabel="oval-loading"
+            secondaryColor="lightblue"
+            strokeWidth={2}
+            strokeWidthSecondary={2}
+          />
+        </div>
+      ) : paginatedQuestions.length === 0 ? (
+        <div className="text-center text-gray-500 mt-8">
+          Không có câu hỏi nào.
+        </div>
+      ) : (
+        paginatedQuestions.map((item) => (
+          <div
+            key={item._id}
+            className="mb-6 p-4 border rounded-lg bg-white shadow"
+          >
+            <div className="flex justify-between">
+              <div className="font-semibold mb-2">{item.text}</div>
+              <div className="flex gap-2">
+                <button
+                  className="px-3 py-1 bg-green-500 hover:bg-green-600 text-white rounded shadow text-sm"
+                  onClick={() => handleOpenDialog(item)}
+                >
+                  Cập nhật
+                </button>
+                <button
+                  className="px-3 py-1 bg-red-500 hover:bg-red-600 text-white rounded shadow text-sm"
+                  onClick={() => handleDelete(item._id)}
+                >
+                  Xóa
+                </button>
+              </div>
+            </div>
+            <div className="flex gap-4 mt-8">
+              {["single-choice", "multiple-choice", "multi-choice"].includes(item.type) && Array.isArray(item.options) && item.options.length > 0 ? (
+                item.options.map((opt, idx) => (
+                  <button
+                    key={idx}
+                    className="px-4 py-2 bg-blue-400 hover:bg-blue-600 text-white rounded"
+                  >
+                    {opt}
+                  </button>
+                ))
+              ) : item.type === 'upload' ? (
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="border px-3 py-2 rounded w-full max-w-xs"
+                  disabled
+                />
+              ) : item.type === 'link' ? (
+                <input
+                  type="url"
+                  className="border px-3 py-2 rounded w-full max-w-xs"
+                  placeholder="Nhập đường dẫn..."
+                  disabled
+                />
+              ) : item.type === 'text' ? (
+                <input
+                  type="text"
+                  className="border px-3 py-2 rounded w-full max-w-xs"
+                  placeholder="Nhập câu trả lời..."
+                  disabled
+                />
+              ) : null}
+            </div>
+          </div>
+        ))
+)}
+
+<div className="flex justify-center items-center gap-2 mt-4">
+  <button
+    className="px-3 py-1 rounded bg-blue-500 text-white disabled:bg-gray-300"
+    disabled={currentPage === 1}
+    onClick={() => setCurrentPage(currentPage - 1)}
+  >
+    Trang trước
+  </button>
+  <span>
+    {currentPage} / {totalPages}
+  </span>
+  <button
+    className="px-3 py-1 rounded bg-blue-500 text-white disabled:bg-gray-300"
+    disabled={currentPage === totalPages || totalPages === 0}
+    onClick={() => setCurrentPage(currentPage + 1)}
+  >
+    Trang sau
+  </button>
+</div>
+
+<EditQuestion
+setEditValue={setEditValue}
+editData={editData}
+editValue={editValue}
+handleCloseDialog={handleCloseDialog}
+handleEditChange={handleEditChange}
+handleSave={handleSave}
+openDialog={openDialog}
+/>  
+    </div>
+  );
+};
+
+export default Questions;
diff --git a/src/pages/dashboard/Questions/answerstable.jsx b/src/pages/dashboard/Questions/answerstable.jsx
new file mode 100644
index 00000000..47bddde2
--- /dev/null
+++ b/src/pages/dashboard/Questions/answerstable.jsx
@@ -0,0 +1,482 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Input,
+  Button,
+  Typography,
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+  IconButton,
+} from "@material-tailwind/react";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import axios from "axios";
+import { Audio } from "react-loader-spinner";
+
+const API_URL = "https://api-ndolv2.nongdanonline.cc/answers";
+const FILE_BASE_URL = "https://api-ndolv2.nongdanonline.cc";
+let token = localStorage.getItem("token");
+
+// Auto-refresh token
+const fetchWithAuth = async (url, options = {}) => {
+  let res = await fetch(url, {
+    ...options,
+    headers: {
+      ...(options.headers || {}),
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (res.status === 401 || res.status === 403) {
+    const refreshToken = localStorage.getItem("refreshToken");
+    const refreshRes = await fetch(
+      "https://api-ndolv2.nongdanonline.cc/auth/refresh-token",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ refreshToken }),
+      }
+    );
+
+    if (refreshRes.ok) {
+      const refreshData = await refreshRes.json();
+      localStorage.setItem("token", refreshData.accessToken);
+      token = refreshData.accessToken;
+      res = await fetch(url, {
+        ...options,
+        headers: {
+          ...(options.headers || {}),
+          Authorization: `Bearer ${token}`,
+        },
+      });
+    } else {
+      throw new Error("Vui lòng đăng nhập lại!");
+    }
+  }
+
+  return res;
+};
+
+export function AnswersTable() {
+  const [detailAnswer, setDetailAnswer] = useState(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [questionAnFarmId, setQuestionAndFarmId] = useState([]);
+  const [answers, setAnswers] = useState([]);
+  const [form, setForm] = useState({
+    farmId: "",
+    questionId: "",
+    selectedOptions: [],
+    otherText: "",
+    uploadedFiles: [],
+  });
+  const [editData, setEditData] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const [searchText, setSearchText] = useState("");
+  const [filterOption, setFilterOption] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+
+  const fetchAnswers = async () => {
+    try {
+      const res = await fetchWithAuth(API_URL);
+      const data = await res.json();
+      setAnswers(Array.isArray(data) ? data : []);
+    } catch (err) {
+      console.error("Lỗi khi tải dữ liệu:", err);
+    }
+  };
+
+  const getFarmandQuestion = async () => {
+    try {
+      const response = await Promise.all(
+        answers.map(async (item) => {
+          try {
+            const resQ = await axios.get(
+              `https://api-ndolv2.nongdanonline.cc/admin-questions/${item.questionId}`,
+              { headers: { Authorization: `Bearer ${token}` } }
+            );
+            const resF = await axios.get(
+              `https://api-ndolv2.nongdanonline.cc/adminfarms/${item.farmId}`,
+              { headers: { Authorization: `Bearer ${token}` } }
+            );
+            return { ...item, question: resQ.data, farm: resF.data };
+          } catch {
+            return { ...item };
+          }
+        })
+      );
+      setQuestionAndFarmId(response);
+    } catch (err) {
+      setQuestionAndFarmId([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAnswers();
+  }, []);
+
+  useEffect(() => {
+    if (answers.length > 0) getFarmandQuestion();
+  }, [answers]);
+
+  const openForm = (data = null) => {
+    setForm({
+      farmId: data?.farmId || "",
+      questionId: data?.questionId || "",
+      selectedOptions: data?.selectedOptions || [],
+      otherText: data?.otherText || "",
+      uploadedFiles: data?.uploadedFiles || [],
+    });
+    setEditData(data);
+    setOpen(true);
+  };
+
+  const handleSubmit = async () => {
+    if (!form.farmId || !form.questionId) {
+      alert("Vui lòng nhập đủ Farm ID và Question ID");
+      return;
+    }
+
+    try {
+      const res = await fetchWithAuth(`${API_URL}/batch`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          farmId: form.farmId,
+          answers: [
+            {
+              questionId: form.questionId,
+              selectedOptions: form.selectedOptions,
+              otherText: form.otherText,
+              uploadedFiles: form.uploadedFiles,
+            },
+          ],
+        }),
+      });
+
+      if (!res.ok) throw new Error("Không thể lưu dữ liệu");
+
+      setOpen(false);
+      setEditData(null);
+      fetchAnswers();
+    } catch (err) {
+      alert(`Lỗi: ${err.message}`);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm("Bạn có chắc muốn xoá?")) return;
+    try {
+      const res = await fetchWithAuth(`${API_URL}/${id}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) throw new Error("Không thể xoá dữ liệu");
+      fetchAnswers();
+    } catch (err) {
+      alert(err.message);
+    }
+  };
+
+  const handleUploadImage = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append("file", file);
+    setUploading(true);
+
+    try {
+      const res = await fetchWithAuth(`${API_URL}/upload-image`, {
+        method: "POST",
+        body: formData,
+      });
+
+      const result = await res.json();
+      if (!res.ok) throw new Error(result.message);
+
+      setForm((prev) => ({
+        ...prev,
+        uploadedFiles: [...prev.uploadedFiles, result.path],
+      }));
+    } catch (err) {
+      alert(`Upload lỗi: ${err.message}`);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const filteredData = questionAnFarmId.filter((item) => {
+    const farmName = item.farm?.name?.toLowerCase() || "";
+    const questionText = item.question?.text?.toLowerCase() || "";
+    const selected = item.selectedOptions?.join(", ").toLowerCase() || "";
+
+    const matchSearch =
+      farmName.includes(searchText.toLowerCase()) ||
+      questionText.includes(searchText.toLowerCase());
+
+    const matchFilter =
+      !filterOption || selected.includes(filterOption.toLowerCase());
+
+    return matchSearch && matchFilter;
+  });
+
+  const totalPages = Math.ceil(filteredData.length / itemsPerPage);
+  const paginatedData = filteredData.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+const fetchAnswerDetail = async (id) => {
+  setDetailLoading(true);
+  try {
+    const res = await fetchWithAuth(`${API_URL}/${id}`);
+    const data = await res.json();
+    setDetailAnswer(data);
+    setDetailOpen(true);
+  } catch (err) {
+    alert("Lỗi khi lấy chi tiết câu trả lời: " + err.message);
+  } finally {
+    setDetailLoading(false);
+  }
+};
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-4">
+        <Typography variant="h5">Danh sách câu trả lời</Typography>
+      </div>
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
+        <Input
+          label="Tìm kiếm câu hỏi hoặc farm"
+          value={searchText}
+          onChange={(e) => {
+            setSearchText(e.target.value);
+            setCurrentPage(1);
+          }}
+        />
+      </div>
+<div>
+  <label className="block text-sm font-medium text-gray-700 mb-1">Lọc theo đáp án</label>
+  <select
+    value={filterOption}
+    onChange={(e) => {
+      setFilterOption(e.target.value);
+      setCurrentPage(1);
+    }}
+    style={{ width: '50%' , height:'50%' }}
+    className="border rounded px-3 py-2"
+  >
+    <option value="">Tất cả</option>
+    {[...new Set(questionAnFarmId.flatMap((item) => item.selectedOptions || []))].map((opt, idx) => (
+      <option key={idx} value={opt}>
+        {opt}
+      </option>
+    ))}
+  </select>
+</div>
+
+
+
+      {loading ? (
+        <Audio height="80" width="80" radius="9" color="green" ariaLabel="loading" />
+      ) : (
+        <table className="min-w-full">
+          <thead className="bg-gray-100">
+            <tr>
+              <th className="px-4 py-3 text-left">#</th>
+              <th className="px-4 py-3 text-left">Farm</th>
+              <th className="px-4 py-3 text-left">Câu hỏi</th>
+              <th className="px-4 py-3 text-left">Đáp án chọn</th>
+              <th className="px-4 py-3 text-left">Khác</th>
+              <th className="px-4 py-3 text-left">Tệp đính kèm</th>
+              <th className="px-4 py-3 text-center">Hành động</th>
+            </tr>
+          </thead>
+          <tbody>
+            {paginatedData.map((item, index) => (
+              <tr
+                key={item._id}
+                className="hover:bg-gray-50 transition cursor-pointer"
+                onClick={() => fetchAnswerDetail(item._id)}
+              >
+                <td className="px-4 py-3">{(currentPage - 1) * itemsPerPage + index + 1}</td>
+                <td className="px-4 py-3">{item.farm?.name || <i className="text-gray-400">chưa có</i>}</td>
+                <td className="px-4 py-3">{item.question?.text || <i className="text-gray-400">chưa có</i>}</td>
+                <td className="px-4 py-3">{item.selectedOptions?.join(", ") || "—"}</td>
+                <td className="px-4 py-3">{item.otherText || "—"}</td>
+                <td className="px-4 py-3">
+                  {item.uploadedFiles?.length > 0
+                    ? item.uploadedFiles.map((file, i) => (
+                        <a
+                          key={i}
+                          href={`${FILE_BASE_URL}${file}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-blue-600 underline block"
+                        >
+                          File {i + 1}
+                        </a>
+                      ))
+                    : "—"}
+                </td>
+                <td className="px-4 py-3 text-center">
+                  <Menu placement="bottom-end">
+                    <MenuHandler>
+                      <IconButton variant="text">
+                        <EllipsisVerticalIcon className="h-5 w-5" />
+                      </IconButton>
+                    </MenuHandler>
+                    <MenuList>
+                    <MenuItem onClick={() => openForm()}>Thêm mới</MenuItem>
+                    <MenuItem onClick={() => openForm(item)}>Sửa</MenuItem>
+                    <MenuItem
+                      onClick={() => handleDelete(item._id)}
+                      className="text-red-500"
+                    >
+                      Xoá
+                    </MenuItem>
+                  </MenuList>
+
+                  </Menu>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+
+      {/* Pagination */}
+      <div className="flex items-center justify-center gap-4 mt-6">
+        <Button
+          variant="outlined"
+          size="sm"
+          disabled={currentPage === 1}
+          onClick={() => setCurrentPage((p) => p - 1)}
+        >
+          Trang trước
+        </Button>
+        <span className="text-sm font-medium">
+          Trang {currentPage} / {totalPages || 1}
+        </span>
+        <Button
+          variant="outlined"
+          size="sm"
+          disabled={currentPage === totalPages}
+          onClick={() => setCurrentPage((p) => p + 1)}
+        >
+          Trang sau
+        </Button>
+      </div>
+
+      {/* Dialog Form */}
+      <Dialog open={open} handler={() => setOpen(!open)}>
+        <DialogHeader>{editData ? "Chỉnh sửa" : "Thêm mới"} câu trả lời</DialogHeader>
+        <DialogBody className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <Input label="Farm ID" value={form.farmId} onChange={(e) => setForm({ ...form, farmId: e.target.value })} />
+          <Input label="Question ID" value={form.questionId} onChange={(e) => setForm({ ...form, questionId: e.target.value })} />
+          <div className="max-w-sm">
+            <Input
+              label="Selected Options (cách nhau bằng dấu phẩy)"
+              value={form.selectedOptions.join(", ")}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  selectedOptions: e.target.value
+                    .split(",")
+                    .map((s) => s.trim())
+                    .filter(Boolean),
+                })
+              }
+            />
+          </div>
+
+          <Input label="Other Text" value={form.otherText} onChange={(e) => setForm({ ...form, otherText: e.target.value })} />
+          <Input type="file" onChange={handleUploadImage} />
+          {uploading && <span className="text-sm text-gray-500">Đang tải lên...</span>}
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="outlined" onClick={() => setOpen(false)}>Huỷ</Button>
+          <Button color="blue" onClick={handleSubmit}>{editData ? "Cập nhật" : "Tạo mới"}</Button>
+        </DialogFooter>
+      </Dialog>
+      <Dialog open={detailOpen} handler={() => setDetailOpen(false)} size="lg">
+
+
+          {/* Dialog chi tiết */}
+  <DialogHeader className="justify-between">
+    Chi tiết câu trả lời
+    <IconButton variant="text" onClick={() => setDetailOpen(false)}>✕</IconButton>
+  </DialogHeader>
+  <DialogBody className="space-y-4">
+  {detailLoading ? (
+    <Typography variant="small" className="text-gray-500">
+      Đang tải chi tiết...
+    </Typography>
+  ) : detailAnswer ? (
+    <>
+      <Typography variant="small">
+        <strong>Farm ID:</strong> {detailAnswer.farmId}
+      </Typography>
+      <Typography variant="small">
+        <strong>Question ID:</strong> {detailAnswer.questionId}
+      </Typography>
+      <Typography variant="small">
+        <strong>Người trả lời:</strong> {detailAnswer.userId || "—"}
+      </Typography>
+      <Typography variant="small">
+        <strong>Ngày trả lời:</strong> {new Date(detailAnswer.createdAt).toLocaleString() || "—"}
+      </Typography>
+      <Typography variant="small">
+        <strong>Đáp án chọn:</strong>{" "}
+        {detailAnswer.selectedOptions?.join(", ") || "—"}
+      </Typography>
+      <Typography variant="small">
+        <strong>Khác:</strong> {detailAnswer.otherText || "—"}
+      </Typography>
+      <div>
+        <Typography variant="small">
+          <strong>File đính kèm:</strong>
+        </Typography>
+        {detailAnswer.uploadedFiles?.length > 0 ? (
+          <ul className="list-disc list-inside text-blue-600">
+            {detailAnswer.uploadedFiles.map((file, i) => (
+              <li key={i}>
+                <a
+                  href={`${FILE_BASE_URL}${file}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  File {i + 1}
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <Typography variant="small">—</Typography>
+        )}
+      </div>
+    </>
+  ) : (
+    <Typography variant="small">Không có dữ liệu</Typography>
+  )}
+</DialogBody>
+
+
+</Dialog>
+
+    </div>
+  );
+}
+
+export default AnswersTable;
diff --git a/src/pages/dashboard/VideoFarms/LikeButton.jsx b/src/pages/dashboard/VideoFarms/LikeButton.jsx
new file mode 100644
index 00000000..38af6d47
--- /dev/null
+++ b/src/pages/dashboard/VideoFarms/LikeButton.jsx
@@ -0,0 +1,75 @@
+// src/components/LikeButton.jsx
+
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { BaseUrl } from '@/ipconfig';
+import { useNavigate } from 'react-router-dom';
+export default function LikeButton({ videoId,onOpenLike }) {
+  const [liked, setLiked] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const token = localStorage.getItem('token');
+  const navigate = useNavigate();
+    const [videoLike,setVideoLike]=useState([])
+
+const getLikeVideo = async()=>{
+  try {
+    const res= await axios.get(`${BaseUrl}/video-like/${videoId}/users`,{headers:{Authorization: `Bearer ${token}`}})
+if(res.status===200){
+setVideoLike(res.data)
+setLoading(false)
+}
+  } catch (error) {
+    console.log("Lỗi nè:",error)
+        setLoading(false)
+
+  }
+}
+
+  // const handleLikeToggle = async () => {
+  //   if (!videoId || !token) return;
+  //   setLoading(true);
+
+  //   try {
+  //     const url = liked
+  //       ? `${BaseUrl}/video-like/${videoId}/unlike`
+  //       : `${BaseUrl}/video-like/${videoId}/like`;
+
+  //     await axios.post(url, {}, {
+  //       headers: { Authorization: `Bearer ${token}` },
+  //     });
+  //     setLiked(!liked);
+  //   } catch (error) {
+  //     console.error('Lỗi khi Like/Unlike video:', error);
+  //   } finally {
+  //     setLoading(false);
+  //   }
+  // };
+
+  const handleViewLikes = () => {
+    navigate(`/dashboard/video-like/${videoId}`);
+  };
+useEffect(()=>{
+getLikeVideo()
+},[])
+  return (
+    <div className="flex gap-2">
+      {/* <button
+        onClick={handleLikeToggle}
+        disabled={loading}
+        className={`px-3 py-1 rounded text-white text-sm font-semibold shadow ${
+          liked ? 'bg-red-500 hover:bg-red-600' : 'bg-gray-600 hover:bg-gray-700'
+        }`}
+      >
+        {loading ? '...' : liked ? 'Bỏ Like' : 'Like'}
+      </button> */}
+
+      <button
+      onClick={e => onOpenLike(e, videoId)}
+
+      className="px-3 py-1 rounded text-blue-700 bg-blue-100 hover:bg-blue-200 text-sm font-semibold shadow"
+      >
+      {videoLike.total} Lượt thích
+      </button>
+    </div>
+  );
+}
diff --git a/src/pages/dashboard/VideoFarms/ListVideo.jsx b/src/pages/dashboard/VideoFarms/ListVideo.jsx
new file mode 100644
index 00000000..b18486e3
--- /dev/null
+++ b/src/pages/dashboard/VideoFarms/ListVideo.jsx
@@ -0,0 +1,277 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import axios from 'axios';
+import { BaseUrl } from '@/ipconfig';
+import { Audio } from 'react-loader-spinner';
+import { useNavigate } from "react-router-dom";
+import { Typography, Button, Input } from '@material-tailwind/react';
+import VideoById from './VideoById';
+import { Dialog } from "@material-tailwind/react";
+
+const fetchAllVideosWithStats = async () => {
+  const token = localStorage.getItem('token');
+  let page = 1;
+  let totalPages = 1;
+  let allVideos = [];
+
+  while (page <= totalPages) {
+    const res = await axios.get(`${BaseUrl}/admin-video-farm?limit=100&page=${page}`, {
+      headers: { Authorization: `Bearer ${token}` }
+    });
+
+    totalPages = res.data.totalPages || 1;
+
+    const videos = res.data.data || [];
+
+    const videosWithStats = await Promise.all(
+      videos.map(async (video) => {
+        try {
+          const [likeRes, commentRes] = await Promise.all([
+            axios.get(`${BaseUrl}/video-like/${video._id}/users`, {
+              headers: { Authorization: `Bearer ${token}` },
+            }),
+            axios.get(`${BaseUrl}/video-comment/${video._id}/comments`, {
+              headers: { Authorization: `Bearer ${token}` },
+            }),
+          ]);
+
+     const commentCount = Array.isArray(commentRes.data)
+  ? commentRes.data.reduce(
+      (total, cmt) =>
+        total +
+        1 +
+        (Array.isArray(cmt.replies) ? cmt.replies.length : 0),
+      0
+    )
+  : Array.isArray(commentRes.data.comments)
+    ? commentRes.data.comments.reduce(
+        (total, cmt) =>
+          total +
+          1 +
+          (Array.isArray(cmt.replies) ? cmt.replies.length : 0),
+        0
+      )
+    : commentRes.data.total ?? 0;
+          return {
+            ...video,
+            likeCount: likeRes.data.total || 0,
+            commentCount,
+          };
+        } catch (error) {
+          return { ...video, likeCount: 0, commentCount: 0 };
+        }
+      })
+    );
+
+    allVideos = [...allVideos, ...videosWithStats];
+    page++;
+  }
+
+  return allVideos;
+};
+
+export const ListVideo = () => {
+  const navigate = useNavigate();
+  const [allVideos, setAllVideos] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchText, setSearchText] = useState('');
+  const [filterStatus, setFilterStatus] = useState('');
+  const [openDialog, setOpenDialog] = useState(false);
+const [selectedVideo, setSelectedVideo] = useState(null);
+
+  const [page, setPage] = useState(1);
+  const limit = 10;
+
+const handleOpenDialog = (video) => {
+setSelectedVideo(video);
+setOpenDialog(true);
+};
+const handleCloseDialog = () => {
+
+  setOpenDialog(false);
+  setSelectedVideo(null);
+};
+  useEffect(() => {
+    setLoading(true);
+    fetchAllVideosWithStats()
+      .then((videos) => {
+        setAllVideos(videos);
+      })
+      .catch(err => console.error("Lỗi khi tải video:", err))
+      .finally(() => setLoading(false));
+  }, []);
+
+ const filteredVideos = useMemo(() => {
+  const filtered = filterStatus
+    ? allVideos.filter(v => v.status === filterStatus)
+    : allVideos;
+
+  const searched = filtered.filter(v =>
+    v.title?.toLowerCase().includes(searchText.toLowerCase()) ||
+    v.playlistName?.toLowerCase().includes(searchText.toLowerCase())
+  );
+
+ 
+  return searched.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+}, [allVideos, filterStatus, searchText]);
+
+  const totalPages = Math.ceil(filteredVideos.length / limit);
+  const paginatedVideos = useMemo(() => {
+    const start = (page - 1) * limit;
+    return filteredVideos.slice(start, start + limit);
+  }, [filteredVideos, page]);
+
+
+const [statusList, setStatusList] = useState([]);
+const [hasFetchedAllStatuses, setHasFetchedAllStatuses] = useState(false);
+
+const fetchAllStatuses = async () => {
+  const token = localStorage.getItem('token');
+  let page = 1;
+  let totalPages = 1;
+  const statuses = new Set();
+
+  while (page <= totalPages) {
+    const res = await axios.get(`${BaseUrl}/admin-video-farm?limit=100&page=${page}`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+
+    totalPages = res.data.totalPages || 1;
+
+    (res.data.data || []).forEach(video => {
+      if (video.status) {
+        statuses.add(video.status);
+      }
+    });
+
+    page++;
+  }
+
+  return Array.from(statuses);
+};
+
+const handleOpenStatusFilter = async () => {
+  if (!hasFetchedAllStatuses) {
+    const statuses = await fetchAllStatuses();
+    setStatusList(statuses);
+    setHasFetchedAllStatuses(true);
+  }
+};
+
+
+  const gotoVideoById = (id) => {
+    navigate(`/dashboard/VideoFarms/VideoById/${id}`);
+  };
+
+  return (
+    <div className="p-4">
+      <Typography variant="h5" color="blue-gray" className="font-semibold mb-4">
+        Quản lý Video
+      </Typography>
+
+      <div className="flex justify-end mb-4 gap-2">
+        <Input
+          type="text"
+          placeholder="Tìm kiếm video..."
+          value={searchText}
+          onChange={e => {
+            setSearchText(e.target.value);
+            setPage(1);
+          }}
+        />
+     <select
+  onClick={handleOpenStatusFilter} 
+  className="border rounded px-3 py-1"
+  value={filterStatus}
+  onChange={(e) => {
+    setFilterStatus(e.target.value);
+    setPage(1);
+  }}
+>
+  <option value="">Tất cả</option>
+  {statusList.map((status) => (
+    <option key={status} value={status}>{status}</option>
+  ))}
+</select>
+
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center items-center w-full h-40">
+          <Audio height="80" width="80" radius="9" color="green" ariaLabel="loading" />
+        </div>
+      ) : paginatedVideos.length === 0 ? (
+        <span className="text-gray-500">Không có video nào.</span>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="min-w-full border">
+            <thead>
+              <tr className="border-t">
+                <th className="p-2 text-left text-xs font-semibold">Tiêu đề</th>
+                <th className="p-2 text-left text-xs font-semibold">Danh sách phát</th>
+                <th className="p-2 text-left text-xs font-semibold">Farm</th>
+                <th className="p-2 text-left text-xs font-semibold">Ngày đăng</th>
+                <th className="p-2 text-left text-xs font-semibold">Người đăng</th>
+                <th className="p-2 text-left text-xs font-semibold">Email</th>
+                <th className="p-2 text-left text-xs font-semibold">Like</th>
+                <th className="p-2 text-left text-xs font-semibold">Bình luận</th>
+                <th className="p-2 text-left text-xs font-semibold">Trạng thái</th>
+              </tr>
+            </thead>
+            <tbody>
+              {paginatedVideos.map((item) => (
+                <tr key={item._id} className="border-b hover:bg-gray-50 cursor-pointer"
+                    onClick={() => handleOpenDialog(item)}>
+                  <td className="p-2">{item.title}</td>
+                  <td className="p-2">{item.playlistName}</td>
+                  <td className="p-2">{item.farmId?.name}</td>
+                  <td className="p-2">{new Date(item.createdAt).toLocaleDateString()}</td>
+                  <td className="p-2">{item.uploadedBy?.fullName}</td>
+                  <td className="p-2">{item.uploadedBy?.email}</td>
+                  <td className="p-2">{item.likeCount || 0}</td>
+                  <td className="p-2">{item.commentCount || 0}</td>
+                  <td className="p-2">{item.status}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div className="flex justify-center items-center gap-2 mt-4">
+        <Button
+          size="sm"
+          variant="outlined"
+          disabled={page <= 1}
+          onClick={() => setPage(prev => prev - 1)}
+        >
+          Trang trước
+        </Button>
+        <span>Trang {page} / {totalPages}</span>
+        <Button
+          size="sm"
+          variant="outlined"
+          disabled={page >= totalPages}
+          onClick={() => setPage(prev => prev + 1)}
+        >
+          Trang sau
+        </Button>
+      </div>
+
+{
+  openDialog&&(
+<Dialog open={openDialog} handler={handleCloseDialog} size="xl">
+  <div className="max-h-[80vh] overflow-y-auto">
+    <VideoById
+      openDialog={openDialog}
+      handleCloseDialog={handleCloseDialog}
+      video={selectedVideo}
+    />
+  </div>
+</Dialog>  
+  )
+}
+    </div>
+  );
+};
+
+export default ListVideo;
diff --git a/src/pages/dashboard/VideoFarms/VideoById.jsx b/src/pages/dashboard/VideoFarms/VideoById.jsx
new file mode 100644
index 00000000..d9512ddd
--- /dev/null
+++ b/src/pages/dashboard/VideoFarms/VideoById.jsx
@@ -0,0 +1,259 @@
+import React, { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import axios from 'axios'
+import { BaseUrl } from '@/ipconfig'
+import { Audio } from 'react-loader-spinner'
+import LikeButton from './LikeButton'
+import VideoLikeList from './VideoLikeList'
+import CommentVideo from './commentVideo';
+ export const VideoById = ({openDialog,handleCloseDialog,video}) => {
+   const [selectedVideoId, setSelectedVideoId] = useState(null)
+    const [openComment, setOpenComment] = useState(false);
+   const [openLike, setOpenlike] = useState(false);
+    const [videoDetail,setVideoDetail]=useState([])
+    const [videoComment,setVideoComment]=useState([])
+     const [loading, setLoading] = useState(true)
+      // console.log(videoDetail)
+     const tokenUser = localStorage.getItem('token');
+const getVideoDetail = async(videoId)=>{
+  try {
+    const res= await axios.get(`${BaseUrl}/admin-video-farm/${videoId}`,{headers:{Authorization: `Bearer ${tokenUser}`}})
+if(res.status===200){
+setVideoDetail(res.data)
+setLoading(false)
+}
+  } catch (error) {
+    console.log("Lỗi nè:",error)
+        setLoading(false)
+
+  }
+}
+const getCommentVideo = async(videoId)=>{
+  try {
+    const res= await axios.get(`${BaseUrl}/video-comment/${videoId}/comments`,{headers:{Authorization: `Bearer ${tokenUser}`}})
+if(res.status===200){
+setVideoComment(res.data)
+setLoading(false)
+}
+  } catch (error) {
+    console.log("Lỗi nè:",error)
+        setLoading(false)
+
+  }
+}
+
+const totalCommentCount = Array.isArray(videoComment)
+  ? videoComment.reduce(
+      (total, cmt) =>
+        total +
+        1 +
+        (Array.isArray(cmt.replies) ? cmt.replies.length : 0),
+      0
+    )
+  : 0;
+
+ const handleOpenLike = (e, videoId) => {
+  e.stopPropagation(); 
+  setSelectedVideoId(videoId);
+  setOpenlike(true);
+};
+  const handleCloseLike = () => {
+    setSelectedVideoId(null); 
+    setOpenlike(false);
+  };
+
+
+ const handleOpenComment = (e, videoId) => {
+  e.stopPropagation(); 
+  setSelectedVideoId(videoId);
+  setOpenComment(true);
+};
+  const handleCloseComment = () => {
+    setSelectedVideoId(null); 
+    setOpenComment(false);
+  };
+
+  const handleSaveEdit = async(videoId)=>{
+try {
+      const updatedValue = { status: "uploaded" }; 
+    const res= await axios.post(`${BaseUrl}/admin-video-farm/upload-s3/${videoId}`, updatedValue,{
+        headers: { Authorization: `Bearer ${tokenUser}` }})
+if(res.status===200){
+  alert("Cập nhật thành công")
+    await  getVideoDetail(videoId);     
+  }else {
+      alert("Có lỗi trong lúc duyệt")
+    }
+} catch (error) {
+  console.log("Lỗi nè",error)
+}
+}
+const deletevideo = async(videoId)=>{
+      if (!window.confirm('Bạn có chắc muốn xóa video này?')) return;
+  try {
+    const res= await axios.delete(`${BaseUrl}/admin-video-farm/delete-s3/${videoId}`,{headers:{Authorization: `Bearer ${tokenUser}`}})
+if(res.status===200){
+await getVideoDetail(videoId)
+alert("Xóa thành công")
+}
+  } catch (error) {
+    console.log("Lỗi nè:",error)
+  }
+}
+  useEffect(() => {
+    if (video && video._id) {
+      getVideoDetail(video._id);
+      getCommentVideo(video._id);
+    }
+  }, [video]);
+  return (
+     
+  <div className="p-4">
+    <div className="p-4  ">
+ 
+      {loading ? (
+        <div className="flex h-full w-full ">
+          <Audio height="80" width="80" radius="9" color="green" ariaLabel="loading" />
+        </div>
+      ) : videoDetail === 0 ? (
+        <span className="text-gray-500 col-span-3">Không có video nào.</span>
+      ) : (
+  (Array.isArray(videoDetail) ? videoDetail : [videoDetail]).map((item) => (
+          <div
+            key={item._id}
+            className="bg-white rounded-lg shadow p-5 flex flex-col gap-3 border hover:shadow-lg transition mb-6 "
+          >
+<span className="font-bold text-lg mb-1 truncate max-w-[400px] block" title={item.title}>
+  {item.title}
+</span>
+           
+           <div className="flex flex-row justify-end gap-3 mt-2">
+   
+ {item.status === "pending" ? (
+        <button
+          onClick={async (e) => {
+            e.stopPropagation();
+            await handleSaveEdit(item._id);
+          }}
+          className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded shadow transition"
+        >
+          Duyệt
+        </button>
+      ):(
+       <span></span>
+      )}
+
+            <button
+            onClick={(e)=>{
+                e.stopPropagation();
+              deletevideo(item._id)}}
+              className="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded shadow transition"
+            >
+              Xóa
+            </button>
+          </div>
+          
+      {item.status === "pending" && item.localFilePath ?
+      (
+  <video
+ src={
+    item.localFilePath.startsWith('http')
+      ? item.localFilePath
+      : `${BaseUrl}${item.localFilePath}`
+  }
+    controls
+    className=" h-[360px]  w-full rounded shadow"
+  >
+    Trình duyệt của bạn không hỗ trợ video
+  </video>
+) 
+  : item.youtubeLink && item.status === "uploaded" ? (
+  item.youtubeLink.endsWith('.mp4') ? (
+    <video src={item.youtubeLink} controls   
+    className=" h-[360px]  w-full rounded shadow"
+ />
+  ): (
+  <iframe 
+    src={
+      "https://www.youtube.com/embed/" +
+      (item.youtubeLink.match(/(?:v=|\/embed\/|\.be\/)([^\s&?]+)/)?.[1] || "")
+    }
+    title="YouTube video"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen
+    className="h-[360px] rounded shadow w-full"
+  ></iframe>
+) ): 
+(
+  <div className="flex items-center justify-center h-56 text-red-500 font-semibold w-full h-[360px] rounded shadow bg-gray-100"  >
+    Video không tồn tại
+  </div>
+
+)} 
+
+<div className="flex justify-between items-center mt-2">
+    <>
+      <div>
+        <LikeButton onOpenLike={handleOpenLike} videoId={item._id} />
+      </div>
+      <div>
+        <button
+          onClick={(e) => { handleOpenComment(e, item._id) }}
+          className="flex items-center gap-1 px-3 py-1 rounded text-green-700 bg-green-100 hover:bg-green-200 text-sm font-semibold shadow transition"
+        >
+        <span className="material-icons text-base">{totalCommentCount} bình luận</span>
+        </button>
+      </div>
+    </>
+</div>
+
+   <span className="text-sm text-gray-600 cursor-pointer">
+            Danh sách phát: <span className=" truncate font-medium">{item.playlistName}</span>
+          </span>
+             <span className=" truncate text-sm text-gray-600">
+            Farm: <span className=" truncate font-medium">{item.farmId.name}</span>
+          </span>
+          <span className="truncate text-sm text-gray-600">
+            Ngày đăng: <span className="truncate font-medium">{new Date(item.createdAt).toLocaleDateString()}</span>
+          </span>
+          <span className="truncate text-sm text-gray-600">
+            Người đăng: <span className="truncate font-medium">{item.uploadedBy?.fullName}</span>
+          </span>
+           <span className=" truncate text-sm text-gray-600">
+            Link Local File Path: <span className=" truncate font-medium">{item.localFilePath}</span>
+          </span>
+           <span className=" truncate text-sm text-gray-600">
+            Link Youtube: <span className=" truncate font-medium">{item.youtubeLink||""}</span>
+          </span>
+             <span className="truncate text-sm text-gray-600">
+            Email: <span className=" truncate font-medium">{item.uploadedBy.email}</span>
+          </span>
+            <span className=" truncate text-sm text-gray-600">
+            Trạng thái: <span className=" truncate font-medium">{item.status}</span>
+          </span>
+          
+          </div>
+        ))
+      )}
+
+{openLike&&(<VideoLikeList 
+openLike={openLike} 
+handleCloseLike={handleCloseLike}
+videoId={selectedVideoId}
+/>
+)
+}
+      {openComment && (
+        <CommentVideo
+          open={openComment}
+          onClose={handleCloseComment}
+          videoId={selectedVideoId}
+        />
+      )}
+    </div>
+    </div>
+
+  )
+}
+
+export default VideoById
\ No newline at end of file
diff --git a/src/pages/dashboard/VideoFarms/VideoLikeList.jsx b/src/pages/dashboard/VideoFarms/VideoLikeList.jsx
new file mode 100644
index 00000000..1a1132ae
--- /dev/null
+++ b/src/pages/dashboard/VideoFarms/VideoLikeList.jsx
@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { BaseUrl } from '@/ipconfig';
+import { Audio } from 'react-loader-spinner';
+
+export default function VideoLikeList({ openLike, handleCloseLike, videoId }) {
+  const [likes, setLikes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const token = localStorage.getItem('token');
+
+  const getLikes = async () => {
+    try {
+      setLoading(true);
+      const res = await axios.get(`${BaseUrl}/video-like/${videoId}/users`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      setLikes(res.data?.users || []);
+    } catch (error) {
+      console.error('Lỗi lấy danh sách Like:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (openLike && videoId) getLikes();
+  }, [openLike, videoId]);
+
+  if (!openLike) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
+      <div className="bg-white rounded-lg shadow-lg w-full max-w-xl p-6 relative">
+        <button
+          onClick={handleCloseLike}
+          className="absolute top-3 right-3 text-gray-500 hover:text-red-500 text-xl font-bold"
+        >
+          &times;
+        </button>
+        <h1 className="text-2xl font-bold mb-4 text-blue-700">Danh sách người đã Like</h1>
+        {loading ? (
+          <div className="flex justify-center">
+            <Audio height="60" width="60" radius="9" color="green" ariaLabel="loading" />
+          </div>
+        ) : likes.length === 0 ? (
+          <p className="text-gray-500">Chưa có ai Like video này.</p>
+        ) : (
+          <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {likes.map((user, index) => (
+              <li
+                key={index}
+                className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg shadow hover:shadow-md transition"
+              >
+                <img
+                  src={
+                    user.avatar
+                      ? `${BaseUrl}${user.avatar}`
+                      : "https://via.placeholder.com/50x50.png?text=User"
+                  }
+                  alt={user.fullName}
+                  className="w-12 h-12 rounded-full object-cover border"
+                />
+                <span className="font-medium truncate text-gray-800">{user.fullName}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/dashboard/VideoFarms/commentVideo.jsx b/src/pages/dashboard/VideoFarms/commentVideo.jsx
new file mode 100644
index 00000000..193680eb
--- /dev/null
+++ b/src/pages/dashboard/VideoFarms/commentVideo.jsx
@@ -0,0 +1,230 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+import {
+  Dialog, DialogHeader, DialogBody, DialogFooter,
+  Card, Input, Button, Typography, Spinner,
+} from "@material-tailwind/react";
+
+const BASE = "https://api-ndolv2.nongdanonline.cc/video-comment";
+const token = () => localStorage.getItem("token");
+
+const fetchComments = (videoId) =>
+  axios
+    .get(`${BASE}/${videoId}/comments`, {
+      headers: { Authorization: `Bearer ${token()}` },
+    })
+    .then((r) => r.data);
+
+const addComment = (videoId, body) =>
+  axios.post(`${BASE}/${videoId}/comment`, body, {
+    headers: { Authorization: `Bearer ${token()}` },
+  });
+
+const replyComment = (videoId, commentIndex, body) =>
+  axios.post(`${BASE}/${videoId}/comment/${commentIndex}/reply`, body, {
+    headers: { Authorization: `Bearer ${token()}` },
+  });
+
+const hideComment = (videoId, commentIndex) =>
+  axios.delete(`${BASE}/${videoId}/comment/${commentIndex}`, {
+    headers: { Authorization: `Bearer ${token()}` },
+  });
+
+const hideReply = (videoId, commentIndex, replyIndex) =>
+  axios.delete(`${BASE}/${videoId}/comment/${commentIndex}/reply/${replyIndex}`, {
+    headers: { Authorization: `Bearer ${token()}` },
+  });
+
+export default function CommentVideo({ open, onClose, videoId }) {
+  const [comments, setComments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [newComment, setNewComment] = useState("");
+  const [replyBox, setReplyBox] = useState({ commentIndex: null, text: "" }); 
+  const load = () => {
+    if (!videoId) return;
+    setLoading(true);
+    fetchComments(videoId)
+      .then(setComments)
+      .catch((err) => console.error("Lỗi khi fetch comments:", err))
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    if (open) load();
+  }, [open, videoId]);
+
+  const handleAdd = async (e) => {
+    e.preventDefault();
+    if (!newComment.trim()) {
+      alert("Bạn chưa nhập bình luận!");
+      return;
+    }
+    try {
+      await addComment(videoId, { comment: newComment });
+      setNewComment("");
+      load();
+    } catch (err) {
+      console.error("Lỗi khi gửi bình luận:", err.response?.data || err);
+      alert("Không thể gửi bình luận.");
+    }
+  };
+
+  const handleReply = async (e) => {
+    e.preventDefault();
+    if (!replyBox.text.trim()) {
+      alert("Bạn chưa nhập phản hồi!");
+      return;
+    }
+    try {
+      await replyComment(videoId, replyBox.commentIndex, { comment: replyBox.text }); 
+      setReplyBox({ commentIndex: null, text: "" });
+      load();
+    } catch (err) {
+      console.error("Lỗi khi gửi phản hồi:", err.response?.data || err);
+      alert("Không thể gửi phản hồi.");
+    }
+  };
+
+  const handleHideComment = async (commentIndex) => { 
+    if (!window.confirm("Bạn có chắc muốn ẩn bình luận này?")) return;
+    try {
+      await hideComment(videoId, commentIndex);
+      load();
+    } catch (err) {
+      console.error("Lỗi khi ẩn bình luận:", err.response?.data || err);
+      alert("Không thể ẩn bình luận.");
+    }
+  };
+
+  const handleHideReply = async (commentIndex, replyIndex) => { 
+    if (!window.confirm("Bạn có chắc muốn ẩn phản hồi này?")) return;
+    try {
+      await hideReply(videoId, commentIndex, replyIndex);
+      load();
+    } catch (err) {
+      console.error("Lỗi khi ẩn phản hồi:", err.response?.data || err);
+      alert("Không thể ẩn phản hồi.");
+    }
+  };
+
+  return (
+    <Dialog open={open} handler={onClose} size="lg">
+      <DialogHeader>Bình luận video</DialogHeader>
+
+      <DialogBody className="h-[70vh] overflow-y-auto">
+        {/* Form nhập bình luận */}
+        <Card shadow={false} className="p-4 bg-gray-50">
+          <form onSubmit={handleAdd} className="flex gap-2">
+            <Input
+              label="Viết bình luận..."
+              value={newComment}
+              onChange={(e) => setNewComment(e.target.value)}
+              className="flex-1"
+            />
+            <Button type="submit" color="blue">
+              Gửi
+            </Button>
+          </form>
+        </Card>
+
+        {/* Danh sách */}
+        {loading ? (
+          <div className="flex justify-center pt-8">
+            <Spinner />
+          </div>
+        ) : comments.length === 0 ? (
+          <Typography className="text-center mt-6" color="gray">
+            Chưa có bình luận.
+          </Typography>
+        ) : (
+          <ul className="mt-6 space-y-3">
+            {comments.map((c, i) => (
+              <li key={i} className="bg-white p-3 rounded shadow">
+                <div className="flex justify-between">
+                  <div>
+                    <Typography className="font-medium">
+                      {c.userId?.fullName || "Ẩn danh"}
+                    </Typography>
+                    <Typography>{c.comment}</Typography>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button
+                      size="sm"
+                      variant="text"
+                      onClick={() => setReplyBox({ commentIndex: c.index, text: "" })} 
+                    >
+                      Trả lời
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="text"
+                      color="red"
+                      onClick={() =>{console.log("Hide comment index:", i, "Comment:", c); handleHideComment(c.index)}} 
+                    >
+                      Ẩn
+                    </Button>
+                  </div>
+                </div>
+
+                {replyBox.commentIndex === c.index && ( 
+                  <form onSubmit={handleReply} className="flex gap-2 mt-2">
+                    <Input
+                      size="sm"
+                      label="Phản hồi..."
+                      value={replyBox.text}
+                      onChange={(e) =>
+                        setReplyBox((prev) => ({ ...prev, text: e.target.value }))
+                      }
+                      className="flex-1"
+                    />
+                    <Button size="sm" type="submit" color="blue">
+                      Gửi
+                    </Button>
+                  </form>
+                )}
+
+                {c.replies?.map((r, j) => (
+                  <div
+                    key={j}
+                    className="ml-4 mt-2 p-2 bg-gray-100 rounded text-sm"
+                  >
+                    <div className="flex justify-between">
+                      <span>
+                        <span className="font-medium">{r.userId?.fullName || "Ẩn danh"}: </span>
+                        {r.comment}
+                      </span>
+                      <div className="flex gap-2">
+                        <Button
+                          size="sm"
+                          variant="text"
+                          onClick={() => setReplyBox({ commentIndex: i, text: "" })} 
+                        >
+                          Trả lời
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="text"
+                          color="red"
+                          onClick={() => {console.log("Hide reply index (backend):", c.index, "reply index (backend):", r.index);
+                            handleHideReply(c.index, r.index)}} 
+                        >
+                          Ẩn
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </li>
+            ))}
+          </ul>
+        )}
+      </DialogBody>
+
+      <DialogFooter>
+        <Button color="blue" onClick={onClose}>
+          Đóng
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}
diff --git a/src/pages/dashboard/farm/FarmDetail.jsx b/src/pages/dashboard/farm/FarmDetail.jsx
new file mode 100644
index 00000000..5c10b1f2
--- /dev/null
+++ b/src/pages/dashboard/farm/FarmDetail.jsx
@@ -0,0 +1,390 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import {
+  Typography,
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+} from "@material-tailwind/react";
+import { PlayIcon } from "@heroicons/react/24/outline";
+
+const BASE_URL = "https://api-ndolv2.nongdanonline.cc";
+
+const Info = ({ label, value }) => (
+  <div className="flex flex-col gap-1">
+    <Typography className="text-sm font-medium text-gray-800">{label}</Typography>
+    <Typography className="text-sm text-blue-gray-700">
+      {value !== null && value !== undefined && value !== "" ? value : "—"}
+    </Typography>
+  </div>
+);
+
+const mapToLabel = (arr, options) => {
+  if (!arr || arr.length === 0) return "—";
+  const values = typeof arr === "string" ? arr.split(",").map((v) => v.trim()) : arr;
+  return values.map((v) => options.find((o) => o.value === v)?.label || v).join(", ");
+};
+
+const serviceOptions = [
+  { label: "Bán trực tiếp", value: "direct_selling" },
+  { label: "Bán thức ăn", value: "feed_selling" },
+  { label: "Phối trộn thức ăn", value: "custom_feed_blending" },
+  { label: "Dịch vụ sơ chế", value: "processing_service" },
+  { label: "Dịch vụ lưu kho", value: "storage_service" },
+  { label: "Dịch vụ vận chuyển", value: "transport_service" },
+  { label: "Dịch vụ khác", value: "other_services" },
+];
+
+const featureOptions = [
+  { label: "Mô hình aquaponic", value: "aquaponic_model" },
+  { label: "Chứng nhận VietGAP", value: "viet_gap_cert" },
+  { label: "Chứng nhận hữu cơ", value: "organic_cert" },
+  { label: "Nông trại thông minh", value: "smart_farm" },
+  { label: "Tự động hóa", value: "automation" },
+  { label: "Sử dụng IoT", value: "iot_enabled" },
+];
+
+export default function FarmDetail({ open, onClose, farmId }) {
+  const [selectedVideo, setSelectedVideo] = useState(null);
+  const [farm, setFarm] = useState(null);
+  const [error, setError] = useState(null);
+  const [images, setImages] = useState([]);
+  const [videos, setVideos] = useState([]);
+  const [videoCount, setVideoCount] = useState(0);
+  const [showChanges, setShowChanges] = useState(false);
+  const [questions, setQuestions] = useState([]);
+  const [answers, setAnswers] = useState([]);
+  const [loadingQuestions, setLoadingQuestions] = useState(true);
+  const [loadingAnswers, setLoadingAnswers] = useState(true);
+
+  const getOpts = () => ({
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem("token")}`,
+      "Content-Type": "application/json",
+    },
+  });
+
+  const fetchDetail = async () => {
+    if (!farmId) return;
+    try {
+      const res = await axios.get(`${BASE_URL}/adminfarms/${farmId}`, getOpts());
+      setFarm(res.data?.data || res.data);
+    } catch (err) {
+      setError(err.response?.data?.message || err.message);
+      setFarm(null);
+    }
+  };
+
+  const fetchImages = async () => {
+    try {
+      const [farmRes, imageRes] = await Promise.all([
+        axios.get(`${BASE_URL}/adminfarms/${farmId}`, getOpts()),
+        axios.get(`${BASE_URL}/farm-pictures/${farmId}`, getOpts()),
+      ]);
+
+      const user = farmRes.data?.data?.ownerInfo;
+      const farmImages = imageRes.data?.data || [];
+
+      const avatarImage = user?.avatar
+        ? [{ url: user.avatar, isAvatar: true }]
+        : [];
+
+      setImages([...avatarImage, ...farmImages]);
+    } catch (err) {
+      console.error("Lỗi ảnh:", err);
+    }
+  };
+
+  const fetchFarmVideos = async () => {
+    try {
+      const res = await axios.get(`${BASE_URL}/admin-video-farm/farm/${farmId}`, getOpts());
+      setVideos(res.data?.data || []);
+      setVideoCount((res.data?.data || []).length);
+    } catch (err) {
+      console.error("Lỗi video:", err);
+      setVideos([]);
+      setVideoCount(0);
+    }
+  };
+
+  const fetchQuestions = async () => {
+    setLoadingQuestions(true);
+    try {
+      const res = await axios.get(`${BASE_URL}/admin-questions?limit=100`, getOpts());
+      setQuestions(Array.isArray(res.data) ? res.data : res.data?.data || []);
+    } catch (err) {
+      console.error("Lỗi câu hỏi:", err);
+      setQuestions([]);
+    } finally {
+      setLoadingQuestions(false);
+    }
+  };
+
+  const fetchAnswers = async () => {
+    setLoadingAnswers(true);
+    try {
+      const res = await axios.get(`${BASE_URL}/answers/by-farm/${farmId}`, getOpts());
+      setAnswers(res.data || []);
+    } catch (err) {
+      console.error("Lỗi câu trả lời:", err);
+    } finally {
+      setLoadingAnswers(false);
+    }
+  };
+
+  const handleToggleChanges = async () => {
+    if (!showChanges) {
+      await fetchQuestions();
+      await fetchAnswers();
+    }
+    setShowChanges(!showChanges);
+  };
+
+  useEffect(() => {
+    if (open && farmId) {
+      fetchDetail();
+      fetchImages();
+      fetchFarmVideos();
+    }
+  }, [open, farmId]);
+
+  if (!open) return null;
+
+  return (
+    <div className="p-4 bg-white rounded-md shadow-md" style={{ maxHeight: "80vh", overflowY: "auto" }}>
+      <div className="max-w-6xl mx-auto space-y-6">
+        {error && <Typography color="red">{error}</Typography>}
+
+        {!farm ? (
+          <Typography color="red">Không tìm thấy dữ liệu</Typography>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+              <Info label="Chủ sở hữu" value={farm.ownerInfo?.name} />
+              <Info label="Tên nông trại" value={farm.name} />
+              <Info label="Mã nông trại" value={farm.code} />
+              <Info label="Tags" value={(farm.tags || []).join(", ")} />
+              <Info label="Trạng thái" value={
+                farm.status === "pending" ? "Chờ duyệt" :
+                farm.status === "active" ? "Đang hoạt động" : "Đã khóa"
+              } />
+              <Info label="Tỉnh/Thành phố" value={farm.province} />
+              <Info label="Quận/Huyện" value={farm.district} />
+              <Info label="Phường/Xã" value={farm.ward} />
+              <Info label="Đường" value={farm.street} />
+              <Info label="Vị trí tổng quát" value={farm.location} />
+              <Info label="Tổng diện tích (m²)" value={farm.area} />
+              <Info label="Đất canh tác (m²)" value={farm.cultivatedArea} />
+              <Info label="Dịch vụ" value={mapToLabel(farm.services, serviceOptions)} />
+              <Info label="Tính năng" value={mapToLabel(farm.features, featureOptions)} />
+              <Info label="Số điện thoại" value={farm.phone} />
+              <Info label="Zalo" value={farm.zalo} />
+              <Info label="Số video nông trại" value={videoCount} />
+            </div>
+
+            {farm.description && (
+              <div>
+                <Typography variant="h6" className="mb-2 text-blue-gray-900">Mô tả</Typography>
+                <Typography className="text-sm text-blue-gray-700 whitespace-pre-wrap">
+                  {farm.description}
+                </Typography>
+              </div>
+            )}
+                  
+                  {/* hình ảnh chó */}
+            <div>
+              <Typography variant="h6" className="mb-2 text-blue-gray-900">Hình ảnh</Typography>
+              {images.length > 0 ? (
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+                  {images.map((img, idx) => (
+                    <div key={idx}>
+                      <img
+                        src={`${BASE_URL}${post.images[0]}`}
+                        alt={img.isAvatar ? "Ảnh" : `Ảnh ${idx + 1}`}
+                        className="w-full h-40 object-cover rounded-lg border shadow-sm"
+                      />
+                      {img.isAvatar && (
+                        <Typography className="text-xs text-center text-gray-600 mt-1">Ảnh</Typography>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <Typography className="text-sm italic text-gray-500">Chưa có hình ảnh</Typography>
+              )}
+            </div>
+
+            <div className="mt-6">
+              <Typography variant="h6" className="mb-2 text-blue-gray-900">Danh sách video</Typography>
+              {videos.length > 0 ? (
+                <div className="border border-gray-200 rounded-md max-h-[400px] overflow-y-auto">
+                  <table className="min-w-full table-auto text-sm text-left">
+                    <thead className="bg-gray-100 sticky top-0 z-10">
+                      <tr>
+                        <th className="border px-3 py-2">#</th>
+                        <th className="border px-3 py-2">Tiêu đề</th>
+                        <th className="border px-3 py-2">Người đăng</th>
+                        <th className="border px-3 py-2">Ngày đăng</th>
+                        <th className="border px-3 py-2">Trạng thái</th>
+                        <th className="border px-3 py-2">Xem</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {videos.map((video, idx) => (
+                        <tr key={video._id || idx} className="hover:bg-gray-50">
+                          <td className="border px-3 py-2">{idx + 1}</td>
+                          <td className="border px-3 py-2">{video.title}</td>
+                          <td className="border px-3 py-2">{video.uploadedBy?.fullName || video.uploadedBy?.name || "—"}</td>
+                          <td className="border px-3 py-2">{new Date(video.createdAt).toLocaleDateString()}</td>
+                          <td className="border px-3 py-2">
+                          <span className={`px-2 py-1 rounded text-xs font-semibold
+                            ${video.status === "active" ? "text-green-700 bg-green-100"
+                              : video.status === "pending" ? "text-yellow-700 bg-yellow-100"
+                              : video.status === "deleted" ? "text-red-700 bg-red-100"
+                              : "text-gray-700 bg-gray-100"}`}>
+                            {video.status === "uploaded"
+                              ? "uploaded"
+                              : video.status === "pending"
+                              ? "pending"
+                              : video.status === "deleted"
+                              ? "deleted"
+                              : video.status === "failed"
+                              ? "failed"
+                              : "lổi video"}
+                          </span>
+                        </td>
+
+                          <td className="border px-3 py-2">
+                            <Button
+                              variant="text"
+                              size="sm"
+                              color="blue"
+                              onClick={() => setSelectedVideo(video)}
+                              className="flex items-center gap-1"
+                            >
+                              <PlayIcon className="h-4 w-4" />
+                              Xem
+                            </Button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <Typography className="text-sm italic text-gray-500">Chưa có video nào</Typography>
+              )}
+            </div>
+
+<Dialog open={!!selectedVideo} handler={() => setSelectedVideo(null)} size="lg">
+  <DialogHeader>{selectedVideo?.title || "Xem video"}</DialogHeader>
+
+  <DialogBody divider className="flex justify-center">
+  {selectedVideo ? (() => {
+    const videoSrc = selectedVideo.localFilePath?.startsWith("http")
+      ? selectedVideo.localFilePath
+      : selectedVideo.localFilePath
+      ? `${BASE_URL}${selectedVideo.localFilePath}`
+      : selectedVideo.youtubeLink?.endsWith(".mp4")
+      ? selectedVideo.youtubeLink
+      : null;
+
+    if (videoSrc) {
+      return (
+        <video
+          controls
+          className="max-h-[70vh] w-full rounded shadow"
+        >
+          <source src={videoSrc} type="video/mp4" />
+          Trình duyệt của bạn không hỗ trợ phát video.
+        </video>
+      );
+    }
+
+    if (selectedVideo.youtubeLink) {
+      const youtubeId = selectedVideo.youtubeLink.match(/(?:v=|\/embed\/|\.be\/)([^\s&?]+)/)?.[1];
+      return (
+        <iframe
+          src={`https://www.youtube.com/embed/${youtubeId}`}
+          title="YouTube video"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          className="h-[360px] rounded shadow w-full"
+        ></iframe>
+      );
+    }
+
+      return <Typography className="text-red-500">Không tìm thấy video.</Typography>;
+  })() : (
+    <Typography className="text-red-500">Không tìm thấy video.</Typography>
+  )}
+</DialogBody>
+
+
+  <DialogFooter>
+    <Button color="blue" onClick={() => setSelectedVideo(null)}>
+      Đóng
+    </Button>
+  </DialogFooter>
+</Dialog>
+
+
+
+            <div className="mt-6">
+              <Button onClick={handleToggleChanges} color="blue" variant="outlined" size="sm">
+                Xem câu hỏi và trả lời
+              </Button>
+            </div>
+
+            <Dialog open={showChanges} handler={handleToggleChanges} size="lg">
+              <DialogHeader>Danh sách câu hỏi và câu trả lời</DialogHeader>
+              <DialogBody className="space-y-4 max-h-[70vh] overflow-y-auto">
+                {loadingQuestions || loadingAnswers ? (
+                  <Typography className="text-sm text-blue-500">Đang tải dữ liệu...</Typography>
+                ) : questions.length === 0 ? (
+                  <Typography className="text-sm text-gray-500 italic">Không có câu hỏi nào.</Typography>
+                ) : (
+                  questions.map((q, idx) => {
+                    const match = answers.find((a) => a.question?._id === q._id);
+                    const ans = match?.answer;
+                    return (
+                      <div key={q._id} className="border p-3 rounded-lg bg-gray-50">
+                        <Typography className="text-sm font-semibold text-gray-800">
+                          {idx + 1}. {q.text}
+                        </Typography>
+                        {ans ? (
+                          <div className="mt-1 space-y-1 text-sm text-blue-gray-700">
+                            {ans.selectedOptions?.length > 0 && <div>Chọn: {ans.selectedOptions.join(", ")}</div>}
+                            {ans.otherText && <div>Khác: {ans.otherText}</div>}
+                            {ans.uploadedFiles?.length > 0 && (
+                              <div className="space-y-1">
+                                {ans.uploadedFiles.map((f, i) => (
+                                  <a key={i} href={f} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline block">
+                                    File {i + 1}
+                                  </a>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        ) : (
+                          <Typography className="text-sm text-red-500 italic mt-1">
+                            Chưa có câu trả lời
+                          </Typography>
+                        )}
+                      </div>
+                    );
+                  })
+                )}
+              </DialogBody>
+              <DialogFooter>
+                <Button color="blue" onClick={handleToggleChanges}>Đóng</Button>
+              </DialogFooter>
+            </Dialog>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/dashboard/farm/FarmPictures.jsx b/src/pages/dashboard/farm/FarmPictures.jsx
new file mode 100644
index 00000000..6ada392e
--- /dev/null
+++ b/src/pages/dashboard/farm/FarmPictures.jsx
@@ -0,0 +1,272 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  Input,
+  Typography,
+} from "@material-tailwind/react";
+
+const BASE_URL = "https://api-ndolv2.nongdanonline.cc";
+const getOpts = () => ({
+  headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+});
+
+export default function FarmPictures({ farmId }) {
+  const [pictures, setPictures] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const [editingPic, setEditingPic] = useState(null);
+  const [editingDes, setEditingDes] = useState("");
+  const [editingFile, setEditingFile] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+
+  const [adding, setAdding] = useState(false);
+  const [newImage, setNewImage] = useState(null);
+  const [newDes, setNewDes] = useState("");
+
+  useEffect(() => {
+    if (!farmId) return;
+
+    const fetchPictures = async () => {
+      try {
+        const res = await axios.get(`${BASE_URL}/farm-pictures/${farmId}`, getOpts());
+        const list = Array.isArray(res.data) ? res.data : res.data?.data || [];
+        setPictures(list);
+      } catch (err) {
+        if (err.response?.status === 404) {
+          setPictures([]);
+        } else {
+          setError(err.response?.data?.message || err.message);
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPictures();
+  }, [farmId]);
+
+  const handleAdd = async () => {
+    if (!newImage) {
+      alert("Vui lòng chọn file ảnh.");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("image", newImage);
+    formData.append("description", newDes);
+
+    try {
+      await axios.post(`${BASE_URL}/farm-pictures/${farmId}`, formData, {
+        ...getOpts(),
+        headers: {
+          ...getOpts().headers,
+          "Content-Type": "multipart/form-data",
+        },
+      });
+
+      alert("Thêm ảnh thành công");
+      setAdding(false);
+      setNewImage(null);
+      setNewDes("");
+
+      const res = await axios.get(`${BASE_URL}/farm-pictures/${farmId}`, getOpts());
+      const list = Array.isArray(res.data) ? res.data : res.data?.data || [];
+      setPictures(list);
+    } catch (err) {
+      alert("Lỗi thêm ảnh: " + (err.response?.data?.message || err.message));
+    }
+  };
+
+  const handleUpdate = async () => {
+    const formData = new FormData();
+    formData.append("description", editingDes);
+    if (editingFile) {
+      formData.append("image", editingFile);
+    }
+
+    try {
+      await axios.put(`${BASE_URL}/farm-pictures/update/${editingPic._id}`, formData, {
+        ...getOpts(),
+        headers: {
+          ...getOpts().headers,
+          "Content-Type": "multipart/form-data",
+        },
+      });
+
+      const res = await axios.get(`${BASE_URL}/farm-pictures/${farmId}`, getOpts());
+      const list = Array.isArray(res.data) ? res.data : res.data?.data || [];
+      setPictures(list);
+
+      alert("Cập nhật ảnh thành công!");
+      setEditingPic(null);
+      setEditingFile(null);
+    } catch (err) {
+      alert("Lỗi cập nhật: " + (err.response?.data?.message || err.message));
+    }
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await axios.delete(`${BASE_URL}/farm-pictures/${id}`, getOpts());
+      setPictures((prev) => prev.filter((pic) => pic._id !== id));
+      alert("Xoá ảnh thành công!");
+      setConfirmDelete(null);
+    } catch (err) {
+      alert("Lỗi xoá: " + (err.response?.data?.message || err.message));
+    }
+  };
+
+  const getImgSrc = (p) => {
+    if (p.avatarPath) return `${BASE_URL}${p.avatarPath}`;
+    if (p.imageUrl) return `${BASE_URL}${p.imageUrl}`;
+    if (p.path) return `${BASE_URL}/${p.path}`;
+    if (p.fileUrl) return p.fileUrl;
+    if (p.url) return p.url;
+    return "";
+  };
+
+  if (loading) return <Typography>Đang tải ảnh...</Typography>;
+  if (error) return <Typography color="red">Lỗi: {error}</Typography>;
+
+  if (pictures.length === 0 && !adding)
+    return (
+      <>
+        <Typography>Farm này chưa có ảnh nào!</Typography>
+        <Button className="mt-2" color="green" onClick={() => setAdding(true)}>
+          + Thêm ảnh
+        </Button>
+      </>
+    );
+
+  return (
+    <>
+      <div className="flex justify-between items-center mt-4">
+        <Typography variant="h6">Ảnh của farm</Typography>
+        <Button color="green" onClick={() => setAdding(true)}>
+          + Thêm ảnh
+        </Button>
+      </div>
+
+      <div className="mt-4 grid grid-cols-3 gap-4">
+        {pictures.map((pic) => (
+          <div
+            key={pic._id}
+            className="relative group border rounded-lg overflow-hidden shadow-md"
+          >
+            <img
+              src={getImgSrc(pic)}
+              alt={pic.description}
+              className="w-full h-32 object-cover transition-transform duration-200 group-hover:scale-105"
+            />
+            <Typography
+              variant="small"
+              className="text-center py-2 text-xs bg-white"
+            >
+              {pic.description || "Ảnh farm"}
+            </Typography>
+            <div
+              className="absolute inset-0 flex items-center justify-center gap-3 bg-black/40
+               opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            >
+              <Button
+                size="sm"
+                className="bg-white text-blue-600 font-semibold px-4 py-1 text-xs rounded shadow"
+                onClick={() => {
+                  setEditingPic(pic);
+                  setEditingDes(pic.description || "");
+                }}
+              >
+                Sửa
+              </Button>
+              <Button
+                size="sm"
+                className="bg-white text-red-600 font-semibold px-4 py-1 text-xs rounded shadow"
+                onClick={() => setConfirmDelete(pic._id)}
+              >
+                Xóa
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Dialog sửa ảnh */}
+      {editingPic && (
+        <Dialog open={true} handler={() => setEditingPic(null)} size="sm">
+          <DialogHeader>Sửa ảnh</DialogHeader>
+          <DialogBody className="space-y-4">
+            <Input
+              label="Mô tả"
+              value={editingDes}
+              onChange={(e) => setEditingDes(e.target.value)}
+            />
+            <Input
+              type="file"
+              label="Chọn ảnh mới (tùy chọn)"
+              onChange={(e) => setEditingFile(e.target.files[0])}
+            />
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="text" onClick={() => setEditingPic(null)}>
+              Hủy
+            </Button>
+            <Button color="blue" onClick={handleUpdate}>
+              Lưu
+            </Button>
+          </DialogFooter>
+        </Dialog>
+      )}
+
+      {/* Dialog xác nhận xoá */}
+      {confirmDelete && (
+        <Dialog open={true} handler={() => setConfirmDelete(null)} size="xs">
+          <DialogHeader>Xóa ảnh</DialogHeader>
+          <DialogBody>
+            Bạn có chắc chắn muốn xóa ảnh này? Thao tác không thể hoàn tác.
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="text" onClick={() => setConfirmDelete(null)}>
+              Hủy
+            </Button>
+            <Button color="red" onClick={() => handleDelete(confirmDelete)}>
+              Xóa
+            </Button>
+          </DialogFooter>
+        </Dialog>
+      )}
+
+      {/* Dialog thêm ảnh mới */}
+      {adding && (
+        <Dialog open={true} handler={() => setAdding(false)} size="sm">
+          <DialogHeader>Thêm ảnh mới</DialogHeader>
+          <DialogBody className="space-y-4">
+            <Input
+              type="file"
+              label="Chọn ảnh"
+              onChange={(e) => setNewImage(e.target.files[0])}
+            />
+            <Input
+              label="Mô tả"
+              value={newDes}
+              onChange={(e) => setNewDes(e.target.value)}
+            />
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="text" onClick={() => setAdding(false)}>
+              Hủy
+            </Button>
+            <Button color="green" onClick={handleAdd}>
+              Thêm
+            </Button>
+          </DialogFooter>
+        </Dialog>
+      )}
+    </>
+  );
+}
diff --git a/src/pages/dashboard/farm/farms.jsx b/src/pages/dashboard/farm/farms.jsx
new file mode 100644
index 00000000..1d38c702
--- /dev/null
+++ b/src/pages/dashboard/farm/farms.jsx
@@ -0,0 +1,403 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import {
+  Input,
+  Button,
+  Typography,
+  Chip,
+  Tabs,
+  TabsHeader,
+  Tab,
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  IconButton,
+} from "@material-tailwind/react";
+
+import FarmForm from "../user/FarmForm";
+import FarmDetail from "./FarmDetail";
+
+const BASE_URL = "https://api-ndolv2.nongdanonline.cc";
+const getOpts = () => ({
+  headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+});
+
+export function Farms() {
+  const [farms, setFarms] = useState([]);
+  const [allFarms, setAllFarms] = useState([]);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const [tab, setTab] = useState("all");
+  const [search, setSearch] = useState("");
+
+  const [openForm, setOpenForm] = useState(false);
+  const [editingFarm, setEditingFarm] = useState(null);
+
+  const [openMenuId, setOpenMenuId] = useState(null);
+  const [openDetail, setOpenDetail] = useState(false);
+  const [selectedFarmId, setSelectedFarmId] = useState(null);
+
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [deletingFarmId, setDeletingFarmId] = useState(null);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+
+const fetchFarms = async () => {
+  setLoading(true);
+  try {
+    const res = await axios.get(`${BASE_URL}/adminfarms`, {
+      ...getOpts(),
+      params: {
+        limit: 10000,
+      },
+    });
+
+    const farms = res.data?.data || [];
+
+    // 🔽 Lấy video count cho từng farm
+    const farmWithVideoCount = await Promise.all(
+      farms.map(async (farm) => {
+        try {
+          const videoRes = await axios.get(`${BASE_URL}/admin-video-farm/farm/${farm._id}`, getOpts());
+          const videos = videoRes.data?.data || [];
+          return { ...farm, videoCount: videos.length };
+        } catch (err) {
+          console.error("Lỗi khi lấy video của farm:", farm._id);
+          return { ...farm, videoCount: 0 };
+        }
+      })
+    );
+
+    setAllFarms(farmWithVideoCount);
+  } catch (err) {
+    setError(err.response?.data?.message || err.message);
+  } finally {
+    setLoading(false);
+  }
+};
+
+
+  const addFarm = async (data) => {
+    try {
+      await axios.post(`${BASE_URL}/adminfarms`, data, getOpts());
+      await fetchFarms();
+      alert("Tạo farm thành công!");
+    } catch (err) {
+      alert("Lỗi thêm: " + (err.response?.data?.message || err.message));
+    }
+  };
+
+  const editFarm = async (id, data) => {
+    try {
+      await axios.put(`${BASE_URL}/adminfarms/${id}`, data, getOpts());
+      await fetchFarms();
+    } catch (err) {
+      alert("Lỗi sửa: " + (err.response?.data?.message || err.message));
+    }
+  };
+
+  const deleteFarm = async (id) => {
+    try {
+      await axios.delete(`${BASE_URL}/adminfarms/${id}`, getOpts());
+      await fetchFarms();
+    } catch (err) {
+      alert("Lỗi xoá: " + (err.response?.data?.message || err.message));
+    }
+  };
+
+  const changeStatus = async (id, action) => {
+    const actionMap = {
+      activate: "kích hoạt",
+      deactivate: "khóa",
+    };
+
+    if (!window.confirm(`Bạn có chắc chắn muốn ${actionMap[action] || action} farm này không?`)) return;
+
+    try {
+      await axios.patch(`${BASE_URL}/adminfarms/${id}/${action}`, null, getOpts());
+      await fetchFarms();
+    } catch (err) {
+      alert(`Lỗi ${actionMap[action] || action}: ` + (err.response?.data?.message || err.message));
+    }
+  };
+
+  const handleOpenDetail = (id) => {
+    setSelectedFarmId(id);
+    setOpenDetail(true);
+  };
+
+  // ✅ Lọc client-side
+  useEffect(() => {
+    const keyword = search.toLowerCase();
+    const filtered = allFarms
+      .filter((farm) => (tab === "all" || farm.status === tab))
+      .filter((farm) => {
+        return (
+          farm.name?.toLowerCase().includes(keyword) ||
+          farm.code?.toLowerCase().includes(keyword) ||
+          farm.ownerInfo?.name?.toLowerCase().includes(keyword) ||
+          farm.phone?.toLowerCase().includes(keyword) ||
+          farm.location?.toLowerCase().includes(keyword) ||
+          farm.province?.toLowerCase().includes(keyword) ||
+          farm.district?.toLowerCase().includes(keyword) ||
+          farm.ward?.toLowerCase().includes(keyword) ||
+          farm.street?.toLowerCase().includes(keyword) ||
+          String(farm.area).includes(keyword)
+        );
+      });
+    setFarms(filtered);
+    setCurrentPage(1);
+  }, [search, tab, allFarms]);
+
+  useEffect(() => {
+    fetchFarms();
+  }, []);
+
+  const paginatedFarms = farms.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+  const totalPages = Math.ceil(farms.length / itemsPerPage);
+
+  return (
+    <>
+      <div className="p-4">
+        <Typography variant="h5" color="blue-gray" className="font-semibold mb-4">
+          Quản lý nông trại
+        </Typography>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+          <Input
+            label="Tìm kiếm theo tên, mã, chủ sở hữu..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="col-span-2"
+          />
+          <Button onClick={fetchFarms} className="w-full md:w-fit bg-black text-white">
+            TẢI LẠI
+          </Button>
+        </div>
+
+        <div className="mb-4">
+          <Tabs value={tab}>
+            <TabsHeader className="flex-nowrap overflow-x-auto whitespace-nowrap gap-2">
+              <Tab value="all" onClick={() => setTab("all")}>Tất cả</Tab>
+              <Tab value="pending" onClick={() => setTab("pending")}>Chờ duyệt</Tab>
+              <Tab value="active" onClick={() => setTab("active")}>Đang hoạt động</Tab>
+              <Tab value="inactive" onClick={() => setTab("inactive")}>Đã khoá</Tab>
+            </TabsHeader>
+          </Tabs>
+        </div>
+
+        {loading ? (
+          <Typography className="text-indigo-500">Đang tải dữ liệu...</Typography>
+        ) : error ? (
+          <Typography color="red">Lỗi: {error}</Typography>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-[1000px] table-auto text-base">
+              <thead>
+                <tr className="bg-blue-gray-50 text-blue-gray-700 text-sm">
+                  <th className="px-2 py-2 font-semibold uppercase">Tên</th>
+                  <th className="px-2 py-2 font-semibold uppercase">Tags</th>
+                  <th className="px-2 py-2 font-semibold uppercase">Mã</th>
+                  <th className="px-2 py-2 font-semibold uppercase">Chủ sở hữu</th>
+                  <th className="px-2 py-2 font-semibold uppercase">SĐT</th>
+                  <th className="px-2 py-2 font-semibold uppercase">Địa chỉ</th>
+                  <th className="px-2 py-2 font-semibold uppercase">Diện tích</th>
+                  <th className="px-2 py-2 font-semibold uppercase">Số video</th>
+                  <th className="px-2 py-2 font-semibold uppercase">Trạng thái</th>
+                  <th className="px-2 py-2 font-semibold uppercase">Thao tác</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginatedFarms.map((farm) => (
+                  <tr
+                    key={farm._id}
+                    className="border-b hover:bg-indigo-50 transition text-base cursor-pointer"
+                    onClick={() => handleOpenDetail(farm._id)}
+                  >
+                    <td className="px-2 py-2">{farm.name}</td>
+                    <td className="px-2 py-2">
+                          {Array.isArray(farm.tags) && farm.tags.length > 0 ? (
+                            <div className="flex items-center gap-2">
+                              <Chip
+                                size="sm"
+                                value={
+                                  farm.tags[0].length > 10
+                                    ? farm.tags[0].slice(0, 10) + "..."
+                                    : farm.tags[0]
+                                }
+                                className="bg-gray-200 text-gray-800"
+                              />
+                              {farm.tags.length > 1 && (
+                                <span className="text-sm text-gray-600 font-medium">+{farm.tags.length - 1}</span>
+                              )}
+                            </div>
+                          ) : (
+                            <span className="text-gray-400">—</span>
+                          )}
+                      </td>
+                    <td className="px-2 py-2">{farm.code}</td>
+                    <td className="px-2 py-2">{farm.ownerInfo?.name || "—"}</td>
+                    <td className="px-2 py-2">{farm.phone || "—"}</td>
+                    <td className="px-2 py-2">
+                      {farm.location?.length > 10 ? farm.location.slice(0, 10) + "..." : farm.location}
+                    </td>
+                    <td className="px-2 py-2">{farm.area} m²</td>
+                    <td className="px-2 py-2">{farm.videoCount ?? 0}</td>
+                    <td className="px-2 py-2">
+                      <Chip
+                        value={
+                          farm.status === "pending"
+                            ? "Chờ duyệt"
+                            : farm.status === "active"
+                            ? "Đang hoạt động"
+                            : "Đã khóa"
+                        }
+                        color={
+                          farm.status === "pending"
+                            ? "amber"
+                            : farm.status === "inactive"
+                            ? "red"
+                            : "teal"
+                        }
+                        size="sm"
+                      />
+                    </td>
+                    <td className="px-2 py-2" onClick={(e) => e.stopPropagation()}>
+                      <Menu
+                        open={openMenuId === farm._id}
+                        handler={() =>
+                          setOpenMenuId(openMenuId === farm._id ? null : farm._id)
+                        }
+                        allowHover={false}
+                        placement="left-start"
+                      >
+                        <MenuHandler>
+                          <Button
+                            size="sm"
+                            className="bg-gray-100 text-gray-700 hover:bg-gray-200 p-2 min-w-[36px]"
+                          >
+                            •••
+                          </Button>
+                        </MenuHandler>
+                        <MenuList className="z-[999] p-2 min-w-[140px]">
+                          <MenuItem
+                            onClick={() => {
+                              setEditingFarm(farm);
+                              setOpenForm(true);
+                              setOpenMenuId(null);
+                            }}
+                          >
+                            Sửa
+                          </MenuItem>
+                          <MenuItem
+                            className="text-red-500 font-semibold"
+                            onClick={() => {
+                              setDeletingFarmId(farm._id);
+                              setDeleteConfirmOpen(true);
+                              setOpenMenuId(null);
+                            }}
+                          >
+                            Xoá
+                          </MenuItem>
+                          {farm.status === "pending" && (
+                            <>
+                              <MenuItem onClick={() => { changeStatus(farm._id, "activate"); setOpenMenuId(null); }}>Duyệt</MenuItem>
+                              <MenuItem onClick={() => { changeStatus(farm._id, "deactivate"); setOpenMenuId(null); }}>Từ chối</MenuItem>
+                            </>
+                          )}
+                          {farm.status === "active" && (
+                            <MenuItem onClick={() => { changeStatus(farm._id, "deactivate"); setOpenMenuId(null); }}>Khóa</MenuItem>
+                          )}
+                          {farm.status === "inactive" && (
+                            <MenuItem onClick={() => { changeStatus(farm._id, "activate"); setOpenMenuId(null); }}>Mở khóa</MenuItem>
+                          )}
+                        </MenuList>
+                      </Menu>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            {totalPages > 1 && (
+              <div className="flex justify-center items-center gap-4 mt-4 text-sm">
+                <Button
+                  size="sm"
+                  variant="outlined"
+                  className="rounded-md px-4 py-1"
+                  disabled={currentPage === 1}
+                  onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+                >
+                  <span className={currentPage === 1 ? "text-gray-400 font-semibold" : "font-semibold"}>
+                    TRANG TRƯỚC
+                  </span>
+                </Button>
+
+                <Typography variant="small" className="text-black font-medium">
+                  Trang {currentPage} / {totalPages}
+                </Typography>
+
+                <Button
+                  size="sm"
+                  variant="outlined"
+                  className="rounded-md px-4 py-1"
+                  disabled={currentPage === totalPages}
+                  onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
+                >
+                  <span className={currentPage === totalPages ? "text-gray-400 font-semibold" : "font-semibold"}>
+                    TRANG SAU
+                  </span>
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Form tạo/sửa */}
+      <FarmForm
+        open={openForm}
+        onClose={() => {
+          setOpenForm(false);
+          setEditingFarm(null);
+        }}
+        initialData={editingFarm}
+        onSubmit={(data) => {
+          if (editingFarm) editFarm(editingFarm._id, data);
+          else addFarm(data);
+        }}
+      />
+
+      {/* Chi tiết nông trại */}
+      <Dialog open={openDetail} size="xl" handler={setOpenDetail} dismiss={{ outsidePress: false }}>
+        <DialogHeader className="justify-between">
+          Chi tiết nông trại
+          <IconButton variant="text" onClick={() => setOpenDetail(false)} className="ml-auto">✕</IconButton>
+        </DialogHeader>
+        <DialogBody className="p-4">
+          <FarmDetail open={openDetail} onClose={() => setOpenDetail(false)} farmId={selectedFarmId} />
+        </DialogBody>
+      </Dialog>
+
+      {/* Xác nhận xoá */}
+      <Dialog open={deleteConfirmOpen} handler={setDeleteConfirmOpen} size="sm">
+        <DialogHeader>Xác nhận xoá</DialogHeader>
+        <DialogBody>
+          Bạn có chắc chắn muốn xoá nông trại này? Hành động này không thể hoàn tác.
+        </DialogBody>
+        <div className="flex justify-end gap-2 p-4">
+          <Button color="gray" onClick={() => setDeleteConfirmOpen(false)}>Huỷ</Button>
+          <Button color="red" onClick={() => { deleteFarm(deletingFarmId); setDeleteConfirmOpen(false); }}>Xoá</Button>
+        </div>
+      </Dialog>
+    </>
+  );
+}
+
+export default Farms;
diff --git a/src/pages/dashboard/home.jsx b/src/pages/dashboard/home.jsx
index 2c700669..5af6a72d 100644
--- a/src/pages/dashboard/home.jsx
+++ b/src/pages/dashboard/home.jsx
@@ -1,258 +1,65 @@
-import React from "react";
-import {
-  Typography,
-  Card,
-  CardHeader,
-  CardBody,
-  IconButton,
-  Menu,
-  MenuHandler,
-  MenuList,
-  MenuItem,
-  Avatar,
-  Tooltip,
-  Progress,
-} from "@material-tailwind/react";
-import {
-  EllipsisVerticalIcon,
-  ArrowUpIcon,
-} from "@heroicons/react/24/outline";
-import { StatisticsCard } from "@/widgets/cards";
-import { StatisticsChart } from "@/widgets/charts";
-import {
-  statisticsCardsData,
-  statisticsChartsData,
-  projectsTableData,
-  ordersOverviewData,
-} from "@/data";
-import { CheckCircleIcon, ClockIcon } from "@heroicons/react/24/solid";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { Typography, Card, CardBody } from "@material-tailwind/react";
+import { UserIcon } from "@heroicons/react/24/solid";
+
+export default function Home() {
+  const [loginStats, setLoginStats] = useState(null);
+
+  useEffect(() => {
+    const fetchLoginStats = async () => {
+      try {
+        const token = localStorage.getItem("token");  // nhớ lưu token trước đó
+        const response = await axios.get(
+          "https://api-ndolv2.nongdanonline.cc/user-dashboard/login-stats",
+          {
+            headers: { Authorization: `Bearer ${token}` }
+          }
+        );
+        setLoginStats(response.data);
+      } catch (error) {
+        console.error("Error fetching login stats:", error);
+      }
+    };
+    fetchLoginStats();
+  }, []);
 
-export function Home() {
   return (
-    <div className="mt-12">
-      <div className="mb-12 grid gap-y-10 gap-x-6 md:grid-cols-2 xl:grid-cols-4">
-        {statisticsCardsData.map(({ icon, title, footer, ...rest }) => (
-          <StatisticsCard
-            key={title}
-            {...rest}
-            title={title}
-            icon={React.createElement(icon, {
-              className: "w-6 h-6 text-white",
-            })}
-            footer={
-              <Typography className="font-normal text-blue-gray-600">
-                <strong className={footer.color}>{footer.value}</strong>
-                &nbsp;{footer.label}
-              </Typography>
-            }
-          />
-        ))}
-      </div>
-      <div className="mb-6 grid grid-cols-1 gap-y-12 gap-x-6 md:grid-cols-2 xl:grid-cols-3">
-        {statisticsChartsData.map((props) => (
-          <StatisticsChart
-            key={props.title}
-            {...props}
-            footer={
-              <Typography
-                variant="small"
-                className="flex items-center font-normal text-blue-gray-600"
-              >
-                <ClockIcon strokeWidth={2} className="h-4 w-4 text-blue-gray-400" />
-                &nbsp;{props.footer}
-              </Typography>
-            }
-          />
-        ))}
-      </div>
-      <div className="mb-4 grid grid-cols-1 gap-6 xl:grid-cols-3">
-        <Card className="overflow-hidden xl:col-span-2 border border-blue-gray-100 shadow-sm">
-          <CardHeader
-            floated={false}
-            shadow={false}
-            color="transparent"
-            className="m-0 flex items-center justify-between p-6"
-          >
+    <div className="p-6 grid gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
+      {loginStats ? (
+        <>
+          <Card className="p-4 flex items-center">
+            <UserIcon className="w-8 h-8 text-blue-500 mr-4" />
             <div>
-              <Typography variant="h6" color="blue-gray" className="mb-1">
-                Projects
-              </Typography>
-              <Typography
-                variant="small"
-                className="flex items-center gap-1 font-normal text-blue-gray-600"
-              >
-                <CheckCircleIcon strokeWidth={3} className="h-4 w-4 text-blue-gray-200" />
-                <strong>30 done</strong> this month
-              </Typography>
+              <Typography variant="h6">Today's Login</Typography>
+              <Typography variant="h4">{loginStats.todayLogin}</Typography>
             </div>
-            <Menu placement="left-start">
-              <MenuHandler>
-                <IconButton size="sm" variant="text" color="blue-gray">
-                  <EllipsisVerticalIcon
-                    strokeWidth={3}
-                    fill="currenColor"
-                    className="h-6 w-6"
-                  />
-                </IconButton>
-              </MenuHandler>
-              <MenuList>
-                <MenuItem>Action</MenuItem>
-                <MenuItem>Another Action</MenuItem>
-                <MenuItem>Something else here</MenuItem>
-              </MenuList>
-            </Menu>
-          </CardHeader>
-          <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
-            <table className="w-full min-w-[640px] table-auto">
-              <thead>
-                <tr>
-                  {["companies", "members", "budget", "completion"].map(
-                    (el) => (
-                      <th
-                        key={el}
-                        className="border-b border-blue-gray-50 py-3 px-6 text-left"
-                      >
-                        <Typography
-                          variant="small"
-                          className="text-[11px] font-medium uppercase text-blue-gray-400"
-                        >
-                          {el}
-                        </Typography>
-                      </th>
-                    )
-                  )}
-                </tr>
-              </thead>
-              <tbody>
-                {projectsTableData.map(
-                  ({ img, name, members, budget, completion }, key) => {
-                    const className = `py-3 px-5 ${
-                      key === projectsTableData.length - 1
-                        ? ""
-                        : "border-b border-blue-gray-50"
-                    }`;
-
-                    return (
-                      <tr key={name}>
-                        <td className={className}>
-                          <div className="flex items-center gap-4">
-                            <Avatar src={img} alt={name} size="sm" />
-                            <Typography
-                              variant="small"
-                              color="blue-gray"
-                              className="font-bold"
-                            >
-                              {name}
-                            </Typography>
-                          </div>
-                        </td>
-                        <td className={className}>
-                          {members.map(({ img, name }, key) => (
-                            <Tooltip key={name} content={name}>
-                              <Avatar
-                                src={img}
-                                alt={name}
-                                size="xs"
-                                variant="circular"
-                                className={`cursor-pointer border-2 border-white ${
-                                  key === 0 ? "" : "-ml-2.5"
-                                }`}
-                              />
-                            </Tooltip>
-                          ))}
-                        </td>
-                        <td className={className}>
-                          <Typography
-                            variant="small"
-                            className="text-xs font-medium text-blue-gray-600"
-                          >
-                            {budget}
-                          </Typography>
-                        </td>
-                        <td className={className}>
-                          <div className="w-10/12">
-                            <Typography
-                              variant="small"
-                              className="mb-1 block text-xs font-medium text-blue-gray-600"
-                            >
-                              {completion}%
-                            </Typography>
-                            <Progress
-                              value={completion}
-                              variant="gradient"
-                              color={completion === 100 ? "green" : "blue"}
-                              className="h-1"
-                            />
-                          </div>
-                        </td>
-                      </tr>
-                    );
-                  }
-                )}
-              </tbody>
-            </table>
-          </CardBody>
-        </Card>
-        <Card className="border border-blue-gray-100 shadow-sm">
-          <CardHeader
-            floated={false}
-            shadow={false}
-            color="transparent"
-            className="m-0 p-6"
-          >
-            <Typography variant="h6" color="blue-gray" className="mb-2">
-              Orders Overview
-            </Typography>
-            <Typography
-              variant="small"
-              className="flex items-center gap-1 font-normal text-blue-gray-600"
-            >
-              <ArrowUpIcon
-                strokeWidth={3}
-                className="h-3.5 w-3.5 text-green-500"
-              />
-              <strong>24%</strong> this month
-            </Typography>
-          </CardHeader>
-          <CardBody className="pt-0">
-            {ordersOverviewData.map(
-              ({ icon, color, title, description }, key) => (
-                <div key={title} className="flex items-start gap-4 py-3">
-                  <div
-                    className={`relative p-1 after:absolute after:-bottom-6 after:left-2/4 after:w-0.5 after:-translate-x-2/4 after:bg-blue-gray-50 after:content-[''] ${
-                      key === ordersOverviewData.length - 1
-                        ? "after:h-0"
-                        : "after:h-4/6"
-                    }`}
-                  >
-                    {React.createElement(icon, {
-                      className: `!w-5 !h-5 ${color}`,
-                    })}
-                  </div>
-                  <div>
-                    <Typography
-                      variant="small"
-                      color="blue-gray"
-                      className="block font-medium"
-                    >
-                      {title}
-                    </Typography>
-                    <Typography
-                      as="span"
-                      variant="small"
-                      className="text-xs font-medium text-blue-gray-500"
-                    >
-                      {description}
-                    </Typography>
-                  </div>
-                </div>
-              )
-            )}
-          </CardBody>
-        </Card>
-      </div>
+          </Card>
+          <Card className="p-4 flex items-center">
+            <UserIcon className="w-8 h-8 text-green-500 mr-4" />
+            <div>
+              <Typography variant="h6">Yesterday's Login</Typography>
+              <Typography variant="h4">{loginStats.yesterdayLogin}</Typography>
+            </div>
+          </Card>
+          <Card className="p-4 flex items-center">
+            <UserIcon className="w-8 h-8 text-orange-500 mr-4" />
+            <div>
+              <Typography variant="h6">Last 7 Days Login</Typography>
+              <Typography variant="h4">{loginStats.last7DaysLogin}</Typography>
+            </div>
+          </Card>
+          <Card className="p-4 flex items-center">
+            <UserIcon className="w-8 h-8 text-red-500 mr-4" />
+            <div>
+              <Typography variant="h6">Last 30 Days Login</Typography>
+              <Typography variant="h4">{loginStats.last30DaysLogin}</Typography>
+            </div>
+          </Card>
+        </>
+      ) : (
+        <Typography>Loading login stats...</Typography>
+      )}
     </div>
   );
 }
-
-export default Home;
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index 7651895e..3f755af3 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -1,4 +1,15 @@
-export * from "@/pages/dashboard/home";
-export * from "@/pages/dashboard/profile";
-export * from "@/pages/dashboard/tables";
-export * from "@/pages/dashboard/notifications";
+export { default as Home } from "./home";
+export * from "@/pages/dashboard/Questions/answerstable";
+export * from "@/pages/dashboard/farm/farms";
+export * from "@/pages/dashboard/Questions/Questions";
+export * from "@/pages/dashboard/VideoFarms/ListVideo";
+export * from "@/pages/dashboard/post/Post";
+export * from "@/pages/dashboard/AdminReports"
+export * from "@/pages/dashboard/AdminCommentPost/CommentPost";
+export { default as Users } from "./user/users";
+
+
+
+
+
+
diff --git a/src/pages/dashboard/notifications.jsx b/src/pages/dashboard/notifications.jsx
deleted file mode 100644
index f4be88b0..00000000
--- a/src/pages/dashboard/notifications.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-import {
-  Typography,
-  Alert,
-  Card,
-  CardHeader,
-  CardBody,
-} from "@material-tailwind/react";
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
-
-export function Notifications() {
-  const [showAlerts, setShowAlerts] = React.useState({
-    blue: true,
-    green: true,
-    orange: true,
-    red: true,
-  });
-  const [showAlertsWithIcon, setShowAlertsWithIcon] = React.useState({
-    blue: true,
-    green: true,
-    orange: true,
-    red: true,
-  });
-  const alerts = ["gray", "green", "orange", "red"];
-
-  return (
-    <div className="mx-auto my-20 flex max-w-screen-lg flex-col gap-8">
-      <Card>
-        <CardHeader
-          color="transparent"
-          floated={false}
-          shadow={false}
-          className="m-0 p-4"
-        >
-          <Typography variant="h5" color="blue-gray">
-            Alerts
-          </Typography>
-        </CardHeader>
-        <CardBody className="flex flex-col gap-4 p-4">
-          {alerts.map((color) => (
-            <Alert
-              key={color}
-              open={showAlerts[color]}
-              color={color}
-              onClose={() => setShowAlerts((current) => ({ ...current, [color]: false }))}
-            >
-              A simple {color} alert with an <a href="#">example link</a>. Give
-              it a click if you like.
-            </Alert>
-          ))}
-        </CardBody>
-      </Card>
-      <Card>
-        <CardHeader
-          color="transparent"
-          floated={false}
-          shadow={false}
-          className="m-0 p-4"
-        >
-          <Typography variant="h5" color="blue-gray">
-            Alerts with Icon
-          </Typography>
-        </CardHeader>
-        <CardBody className="flex flex-col gap-4 p-4">
-          {alerts.map((color) => (
-            <Alert
-              key={color}
-              open={showAlertsWithIcon[color]}
-              color={color}
-              icon={
-                <InformationCircleIcon strokeWidth={2} className="h-6 w-6" />
-              }
-              onClose={() => setShowAlertsWithIcon((current) => ({
-                ...current,
-                [color]: false,
-              }))}
-            >
-              A simple {color} alert with an <a href="#">example link</a>. Give
-              it a click if you like.
-            </Alert>
-          ))}
-        </CardBody>
-      </Card>
-    </div>
-  );
-}
-
-export default Notifications;
diff --git a/src/pages/dashboard/post/Post.jsx b/src/pages/dashboard/post/Post.jsx
new file mode 100644
index 00000000..cb9ba843
--- /dev/null
+++ b/src/pages/dashboard/post/Post.jsx
@@ -0,0 +1,549 @@
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Typography,
+  Avatar,
+  Chip,
+  Dialog,
+  Input,
+  Menu,
+  MenuHandler,
+  MenuList,
+  MenuItem,
+  IconButton,
+} from "@material-tailwind/react";
+import PostDetailDialog from "./PostDetail";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { useNavigate } from "react-router-dom";
+
+const BASE_URL = "https://api-ndolv2.nongdanonline.cc";
+
+export function PostList() {
+  const [posts, setPosts] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [openEdit, setOpenEdit] = useState(false);
+  const [selectedPost, setSelectedPost] = useState(null);
+  const [users, setUsers] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const postsPerPage = 10;
+
+  const [filterUserId, setFilterUserId] = useState("");
+  const [filterTitle, setFilterTitle] = useState("");
+  const [filterSortLikes, setFilterSortLikes] = useState("");
+  const [filterSortComments, setFilterSortComments] = useState("");
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+  const [selectedPostId, setSelectedPostId] = useState(null);
+  const [filterTag, setFilterTag] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+
+  const [totalPages, setTotalPages] = useState(1);
+  const navigate = useNavigate();
+
+  const fetchAllUsers  = async () => {
+    try {
+      const token = localStorage.getItem("token");
+      let allUsers = [];
+      let page = 1;
+      let totalPages = 1;
+
+      do {
+        const res = await fetch(`${BASE_URL}/admin-users?page=${page}&limit=50`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        const json = await res.json();
+        console.log(`Trang ${page} raw json:`, json);
+
+        if (res.ok && Array.isArray(json.data)) {
+          const usersPage = json.data;
+          console.log(`Trang ${page} trả về:`, usersPage);
+          allUsers = allUsers.concat(usersPage);
+          totalPages = json.totalPages || 1; 
+          page++;
+      } else {
+          console.warn("Danh sách users không hợp lệ:", json);
+          break;
+      } 
+      } while (page <= totalPages);
+        setUsers(allUsers);
+      } catch (err) {
+      console.error("Fetch users error:", err);
+      setUsers([]);
+    }
+  };
+
+  const fetchPosts = async () => {
+    setLoading(true);
+    const token = localStorage.getItem("token");
+    const queryParams = new URLSearchParams({
+      page: currentPage,
+      limit: postsPerPage,
+    });
+
+
+    if (filterUserId) queryParams.append("userId", filterUserId);
+    if (filterTitle) queryParams.append("title", filterTitle);
+    if (filterStatus === "true") queryParams.append("status", true);
+    else if (filterStatus === "false") queryParams.append("status", false);
+    if (filterSortLikes) queryParams.append("sortLikes", filterSortLikes);
+    if (filterSortComments) queryParams.append("sortComments", filterSortComments);
+    if (filterTag) queryParams.append("tags", filterTag);
+
+    try {
+      const res = await fetch(
+        `${BASE_URL}/admin-post-feed?${queryParams.toString()}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      const json = await res.json();
+      if (res.ok) {
+        const fetchPosts = json.data || [];
+        const postsWithComments = await Promise.all(
+        fetchPosts.map(async (post) => {
+          try {
+            const commentRes = await fetch(
+              `${BASE_URL}/admin-comment-post/post/${post.id}`,
+              {
+                headers: { Authorization: `Bearer ${token}` },
+              }
+            );
+            const commentJson = await commentRes.json();
+            if (commentRes.ok) {
+              const comments = commentJson.comments || [];
+              let totalReplies = 0;
+              comments.forEach((c) => {
+                totalReplies += c.replies?.length || 0;
+              });
+              return {
+                ...post,
+                commentCount: comments.length + totalReplies,
+              };
+            } else {
+              console.warn("Không lấy được comment cho post:", post.id);
+              return { ...post, commentCount: 0 };
+            }
+          } catch (err) {
+            console.error("Fetch comment error:", err);
+            return { ...post, commentCount: 0 };
+          }
+        })
+      );
+        setPosts(postsWithComments);
+        setTotalPages(json.totalPages || 1);
+      } else {
+        console.error("API lỗi:", json.message);
+        alert("Không lấy được dữ liệu: " + json.message);
+      }
+    } catch (err) {
+      console.error("Fetch posts error:", err);
+      alert("Không thể lấy danh sách bài viết: " + err.message);
+    }
+
+    setLoading(false);
+  };
+
+  const handleFilter = () => {
+    setCurrentPage(1);
+    fetchPosts();
+  };
+
+  useEffect(() => {
+    fetchAllUsers();
+    fetchPosts();
+  }, [currentPage]);
+
+  const findUser = (id) => users.find((u) => u.id === id);
+
+  const handleEditClick = (post) => {
+    setSelectedPost({
+      ...post,
+      tagsInput: Array.isArray(post.tags) ? post.tags.join(", ") : "",
+    });
+    setOpenEdit(true);
+  };
+
+  const updatePost = async () => {
+    try {
+      const token = localStorage.getItem("token");
+
+      const payload = {
+        title: selectedPost.title,
+        description: selectedPost.description,
+        status: Boolean(selectedPost.status),
+        tags: (selectedPost.tagsInput || "")
+          .split(",")
+          .map((tag) => tag.trim())
+          .filter((tag) => tag !== ""),
+        images: selectedPost.images,
+        authorId: selectedPost.authorId,
+      };
+
+
+      const res = await fetch(
+        `${BASE_URL}/admin-post-feed/${selectedPost.id}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+
+      const json = await res.json();
+
+      if (res.ok) {
+        alert("Cập nhật thành công!");
+
+        setPosts((prevPosts) =>
+          prevPosts.map((p) =>
+            p.id === selectedPost.id
+              ? {
+                  ...p,
+                  title: selectedPost.title,
+                  description: selectedPost.description,
+                  tags: selectedPost.tagsInput
+                    .split(",")
+                    .map((tag) => tag.trim())
+                    .filter((tag) => tag !== ""),
+                  status: selectedPost.status,
+                  images: selectedPost.images,
+                }
+              : p
+          )
+        );
+        setSelectedPost(null);
+        setOpenEdit(false);
+      } else {
+        console.error("PUT lỗi:", json);
+        alert(json.message || "Cập nhật thất bại");
+      }
+    } catch (err) {
+      console.error("PUT error:", err);
+      alert("Lỗi kết nối server khi cập nhật");
+    }
+  };
+
+  const deletePost = async (id) => {
+    const confirmDelete = window.confirm(
+      "Bạn có chắc chắn muốn xoá bài post này?"
+    );
+    if (!confirmDelete) return;
+
+    try {
+      const token = localStorage.getItem("token");
+      const res = await fetch(`${BASE_URL}/admin-post-feed/${id}`, {
+        method: "DELETE",
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res.ok) {
+        alert("Xoá thành công!");
+        setPosts(posts.filter((post) => post.id !== id));
+      } else {
+        const json = await res.json();
+        alert(json.message || "Xoá thất bại");
+      }
+    } catch (err) {
+      console.error("Delete post error:", err);
+      alert("Không thể kết nối tới server");
+    }
+  };
+
+  return (
+    <div className="p-4">
+  <Typography variant="h6" className="mb-4 font-semibold text-gray-800">
+    Danh sách bài post
+  </Typography>
+
+  {/* Bộ lọc */}
+  <div className="flex justify-start items-center flex-wrap gap-3 mb-4">
+  {/* Tiêu đề */}
+  <div className="h-10">
+    <Input
+      label=" "
+      placeholder="Tiêu đề"
+      value={filterTitle}
+      onChange={(e) => setFilterTitle(e.target.value)}
+      className="w-[180px]"
+      containerProps={{ className: "min-w-0" }}
+    />
+  </div>
+
+  {/* Trạng thái */}
+  <select
+    className="h-10 border border-gray-300 rounded px-2 text-sm text-gray-700"
+    value={filterStatus}
+    onChange={(e) => setFilterStatus(e.target.value)}
+  >
+    <option value="">Tất cả trạng thái</option>
+    <option value="true">Đang hoạt động</option>
+    <option value="false">Đã ẩn</option>
+  </select>
+
+  {/* Sắp xếp like */}
+  <select
+    className="h-10 border border-gray-300 rounded px-2 text-sm text-gray-700"
+    value={filterSortLikes}
+    onChange={(e) => setFilterSortLikes(e.target.value)}
+  >
+    <option value="">Không sắp xếp</option>
+    <option value="asc">Like tăng dần</option>
+    <option value="desc">Like giảm dần</option>
+  </select>
+
+  {/* Nút lọc */}
+  <Button
+    color="blue"
+    size="sm"
+    className="h-10 px-4"
+    onClick={handleFilter}
+  >
+    Tìm kiếm
+  </Button>
+</div>
+
+
+  {/* Table */}
+  {loading ? (
+    <Typography>Đang tải dữ liệu...</Typography>
+  ) : (
+    <div className="overflow-x-auto rounded-lg border border-gray-200">
+      <table className="min-w-full text-left border-collapse">
+        <thead className="bg-gray-100 text-gray-700">
+          <tr>
+            <th className="p-3 border">Tiêu đề</th>
+            <th className="p-3 border">Mô tả</th>
+            <th className="p-3 border">Tags</th>
+            <th className="p-3 border">Hình</th>
+            <th className="p-3 border">Tác giả</th>
+            <th className="p-3 border text-center">Like</th>
+            <th className="p-3 border text-center">Bình luận</th>
+            <th className="p-3 border text-center">Trạng thái</th>
+            <th className="p-3 border text-center">Hành động</th>
+          </tr>
+        </thead>
+        <tbody>
+          {posts.map((post) => {
+            const author = findUser(post.authorId);
+            return (
+              <tr
+                key={post.id}
+                className="hover:bg-gray-50 cursor-pointer transition"
+                onClick={() => {
+                  setSelectedPostId(post.id);
+                  setIsDetailOpen(true);
+                }}
+              >
+                <td className="p-3 border">{post.title}</td>
+                <td className="p-3 border max-w-xs">
+                  <p className="line-clamp-2 text-sm leading-snug break-words">
+                    {post.description?.length > 50
+                      ? post.description.slice(0, 50) + "..."
+                      : post.description || "Không có mô tả"}
+                  </p>
+                </td>
+                <td className="p-3 border">
+                  {Array.isArray(post.tags) && post.tags.length > 0 && (
+                    <div className="flex items-center gap-1">
+                      <div className="px-2 py-1 text-xs bg-gray-200 rounded">
+                        {post.tags[0]}
+                      </div>
+                      {post.tags.length > 1 && (
+                        <span className="text-xs text-gray-500">
+                          +{post.tags.length - 1}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </td>
+                <td className="p-3 border">
+                  {post.images?.length > 0 ? (
+                    <img
+                      src={`${BASE_URL}${post.images[0]}`}
+                      alt="Hình ảnh"
+                      className="w-10 h-10 object-cover rounded"
+                    />
+                  ) : (
+                    <span className="text-gray-400">Không có</span>
+                  )}
+                </td>
+                <td className="p-3 border">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm">{author?.fullName || "Không rõ"}</span>
+                  </div>
+                </td>
+                <td className="p-3 border text-center">{post.like}</td>
+                <td className="p-3 border text-center">{post.commentCount ?? 0}</td>
+                <td className="p-3 border text-center">
+                  <Chip
+                    value={post.status ? "Đang hoạt động" : "Đã ẩn"}
+                    color={post.status ? "green" : "red"}
+                    size="sm"
+                  />
+                </td>
+                <td className="p-3 border text-center">
+                  <Menu placement="bottom-end">
+                    <MenuHandler>
+                      <IconButton variant="text"><EllipsisVerticalIcon className="h-5 w-5" /></IconButton>
+                    </MenuHandler>
+                    <MenuList>
+                      <MenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleEditClick(post);
+                        }}
+                      >
+                        Sửa
+                      </MenuItem>
+                      <MenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          deletePost(post.id);
+                        }}
+                        className="text-red-500"
+                      >
+                        Xoá
+                      </MenuItem>
+                    </MenuList>
+                  </Menu>
+                </td>
+              </tr>
+            );
+          })}
+          {posts.length === 0 && (
+            <tr>
+              <td colSpan="9" className="p-3 text-center text-gray-500">
+                Không có dữ liệu
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+
+      <Dialog open={openEdit} handler={() => setOpenEdit(false)} size="md">
+        <div className="p-4">
+          <Typography variant="h6" className="mb-4">
+            Chỉnh sửa bài viết
+          </Typography>
+
+          <div className="space-y-3">
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Tác giả
+              </label>
+              <Input
+                value={(() => {
+                  const author = users.find((u) => u.id === selectedPost?.authorId);
+                  return author?.fullName || "Không rõ";
+                })()}
+                readOnly
+                className="bg-gray-100 cursor-not-allowed"
+              />
+            </div>
+
+            {/* Tiêu đề */}
+            <Input
+              label="Tiêu đề"
+              value={selectedPost?.title || ""}
+              onChange={(e) =>
+                setSelectedPost({ ...selectedPost, title: e.target.value })
+              }
+            />
+
+            {/* Mô tả */}
+            <Input
+              label="Mô tả"
+              value={selectedPost?.description || ""}
+              onChange={(e) =>
+                setSelectedPost({ ...selectedPost, description: e.target.value })
+              }
+            />
+
+            {/* Tags */}
+            <Input
+              label="Tags (phân cách bằng dấu phẩy)"
+              value={selectedPost?.tagsInput || ""}
+              onChange={(e) =>
+                setSelectedPost({ ...selectedPost, tagsInput: e.target.value })
+              }
+            />
+
+            {/* Trạng thái */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Trạng thái
+              </label>
+              <select
+                value={selectedPost?.status ? "true" : "false"}
+                onChange={(e) =>
+                  setSelectedPost({
+                    ...selectedPost,
+                    status: e.target.value === "true",
+                  })
+                }
+                className="w-full border rounded px-3 py-2"
+              >
+                <option value="true">Đang hoạt động</option>
+                <option value="false">Đã ẩn</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Nút hành động */}
+          <div className="flex justify-end gap-2 mt-4">
+            <Button color="red" onClick={() => setOpenEdit(false)}>
+              Hủy
+            </Button>
+            <Button
+              color="green"
+              onClick={() => {
+                updatePost();
+              }}
+            >
+              Lưu
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+
+      {/* Pagination */}
+      <div className="flex justify-center items-center gap-2 mt-4">
+        <Button
+          size="sm"
+          variant="outlined"
+          disabled={currentPage === 1}
+          onClick={() => setCurrentPage(currentPage - 1)}
+        >
+          Trang trước
+        </Button>
+        <Typography variant="small" className="text-gray-600">
+          Trang {currentPage} / {totalPages}
+        </Typography>
+        <Button
+          size="sm"
+          variant="outlined"
+          disabled={currentPage === totalPages}
+          onClick={() => setCurrentPage(currentPage + 1)}
+        >
+          Trang sau
+        </Button>
+      </div>
+    </div>
+  )}
+
+  <PostDetailDialog
+  postId={selectedPostId}
+  open={isDetailOpen}
+  onClose={() => setIsDetailOpen(false)}
+/>
+</div>
+
+  );
+}
+
+export default PostList;
diff --git a/src/pages/dashboard/post/PostDetail.jsx b/src/pages/dashboard/post/PostDetail.jsx
new file mode 100644
index 00000000..7ba3fe6e
--- /dev/null
+++ b/src/pages/dashboard/post/PostDetail.jsx
@@ -0,0 +1,317 @@
+  import React, { useEffect, useState } from "react";
+  import {
+    Typography,
+    Button,
+    Avatar,
+    Chip,
+    Dialog,
+    DialogHeader,
+    DialogBody,
+  } from "@material-tailwind/react";
+  import { Audio } from "react-loader-spinner";
+
+  const BASE_URL = "https://api-ndolv2.nongdanonline.cc";
+
+  export default function PostDetailDialog({ postId, open, onClose }) {
+    const [post, setPost] = useState(null);
+    const [comments, setComments] = useState([]);
+    const [users, setUsers] = useState([]);
+    const [likeUsers, setLikeUsers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [commentLoading, setCommentLoading] = useState(true);
+    const [showComments, setShowComments] = useState(false);
+    const [likeDialogOpen, setLikeDialogOpen] = useState(false); 
+
+    const token = localStorage.getItem("token");
+
+    const fetchPost = async () => {
+      try {
+        const res = await fetch(`${BASE_URL}/admin-post-feed/${postId}`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json",
+          },
+        });
+        const json = await res.json();
+        if (res.ok) {
+          setPost(json);
+        } else {
+          alert(json.message || "Không thể lấy bài viết");
+        }
+      } catch (err) {
+        console.error("Fetch post error:", err);
+        alert("Lỗi khi lấy dữ liệu bài viết");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    const fetchComments = async () => {
+      try {
+        const res = await fetch(`${BASE_URL}/admin-comment-post/post/${postId}`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        const json = await res.json();
+        if (res.ok) {
+          setComments(Array.isArray(json.comments) ? json.comments : []);
+        }
+      } catch (err) {
+        console.error("Fetch comments error:", err);
+      } finally {
+        setCommentLoading(false);
+      }
+    };
+
+    const fetchUsers = async () => {
+      try {
+        const token = localStorage.getItem("token");
+        let allUsers = [];
+        let page = 1;
+        let totalPages = 1;
+      do {
+        const res = await fetch(`${BASE_URL}/admin-users?page=${page}&limit=50`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        const json = await res.json();
+        console.log(`User page ${page}:`, json);
+        if (res.ok && Array.isArray(json.data)) {
+          allUsers = allUsers.concat(json.data);
+          totalPages = json.totalPages || 1; 
+          page++;
+        } else {
+          console.warn("Danh sách users không hợp lệ:", json); 
+          break;
+        }
+      } while (page <= totalPages);
+      console.log(" All users loaded:", allUsers); 
+      setUsers(allUsers); 
+      } catch (err) {
+        console.error("Fetch users error:", err);
+        setUsers([])
+      }
+    };
+
+    const fetchLikeUsers = async () => {
+    try {
+      const res = await fetch(`${BASE_URL}/post-feed/${postId}/likes`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      const json = await res.json();
+      if (res.ok && Array.isArray(json.users)) {
+        setLikeUsers(json.users);
+      } else {
+        setLikeUsers([]);
+      }
+    } catch (err) {
+      console.error("Fetch like users error:", err);
+      setLikeUsers([]);
+    }
+  };
+
+    useEffect(() => {
+      if (open) {
+        setPost(null);
+        setComments([]);
+        fetchPost();
+        fetchComments();
+        fetchUsers();
+        setShowComments(false);
+      }
+    }, [postId, open]);
+
+    const findUser = (userId) =>
+      users.find((u) => u.id === userId) || null;
+
+    const formatDateTime = (dateString) => {
+      if (!dateString) return "Không rõ";
+      const date = new Date(dateString);
+      return date.toLocaleString("vi-VN");
+    };
+
+    return (
+      <Dialog open={open} handler={onClose} size="xl">
+        <DialogHeader className="flex justify-between">
+          <Typography variant="h5">Chi tiết bài viết</Typography>
+          <Button size="sm" onClick={onClose}>
+            Đóng
+          </Button>
+        </DialogHeader>
+
+        <DialogBody className="max-h-[75vh] overflow-y-auto">
+          {loading ? (
+            <div className="flex justify-center items-center h-60">
+              <Audio height="80" width="80" color="green" ariaLabel="loading" />
+            </div>
+          ) : !post ? (
+            <Typography className="text-center">
+              Không tìm thấy bài viết
+            </Typography>
+          ) : (
+            <>
+              {/* Tiêu đề */}
+              <Typography variant="h4" className="font-bold mb-2 text-black-800">
+                {post.title}
+              </Typography>
+
+              {/* Ngày tạo và cập nhật */}
+              <div className="text-sm text-gray-600 mb-4">
+                <p><b>Ngày tạo:</b> {formatDateTime(post.createdAt)}</p>
+                <p><b>Cập nhật gần nhất:</b> {formatDateTime(post.updatedAt)}</p>
+              </div>
+
+              {/* Tác giả */}
+              <div className="flex items-center gap-3 mb-4">
+                <Typography className="font-semibold text-gray-700">Tác giả:</Typography>
+                <Avatar
+                  src={
+                    findUser(post.authorId)?.avatar?.startsWith("http")
+                      ? findUser(post.authorId).avatar
+                      : `${BASE_URL}${findUser(post.authorId)?.avatar || ""}`
+                  }
+                  alt={findUser(post.authorId)?.fullName}
+                />
+                <Typography>{findUser(post.authorId)?.fullName || "Không rõ"}</Typography>
+              </div>
+
+              {/* Mô tả */}
+              <Typography className="mb-3">
+                <b>Mô tả:</b> {post.description}
+              </Typography>
+
+              {/* Tags */}
+              <div className="flex gap-2 flex-wrap mb-4">
+                <Typography className="font-semibold text-gray-700">Tags:</Typography>
+                {post.tags?.map((tag, idx) => (
+                  <Chip key={idx} value={tag} color="blue-gray" size="sm" />
+                ))}
+              </div>
+
+              {/* Hình ảnh */}
+              <div className="mb-2 font-semibold text-gray-700">Hình ảnh:</div>
+              <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-4">
+                {post.images?.map((img, idx) => (
+                  <img
+                    key={idx}
+                    src={`${BASE_URL}${img}`}
+                    alt={`img-${idx}`}
+                    className="w-full h-40 object-cover rounded shadow"
+                  />
+                ))}
+              </div>
+
+              <div className="flex gap-3 items-center mb-4">
+                <div className="flex items-center gap-2">
+                  <Typography className="font-semibold">Trạng thái:</Typography>
+                  <Chip
+                    value={post.status ? "Hoạt động" : "Ẩn"}
+                    color={post.status ? "green" : "red"}
+                    size="sm"
+                  />
+                </div>
+                <div className="flex items-center gap-2 cursor-pointer" onClick={() => {fetchLikeUsers(); setLikeDialogOpen(true)}}>
+                  <Typography className="font-semibold">Lượt thích:</Typography>
+                  <Chip value={post.like || 0} color="blue" size="sm" />
+                </div>
+              </div>
+
+              {/* Bình luận */}
+              <div className="border-t pt-4 mt-6">
+                <div
+                  className="cursor-pointer mb-2"
+                  onClick={() => setShowComments(!showComments)}
+                >
+                  <Typography variant="h5" className="text-blue-800">
+                    Bình luận ({comments.length + comments.reduce((total, cmt) => total + (cmt.replies?.length || 0), 0)})
+                  </Typography>
+                  {showComments && (
+                    <>
+                      {commentLoading ? (
+                        <Typography>Đang tải bình luận...</Typography>
+                      ) : comments.length > 0 ? (
+                        comments.map((cmt) => (
+                          <div key={cmt._id} className="border-b py-3 flex items-start gap-3">
+                            <Avatar
+                              src={
+                                cmt.userId?.avatar?.startsWith("http")
+                                  ? cmt.userId.avatar
+                                  : `${BASE_URL}${cmt.userId?.avatar || ""}`
+                              }
+                              alt={cmt.userId?.fullName}
+                            />
+                            <div className="flex-1">
+                              <div className="flex justify-between">
+                                <Typography className="font-medium">
+                                  {cmt.userId?.fullName || "Ẩn danh"}
+                                </Typography>
+                              </div>
+                              <Typography className="text-gray-700">{cmt.comment}</Typography>
+
+                              {/* Replies */}
+                              {cmt.replies?.length > 0 && (
+                                <div className="ml-4 mt-2 border-l-2 pl-2 border-blue-200">
+                                  {cmt.replies.map((rep) => (
+                                    <div key={rep._id} className="flex items-start gap-2 mt-1">
+                                      <Avatar
+                                        src={
+                                          rep.userId?.avatar?.startsWith("http")
+                                            ? rep.userId.avatar
+                                            : `${BASE_URL}${rep.userId?.avatar || ""}`
+                                        }
+                                        alt={rep.userId?.fullName}
+                                        size="xs"
+                                      />
+                                      <div className="flex-1">
+                                        <div className="flex justify-between">
+                                          <Typography className="font-semibold">
+                                            {rep.userId?.fullName || "Ẩn danh"}:
+                                          </Typography>
+                                        </div>
+                                        <Typography className="text-sm">{rep.comment}</Typography>
+                                      </div>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <Typography>Không có bình luận</Typography>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+
+              <Dialog open={likeDialogOpen} handler={() => setLikeDialogOpen(false)} size="sm">
+                <DialogHeader className="flex justify-between">
+                  <Typography variant="h5">Người đã thích</Typography>
+                  <Button size="sm" onClick={() => setLikeDialogOpen(false)}>Đóng</Button>
+                </DialogHeader>
+                <DialogBody className="max-h-[60vh] overflow-y-auto">
+                  {likeUsers.length > 0 ? (
+                    likeUsers.map((user) => (
+                      <div key={user.id} className="flex items-center gap-3 mb-2">
+                        <Avatar
+                          src={
+                            user.avatar?.startsWith("http")
+                              ? user.avatar
+                              : `${BASE_URL}${user.avatar || ""}`
+                          }
+                          alt={user.fullName}
+                        />
+                        <Typography>{user.fullName}</Typography>
+                      </div>
+                    ))
+                  ) : (
+                    <Typography>Không có ai thích bài viết này.</Typography>
+                  )}
+                </DialogBody>
+              </Dialog>
+            </>
+          )}
+        </DialogBody>
+        
+      </Dialog>
+    );
+  }
diff --git a/src/pages/dashboard/profile.jsx b/src/pages/dashboard/profile.jsx
deleted file mode 100644
index 0d9f0115..00000000
--- a/src/pages/dashboard/profile.jsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import {
-  Card,
-  CardBody,
-  CardHeader,
-  CardFooter,
-  Avatar,
-  Typography,
-  Tabs,
-  TabsHeader,
-  Tab,
-  Switch,
-  Tooltip,
-  Button,
-} from "@material-tailwind/react";
-import {
-  HomeIcon,
-  ChatBubbleLeftEllipsisIcon,
-  Cog6ToothIcon,
-  PencilIcon,
-} from "@heroicons/react/24/solid";
-import { Link } from "react-router-dom";
-import { ProfileInfoCard, MessageCard } from "@/widgets/cards";
-import { platformSettingsData, conversationsData, projectsData } from "@/data";
-
-export function Profile() {
-  return (
-    <>
-      <div className="relative mt-8 h-72 w-full overflow-hidden rounded-xl bg-[url('/img/background-image.png')] bg-cover	bg-center">
-        <div className="absolute inset-0 h-full w-full bg-gray-900/75" />
-      </div>
-      <Card className="mx-3 -mt-16 mb-6 lg:mx-4 border border-blue-gray-100">
-        <CardBody className="p-4">
-          <div className="mb-10 flex items-center justify-between flex-wrap gap-6">
-            <div className="flex items-center gap-6">
-              <Avatar
-                src="/img/bruce-mars.jpeg"
-                alt="bruce-mars"
-                size="xl"
-                variant="rounded"
-                className="rounded-lg shadow-lg shadow-blue-gray-500/40"
-              />
-              <div>
-                <Typography variant="h5" color="blue-gray" className="mb-1">
-                  Richard Davis
-                </Typography>
-                <Typography
-                  variant="small"
-                  className="font-normal text-blue-gray-600"
-                >
-                  CEO / Co-Founder
-                </Typography>
-              </div>
-            </div>
-            <div className="w-96">
-              <Tabs value="app">
-                <TabsHeader>
-                  <Tab value="app">
-                    <HomeIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
-                    App
-                  </Tab>
-                  <Tab value="message">
-                    <ChatBubbleLeftEllipsisIcon className="-mt-0.5 mr-2 inline-block h-5 w-5" />
-                    Message
-                  </Tab>
-                  <Tab value="settings">
-                    <Cog6ToothIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
-                    Settings
-                  </Tab>
-                </TabsHeader>
-              </Tabs>
-            </div>
-          </div>
-          <div className="gird-cols-1 mb-12 grid gap-12 px-4 lg:grid-cols-2 xl:grid-cols-3">
-            <div>
-              <Typography variant="h6" color="blue-gray" className="mb-3">
-                Platform Settings
-              </Typography>
-              <div className="flex flex-col gap-12">
-                {platformSettingsData.map(({ title, options }) => (
-                  <div key={title}>
-                    <Typography className="mb-4 block text-xs font-semibold uppercase text-blue-gray-500">
-                      {title}
-                    </Typography>
-                    <div className="flex flex-col gap-6">
-                      {options.map(({ checked, label }) => (
-                        <Switch
-                          key={label}
-                          id={label}
-                          label={label}
-                          defaultChecked={checked}
-                          labelProps={{
-                            className: "text-sm font-normal text-blue-gray-500",
-                          }}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <ProfileInfoCard
-              title="Profile Information"
-              description="Hi, I'm Alec Thompson, Decisions: If you can't decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality)."
-              details={{
-                "first name": "Alec M. Thompson",
-                mobile: "(44) 123 1234 123",
-                email: "alecthompson@mail.com",
-                location: "USA",
-                social: (
-                  <div className="flex items-center gap-4">
-                    <i className="fa-brands fa-facebook text-blue-700" />
-                    <i className="fa-brands fa-twitter text-blue-400" />
-                    <i className="fa-brands fa-instagram text-purple-500" />
-                  </div>
-                ),
-              }}
-              action={
-                <Tooltip content="Edit Profile">
-                  <PencilIcon className="h-4 w-4 cursor-pointer text-blue-gray-500" />
-                </Tooltip>
-              }
-            />
-            <div>
-              <Typography variant="h6" color="blue-gray" className="mb-3">
-                Platform Settings
-              </Typography>
-              <ul className="flex flex-col gap-6">
-                {conversationsData.map((props) => (
-                  <MessageCard
-                    key={props.name}
-                    {...props}
-                    action={
-                      <Button variant="text" size="sm">
-                        reply
-                      </Button>
-                    }
-                  />
-                ))}
-              </ul>
-            </div>
-          </div>
-          <div className="px-4 pb-4">
-            <Typography variant="h6" color="blue-gray" className="mb-2">
-              Projects
-            </Typography>
-            <Typography
-              variant="small"
-              className="font-normal text-blue-gray-500"
-            >
-              Architects design houses
-            </Typography>
-            <div className="mt-6 grid grid-cols-1 gap-12 md:grid-cols-2 xl:grid-cols-4">
-              {projectsData.map(
-                ({ img, title, description, tag, route, members }) => (
-                  <Card key={title} color="transparent" shadow={false}>
-                    <CardHeader
-                      floated={false}
-                      color="gray"
-                      className="mx-0 mt-0 mb-4 h-64 xl:h-40"
-                    >
-                      <img
-                        src={img}
-                        alt={title}
-                        className="h-full w-full object-cover"
-                      />
-                    </CardHeader>
-                    <CardBody className="py-0 px-1">
-                      <Typography
-                        variant="small"
-                        className="font-normal text-blue-gray-500"
-                      >
-                        {tag}
-                      </Typography>
-                      <Typography
-                        variant="h5"
-                        color="blue-gray"
-                        className="mt-1 mb-2"
-                      >
-                        {title}
-                      </Typography>
-                      <Typography
-                        variant="small"
-                        className="font-normal text-blue-gray-500"
-                      >
-                        {description}
-                      </Typography>
-                    </CardBody>
-                    <CardFooter className="mt-6 flex items-center justify-between py-0 px-1">
-                      <Link to={route}>
-                        <Button variant="outlined" size="sm">
-                          view project
-                        </Button>
-                      </Link>
-                      <div>
-                        {members.map(({ img, name }, key) => (
-                          <Tooltip key={name} content={name}>
-                            <Avatar
-                              src={img}
-                              alt={name}
-                              size="xs"
-                              variant="circular"
-                              className={`cursor-pointer border-2 border-white ${
-                                key === 0 ? "" : "-ml-2.5"
-                              }`}
-                            />
-                          </Tooltip>
-                        ))}
-                      </div>
-                    </CardFooter>
-                  </Card>
-                )
-              )}
-            </div>
-          </div>
-        </CardBody>
-      </Card>
-    </>
-  );
-}
-
-export default Profile;
diff --git a/src/pages/dashboard/tables.jsx b/src/pages/dashboard/tables.jsx
deleted file mode 100644
index 3d453ed7..00000000
--- a/src/pages/dashboard/tables.jsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import {
-  Card,
-  CardHeader,
-  CardBody,
-  Typography,
-  Avatar,
-  Chip,
-  Tooltip,
-  Progress,
-} from "@material-tailwind/react";
-import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
-import { authorsTableData, projectsTableData } from "@/data";
-
-export function Tables() {
-  return (
-    <div className="mt-12 mb-8 flex flex-col gap-12">
-      <Card>
-        <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
-          <Typography variant="h6" color="white">
-            Authors Table
-          </Typography>
-        </CardHeader>
-        <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
-          <table className="w-full min-w-[640px] table-auto">
-            <thead>
-              <tr>
-                {["author", "function", "status", "employed", ""].map((el) => (
-                  <th
-                    key={el}
-                    className="border-b border-blue-gray-50 py-3 px-5 text-left"
-                  >
-                    <Typography
-                      variant="small"
-                      className="text-[11px] font-bold uppercase text-blue-gray-400"
-                    >
-                      {el}
-                    </Typography>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {authorsTableData.map(
-                ({ img, name, email, job, online, date }, key) => {
-                  const className = `py-3 px-5 ${
-                    key === authorsTableData.length - 1
-                      ? ""
-                      : "border-b border-blue-gray-50"
-                  }`;
-
-                  return (
-                    <tr key={name}>
-                      <td className={className}>
-                        <div className="flex items-center gap-4">
-                          <Avatar src={img} alt={name} size="sm" variant="rounded" />
-                          <div>
-                            <Typography
-                              variant="small"
-                              color="blue-gray"
-                              className="font-semibold"
-                            >
-                              {name}
-                            </Typography>
-                            <Typography className="text-xs font-normal text-blue-gray-500">
-                              {email}
-                            </Typography>
-                          </div>
-                        </div>
-                      </td>
-                      <td className={className}>
-                        <Typography className="text-xs font-semibold text-blue-gray-600">
-                          {job[0]}
-                        </Typography>
-                        <Typography className="text-xs font-normal text-blue-gray-500">
-                          {job[1]}
-                        </Typography>
-                      </td>
-                      <td className={className}>
-                        <Chip
-                          variant="gradient"
-                          color={online ? "green" : "blue-gray"}
-                          value={online ? "online" : "offline"}
-                          className="py-0.5 px-2 text-[11px] font-medium w-fit"
-                        />
-                      </td>
-                      <td className={className}>
-                        <Typography className="text-xs font-semibold text-blue-gray-600">
-                          {date}
-                        </Typography>
-                      </td>
-                      <td className={className}>
-                        <Typography
-                          as="a"
-                          href="#"
-                          className="text-xs font-semibold text-blue-gray-600"
-                        >
-                          Edit
-                        </Typography>
-                      </td>
-                    </tr>
-                  );
-                }
-              )}
-            </tbody>
-          </table>
-        </CardBody>
-      </Card>
-      <Card>
-        <CardHeader variant="gradient" color="gray" className="mb-8 p-6">
-          <Typography variant="h6" color="white">
-            Projects Table
-          </Typography>
-        </CardHeader>
-        <CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
-          <table className="w-full min-w-[640px] table-auto">
-            <thead>
-              <tr>
-                {["companies", "members", "budget", "completion", ""].map(
-                  (el) => (
-                    <th
-                      key={el}
-                      className="border-b border-blue-gray-50 py-3 px-5 text-left"
-                    >
-                      <Typography
-                        variant="small"
-                        className="text-[11px] font-bold uppercase text-blue-gray-400"
-                      >
-                        {el}
-                      </Typography>
-                    </th>
-                  )
-                )}
-              </tr>
-            </thead>
-            <tbody>
-              {projectsTableData.map(
-                ({ img, name, members, budget, completion }, key) => {
-                  const className = `py-3 px-5 ${
-                    key === projectsTableData.length - 1
-                      ? ""
-                      : "border-b border-blue-gray-50"
-                  }`;
-
-                  return (
-                    <tr key={name}>
-                      <td className={className}>
-                        <div className="flex items-center gap-4">
-                          <Avatar src={img} alt={name} size="sm" />
-                          <Typography
-                            variant="small"
-                            color="blue-gray"
-                            className="font-bold"
-                          >
-                            {name}
-                          </Typography>
-                        </div>
-                      </td>
-                      <td className={className}>
-                        {members.map(({ img, name }, key) => (
-                          <Tooltip key={name} content={name}>
-                            <Avatar
-                              src={img}
-                              alt={name}
-                              size="xs"
-                              variant="circular"
-                              className={`cursor-pointer border-2 border-white ${
-                                key === 0 ? "" : "-ml-2.5"
-                              }`}
-                            />
-                          </Tooltip>
-                        ))}
-                      </td>
-                      <td className={className}>
-                        <Typography
-                          variant="small"
-                          className="text-xs font-medium text-blue-gray-600"
-                        >
-                          {budget}
-                        </Typography>
-                      </td>
-                      <td className={className}>
-                        <div className="w-10/12">
-                          <Typography
-                            variant="small"
-                            className="mb-1 block text-xs font-medium text-blue-gray-600"
-                          >
-                            {completion}%
-                          </Typography>
-                          <Progress
-                            value={completion}
-                            variant="gradient"
-                            color={completion === 100 ? "green" : "gray"}
-                            className="h-1"
-                          />
-                        </div>
-                      </td>
-                      <td className={className}>
-                        <Typography
-                          as="a"
-                          href="#"
-                          className="text-xs font-semibold text-blue-gray-600"
-                        >
-                          <EllipsisVerticalIcon
-                            strokeWidth={2}
-                            className="h-5 w-5 text-inherit"
-                          />
-                        </Typography>
-                      </td>
-                    </tr>
-                  );
-                }
-              )}
-            </tbody>
-          </table>
-        </CardBody>
-      </Card>
-    </div>
-  );
-}
-
-export default Tables;
diff --git a/src/pages/dashboard/user/FarmForm.jsx b/src/pages/dashboard/user/FarmForm.jsx
new file mode 100644
index 00000000..b8eb5a22
--- /dev/null
+++ b/src/pages/dashboard/user/FarmForm.jsx
@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+  Input,
+  Button,
+  Typography,
+} from "@material-tailwind/react";
+import Select from "react-select";
+import CreatableSelect from "react-select/creatable";
+
+const serviceOptions = [
+  { label: "Bán trực tiếp", value: "direct_selling" },
+  { label: "Bán thức ăn", value: "feed_selling" },
+  { label: "Phối trộn thức ăn", value: "custom_feed_blending" },
+  { label: "Dịch vụ sơ chế", value: "processing_service" },
+  { label: "Dịch vụ lưu kho", value: "storage_service" },
+  { label: "Dịch vụ vận chuyển", value: "transport_service" },
+  { label: "Dịch vụ khác", value: "other_services" },
+];
+  const featureOptions = [
+  { label: "Mô hình aquaponic", value: "aquaponic_model" },
+  { label: "Sẵn sàng cho RAS", value: "ras_ready" },
+  { label: "Mô hình thủy canh", value: "hydroponic" },
+  { label: "Nhà kính", value: "greenhouse" },
+  { label: "Nông trại trồng tầng", value: "vertical_farming" },
+  { label: "Chứng nhận VietGAP", value: "viet_gap_cert" },
+  { label: "Chứng nhận hữu cơ", value: "organic_cert" },
+  { label: "Chứng nhận GlobalGAP", value: "global_gap_cert" },
+  { label: "Chứng nhận HACCP", value: "haccp_cert" },
+  { label: "Camera giám sát trực tuyến", value: "camera_online" },
+  { label: "Giám sát bằng drone", value: "drone_monitoring" },
+  { label: "Phát hiện sâu bệnh tự động", value: "automated_pest_detection" },
+  { label: "Tưới chính xác", value: "precision_irrigation" },
+  { label: "Tưới tự động", value: "auto_irrigation" },
+  { label: "Tưới dựa vào cảm biến đất", value: "soil_based_irrigation" },
+  { label: "Cảm biến IoT", value: "iot_sensors" },
+  { label: "Giám sát độ ẩm đất", value: "soil_moisture_monitoring" },
+  { label: "Cảm biến chất lượng không khí", value: "air_quality_sensor" }
+];
+function FarmForm({ open, onClose, initialData, onSubmit }) {
+  const [form, setForm] = useState({
+    name: "",
+    code: "",
+    tags: [],
+    province: "",
+    district: "",
+    ward: "",
+    street: "",
+    location: "",
+    area: "",
+    cultivatedArea: "",
+    phone: "",
+    zalo: "",
+    description: "",
+    services: [],
+    features: [],
+    ownerInfo: { name: "" },
+    status: "pending",
+  });
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      if (initialData) {
+        setForm({
+          ...initialData,
+          tags: initialData.tags || [],
+          services: initialData.services || [],
+          features: initialData.features || [],
+          ownerInfo: { name: initialData.ownerInfo?.name || "" },
+          status: initialData.status || "pending",
+        });
+      } else {
+        setForm({
+          name: "",
+          code: "",
+          tags: [],
+          province: "",
+          district: "",
+          ward: "",
+          street: "",
+          location: "",
+          area: "",
+          cultivatedArea: "",
+          phone: "",
+          zalo: "",
+          description: "",
+          services: [],
+          features: [],
+          ownerInfo: { name: "" },
+          status: "pending",
+        });
+      }
+    }
+  }, [open, initialData]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    if (name.startsWith("ownerInfo.")) {
+      const key = name.split(".")[1];
+      setForm((prev) => ({
+        ...prev,
+        ownerInfo: { ...prev.ownerInfo, [key]: value },
+      }));
+    } else {
+      setForm((prev) => ({ ...prev, [name]: value }));
+    }
+  };
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      const payload = {
+        ...form,
+        tags: form.tags,
+      };
+      await onSubmit(payload);
+      onClose();
+    } catch (err) {
+      console.error(err);
+      alert("Có lỗi xảy ra!");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} size="xl" handler={onClose}>
+      <DialogHeader>{initialData ? "Chỉnh sửa Nông trại" : "Tạo Nông trại Mới"}</DialogHeader>
+      <DialogBody className="max-h-[80vh] overflow-y-auto space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Input label="Tên nông trại" name="name" value={form.name} onChange={handleChange} />
+          <Input label="Mã nông trại" name="code" value={form.code} onChange={handleChange} />
+          <div>
+            <label className="block mb-1 text-gray-700">Tags</label>
+            <CreatableSelect
+              isMulti
+              value={(form.tags || []).map((t) => ({ label: t, value: t }))}
+              onChange={(selected) =>
+                setForm((prev) => ({
+                  ...prev,
+                  tags: selected.map((item) => item.value),
+                }))
+              }
+              placeholder="Nhập tag và nhấn Enter..."
+            />
+          </div>
+          <Input label="Tỉnh/Thành phố" name="province" value={form.province} onChange={handleChange} />
+          <Input label="Quận/Huyện" name="district" value={form.district} onChange={handleChange} />
+          <Input label="Phường/Xã" name="ward" value={form.ward} onChange={handleChange} />
+          <Input label="Đường" name="street" value={form.street} onChange={handleChange} />
+          <Input label="Vị trí tổng quát" name="location" value={form.location} onChange={handleChange} />
+          <Input label="Tổng diện tích (m²)" name="area" value={form.area} onChange={handleChange} />
+          <Input label="Đất canh tác (m²)" name="cultivatedArea" value={form.cultivatedArea} onChange={handleChange} />
+          <Input label="Số điện thoại" name="phone" value={form.phone} onChange={handleChange} />
+          <Input label="Zalo" name="zalo" value={form.zalo} onChange={handleChange} />
+          <Input
+            label="Chủ sở hữu"
+            name="ownerInfo.name"
+            value={form.ownerInfo.name}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block mb-1 text-gray-700">Dịch vụ</label>
+            <Select
+              isMulti
+              options={serviceOptions}
+              value={serviceOptions.filter((opt) => form.services.includes(opt.value))}
+              onChange={(selected) =>
+                setForm((prev) => ({ ...prev, services: selected.map((s) => s.value) }))
+              }
+            />
+          </div>
+          <div>
+            <label className="block mb-1 text-gray-700">Tính năng</label>
+            <Select
+              isMulti
+              options={featureOptions}
+              value={featureOptions.filter((opt) => form.features.includes(opt.value))}
+              onChange={(selected) =>
+                setForm((prev) => ({ ...prev, features: selected.map((f) => f.value) }))
+              }
+            />
+          </div>
+        </div>
+      </DialogBody>
+      <DialogFooter>
+        <Button variant="text" onClick={onClose} disabled={loading}>
+          Huỷ
+        </Button>
+        <Button color="blue" onClick={handleSubmit} disabled={loading}>
+          {initialData ? "Cập nhật" : "Tạo mới"}
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}
+
+export default FarmForm;
diff --git a/src/pages/dashboard/user/UserDetail.jsx b/src/pages/dashboard/user/UserDetail.jsx
new file mode 100644
index 00000000..5491a065
--- /dev/null
+++ b/src/pages/dashboard/user/UserDetail.jsx
@@ -0,0 +1,903 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import {
+  Card, CardHeader, CardBody, Typography, Spinner, Collapse, Dialog, DialogBody, DialogFooter, DialogHeader, Button, Chip,
+  Avatar
+} from "@material-tailwind/react";
+import { useParams } from "react-router-dom";
+import PostLikeUserDialog from "./listpostlikeUser";
+
+export default function UserDetail() {
+  const { id } = useParams();
+  const [user, setUser] = useState(null);
+  const [farms, setFarms] = useState([]);
+  const [videos, setVideos] = useState([]);
+  const [posts, setPosts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [openFarms, setOpenFarms] = useState(false);
+  const [openVideos, setOpenVideos] = useState(false);
+  const [openPosts, setOpenPosts] = useState(false);
+  const [users, setUsers] = useState([]); 
+  const [videoLikes, setVideoLikes] = useState({}); 
+  const [videoComments, setVideoComments] = useState({});
+  const [selectedVideoLikes, setSelectedVideoLikes] = useState([]);
+  const [selectedVideoComments, setSelectedVideoComments] = useState([]);
+  const [selectedVideoTitle, setSelectedVideoTitle] = useState("");
+  const [openLikesDialog, setOpenLikesDialog] = useState(false);
+  const [openCommentsDialog, setOpenCommentsDialog] = useState(false);
+  const [openVideoDialog, setOpenVideoDialog] = useState(false);        
+  const [selectedFarmVideos, setSelectedFarmVideos] = useState([]);     
+  const [selectedFarmName, setSelectedFarmName] = useState("");
+  const [commentCounts, setCommentCounts] = useState({});
+  const [openPostLikesDialog, setOpenPostLikesDialog] = useState(false);
+  const [selectedPostTitle, setSelectedPostTitle] = useState("");
+  const [selectedPostLikes, setSelectedPostLikes] = useState([]);
+  const [openPostCommentDialog, setOpenPostCommentDialog] = useState(false);
+  const [selectedPostComments, setSelectedPostComments] = useState([]);
+
+  const fetchPaginatedData = async (url, config) => {
+    let allData = [];
+    let page = 1;
+    let hasMore = true;
+
+    while (hasMore) {
+      const res = await axios.get(`${url}?page=${page}&limit=100`, config);
+      const pageData = res.data?.data || [];
+      allData = [...allData, ...pageData];
+
+      hasMore = pageData.length > 0 && pageData.length === 50;
+      page++;
+    }
+
+    return allData;
+  };
+
+  const fetchPostCommentsUsers = async (postId, postTitle) => {
+  const token = localStorage.getItem("token");
+  const config = { headers: { Authorization: `Bearer ${token}` } };
+
+  try {
+    const res = await axios.get(
+      `https://api-ndolv2.nongdanonline.cc/admin-comment-post/post/${postId}`,
+      config
+    );
+
+    setSelectedPostTitle(postTitle);
+    setSelectedPostComments(res.data.comments || []);
+    setOpenPostCommentDialog(true);
+  } catch (err) {
+    console.error(`Error fetching comments for post ${postId}:`, err);
+  }
+};
+
+const fetchCommentCount = async (postId) => {
+  const token = localStorage.getItem("token");
+  const config = { headers: { Authorization: `Bearer ${token}` } };
+
+  try {
+    const res = await axios.get(
+      `https://api-ndolv2.nongdanonline.cc/admin-comment-post/post/${postId}`,
+      config
+    );
+
+    const comments = res.data.comments || [];
+
+    // Tính tổng số comment bao gồm reply nếu có dạng nested (dạng cha - con)
+    let totalCount = 0;
+
+    comments.forEach(comment => {
+      totalCount += 1; // count chính comment
+
+      if (Array.isArray(comment.reply)) {
+        totalCount += comment.reply.length; // count reply nếu có
+      }
+    });
+
+    return totalCount;
+  } catch (err) {
+    console.error(`Lỗi khi lấy comment cho post ${postId}:`, err);
+    return 0;
+  }
+};
+
+
+
+const fetchPostLikesUsers = async (postId, postTitle) => {
+  const token = localStorage.getItem("token");
+  const config = { headers: { Authorization: `Bearer ${token}` } };
+
+  try {
+    const res = await axios.get(
+      `https://api-ndolv2.nongdanonline.cc/post-feed/${postId}/likes`, 
+      config
+    );
+    console.log("Likes response:", res.data);
+
+    setSelectedPostTitle(postTitle);
+    setSelectedPostLikes(res.data?.users || []);
+    setOpenPostLikesDialog(true);
+  } catch (err) {
+    console.error(`Error fetching likes for post ${postId}:`, err);
+  }
+};
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const token = localStorage.getItem("token");
+        const config = { headers: { Authorization: `Bearer ${token}` } };
+
+        const [userRes, allFarms, allVideos, allPosts, allUsers ] = await Promise.all([
+          axios.get(`https://api-ndolv2.nongdanonline.cc/admin-users/${id}`, config), 
+          fetchPaginatedData(`https://api-ndolv2.nongdanonline.cc/adminfarms`, config), 
+          fetchPaginatedData(`https://api-ndolv2.nongdanonline.cc/admin-video-farm`, config), 
+          fetchPaginatedData(`https://api-ndolv2.nongdanonline.cc/admin-post-feed`, config),
+          fetchPaginatedData(`https://api-ndolv2.nongdanonline.cc/admin-users`, config), 
+        ]);
+
+        setUser(userRes.data);
+        setFarms(allFarms);
+        setVideos(allVideos);
+        fetchVideoStats(allVideos);
+        setPosts(allPosts);
+        setUsers(allUsers);
+        
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [id]);
+
+  useEffect(() => {
+  const loadCommentCounts = async () => {
+    const promises = posts
+      .filter(post => post.id) 
+      .map(async (post) => {
+        const count = await fetchCommentCount(post.id);
+        return { id: post.id, count };
+      });
+
+    const results = await Promise.all(promises);
+
+    const counts = {};
+    results.forEach(({ id, count }) => {
+      counts[id] = count;
+    });
+
+    setCommentCounts(counts);
+    console.log("Đếm bình luận:", counts);
+  };
+
+  if (posts.length > 0) {
+    loadCommentCounts();
+  }
+}, [posts]);
+
+
+
+
+const fetchVideoLikesUsers = async (videoId, videoTitle) => {
+  const token = localStorage.getItem("token");
+  const config = { headers: { Authorization: `Bearer ${token}` } };
+
+  try {
+    const res = await axios.get(
+      `https://api-ndolv2.nongdanonline.cc/video-like/${videoId}/users`,
+      config
+    );
+    setSelectedVideoTitle(videoTitle);
+    setSelectedVideoLikes(res.data?.users || []); 
+    setOpenLikesDialog(true);
+  } catch (err) {
+    console.error(`Error fetching likes for video ${videoId}:`, err);
+  }
+};
+
+// Hàm lấy danh sách user đã bình luận
+const fetchVideoCommentsUsers = async (videoId, videoTitle) => {
+  const token = localStorage.getItem("token");
+  const config = { headers: { Authorization: `Bearer ${token}` } };
+
+  try {
+    const res = await axios.get(
+      `https://api-ndolv2.nongdanonline.cc/video-comment/${videoId}/comments`,
+      config
+    );
+    console.log("Comment response for video", videoId, ":", res.data);
+    setSelectedVideoTitle(videoTitle);
+    setSelectedVideoComments(res.data || []); // giả sử API trả về danh sách comments
+    setOpenCommentsDialog(true);
+  } catch (err) {
+    console.error(`Error fetching comments for video ${videoId}:`, err);
+  }
+};
+
+
+  const countVideosByFarm = (farmId) => {
+    return videos.filter((v) => v.farmId?.id === farmId).length;
+  };
+
+  const fetchVideoStats = async (videos) => {
+  const token = localStorage.getItem("token");
+  const config = { headers: { Authorization: `Bearer ${token}` } };
+
+  try {
+    const likePromises = videos.map((video) =>
+    axios
+      .get(`https://api-ndolv2.nongdanonline.cc/video-like/${video._id}/users`, config)
+      .then((res) => { 
+        console.log("Likes for video", video._id, ":", res.data);
+        return {
+            videoId: video._id,
+            count: typeof res.data.total === "number" ? res.data.total : 0,
+          };
+
+        })
+        .catch((err) => {
+            console.error(`Error fetching likes for video ${video._id}:`, err);
+            return { videoId: video._id, count: 0 };
+          })
+  );
+  
+  const commentPromises = videos.map((video) =>
+    axios
+      .get(`https://api-ndolv2.nongdanonline.cc/video-comment/${video._id}/comments`, config)
+      .then((res) => {
+        console.log("Comment response for video", video._id, ":", res.data);
+        return{
+          videoId: video._id,
+          count: Array.isArray(res.data) ? res.data.length : 0
+        }
+          
+        })
+      .catch(() => ({ videoId: video._id, count: 0 }))
+  );
+
+  const likes = await Promise.all(likePromises);
+  const comments = await Promise.all(commentPromises);
+
+  const likesMap = {};
+  const commentsMap = {};
+  likes.forEach((item) => (likesMap[item.videoId] = item.count));
+  comments.forEach((item) => (commentsMap[item.videoId] = item.count));
+
+  console.log("Likes Map:", likesMap);
+  console.log("Comments Map:", commentsMap);
+
+
+  setVideoLikes(likesMap);
+  setVideoComments(commentsMap);
+}catch (error) {
+    console.error("Error fetching video stats:", error);
+}
+};
+  const showFarmVideos = async (farmId, farmName) => {           
+    const relatedVideos = videos.filter((v) => v.farmId?.id === farmId);
+    setSelectedFarmVideos(relatedVideos);
+    setSelectedFarmName(farmName);
+    setOpenVideoDialog(true);
+
+  };
+
+  const userFarms = farms.filter((f) => String(f.ownerId) === String(user?.id) || String(f.createBy) === String(user?.id));
+
+  const userPosts = posts.filter(p => p.authorId === user?.id);
+
+  const userVideos = videos.filter(v => v.uploadedBy?.id === user?.id);
+
+  if (loading) {
+    return <div className="flex justify-center items-center h-screen"><Spinner className="h-12 w-12" /></div>;
+  }
+
+  if (!user) {
+    return <Typography color="red">Không tìm thấy user.</Typography>;
+  }
+
+  return (
+    <div className="p-8 space-y-8">
+      {/* Thông tin user */}
+      <Card className="p-6 bg-gradient-to-br from-white to-gray-50 shadow-lg rounded-xl">
+        <div className="flex flex-col md:flex-row items-center gap-6">
+          {/* Avatar */}
+          <div className="flex-shrink-0">
+            <img
+              src={`https://api-ndolv2.nongdanonline.cc${user.avatar}`}
+              alt="avatar"
+              className="w-32 h-32 rounded-full border-4 border-blue-400 shadow"
+            />
+          </div>
+
+          {/* User Info */}
+          <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <Typography variant="h6" className="text-gray-700 font-semibold">ID:</Typography>
+              <Typography className="text-gray-900">{user.id}</Typography>
+            </div>
+            <div>
+              <Typography variant="h6" className="text-gray-700 font-semibold">Name:</Typography>
+              <Typography className="text-gray-900">{user.fullName}</Typography>
+            </div>
+            <div>
+              <Typography variant="h6" className="text-gray-700 font-semibold">Email:</Typography>
+              <Typography className="text-gray-900">{user.email}</Typography>
+            </div>
+            <div>
+              <Typography variant="h6" className="text-gray-700 font-semibold">Phone:</Typography>
+              <Typography className="text-gray-900">{user.phone}</Typography>
+            </div>
+            <div>
+              <Typography variant="h6" className="text-gray-700 font-semibold">Role:</Typography>
+              <Typography className="capitalize text-gray-900">{user.role}</Typography>
+            </div>
+            <div>
+              <Typography variant="h6" className="text-gray-700 font-semibold">Status:</Typography>
+              <Typography
+                className={`font-semibold ${
+                  user.isActive
+                    ? "text-green-500"
+                    : "text-gray-500"
+                }`}
+              >
+                {user.isActive ? "Active" : "Inactive"}
+              </Typography>
+            </div>
+            <div>
+              <Typography variant="h6" className="text-gray-700 font-semibold">Ngày tạo:</Typography>
+              <Typography className="text-gray-900">{new Date(user.createdAt).toLocaleString()}</Typography>
+            </div>
+            <div>
+              <Typography variant="h6" className="text-gray-700 font-semibold">Ngày Updated gần nhất:</Typography>
+              <Typography className="text-gray-900">{new Date(user.updatedAt).toLocaleString()}</Typography>
+            </div>
+          </div>
+        </div>
+
+      </Card>
+
+
+      {/* Thông tin Farms của user */}
+      <Card>
+        <div
+          onClick={() => setOpenFarms(!openFarms)}
+          className="cursor-pointer flex gap-2 items-center px-4 py-2 bg-gray-100 rounded-t"
+        >
+          <Typography variant="h5">
+            Danh sách Farms ({userFarms.length})
+          </Typography>
+          <Typography variant="h5" className={`transform transition-transform duration-300 ${openFarms ? "rotate-180" : ""}`}>▼</Typography>
+
+        </div>
+
+        <Collapse open={openFarms}>
+        {openFarms && (
+          <div className="overflow-hidden transition-all duration-300">
+            <CardBody>
+              {userFarms.length === 0 ? (
+                <Typography>Chưa có Farm nào.</Typography>
+              ) : userFarms.map((farm) => (
+                <div key={farm._id} className="border p-4 mb-4 rounded shadow space-y-2">
+                  <Typography variant="h6" className="text-blue-600">{farm.name}</Typography>
+                  <Typography><b>ID:</b> {farm._id}</Typography>
+                  <Typography><b>Mã nông trại:</b> {farm.code}</Typography>
+                  <Typography><b>Tags:</b> {(farm.tags || []).join(", ") || "—"}</Typography>
+                  <Typography><b>Trạng thái:</b> {
+                    farm.status === "pending" ? "Chờ duyệt" :
+                    farm.status === "active" ? "Đang hoạt động" : "Đã khóa"
+                  }</Typography>
+                  <Typography><b>Tỉnh/Thành phố:</b> {farm.province}</Typography>
+                  <Typography><b>Quận/Huyện:</b> {farm.district}</Typography>
+                  <Typography><b>Phường/Xã:</b> {farm.ward}</Typography>
+                  <Typography><b>Đường:</b> {farm.street}</Typography>
+                  <Typography><b>Vị trí tổng quát:</b> {farm.location}</Typography>
+                  <Typography><b>Tổng diện tích (m²):</b> {farm.area}</Typography>
+                  <Typography><b>Đất canh tác (m²):</b> {farm.cultivatedArea}</Typography>
+                  <Typography><b>Dịch vụ:</b> {(farm.services || []).join(", ") || "—"}</Typography>
+                  <Typography><b>Tính năng:</b> {(farm.features || []).join(", ") || "—"}</Typography>
+                  {farm.ownerInfo && (
+                    <>
+                      <Typography><b>Chủ sở hữu:</b> {farm.ownerInfo.name}</Typography>
+                      <Typography><b>Số điện thoại:</b> {farm.ownerInfo.phone}</Typography>
+                      <Typography><b>Email:</b> {farm.ownerInfo.email}</Typography>
+                    </>
+                  )}
+                  {farm.description && (
+                    <div>
+                      <Typography><b>Mô tả:</b></Typography>
+                      <Typography className="italic text-gray-700">{farm.description}</Typography>
+                    </div>
+                  )}
+
+                  {/* Số lượng video và nút xem chi tiết */}
+                  <div className="flex gap-3 items-center mt-2">
+                    <Typography color="deep-purple">
+                      <b>Số lượng video:</b> {countVideosByFarm(farm._id)}
+                    </Typography>
+                    <Button
+                      size="sm"
+                      color="blue"
+                      onClick={() => showFarmVideos(farm._id, farm.name)}
+                    >
+                      Xem chi tiết
+                    </Button>
+                  </div>
+
+                  {farm.pictures?.length > 0 && (
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-2">
+                      {farm.pictures.map((img, idx) => (
+                        <img
+                          key={idx}
+                          src={`https://api-ndolv2.nongdanonline.cc${img.url || img.path || img.image}`}
+                          alt={`Hình ${idx + 1}`}
+                          className="w-full h-40 object-cover rounded"
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </CardBody>
+          </div>
+        )}
+      </Collapse>
+      </Card>
+
+      {/* Danh sách video */}
+      <Card>
+        <div
+          onClick={() => setOpenVideos(!openVideos)}
+          className="cursor-pointer flex gap-2 items-center px-4 py-2 bg-gray-100 rounded-t"
+        >
+          <Typography variant="h5">
+            Danh sách Videos ({userVideos.length})
+          </Typography>
+          <Typography
+            variant="h5"
+            className={`transform transition-transform duration-300 ${openVideos ? "rotate-180" : ""}`}
+          >
+            ▼
+          </Typography>
+        </div>
+
+        <Collapse open={openVideos}>
+          {openVideos && (
+            <div className="overflow-hidden transition-all duration-300">
+              <CardBody>
+                {userVideos.length === 0 ? (
+                  <Typography>Chưa có video nào.</Typography>
+                ) : userVideos.map((video) => (
+                  <div key={video._id} className="border p-4 mb-6 rounded shadow">
+                    <Typography variant="h6" className="mb-2">{video.title}</Typography>
+
+                     <Typography className="mb-2 text-sm text-gray-700">
+                      <strong>Thuộc Farm:</strong>{" "}
+                      {video.farmId?.name || <span className="text-red-500">Không thuộc farm nào</span>}
+                    </Typography>
+                    
+                    {/* Video player */}
+                    {video.status === "pending" && video.localFilePath ? (
+                      <video
+                        src={
+                          video.localFilePath.startsWith('http')
+                            ? video.localFilePath
+                            : `https://api-ndolv2.nongdanonline.cc${video.localFilePath}`
+                        }
+                        controls
+                        className="h-[300px] w-full rounded shadow mb-4"
+                      />
+                    ) : video.youtubeLink && video.status === "uploaded" ? (
+                      video.youtubeLink.endsWith(".mp4") ? (
+                        <video
+                          src={video.youtubeLink}
+                          controls
+                          className="h-[320px] w-[600px] rounded shadow mb-4 mx-auto"
+                        />
+                      ) : (
+                        <iframe
+                          src={
+                            "https://www.youtube.com/embed/" +
+                            (video.youtubeLink.match(/(?:v=|\/embed\/|\.be\/)([^\s&?]+)/)?.[1] || "")
+                          }
+                          title="YouTube video"
+                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                          allowFullScreen
+                          className="h-[320px] w-[600px] rounded shadow mb-4 mx-auto"
+                        />
+                      )
+                    ) : (
+                      <div className="flex items-center justify-center h-[300px] text-red-500 font-semibold bg-gray-100 rounded shadow mb-4">
+                        Video không tồn tại
+                      </div>
+                    )}
+
+                    {/* Thông tin video */}
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-gray-700">
+                      <span>Danh sách phát: <strong>{video.playlistName}</strong></span>
+                      <span>Tên Farm: <strong>{video.farmId?.name}</strong></span>
+                      <span>Ngày đăng: <strong>{new Date(video.createdAt).toLocaleDateString()}</strong></span>
+                      <span>Người đăng: <strong>{video.uploadedBy?.fullName}</strong></span>
+                      <span>Email: <strong>{video.uploadedBy?.email}</strong></span>
+                      <span>Trạng thái: <strong>{video.status}</strong></span>
+                      <span>Link Local: <strong>{video.localFilePath}</strong></span>
+                      <span>Link YouTube: <strong>{video.youtubeLink || "Không có"}</strong></span>
+                      <span
+                        className="cursor-pointer text-blue-600 hover:underline"
+                        onClick={() => fetchVideoLikesUsers(video._id, video.title)}
+                      >
+                        Lượt thích: <strong>{videoLikes[video._id] ?? "Đang tải..."}</strong>
+                      </span>
+                      <span
+                        className="cursor-pointer text-blue-600 hover:underline"
+                        onClick={() => fetchVideoCommentsUsers(video._id, video.title)}
+                      >
+                        Lượt bình luận: <strong>{videoComments[video._id] ?? "Đang tải..."}</strong>
+                      </span>
+
+                    </div>
+                  </div>
+                ))}
+              </CardBody>
+            </div>
+          )}
+        </Collapse>
+      </Card>
+
+      <Dialog
+        open={openVideoDialog}
+        size="xl"
+        handler={() => setOpenVideoDialog(false)}
+        dismiss={{ outsidePress: false }}
+      >
+        <DialogHeader>Danh sách video - {selectedFarmName}</DialogHeader>
+
+        <DialogBody className="space-y-6 max-h-[560px] overflow-y-auto">
+          {selectedFarmVideos.length === 0 ? (
+            <Typography>Không có video nào cho farm này.</Typography>
+          ) : (
+            selectedFarmVideos.map((item) => (
+              <div
+                key={item._id}
+                className="bg-white rounded-lg shadow p-4 border"
+              >
+                <Typography variant="h6" className="mb-2 font-semibold">
+                  {item.title}
+                </Typography>
+
+                {/* Video hiển thị */}
+                {item.status === "pending" && item.localFilePath ? (
+                  <video
+                    src={
+                      item.localFilePath.startsWith('http')
+                        ? item.localFilePath
+                        : `https://api-ndolv2.nongdanonline.cc${item.localFilePath}`
+                    }
+                    controls
+                    className="h-[300px] w-full rounded shadow mb-4"
+                  >
+                    Trình duyệt không hỗ trợ video
+                  </video>
+                ) : item.youtubeLink && item.status === "uploaded" ? (
+                  item.youtubeLink.endsWith(".mp4") ? (
+                    <video
+                      src={item.youtubeLink}
+                      controls
+                      className="h-[320px] w-[600px] rounded shadow mb-4 mx-auto"
+                    />
+                  ) : (
+                    <iframe
+                      src={
+                        "https://www.youtube.com/embed/" +
+                        (item.youtubeLink.match(/(?:v=|\/embed\/|\.be\/)([^\s&?]+)/)?.[1] || "")
+                      }
+                      title="YouTube video"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowFullScreen
+                      className="h-[320px] w-[600px] rounded shadow mb-4 mx-auto"
+                    ></iframe>
+                  )
+                ) : (
+                  <div className="flex items-center justify-center h-[300px] text-red-500 font-semibold bg-gray-100 rounded shadow mb-4">
+                    Video không tồn tại
+                  </div>
+                )}
+
+                {/* Thông tin video */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-gray-700">
+                  <span>Danh sách phát: <strong>{item.playlistName}</strong></span>
+                  <span>Tên Farm: <strong>{item.farmId?.name}</strong></span>
+                  <span>Ngày đăng: <strong>{new Date(item.createdAt).toLocaleDateString()}</strong></span>
+                  <span>Người đăng: <strong>{item.uploadedBy?.fullName}</strong></span>
+                  <span>Email: <strong>{item.uploadedBy?.email}</strong></span>
+                  <span>Trạng thái: <strong>{item.status}</strong></span>
+                  <span>Link Local: <strong>{item.localFilePath}</strong></span>
+                  <span>Link YouTube: <strong>{item.youtubeLink || "Không có"}</strong></span>
+
+                  <span
+                        className="cursor-pointer text-blue-600 hover:underline"
+                        onClick={() => fetchVideoLikesUsers(item._id, item.title)}
+                      >
+                        Lượt thích: <strong>{videoLikes[item._id] ?? "Đang tải..."}</strong>
+                      </span>
+                      <span
+                        className="cursor-pointer text-blue-600 hover:underline"
+                        onClick={() => fetchVideoCommentsUsers(item._id, item.title)}
+                      >
+                        Lượt bình luận: <strong>{videoComments[item._id] ?? "Đang tải..."}</strong>
+                      </span>
+                </div>
+              </div>
+            ))
+          )}
+        </DialogBody>
+
+        <DialogFooter>
+          <Button color="red" onClick={() => setOpenVideoDialog(false)}>
+            Đóng
+          </Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* Dialog like */}
+      <Dialog
+        open={openLikesDialog}
+        size="md"
+        handler={() => setOpenLikesDialog(false)}
+        dismiss={{ outsidePress: false }}
+      >
+        <DialogHeader onClick={(e) => e.stopPropagation()}>Danh sách user đã like - {selectedVideoTitle}</DialogHeader>
+        <DialogBody className="space-y-4 max-h-[400px] overflow-y-auto">
+          {selectedVideoLikes.length === 0 ? (
+            <Typography>Chưa có ai like video này.</Typography>
+          ) : (
+            selectedVideoLikes.map((user) => (
+              <div key={user._id} className="flex items-center gap-3">
+                <img
+                  src={
+                    user.avatar?.startsWith("http")
+                      ? user.avatar
+                      : `https://api-ndolv2.nongdanonline.cc${user.avatar}`
+                  }
+                  alt={user.fullName}
+                  className="w-10 h-10 rounded-full"
+                />
+                <Typography>{user.fullName}</Typography>
+              </div>
+            ))
+          )}
+        </DialogBody>
+        <DialogFooter>
+          <Button color="red" onClick={() => setOpenLikesDialog(false)}>Đóng</Button>
+        </DialogFooter>
+      </Dialog>
+
+      {/* Dialog comment */}
+      <Dialog
+        open={openCommentsDialog}
+        size="md"
+        handler={() => setOpenCommentsDialog(false)}
+        dismiss={{ outsidePress: false }}
+      >
+        <DialogHeader onClick={(e) => e.stopPropagation()}>Danh sách user đã bình luận - {selectedVideoTitle}</DialogHeader>
+        <DialogBody className="space-y-4 max-h-[400px] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+          {selectedVideoComments.length === 0 ? (
+            <Typography>Chưa có bình luận nào.</Typography>
+          ) : (
+            selectedVideoComments.map((comment) => (
+              <div key={comment._id} className="border-b pb-2 mb-2">
+                <div className="flex items-center gap-3">
+                  <img
+                    src={
+                      comment.userId?.avatar?.startsWith("http")
+                        ? comment.user.avatar
+                        : `https://api-ndolv2.nongdanonline.cc${comment.userId?.avatar}`
+                    }
+                    alt={comment.userId?.fullName}
+                    className="w-10 h-10 rounded-full"
+                  />
+                  <div>
+                    <Typography className="font-semibold">{comment.userId?.fullName}</Typography>
+                    <Typography className="text-sm text-gray-500">
+                      {new Date(comment.createdAt).toLocaleString()}
+                    </Typography>
+                  </div>
+                </div>
+                <Typography className="mt-1">{comment.comment}</Typography>
+              </div>
+            ))
+          )}
+        </DialogBody>
+        <DialogFooter>
+          <Button color="red" onClick={(e) =>{e.stopPropagation(); setOpenCommentsDialog(false)}}>Đóng</Button>
+        </DialogFooter>
+      </Dialog>
+
+
+      {/* Danh sách post */}
+      <Card>
+        <div
+          onClick={() => setOpenPosts(!openPosts)}
+          className="cursor-pointer flex gap-2 items-center px-4 py-2 bg-gray-100 rounded-t"
+        >
+          <Typography variant="h5">
+            Danh sách Posts ({userPosts.length})
+          </Typography>
+          <Typography
+            variant="h5"
+            className={`transform transition-transform duration-300 ${openPosts ? "rotate-180" : ""}`}
+          >
+            ▼
+          </Typography>
+        </div>
+
+        <Collapse open={openPosts}>
+          {openPosts && (
+            <div className="overflow-hidden transition-all duration-300">
+              <CardBody>
+                {userPosts.length === 0 ? (
+                  <Typography>Chưa có bài viết nào.</Typography>
+                ) : userPosts.map((post) => (
+                  <div key={post._id} className="border p-4 mb-6 rounded shadow">
+                    {/* Tiêu đề */}
+                    <Typography variant="h6" className="mb-2">{post.title}</Typography>
+                    {/* Ngày tạo và cập nhật */}
+                    <div className="text-sm text-gray-600 mb-2">
+                      <p><b>Ngày tạo:</b> {new Date(post.createdAt).toLocaleString("vi-VN")}</p>
+                      <p><b>Cập nhật:</b> {new Date(post.updatedAt).toLocaleString("vi-VN")}</p>
+                    </div>
+                    {/* Tác giả */}
+                    <div className="flex items-center gap-3 mb-2">
+                      <Typography className="font-semibold">Tác giả:</Typography>
+                      <img
+                        src={
+                          users.find(u => u.id === post.authorId)?.avatar?.startsWith("http")
+                            ? users.find(u => u.id === post.authorId)?.avatar
+                            : `https://api-ndolv2.nongdanonline.cc${users.find(u => u.id === post.authorId)?.avatar || ""}`
+                        }
+                        alt={users.find(u => u.id === post.authorId)?.fullName}
+                        className="w-8 h-8 rounded-full"
+                      />
+                      <Typography>
+                        {users.find(u => u.id === post.authorId)?.fullName || "Không rõ"}
+                      </Typography>
+                    </div>
+                    {/* Mô tả */}
+                    <Typography className="mb-3">
+                      <b>Mô tả:</b> {post.description}
+                    </Typography>
+                    {/* Tags */}
+                    <div className="flex gap-2 flex-wrap mb-3">
+                      <Typography className="font-semibold text-gray-700">Tags:</Typography>
+                      {post.tags?.map((tag, idx) => (
+                        <span
+                          key={idx}
+                          className="px-2 py-1 bg-blue-100 text-blue-800 text-sm rounded"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                      {/* bình luận */}
+                    <div className="flex gap-2 items-center" onClick={() => fetchPostCommentsUsers(post.id, post.title)}>
+                      <Typography className="font-semibold cursor-pointer">Bình luận:</Typography>
+                      <Chip
+                        value={commentCounts[post.id] || 0}
+                        color="deep-purple"
+                        size="sm"
+                      />
+                    </div>
+                    <div className="flex items-center gap-2 mb-3">
+                      <Typography className="font-semibold cursor-pointer" onClick={() => fetchPostLikesUsers(post.id, post.title)}>Lượt thích:</Typography>
+                      <Chip
+                        value={Array.isArray(post.like) ? post.like.length : (post.like || 0)}
+                        color="blue"
+                        size="sm"
+                        
+                      />
+                    </div>
+                    {/* Hình ảnh */}
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                      {post.images?.map((img, idx) => (
+                        <img
+                          key={idx}
+                          src={`https://api-ndolv2.nongdanonline.cc${img}`}
+                          alt={`img-${idx}`}
+                          className="w-full h-40 object-cover rounded shadow"
+                        />
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </CardBody>
+            </div>
+          )}
+        </Collapse>
+      </Card>
+
+    <Dialog
+      open={openPostCommentDialog}
+      size="md"
+      handler={() => setOpenPostCommentDialog(false)}
+      dismiss={{ outsidePress: false }}
+    >
+      <DialogHeader>Danh sách bình luận - {selectedPostTitle}</DialogHeader>
+      <DialogBody className="space-y-4 max-h-[400px] overflow-y-auto">
+        {selectedPostComments.length === 0 ? (
+          <Typography>Chưa có bình luận nào.</Typography>
+        ) : (
+          selectedPostComments.map((comment) => (
+            <div key={comment._id} className="border-b pb-2 mb-2">
+              <div className="flex items-center gap-3">
+                <img
+                  src={
+                    comment.userId?.avatar?.startsWith("http")
+                      ? comment.userId.avatar
+                      : `https://api-ndolv2.nongdanonline.cc${comment.userId?.avatar}`
+                  }
+                  alt={comment.userId?.fullName}
+                  className="w-10 h-10 rounded-full"
+                />
+                <div>
+                  <Typography className="font-semibold">
+                    {comment.userId?.fullName}
+                  </Typography>
+                  <Typography className="text-sm text-gray-500">
+                    {new Date(comment.createdAt).toLocaleString()}
+                  </Typography>
+                </div>
+              </div>
+              <Typography className="mt-1">{comment.comment}</Typography>
+
+              {/* Hiển thị reply nếu có */}
+              {comment.replies?.length > 0 && (
+                <div className="ml-6 mt-2 space-y-2">
+                  {comment.replies.map((reply, index) => (
+                    <div key={index} className="border-l-2 pl-4">
+                      <div className="flex items-center gap-3">
+                        {reply.userId ? (
+                          <>
+                            <img
+                              src={
+                                reply.userId.avatar?.startsWith("http")
+                                  ? reply.userId.avatar
+                                  : `https://api-ndolv2.nongdanonline.cc${reply.userId.avatar}`
+                              }
+                              alt={reply.userId.fullName}
+                              className="w-8 h-8 rounded-full"
+                            />
+                            <Typography className="font-semibold">
+                              {reply.userId?.fullName}
+                            </Typography>
+                          </>
+                        ) : (
+                          <Typography className="italic text-gray-500">Ẩn danh</Typography>
+                        )}
+                      </div>
+                      <Typography className="text-sm text-gray-700">
+                        {reply.comment}
+                      </Typography>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </DialogBody>
+      <DialogFooter>
+        <Button color="red" onClick={() => setOpenPostCommentDialog(false)}>Đóng</Button>
+      </DialogFooter>
+    </Dialog>
+
+          
+        <PostLikeUserDialog
+          open={openPostLikesDialog}
+          onClose={() => setOpenPostLikesDialog(false)}
+          postTitle={selectedPostTitle}
+          likeUsers={selectedPostLikes}
+        />
+    </div>
+  );
+}
diff --git a/src/pages/dashboard/user/UserDetailDialog.jsx b/src/pages/dashboard/user/UserDetailDialog.jsx
new file mode 100644
index 00000000..0e8904be
--- /dev/null
+++ b/src/pages/dashboard/user/UserDetailDialog.jsx
@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  Dialog, DialogHeader, DialogBody, DialogFooter, Typography, Avatar, Button
+} from "@material-tailwind/react";
+
+export default function UserDetailDialog({ open, onClose, user, addresses, onAddFarm }) {
+  return (
+    <Dialog open={open} handler={onClose} size="sm">
+      <DialogHeader>Chi tiết người dùng</DialogHeader>
+      <DialogBody className="space-y-2">
+        {user ? (
+          <div className="flex flex-col items-center text-center space-y-2">
+            <Avatar src={user.avatar ? `https://api-ndolv2.nongdanonline.cc${user.avatar}` : ""} size="xl" />
+            <Typography variant="h6">{user.fullName}</Typography>
+            <Typography variant="small">ID: {user.id}</Typography>
+            <Typography>Email: {user.email}</Typography>
+            <Typography>Phone: {user.phone || "N/A"}</Typography>
+            <Typography>Roles: {Array.isArray(user.role) ? user.role.join(", ") : user.role}</Typography>
+            <Typography>
+              
+              Trạng thái: {user.isActive===true ? (
+                <span className="text-green-600 font-semibold">ĐÃ CẤP QUYỀN</span>
+              ) : (
+                <span className="text-gray-500 font-semibold">CHƯA CẤP QUYỀN</span>
+              )}
+            </Typography>
+            <Typography className="font-bold">Địa chỉ:</Typography>
+            {addresses.length ? addresses.map((addr, i) => (
+              <Typography key={`${user.id}-addr-${i}`} className="text-sm">
+                {addr.address} - {addr.ward}, {addr.district}, {addr.province}
+              </Typography>
+            )) : <Typography className="text-gray-400 text-sm">Không có địa chỉ</Typography>}
+            <Button
+              color="green"
+              size="sm"
+              className="mt-2"
+              onClick={() => onAddFarm(user.id)}
+            >
+              Thêm nông trại cho người dùng này
+            </Button>
+          </div>
+        ) : <Typography>Đang tải...</Typography>}
+      </DialogBody>
+      <DialogFooter>
+        <Button variant="gradient" onClick={onClose}>Đóng</Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}
diff --git a/src/pages/dashboard/user/listpostlikeUser.jsx b/src/pages/dashboard/user/listpostlikeUser.jsx
new file mode 100644
index 00000000..498b361b
--- /dev/null
+++ b/src/pages/dashboard/user/listpostlikeUser.jsx
@@ -0,0 +1,32 @@
+import { Dialog, DialogBody, DialogHeader, DialogFooter, Button, Typography } from "@material-tailwind/react";
+
+export default function PostLikeUserDialog({ open, onClose, postTitle, likeUsers }) {
+  return (
+    <Dialog open={open} handler={onClose} size="md">
+      <DialogHeader>Danh sách user đã like - {postTitle}</DialogHeader>
+      <DialogBody className="space-y-3 max-h-[400px] overflow-y-auto">
+        {likeUsers.length === 0 ? (
+          <Typography>Chưa có ai like bài viết này.</Typography>
+        ) : (
+          likeUsers.map((user) => (
+            <div key={user._id} className="flex items-center gap-3">
+              <img
+                src={
+                  user.avatar?.startsWith("http")
+                    ? user.avatar
+                    : `https://api-ndolv2.nongdanonline.cc${user.avatar}`
+                }
+                alt={user.fullName}
+                className="w-10 h-10 rounded-full"
+              />
+              <Typography>{user.fullName}</Typography>
+            </div>
+          ))
+        )}
+      </DialogBody>
+      <DialogFooter>
+        <Button color="red" onClick={onClose}>Đóng</Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}
diff --git a/src/pages/dashboard/user/users.jsx b/src/pages/dashboard/user/users.jsx
new file mode 100644
index 00000000..dc44e131
--- /dev/null
+++ b/src/pages/dashboard/user/users.jsx
@@ -0,0 +1,419 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import {
+  Typography, IconButton, Menu, MenuHandler, MenuList, MenuItem,
+  Dialog, DialogHeader, DialogBody, DialogFooter,
+  Input, Select, Option, Button, Spinner, Avatar
+} from "@material-tailwind/react";
+import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { useNavigate } from "react-router-dom";
+import CreatableSelect from 'react-select/creatable';
+
+export default function Users() {
+  const [users, setUsers] = useState([]);
+  const [roles, setRoles] = useState([]);
+  const [counts, setCounts] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const [editOpen, setEditOpen] = useState(false);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [formData, setFormData] = useState({
+    fullName: "", email: "", phone: "", isActive: true, addresses: [""]
+  });
+  const [selectedRole, setSelectedRole] = useState("Farmer");
+console.log(formData)
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const limit = 100;
+
+  const [filterRole, setFilterRole] = useState("");
+  const [filterStatus, setFilterStatus] = useState("");
+  const [searchText, setSearchText] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+
+  const navigate = useNavigate();
+  const token = localStorage.getItem("token");
+  const apiUrl = "https://api-ndolv2.nongdanonline.cc";
+
+  // Fetch users + counts
+  const fetchUsers = async () => {
+    if (!token) return;
+    setLoading(true);
+    try {
+      const params = { page, limit };
+      if (filterRole) params.role = filterRole;
+      if (filterStatus) params.isActive = filterStatus === "Active";
+
+      const res = await axios.get(`${apiUrl}/admin-users`, { headers: { Authorization: `Bearer ${token}` }, params });
+      const usersData = Array.isArray(res.data.data) ? res.data.data : [];
+      setUsers(usersData);
+
+      // Tự động lấy danh sách role duy nhất từ users
+      const uniqueRoles = Array.from(
+  new Set(
+    usersData
+      .flatMap(user => Array.isArray(user.role) ? user.role : [user.role])
+      .map(role => role.toLowerCase()) // chuẩn hóa về lowercase
+  )
+).map(role => role.charAt(0).toUpperCase() + role.slice(1)); // Viết hoa chữ cái đầu
+setRoles(uniqueRoles);
+
+      setTotalPages(res.data.totalPages || 1);
+
+      // counts
+      const [farmsRes, videosRes, postsRes] = await Promise.all([
+        axios.get(`${apiUrl}/adminfarms?page=${page}&limit=1000`, { headers: { Authorization: `Bearer ${token}` } }),
+        axios.get(`${apiUrl}/admin-video-farm?page=${page}&limit=1000`, { headers: { Authorization: `Bearer ${token}` } }),
+        axios.get(`${apiUrl}/admin-post-feed?page=1&limit=1000`, { headers: { Authorization: `Bearer ${token}` } })
+      ]);
+
+      const farms = farmsRes.data?.data || [];
+      const videos = videosRes.data?.data || [];
+      const posts = postsRes.data?.data || [];
+
+      const postCountsMap = {};
+      posts.forEach(p => {
+        const uid = p.userId || p.authorId;
+        if (uid) postCountsMap[uid] = (postCountsMap[uid] || 0) + 1;
+      });
+
+      const countsObj = {};
+      usersData.forEach(user => {
+        countsObj[user.id] = {
+          farms: farms.filter(f => f.ownerId === user.id).length,
+          videos: videos.filter(v => v.uploadedBy?.id === user.id).length,
+          posts: postCountsMap[user.id] || 0
+        };
+      });
+      setCounts(countsObj);
+    } catch (err) {
+      console.error("Lỗi khi tải users:", err);
+      setError("Lỗi khi tải danh sách người dùng.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Search
+  const handleSearch = async () => {
+    if (!token) return;
+    setLoading(true);
+    try {
+      const paramsCommon = { page: 1, limit: 10 };
+      if (filterRole) paramsCommon.role = filterRole;
+      if (filterStatus) paramsCommon.isActive = filterStatus === "Active";
+
+      const [byName, byEmail, byPhone] = await Promise.all([
+        axios.get(`${apiUrl}/admin-users`, { headers: { Authorization: `Bearer ${token}` }, params: { ...paramsCommon, fullName: searchText } }),
+        axios.get(`${apiUrl}/admin-users`, { headers: { Authorization: `Bearer ${token}` }, params: { ...paramsCommon, email: searchText } }),
+        axios.get(`${apiUrl}/admin-users`, { headers: { Authorization: `Bearer ${token}` }, params: { ...paramsCommon, phone: searchText } }),
+      ]);
+      const merged = [...(byName.data.data || []), ...(byEmail.data.data || []), ...(byPhone.data.data || [])];
+      const unique = merged.filter((v, i, a) => a.findIndex(t => t.id === v.id) === i);
+      setUsers(unique);
+      setTotalPages(1);
+      setPage(1);
+      setIsSearching(true);
+    } catch (err) {
+      console.error("Lỗi tìm kiếm:", err);
+      setError("Lỗi khi tìm kiếm.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!token) {
+      setError("Không tìm thấy token!");
+      setLoading(false);
+      return;
+    }
+    if (!isSearching) fetchUsers();
+  }, [token, page, filterRole, filterStatus, isSearching]);
+
+  // Edit
+  const openEdit = (user) => {
+    setSelectedUser(user);
+    setFormData({
+      fullName: user.fullName, email: user.email,
+      phone: user.phone || "", isActive: user.isActive,
+      addresses: user?.addresses?.map(a => a.address) || [""],
+    });
+    setEditOpen(true);
+  };
+console.log(users)
+// CẬP NHẬT NGƯỜI DÙNG + ĐỊA CHỈ
+ const handleUpdate = async () => {
+    if (!token || !selectedUser) return;
+    try {
+      await axios.put(`${apiUrl}/admin-users/${selectedUser.id}`, { fullName: formData.fullName, phone: formData.phone }, { headers: { Authorization: `Bearer ${token}` } });
+
+      if (formData.isActive !== selectedUser.isActive) {
+        await axios.patch(`${apiUrl}/admin-users/${selectedUser.id}/active`, {}, { headers: { Authorization: `Bearer ${token}` } });
+      }
+
+      if (selectedUser.addresses?.[0]?.id) {
+        await axios.put(`${apiUrl}/user-addresses/${selectedUser.addresses[0].id}`, { address: formData.addresses[0] }, { headers: { Authorization: `Bearer ${token}` } });
+      }
+      alert("Cập nhật thành công!");
+      fetchUsers();
+      setEditOpen(false);
+    } catch {
+      alert("Cập nhật thất bại!");
+    }
+  };
+
+ const handleToggleActive = async (val) => {
+  if (!token || !selectedUser) return;
+
+  const isCurrentlyActive = selectedUser.isActive;
+  const newIsActive = val === "Active";
+
+  // Nếu trạng thái không thay đổi
+  if (isCurrentlyActive === newIsActive) {
+    alert(`Người dùng đã ở trạng thái ${newIsActive ? "Active" : "Inactive"} rồi.`);
+    return;
+  }
+
+  try {
+    await axios.patch(`${apiUrl}/admin-users/${selectedUser.id}/active`, {}, {
+      headers: { Authorization: `Bearer ${token}` }
+    });
+
+    setFormData(prev => ({ ...prev, isActive: newIsActive }));
+    setUsers(prev =>
+      prev.map(u => u.id === selectedUser.id ? { ...u, isActive: newIsActive } : u)
+    );
+
+    alert("Cập nhật trạng thái thành công!");
+  } catch {
+    alert("Cập nhật trạng thái thất bại!");
+  }
+};
+
+  const handleDelete = async (userId) => {
+    if (!window.confirm("Bạn chắc chắn muốn xoá?")) return;
+    try {
+      await axios.delete(`${apiUrl}/admin-users/${userId}`, { headers: { Authorization: `Bearer ${token}` } });
+      alert("Đã xoá người dùng!");
+      fetchUsers();
+    } catch {
+      alert("Xoá thất bại!");
+    }
+  };
+
+  const handleAddRole = async () => {
+    if (!token || !selectedUser) return;
+    try {
+      if (selectedRole === "Farmer") {
+        await axios.patch(`${apiUrl}/admin-users/${selectedUser.id}/add-farmer`, {}, { headers: { Authorization: `Bearer ${token}` } });
+      } else {
+        await axios.patch(`${apiUrl}/admin-users/${selectedUser.id}/add-role`, { role: selectedRole }, { headers: { Authorization: `Bearer ${token}` } });
+      }
+      alert("Thêm role thành công!");
+      fetchUsers();
+    } catch {
+      alert("Thêm role thất bại!");
+    }
+  };
+
+  const handleRemoveRole = async (role) => {
+    if (!token || !selectedUser) return;
+    try {
+      await axios.patch(`${apiUrl}/admin-users/${selectedUser.id}/remove-roles`, { roles: [role] }, { headers: { Authorization: `Bearer ${token}` } });
+      alert("Xoá role thành công!");
+      fetchUsers();
+    } catch {
+      alert("Xoá role thất bại!");
+    }
+  };
+
+  return (
+    <div className="p-4">
+      <Typography variant="h6" color="blue-gray" className="mb-4">Quản lý người dùng</Typography>
+
+     <div className="flex flex-wrap items-center gap-4 mb-4">
+  <div className="w-64">
+    <Input
+      label="Tìm kiếm..."
+      value={searchText}
+      onChange={(e) => setSearchText(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") handleSearch();
+      }}
+    />
+  </div>
+
+  <div className="w-52">
+    <Select label="Trạng thái" value={filterStatus} onChange={val => setFilterStatus(val || "")}>
+      <Option value="">Tất cả</Option>
+      <Option value="Active">Active</Option>
+      <Option value="Inactive">Inactive</Option>
+    </Select>
+  </div>
+
+  <div className="w-52">
+   <Select
+  label="Lọc theo role"
+  value={filterRole}
+  onChange={(val) => setFilterRole(val ?? "")}
+>
+  <Option value="">Tất cả</Option>
+  {roles.map(role => (
+    <Option key={role} value={role}>{role}</Option>
+  ))}
+</Select>
+
+
+
+  </div>
+
+  <div>
+    <Button className="bg-blue-500" onClick={handleSearch}>
+      TÌM KIẾM
+    </Button>
+  </div>
+</div>
+
+
+
+      {loading && <div className="flex justify-center py-4"><Spinner /></div>}
+      {error && <p className="text-red-500">{error}</p>}
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full border">
+          <thead>
+            <tr className="bg-gray-100">
+              {["Avatar", "Tên", "Email", "Phone", "Role", "Posts", "Farms", "Videos", "Trạng thái", "Thao tác"].map(head => (
+                <th key={head} className="p-2 text-left text-xs font-semibold">{head}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {users.map(user => (
+              <tr key={user.id} className="border-t hover:bg-blue-50 cursor-pointer"
+                  onClick={() => navigate(`/dashboard/users/${user.id}`)}>
+                <td className="p-2"><Avatar src={user.avatar ? `https://api-ndolv2.nongdanonline.cc${user.avatar}` : ""} size="sm" /></td>
+                <td className="p-2">{user.fullName}</td>
+                <td className="p-2">{user.email}</td>
+                <td className="p-2">{user.phone || "N/A"}</td>
+                <td className="p-2 text-xs">{Array.isArray(user.role) ? user.role.join(", ") : user.role}</td>
+                <td className="p-2">{counts[user.id]?.posts ?? 0}</td>
+                <td className="p-2">{counts[user.id]?.farms ?? 0}</td>
+                <td className="p-2">{counts[user.id]?.videos ?? 0}</td>
+                <td className="p-2">
+                  {user.isActive
+                    ? <span className="bg-green-500 text-white text-xs px-2 py-0.5 rounded">Active</span>
+                    : <span className="bg-gray-500 text-white text-xs px-2 py-0.5 rounded">Inactive</span>}
+                </td>
+                <td className="p-2" onClick={e => e.stopPropagation()}>
+                  <Menu placement="left-start">
+                    <MenuHandler>
+                      <IconButton variant="text"><EllipsisVerticalIcon className="h-5 w-5" /></IconButton>
+                    </MenuHandler>
+                    <MenuList>
+                      <MenuItem onClick={() => openEdit(user)}>Sửa</MenuItem>
+                      <MenuItem onClick={() => handleDelete(user.id)} className="text-red-500">Xoá</MenuItem>
+                    </MenuList>
+                  </Menu>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {!isSearching && (
+        <div className="flex justify-center items-center gap-2 mt-4">
+          <Button size="sm" variant="outlined" disabled={page <= 1} onClick={() => setPage(prev => prev - 1)}>Trang trước</Button>
+          <span>Trang {page} / {totalPages}</span>
+          <Button size="sm" variant="outlined" disabled={page >= totalPages} onClick={() => setPage(prev => prev + 1)}>Trang sau</Button>
+        </div>
+      )}
+
+    <Dialog open={editOpen} handler={setEditOpen} size="sm">
+  <DialogHeader>Chỉnh sửa người dùng</DialogHeader>
+  <DialogBody className="space-y-4">
+    <Input
+      label="Full Name"
+      value={formData.fullName}
+      onChange={e => setFormData({ ...formData, fullName: e.target.value })}
+    />
+    <Input label="Email" value={formData.email} disabled />
+    <Input
+      label="Phone"
+      value={formData.phone}
+      onChange={e => setFormData({ ...formData, phone: e.target.value })}
+    />
+  <Select
+  label="Trạng thái"
+  value={formData.isActive ? "Đã cấp quyền" : "Chưa cấp quyền"}
+  onChange={val => setFormData({ ...formData, isActive: val === "Đã cấp quyền" })}
+>
+  <Option value="Đã cấp quyền">Đã cấp quyền</Option>
+  <Option value="Chưa cấp quyền">Chưa cấp quyền</Option>
+</Select>
+
+    <Typography className="font-bold">Địa chỉ</Typography>
+<CreatableSelect
+  isClearable
+  placeholder="Nhập hoặc chọn địa chỉ mới..."
+  value={formData.addresses[0] ? { label: formData.addresses[0], value: formData.addresses[0] } : null}
+  options={
+    selectedUser?.addresses?.map(addr => ({
+      label: addr.address,
+      value: addr.address
+    })) || []
+  }
+  onChange={(selected) => {
+    setFormData({
+      ...formData,
+      addresses: selected ? [selected.value] : [],
+    });
+  }}
+  formatCreateLabel={(inputValue) => `+ Thêm mới: "${inputValue}"`}
+/>
+
+
+    <Typography className="font-bold">Quản lý role</Typography>
+    <Select label="Thêm role" value={selectedRole} onChange={setSelectedRole}>
+      {roles.map(role => (
+        <Option key={role} value={role}>{role}</Option>
+      ))}
+    </Select>
+    <Button size="sm" variant="outlined" onClick={handleAddRole}>
+      + Thêm Role
+    </Button>
+    <div className="flex flex-wrap gap-2 mt-2">
+      {(Array.isArray(selectedUser?.role) ? selectedUser.role : [selectedUser?.role])
+        .filter(Boolean)
+        .map(role => (
+          <span
+            key={`${selectedUser?.id}-${role}`}
+            className="flex items-center bg-blue-gray-100 rounded-full px-2 py-1 text-xs"
+          >
+            {role}
+            <button
+              className="ml-1 text-red-500"
+              onClick={() => handleRemoveRole(role)}
+            >
+              ×
+            </button>
+          </span>
+        ))}
+    </div>
+  </DialogBody>
+  <DialogFooter>
+    <Button variant="text" onClick={() => setEditOpen(false)}>
+      Huỷ
+    </Button>
+    <Button variant="gradient" onClick={handleUpdate}>
+      Lưu
+    </Button>
+  </DialogFooter>
+</Dialog>
+
+    </div>
+  );
+}
diff --git a/src/routes.jsx b/src/routes.jsx
index 3a5a8da0..d01e04fc 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -5,10 +5,19 @@ import {
   InformationCircleIcon,
   ServerStackIcon,
   RectangleStackIcon,
+  NewspaperIcon,
+  ReceiptPercentIcon,
+  ChatBubbleLeftEllipsisIcon
 } from "@heroicons/react/24/solid";
-import { Home, Profile, Tables, Notifications } from "@/pages/dashboard";
+
+import VideoLikeList from "@/pages/dashboard/VideoFarms/VideoLikeList";
+import { Home, Users, Farms, Questions, AnswersTable, ListVideo, PostList, AdminReports,CommentPost  } from "@/pages/dashboard";
 import { SignIn, SignUp } from "@/pages/auth";
 
+import { ViewfinderCircleIcon,VideoCameraIcon,ChatBubbleOvalLeftEllipsisIcon  } from "@heroicons/react/24/outline";
+import { Comment } from "react-loader-spinner";
+import FarmDetail from "@/pages/dashboard/farm/FarmDetail";
+
 const icon = {
   className: "w-5 h-5 text-inherit",
 };
@@ -25,22 +34,54 @@ export const routes = [
       },
       {
         icon: <UserCircleIcon {...icon} />,
-        name: "profile",
-        path: "/profile",
-        element: <Profile />,
+        name: "Users",
+        path: "/Users",
+        element: <Users />,
       },
       {
         icon: <TableCellsIcon {...icon} />,
-        name: "tables",
-        path: "/tables",
-        element: <Tables />,
+        name: "Farms",
+        path: "/Farms",
+        element: <Farms />,
       },
       {
         icon: <InformationCircleIcon {...icon} />,
-        name: "notifications",
-        path: "/notifications",
-        element: <Notifications />,
+        name: "Questions",
+        path: "/Questions",
+        element: <Questions />,
+      },
+      {
+        icon: <ChatBubbleLeftEllipsisIcon {...icon} />,
+        name: "AnswersTable",
+        path: "/AnswersTable",
+        element: <AnswersTable />,
+      },
+        {
+        icon: <VideoCameraIcon {...icon} />,
+        name: "ListVideo",
+        path: "/ListVideo",
+        element: <ListVideo />,
       },
+      {
+        icon: <NewspaperIcon {...icon} />,
+        name: "PostList",
+        path: "/PostList",
+        element: <PostList />,
+      },
+      {
+        icon: <ReceiptPercentIcon {...icon} />,
+        name: "AdminReports",
+        path: "/AdminReports",
+        element: <AdminReports />,
+      },
+    {
+        icon: <ChatBubbleOvalLeftEllipsisIcon {...icon} />,
+        name: "CommentPost",
+        path: "/CommentPost",
+         element: <CommentPost />,
+
+      }, 
+      
     ],
   },
   {
diff --git a/src/widgets/layout/dashboard-navbar.jsx b/src/widgets/layout/dashboard-navbar.jsx
index d91e23f7..49e1b07c 100644
--- a/src/widgets/layout/dashboard-navbar.jsx
+++ b/src/widgets/layout/dashboard-navbar.jsx
@@ -73,7 +73,7 @@ export function DashboardNavbar() {
         </div>
         <div className="flex items-center">
           <div className="mr-auto md:mr-4 md:w-56">
-            <Input label="Search" />
+            {/* <Input label="Search" /> */}
           </div>
           <IconButton
             variant="text"
@@ -83,23 +83,7 @@ export function DashboardNavbar() {
           >
             <Bars3Icon strokeWidth={3} className="h-6 w-6 text-blue-gray-500" />
           </IconButton>
-          <Link to="/auth/sign-in">
-            <Button
-              variant="text"
-              color="blue-gray"
-              className="hidden items-center gap-1 px-4 xl:flex normal-case"
-            >
-              <UserCircleIcon className="h-5 w-5 text-blue-gray-500" />
-              Sign In
-            </Button>
-            <IconButton
-              variant="text"
-              color="blue-gray"
-              className="grid xl:hidden"
-            >
-              <UserCircleIcon className="h-5 w-5 text-blue-gray-500" />
-            </IconButton>
-          </Link>
+          
           <Menu>
             <MenuHandler>
               <IconButton variant="text" color="blue-gray">
diff --git a/src/widgets/layout/footer.jsx b/src/widgets/layout/footer.jsx
index 1ea98e53..ad0cf531 100644
--- a/src/widgets/layout/footer.jsx
+++ b/src/widgets/layout/footer.jsx
@@ -7,35 +7,7 @@ export function Footer({ brandName, brandLink, routes }) {
 
   return (
     <footer className="py-2">
-      <div className="flex w-full flex-wrap items-center justify-center gap-6 px-2 md:justify-between">
-        <Typography variant="small" className="font-normal text-inherit">
-          &copy; {year}, made with{" "}
-          <HeartIcon className="-mt-0.5 inline-block h-3.5 w-3.5 text-red-600" /> by{" "}
-          <a
-            href={brandLink}
-            target="_blank"
-            className="transition-colors hover:text-blue-500 font-bold"
-          >
-            {brandName}
-          </a>{" "}
-          for a better web.
-        </Typography>
-        <ul className="flex items-center gap-4">
-          {routes.map(({ name, path }) => (
-            <li key={name}>
-              <Typography
-                as="a"
-                href={path}
-                target="_blank"
-                variant="small"
-                className="py-0.5 px-1 font-normal text-inherit transition-colors hover:text-blue-500"
-              >
-                {name}
-              </Typography>
-            </li>
-          ))}
-        </ul>
-      </div>
+      
     </footer>
   );
 }
diff --git a/src/widgets/layout/sidenav.jsx b/src/widgets/layout/sidenav.jsx
index cc7e6ffe..3fc1cbe0 100644
--- a/src/widgets/layout/sidenav.jsx
+++ b/src/widgets/layout/sidenav.jsx
@@ -1,55 +1,89 @@
 import PropTypes from "prop-types";
 import { Link, NavLink } from "react-router-dom";
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import { useState, useEffect } from "react";
 import {
-  Avatar,
   Button,
   IconButton,
   Typography,
 } from "@material-tailwind/react";
-import { useMaterialTailwindController, setOpenSidenav } from "@/context";
+import {
+  useMaterialTailwindController,
+  setOpenSidenav,
+  setAuthStatus,
+} from "@/context";
+import { useNavigate } from "react-router-dom";
 
-export function Sidenav({ brandImg, brandName, routes }) {
+export function Sidenav({ brandImg, brandName, routes, onCollapse }) {
   const [controller, dispatch] = useMaterialTailwindController();
-  const { sidenavColor, sidenavType, openSidenav } = controller;
+  const { sidenavColor, sidenavType, openSidenav, isAuthenticated } = controller;
+  const [collapsed, setCollapsed] = useState(false);
+  const navigate = useNavigate();
+
+  // Gửi trạng thái collapse ra ngoài nếu cần dùng bên ngoài
+  useEffect(() => {
+    if (onCollapse) onCollapse(collapsed);
+  }, [collapsed]);
+
+  const handleLogout = () => {
+    const confirmLogout = window.confirm("Bạn có chắc muốn đăng xuất?");
+    if (confirmLogout) {
+      localStorage.removeItem("token");
+      setAuthStatus(dispatch, false);
+      navigate("/auth/sign-in");
+    }
+  };
+
   const sidenavTypes = {
     dark: "bg-gradient-to-br from-gray-800 to-gray-900",
     white: "bg-white shadow-sm",
     transparent: "bg-transparent",
   };
 
+  const visibleRoutes = isAuthenticated
+    ? routes.filter(({ title }) => title?.toLowerCase() !== "auth pages")
+    : routes;
+
   return (
     <aside
       className={`${sidenavTypes[sidenavType]} ${
         openSidenav ? "translate-x-0" : "-translate-x-80"
-      } fixed inset-0 z-50 my-4 ml-4 h-[calc(100vh-32px)] w-72 rounded-xl transition-transform duration-300 xl:translate-x-0 border border-blue-gray-100`}
+      } fixed inset-y-0 z-50 my-4 ml-4 h-[calc(100vh-32px)] ${
+        collapsed ? "w-20" : "w-60"
+      } rounded-xl transition-all duration-300 xl:translate-x-0 border border-blue-gray-100`}
     >
-      <div
-        className={`relative`}
-      >
-        <Link to="/" className="py-6 px-8 text-center">
+      <div className="relative">
+        <Link to="/" className="py-6 px-4 text-center block">
           <Typography
-            variant="h6"
-            color={sidenavType === "dark" ? "white" : "blue-gray"}
+            color="inherit"
+            className={`font-medium text-lg transition-all duration-300 ${
+              collapsed ? "hidden" : "block"
+            }`}
           >
-            {brandName}
+            Admin Farm
           </Typography>
         </Link>
+
         <IconButton
           variant="text"
-          color="white"
+          color="blue-gray"
           size="sm"
           ripple={false}
-          className="absolute right-0 top-0 grid rounded-br-none rounded-tl-none xl:hidden"
-          onClick={() => setOpenSidenav(dispatch, false)}
+          className="absolute right-0 top-0 m-2"
+          onClick={() => setCollapsed(!collapsed)}
         >
-          <XMarkIcon strokeWidth={2.5} className="h-5 w-5 text-white" />
+          {collapsed ? (
+            <ChevronRightIcon className="h-5 w-5 text-blue-gray-700" />
+          ) : (
+            <ChevronLeftIcon className="h-5 w-5 text-blue-gray-700" />
+          )}
         </IconButton>
       </div>
+
       <div className="m-4">
-        {routes.map(({ layout, title, pages }, key) => (
+        {visibleRoutes.map(({ layout, title, pages }, key) => (
           <ul key={key} className="mb-4 flex flex-col gap-1">
-            {title && (
+            {title && !collapsed && (
               <li className="mx-3.5 mt-4 mb-2">
                 <Typography
                   variant="small"
@@ -73,16 +107,20 @@ export function Sidenav({ brandImg, brandName, routes }) {
                           ? "white"
                           : "blue-gray"
                       }
-                      className="flex items-center gap-4 px-4 capitalize"
+                      className={`flex items-center gap-4 capitalize transition-all duration-200 ${
+                        collapsed ? "justify-center p-3" : "px-4"
+                      }`}
                       fullWidth
                     >
                       {icon}
-                      <Typography
-                        color="inherit"
-                        className="font-medium capitalize"
-                      >
-                        {name}
-                      </Typography>
+                      {!collapsed && (
+                        <Typography
+                          color="inherit"
+                          className="font-medium capitalize"
+                        >
+                          {name}
+                        </Typography>
+                      )}
                     </Button>
                   )}
                 </NavLink>
@@ -91,6 +129,47 @@ export function Sidenav({ brandImg, brandName, routes }) {
           </ul>
         ))}
       </div>
+
+      {isAuthenticated && (
+        <div className="m-4">
+          <Button
+            variant="text"
+            color={sidenavType === "dark" ? "white" : "blue-gray"}
+            className={`w-full flex items-center gap-4 capitalize ${
+              collapsed ? "justify-center p-3" : "px-4"
+            }`}
+            fullWidth
+            onClick={handleLogout}
+          >
+            {/* icon */}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className="h-5 w-5"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6A2.25 2.25 0 005.25 5.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M18.75 12H9m0 0l3-3m-3 3l3 3"
+              />
+            </svg>
+
+            {!collapsed && (
+              <Typography color="inherit" className="font-medium">
+                Log out
+              </Typography>
+            )}
+          </Button>
+        </div>
+      )}
     </aside>
   );
 }
@@ -104,6 +183,7 @@ Sidenav.propTypes = {
   brandImg: PropTypes.string,
   brandName: PropTypes.string,
   routes: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onCollapse: PropTypes.func, // optional callback
 };
 
 Sidenav.displayName = "/src/widgets/layout/sidnave.jsx";
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7ebd1762..3a65a464 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -6,5 +6,8 @@ module.exports = withMT({
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+  require('@tailwindcss/line-clamp'),
+],
+
 });
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000..13e8506b
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,6 @@
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ]
+}
+