thanh

jsconfig.json

@@ -1,8 +1,10 @@
 {
   "compilerOptions": {
+           "jsx": "react-jsx",
+
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
     },
   },
-}
+}

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"
   }
-}
+}

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;

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;

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>
+  );
+}

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>
+  );
+}

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})

src/ipconfig.jsx

@@ -0,0 +1 @@
+export const BaseUrl= `https://api-ndolv2.nongdanonline.cc`

src/layouts/auth.jsx

@@ -16,7 +16,7 @@ export function Auth() {
       icon: ChartPieIcon,
     },
     {
-      name: "profile",
+      name: "User",
       path: "/dashboard/home",
       icon: UserIcon,
     },

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>