task completed

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
-    "next": "15.0.3",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

src/app/(root)/(dashboard)/_components/overview.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { FaUserGraduate, FaBook, FaChartBar } from 'react-icons/fa';
+type Props = {
+  name: String;
+  activity: String;
+  attendance: String;
+  performance: String;
+  route: String;
+};
+
+function overview({ name, activity, attendance, performance, route }: Props) {
+  const router = useRouter();
+
+  return (
+    <div
+      className={` ${
+        name === 'Teachers' ? 'bg-red-50' : 'bg-green-50'
+      } p-6 rounded-xl border border-orchid-300`}
+    >
+      {/* Students Overview */}
+      <h4 className='text-lg font-semibold mb-3'>{name} Overview</h4>
+      <div className='space-y-2'>
+        <p>
+          <FaUserGraduate className='inline-block' />{' '}
+          <strong>Total {name}:</strong> <span className='font-bold'>2284</span>
+        </p>
+        <p>
+          <FaBook className='inline-block' />{' '}
+          <strong>Active {activity}:</strong>{' '}
+          <span className='font-bold'>84</span>
+        </p>
+        <p>
+          <FaChartBar className='inline-block' /> <strong>{attendance}:</strong>{' '}
+          <span className='font-bold'>98%</span>
+        </p>
+        <p>
+          <FaChartBar className='inline-block' />{' '}
+          <strong>{performance}:</strong>{' '}
+          <span className='font-bold'>9.0/10</span>
+        </p>
+      </div>
+      <button
+        className='mt-4 bg-green-500 text-white px-4 py-2 rounded-lg flex items-center justify-center w-full'
+        onClick={() => router.push(`/${route}`)}
+      >
+        📚 View {name}
+      </button>
+    </div>
+  );
+}
+
+export default overview;

src/app/(root)/(dashboard)/batches/[batchId]/students/[studentId]/page.tsx

