Improved the sorting and filtering for the Student Performance page

tailwind.config.js

@@ -3,16 +3,37 @@ module.exports = {
 	content: ["./src/**/*.{html,tsx,ts,js,jsx}"],
 	safelist: [
 		{
-		  pattern: /bg-ai-detection-result-(ai|mixed|human)/,
-		}
+			pattern: /bg-ai-detection-result-(ai|mixed|human)/,
+		},
 	],
 	theme: {
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px",
+			},
+		},
 		extend: {
+			keyframes: {
+				"accordion-down": {
+					from: {height: "0"},
+					to: {height: "var(--radix-accordion-content-height)"},
+				},
+				"accordion-up": {
+					from: {height: "var(--radix-accordion-content-height)"},
+					to: {height: "0"},
+				},
+			},
+			animation: {
+				"accordion-down": "accordion-down 0.2s ease-out",
+				"accordion-up": "accordion-up 0.2s ease-out",
+			},
 			scale: {
-				'102': '1.02',
+				102: "1.02",
 			},
 			boxShadow: {
-				'training-inset': 'inset 0px 2px 18px 0px #00000029',
+				"training-inset": "inset 0px 2px 18px 0px #00000029",
 			},
 			colors: {
 				mti: {
@@ -45,18 +66,18 @@ module.exports = {
 				"ai-detection": {
 					result: {
 						ai: {DEFAULT: "#f4bf4f", text: "#f0bc4f", bg: "#fff8e8"},
-						mixed: {DEFAULT:"#93aafb", bg: "rgba(147, 170, 251, 0.3)"},
-						human: {DEFAULT:"#50c08a", bg: "#e9f9ed"}
+						mixed: {DEFAULT: "#93aafb", bg: "rgba(147, 170, 251, 0.3)"},
+						human: {DEFAULT: "#50c08a", bg: "#e9f9ed"},
 					},
 					confidence: {
 						high: {DEFAULT: "#84d1ac", transparent: "#daf0e3"},
 						medium: {DEFAULT: "#f7ec88", transparent: "#fcf8d8"},
 						low: {DEFAULT: "#ffc1c1", transparent: "#ffebe9"},
-						border: "#888888"
+						border: "#888888",
 					},
 					highlight: "#ffefb7",
-					text: "#8992B1"
-				}
+					text: "#8992B1",
+				},
 			},
 			screens: {
 				"-sm": {max: "639px"},
@@ -68,5 +89,5 @@ module.exports = {
 			},
 		},
 	},
-	plugins: [require("daisyui"), require("tailwind-scrollbar-hide"),],
+	plugins: [require("daisyui"), require("tailwind-scrollbar-hide"), require("tailwindcss-animate")],
 };