Animated bar chart

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.5"
+    "recharts": "^3.1.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.5"
+    "typescript": "^5"
   }
 }

src/app/(dashboard)/admin/page.tsx

@@ -0,0 +1,37 @@
+import AttendanceChart from '@/components/AttendanceChart';
+import CountChart from '@/components/CountChart';
+import UserCard from '@/components/UserCard';
+
+const AdminPage = () => {
+  return (
+    <div className="p-4 flex gap-4 flex-col md:flex-row">
+      {/* LEFT */}
+      <div className="w-full lg:w-2/3 flex flex-col gap-8">
+        {/* USER CARDS */}
+        <div className="flex gap-4 justify-between flex-wrap">
+          <UserCard type="students" />
+          <UserCard type="teachers" />
+          <UserCard type="parents" />
+          <UserCard type="staff" />
+        </div>
+        {/* MIDDLE CHARTS */}
+        <div className="flex gap-4 flex-col lg:flex-row">
+          {/* COUNT CHART */}
+          <div className="w-full lg:w-1/3 h-[450px]">
+            <CountChart />
+          </div>
+          {/* ATTENDANCE CHART */}
+          <div className="w-full lg:w-2/3 h-[450px]">
+            <AttendanceChart />
+          </div>
+        </div>
+        {/* BOTTOM CHARTS */}
+        <div></div>
+      </div>
+      {/* RIGHT */}
+      <div className="w-full lg:w-1/3">r</div>
+    </div>
+  );
+};
+
+export default AdminPage;

src/app/(dashboard)/layout.tsx

@@ -0,0 +1,29 @@
+import Menu from '@/components/Menu';
+import NavBar from '@/components/NavBar';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function DashboardLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="h-screen flex">
+      <div className="w-[14%] md:w-[8%] lg:w-[16%] xl:w-[14%] p-4">
+        <Link
+          href="/"
+          className="flex items-center justify-center lg:justify-start gap-2"
+        >
+          <Image src="/logo.png" alt="logo" width={32} height={32} />
+          <span className="hidden lg:block">SchooLama</span>
+        </Link>
+        <Menu />
+      </div>
+      <div className="w-[86%] md:w-[92%] lg:-[84%] xl:w-[86%] bg-[#F7F8FA] overflow-scroll">
+        <NavBar />
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/parent/page.tsx

@@ -0,0 +1,5 @@
+const ParentPage = () => {
+  return <div className="">ParentPage</div>;
+};
+
+export default ParentPage;

src/app/(dashboard)/student/page.tsx

@@ -0,0 +1,5 @@
+const StudentPage = () => {
+  return <div className="">StudentPage</div>;
+};
+
+export default StudentPage;

src/app/(dashboard)/teacher/page.tsx

@@ -0,0 +1,5 @@
+const TeacherPage = () => {
+  return <div className="">TeacherPage</div>;
+};
+
+export default TeacherPage;

src/app/layout.tsx

@@ -1,12 +1,12 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Lama Dev School Management Dashboard",
-  description: "Next.js School Management System",
+  title: 'Lama Dev School Management Dashboard',
+  description: 'Next.js School Management System',
 };
 
 export default function RootLayout({

src/app/sign-in/page.tsx

@@ -0,0 +1,5 @@
+const LoginPage = () => {
+  return <div className="">LoginPage</div>;
+};
+
+export default LoginPage;

src/components/AttendanceChart.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import Image from 'next/image';
+import {
+  BarChart,
+  Bar,
+  Rectangle,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+
+const data = [
+  {
+    name: 'Mon',
+    present: 60,
+    absent: 40,
+  },
+  {
+    name: 'Tue',
+    present: 70,
+    absent: 60,
+  },
+  {
+    name: 'Wed',
+    present: 90,
+    absent: 75,
+  },
+  {
+    name: 'Thu',
+    present: 90,
+    absent: 75,
+  },
+  {
+    name: 'Fri',
+    present: 65,
+    absent: 66,
+  },
+];
+const AttendanceChart = () => {
+  return (
+    <div className="bg-white rounded-lg p-4 h-full">
+      <div className="flex justify-between items-center">
+        <h1 className="text-lg font-semibold">Attendance</h1>
+        <Image src="/moreDark.png" alt="" width={20} height={20} />
+      </div>
+      <ResponsiveContainer width="100%" height="90%">
+        <BarChart width={500} height={300} data={data} barSize={20}>
+          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#ddd" />
+          <XAxis
+            dataKey="name"
+            axisLine={false}
+            tick={{ fill: '#d1d5db' }}
+            tickLine={false}
+          />
+          <YAxis axisLine={false} tick={{ fill: '#d1d5db' }} tickLine={false} />
+          <Tooltip
+            contentStyle={{ borderRadius: '10px', borderColor: 'lightgray' }}
+          />
+          <Legend
+            align="left"
+            verticalAlign="top"
+            wrapperStyle={{ paddingTop: '20px', paddingBottom: '40px' }}
+          />
+          <Bar
+            dataKey="present"
+            fill="#FAE27C"
+            activeBar={<Rectangle fill="pink" stroke="blue" />}
+            legendType="circle"
+            radius={[10, 10, 0, 0]}
+          />
+          <Bar
+            dataKey="absent"
+            fill="#C3EBFA"
+            activeBar={<Rectangle fill="gold" stroke="purple" />}
+            legendType="circle"
+            radius={[10, 10, 0, 0]}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default AttendanceChart;

src/components/CountChart.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import Image from 'next/image';
+import {
+  RadialBarChart,
+  RadialBar,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+
+const data = [
+  {
+    name: 'Total',
+    count: 106,
+    fill: 'white',
+  },
+  {
+    name: 'Girls',
+    count: 53,
+    fill: '#FAE27C',
+  },
+  {
+    name: 'Boys',
+    count: 53,
+    fill: '#C3EBFA',
+  },
+];
+
+const CountChart = () => {
+  return (
+    <div className="bg-white rounded-xl w-full h-full p-4">
+      {/* TITLE */}
+      <div className="flex justify-between items-center">
+        <h1 className="text-lg font-semibold">Students</h1>
+        <Image src="/moreDark.png" alt="" width={20} height={20} />
+      </div>
+      {/* CHART */}
+      <div className="relative w-full h-[75%]">
+        <ResponsiveContainer>
+          <RadialBarChart
+            cx="50%"
+            cy="50%"
+            innerRadius="40%"
+            outerRadius="100%"
+            barSize={32}
+            data={data}
+          >
+            <RadialBar background dataKey="count" />
+          </RadialBarChart>
+        </ResponsiveContainer>
+        <Image
+          src="/maleFemale.png"
+          alt=""
+          width={50}
+          height={50}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2"
+        />
+      </div>
+      {/* BOTTOM */}
+      <div className="flex justify-center gap-16">
+        <div className="flex flex-col gap-1">
+          <div className="w-5 h-5 bg-lamaSky rounded-full" />
+          <h1 className="font-bold">1,234</h1>
+          <h2 className="text-xs text-gray-300">Boys (55%)</h2>
+        </div>
+        <div className="flex flex-col gap-1">
+          <div className="w-5 h-5 bg-lamaYellow rounded-full" />
+          <h1 className="font-bold">1,234</h1>
+          <h2 className="text-xs text-gray-300">Girls (45%)</h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CountChart;