|
1 | 1 | import React from "react"; |
2 | | - |
| 2 | +import { useState, useContext } from "react"; |
| 3 | +import { AdminContext } from "../../context/AdminContext"; |
| 4 | +import { useFeedback } from "../../hooks/useFeedback"; |
| 5 | +import getCurrentTenureRange from "../../utils/getCurrentTenureRange"; |
3 | 6 | const FeedbackStats = () => { |
4 | | - return <div>FeedbackStats</div>; |
| 7 | + const { |
| 8 | + loading, |
| 9 | + activeTab, |
| 10 | + setActiveTab, |
| 11 | + statusFilter, |
| 12 | + setStatusFilter, |
| 13 | + filteredFeedbacks, |
| 14 | + markAsResolved, |
| 15 | + } = useFeedback(); |
| 16 | + const { startDate, endDate, tenureYearString } = getCurrentTenureRange(); |
| 17 | + const tenureFeedback = filteredFeedbacks.filter((fb) => { |
| 18 | + const createdAt = new Date(fb.created_at); |
| 19 | + return createdAt >= startDate && createdAt <= endDate; |
| 20 | + }); |
| 21 | + const { isUserLoggedIn } = useContext(AdminContext); |
| 22 | + const isStudent = isUserLoggedIn?.role === "STUDENT"; |
| 23 | + |
| 24 | + return ( |
| 25 | + <div className="p-2 flex flex-col items-center justify-center"> |
| 26 | + <p className="text-xl font-semibold justify-center">Feedback Stats</p> |
| 27 | + <p className="text-gray-800 mb-2 "> |
| 28 | + Total feedbacks:{" "} |
| 29 | + <span className="font-semibold text-blue-600"> |
| 30 | + {tenureFeedback.length} |
| 31 | + </span> |
| 32 | + </p> |
| 33 | + |
| 34 | + <p className="text-gray-800 mb-2"> |
| 35 | + Pending feedbacks:{" "} |
| 36 | + <span className="font-semibold text-yellow-600"> |
| 37 | + {tenureFeedback.filter((fb) => !fb.is_resolved).length} |
| 38 | + </span> |
| 39 | + </p> |
| 40 | + |
| 41 | + <p className="text-gray-800 mb-2 "> |
| 42 | + Total resolved feedbacks:{" "} |
| 43 | + <span className="font-semibold text-green-600"> |
| 44 | + {tenureFeedback.filter((fb) => fb.is_resolved).length} |
| 45 | + </span> |
| 46 | + </p> |
| 47 | + |
| 48 | + <p className="text-gray-800 mb-2"> |
| 49 | + Recent feedbacks:{" "} |
| 50 | + <span className="font-semibold text-purple-600"> |
| 51 | + { |
| 52 | + tenureFeedback.filter((fb) => { |
| 53 | + const now = new Date(); |
| 54 | + const thirtyDaysAgo = new Date(); |
| 55 | + thirtyDaysAgo.setDate(now.getDate() - 30); |
| 56 | + // Clamp to tenure start boundary |
| 57 | + const effectiveStart = |
| 58 | + thirtyDaysAgo < startDate ? startDate : thirtyDaysAgo; |
| 59 | + const createdAt = new Date(fb.created_at); |
| 60 | + return createdAt >= effectiveStart && createdAt <= now; |
| 61 | + }).length |
| 62 | + } |
| 63 | + </span> |
| 64 | + </p> |
| 65 | + <p className="text-gray-800 mb-2"> |
| 66 | + Average Rating:{" "} |
| 67 | + <span className="font-bold"> |
| 68 | + {tenureFeedback.filter((fb) => fb.rating).length > 0 |
| 69 | + ? ( |
| 70 | + tenureFeedback.reduce( |
| 71 | + (sum, fb) => (fb.rating ? sum + fb.rating : sum), |
| 72 | + 0, |
| 73 | + ) / tenureFeedback.filter((fb) => fb.rating).length |
| 74 | + ).toFixed(1) |
| 75 | + : 0} |
| 76 | + </span> |
| 77 | + </p> |
| 78 | + </div> |
| 79 | + ); |
5 | 80 | }; |
6 | 81 |
|
7 | 82 | export default FeedbackStats; |
0 commit comments