@@ -0,0 +1,86 @@
+'use client';
+import { useState } from 'react';
+
+const students = [
+  { name: 'Abhinav Mishra', class: 11, level: 'excellent' },
+  { name: 'Abhinav Mishra', class: 11, level: 'optimal' },
+  { name: 'Abhinav Mishra', class: 11, level: 'inefficient' },
+  { name: 'Abhinav Mishra', class: 11, level: 'excellent' },
+  { name: 'Abhinav Mishra', class: 11, level: 'optimal' },
+  { name: 'Abhinav Mishra', class: 11, level: 'inefficient' },
+  { name: 'Abhinav Mishra', class: 11, level: 'excellent' },
+  { name: 'Abhinav Mishra', class: 11, level: 'optimal' },
+  { name: 'Abhinav Mishra', class: 11, level: 'inefficient' },
+];
+
+const levelColors = {
+  excellent: 'bg-green-200 border-green-400',
+  optimal: 'bg-yellow-200 border-yellow-400',
+  inefficient: 'bg-red-200 border-red-400',
+};
+
+const progressColors = {
+  excellent: 'bg-green-500 w-3/4',
+  optimal: 'bg-yellow-500 w-2/4',
+  inefficient: 'bg-red-500 w-1/4',
+};
+
+export default function StudentsInfo() {
+  const [filter, setFilter] = useState('all');
+
+  const filteredStudents =
+    filter === 'all' ? students : students.filter((s) => s.level === filter);
+
+  return (
+    <div className='p-8 max-w-5xl mx-auto'>
+      <h1 className='text-2xl font-bold mb-4'>Students Info</h1>
+      <input
+        type='text'
+        placeholder='Search a teacher'
+        className='w-full p-2 border rounded-md mb-4'
+      />
+
+      <div className='flex space-x-3 mb-4'>
+        {['all', 'excellent', 'optimal', 'inefficient'].map((level) => (
+          <button
+            key={level}
+            className={`px-4 py-2 rounded-md ${
+              filter === level ? 'bg-purple-500 text-white' : 'bg-gray-200'
+            }`}
+            onClick={() => setFilter(level)}
+          >
+            {level.charAt(0).toUpperCase() + level.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      <div className='grid grid-cols-3 gap-4'>
+        {filteredStudents.map((student, index) => (
+          <div
+            key={index}
+            className={`p-4 rounded-lg border  ${levelColors[student.level]}`}
+          >
+            <span
+              style={{ backgroundColor: 'lightgreen' }}
+              className='inline flex-1 p-2  rounded-full'
+            >
+              😎
+            </span>
+            <div className=''>
+              <h2 className='font-bold'>{student.name}</h2>
+              <p>Class: {student.class}</p>
+              <p>Level:</p>
+              <div className='w-full bg-gray-300 h-2 rounded-full mt-1'>
+                <div
+                  className={`h-full rounded-full ${
+                    progressColors[student.level]
+                  }`}
+                ></div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/(root)/(dashboard)/batches/_components/batchCard.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { useRouter } from 'next/navigation';
+
+type Props = {
+  batch: String;
+  index: number;
+};
+
+function batchCard({ batch, index }: Props) {
+  const router = useRouter();
+
+  return (
+    <div className='bg-gray-100 p-4 rounded-lg shadow'>
+      <div className='flex items-center gap-2'>
+        <div className='bg-blue-500 text-white p-2 rounded-full'>
+          <span className='text-sm font-bold p-2'>{batch.charAt(0)}</span>
+        </div>
+        <h3 className='text-lg font-bold'>{batch}</h3>
+        <span
+          style={{
+            backgroundColor: 'lightgreen',
+          }}
+          className='ml-auto text-green-500 rounded px-2 font-medium'
+        >
+          Active
+        </span>
+      </div>
+      <p className='text-sm mt-2'>
+        <span className='font-bold text-gray-500'>Subject:</span> Mathematics,
+        Chemistry, Physics
+      </p>
+      <p className='text-sm'>
+        <span className='font-bold text-gray-500'>Total Students:</span> 120/180
+      </p>
+      <div className='mt-2 bg-gray-300 h-2 rounded'>
+        <div
+          className='bg-purple-500 h-2 rounded'
+          style={{ width: '66%' }}
+        ></div>
+      </div>
+      <p className='text-xs mt-2'>- By Dr. Sarah Wilson</p>
+      <button
+        // onClick={() =>
+        //   router.push('/[batchId]/students/[studentId]/page.tsx')
+        // }
+        onClick={() => router.push(`/batches/${batch}/students/${index + 1}`)}
+        className='mt-2 bg-purple-500 text-white px-4 py-1 rounded-md'
+      >
+        View More
+      </button>
+    </div>
+  );
+}
+
+export default batchCard;

src/app/(root)/(dashboard)/batches/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import BatchCard from './_components/batchCard';
+
+export default function StudentBatches() {
+  const router = useRouter();
+
+  return (
+    <div className=' text-white min-h-screen p-8'>
+      <div className='max-w-6xl mx-auto bg-white text-black p-6'>
+        <h1 className='text-2xl font-bold'>Student Batches of Institute</h1>
+        <div className='flex gap-4 my-4'>
+          <select className='p-2 border rounded-md w-32'>
+            <option>All</option>
+          </select>
+          <select className='p-2 border rounded-md w-32'>
+            <option>All</option>
+          </select>
+          <select className='p-2 border rounded-md w-32'>
+            <option>All</option>
+          </select>
+        </div>
+
+        {['11th standard', '12th standard'].map((standard, index) => (
+          <div
+            key={standard}
+            className='my-6 b-1 border p-10 rounded-lg border-blue'
+          >
+            <h2 className='text-xl font-semibold'>{standard}</h2>
+            <div className='grid md:grid-cols-3 gap-4 mt-4'>
+              {['Omega', 'Sigma', 'Omega'].map((batch, index) => (
+                <BatchCard batch={batch} index={index} key={index} />
+              ))}
+            </div>
+            <button className='mt-4 text-purple-500 '>+ Add batch</button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}