feat : Add MonthlyRevenue and NewHospitals component

app/(pages)/admin/page.tsx

@@ -10,6 +10,8 @@ import {
   UserDistributionPie,
 } from "./components";
 import { PaginatedResponse, RecentUser, TilesDataProp } from "@pft-types/index";
+import MonthlyRevenueChart from "./components/MonthlyRevenueChart";
+import HospitalApprovalList from "./components/HospitalApprovalList";
 
 export default function Admin() {
   const [tilesData, setTilesData] = useState<TilesDataProp | null>(null);
@@ -90,6 +92,38 @@ export default function Admin() {
     { id: "hospitals", label: "Hospitals", value: 5 },
   ];
 
+  const mockNewHospitals = [
+    { id: "1", name: "Central Hospital", email: "[email protected]" },
+    { id: "2", name: "Westside Clinic", email: "[email protected]" },
+    { id: "3", name: "Sunshine Medical Center", email: "[email protected]" },
+    {
+      id: "4",
+      name: "Northern Health Institute",
+      email: "[email protected]",
+    },
+    { id: "5", name: "Riverside Hospital", email: "[email protected]" },
+  ];
+
+  const mockMonthlyRevenue = [
+    {
+      id: "Monthly Revenue",
+      data: [
+        { x: "Jan", y: 50000 },
+        { x: "Feb", y: 55000 },
+        { x: "Mar", y: 60000 },
+        { x: "Apr", y: 58000 },
+        { x: "May", y: 65000 },
+        { x: "Jun", y: 70000 },
+        { x: "Jul", y: 68000 },
+        { x: "Aug", y: 72000 },
+        { x: "Sep", y: 75000 },
+        { x: "Oct", y: 80000 },
+        { x: "Nov", y: 85000 },
+        { x: "Dec", y: 90000 },
+      ],
+    },
+  ];
+
   return (
     <div className="flex flex-col overflow-y-scroll scrollbar">
       <main className="flex-grow p-8">
@@ -109,6 +143,14 @@ export default function Admin() {
                 <UserDistributionPie data={userDistributionData} />
               </div>
 
+              <div className="grid grid-cols-2 gap-6">
+                {/* Monthly Revenue Chart */}
+                <MonthlyRevenueChart data={mockMonthlyRevenue} />
+
+                {/* Hospital Approval List */}
+                <HospitalApprovalList hospitals={mockNewHospitals} />
+              </div>
+
               {/* Recent Activity */}
               <RecentActivity
                 recentUsers={recentUsers}