ui: add total messages card

app/admin/page.tsx

@@ -1,4 +1,5 @@
 import TotalUsers from "@/components/cards/dashboard/TotalUsers"
+import TotalMessages from "@/components/cards/dashboard/TotalMessages"
 import Services from "@/components/cards/dashboard/Services"
 import Header from '@/components/Header'
 
@@ -8,6 +9,7 @@ export default function Admin() {
       <Header pageTitle="Dashboard" />
       <div className="p-4 pb-0 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         <TotalUsers />
+        <TotalMessages />
       </div>
       <div className="p-4 pb-0 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         <Services />

components/cards/dashboard/TotalMessages.tsx

@@ -0,0 +1,24 @@
+import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/card'
+import { TbMailFilled, TbArrowUp } from "react-icons/tb"
+
+export default function TotalMessages() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center">
+          <TbMailFilled className="mr-2" />
+          Total Messages
+        </div>
+      </CardHeader>
+      <CardContent>
+        <span className="text-3xl font-bold">3,283</span>
+      </CardContent>
+      <CardFooter className="-mt-4">
+        <div className="flex items-center">
+          <TbArrowUp className="text-green-500 mr-1" />
+          <span className="text-green-500">283 messages this week</span>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}