addStatisticsAndChart,fixbugAdminpage

client/package.json

@@ -11,12 +11,15 @@
   },
   "dependencies": {
     "@react-oauth/google": "^0.13.4",
+    "apexcharts": "^5.15.0",
     "axios": "^1.14.0",
     "jwt-decode": "^4.0.0",
     "react": "^19.2.4",
+    "react-apexcharts": "^2.1.0",
     "react-datepicker": "^9.1.0",
     "react-dom": "^19.2.4",
     "react-icons": "^5.6.0",
+    "react-loading-skeleton": "^3.5.0",
     "react-router-dom": "^7.14.0"
   },
   "devDependencies": {

client/src/App.jsx

@@ -15,6 +15,7 @@ import AddIssue from "./pages/AddIssue.jsx";
 import DetailTicket from './pages/DetailTicket.jsx';
 import Tracking from "./pages/Tracking.jsx";
 import EditIssue from './pages/EditIssue';
+import Statistics from "./pages/Statistics.jsx";
 
 // Pages admin
 const AuditIssues = React.lazy(() => import('./pages/adminPage/AuditIssues.jsx'))
@@ -46,7 +47,7 @@ function App() {
 
                 <Route path="/ticketDetail" element={<DetailTicket />} />
                 <Route path="/edit-issue" element={<EditIssue />} />
-                <Route path="*" element={<Navigate to="/" />} />
+                <Route path="/statistics/*" element={<Statistics />} />
 
                 <Route path="/adminPage" element={
                   user.role === 'admin' ? <AdminLayout /> : <Navigate to="/" />

client/src/components/CardFinishProblem.jsx

@@ -1,10 +1,13 @@
 import '../components/componentsStyles/CardFinishProblem.css';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
 import { useNavigate } from 'react-router-dom';
 import { StarRating } from './StarRating';
 
+import { formatDate } from '../utils/formatDate';
+
 export const CardFinishProblem = ({ data }) => {
   const navigate = useNavigate();
-
   const handleClick = () => {
     navigate(`/ticketDetail?ticketId=${data.ticketId}`);
   };
@@ -13,27 +16,55 @@ export const CardFinishProblem = ({ data }) => {
     <div className='container-card' onClick={handleClick}>
       <div className="img-card">
         {data.images && data.images.length > 0 ? (
-        <img src={data.images[0].imageUrl} alt="" />
-        ) :(
+          <img src={data.images[0].imageUrl} alt="" />
+        ) : (
           <div className="no-image">ไม่มีรูปภาพประกอบ</div>
         )}
       </div>
-        <div className="main-info-card" key={data.id}>
-          <div className="info-card">
-            <h1 style={{ fontSize: '25px',margin: 0 }}>{data.title}</h1>
-            <p>โดย : {data.admin}</p>
-            <p>เสร็จสิ้น : {data.admin}</p>
+      <div className="main-info-card" key={data.id}>
+        <div className="info-card">
+          <h1 style={{ fontSize: '25px', margin: 0 }}>{data.title}</h1>
+          <p>โดย : {data.admin}</p>
+          <p>เสร็จสิ้น : {formatDate(data.updatedAt)}</p>
+
+        </div>
+        <div className="review-card">
+          <StarRating rating={data?.rating || 0} />
+          <p className='text-limit'><img
+            src="description.png"
+            alt=""
+            style={{ width: '20px', height: '20px', gap: '10px' }} />{data.comment}</p>
 
-          </div>
-          <div className="review-card">
-            <StarRating rating={data?.rating || 0} />
-            <p className='text-limit'><img
-              src="description.png"
-              alt=""
-              style={{ width: '20px', height: '20px', gap: '10px' }} />{data.comment}</p>
-
-          </div>
         </div>
+      </div>
     </div>
   )
 }
+
+export const SkeletonCardFinishProblem = () => {
+
+  return (
+    <SkeletonTheme
+      baseColor="#ebebeb"
+      highlightColor="#ccc7c7"
+      duration={2}
+    >
+      <div className='container-card' >
+        <div className="img-card">
+          <div >
+            <Skeleton width={150} height={160} borderRadius={8} />
+          </div>
+        </div>
+        <div className="main-info-card" >
+          <div className="info-card">
+            <h1><Skeleton width="60%" height={24} /></h1>
+            <p><Skeleton width="80%" height={16} count={2} /></p>
+          </div>
+          <div className="review-card">
+            <p><Skeleton width="80%" height={16} count={4} /></p>
+          </div>
+        </div>
+      </div>
+    </SkeletonTheme>
+  );
+}