Constructing dashboard.

frontend/src/App.jsx

@@ -12,7 +12,7 @@ import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 import PrivateRoute from "./PrivateRoute";
 import ProfileUpdatePage from "./components/profilePage";
-import Dashboard from "./components/dashboard";
+import Dashboard from "./components/dashboard/dashboard";
 
 
 const App = () => {

frontend/src/components/dashboard/KpiCard.jsx

@@ -0,0 +1,21 @@
+
+import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react";
+
+export default function KpiCard() {
+  return (
+    <Card className="max-w-lg mx-auto">
+      <Flex alignItems="start">
+        <div>
+          <Text>Sales</Text>
+          <Metric>$ 12,699</Metric>
+        </div>
+        <BadgeDelta deltaType="moderateIncrease">13.2%</BadgeDelta>
+      </Flex>
+      <Flex className="mt-4">
+        <Text className="truncate">68% ($ 149,940)</Text>
+        <Text>$ 220,500</Text>
+      </Flex>
+      <ProgressBar value={15.9} className="mt-2" />
+    </Card>
+  );
+}

frontend/src/components/dashboard/dashboard.jsx

@@ -1,22 +1,21 @@
-"use client";
+import {
+  Card,
+  Grid,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Text,
+  Title,
+} from "@tremor/react";
+import KpiCard from "./kpiCard";
 
-      import {
-        Card,
-        Grid,
-        Tab,
-        TabGroup,
-        TabList,
-        TabPanel,
-        TabPanels,
-        Text,
-        Title,
-      } from "@tremor/react";
-      
-export default function DashboardExample() {
+export default function Dashboard() {
   return (
     <main className="p-12">
       <Title>Dashboard</Title>
-      <Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text>
+      <Text>All of your progress will be shown right here.</Text>
 
       <TabGroup className="mt-6">
         <TabList>
@@ -26,10 +25,7 @@ export default function DashboardExample() {
         <TabPanels>
           <TabPanel>
             <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
-              <Card>
-                {/* Placeholder to set height */}
-                <div className="h-28" />
-              </Card>
+              <KpiCard />
               <Card>
                 {/* Placeholder to set height */}
                 <div className="h-28" />
@@ -56,4 +52,4 @@ export default function DashboardExample() {
       </TabGroup>
     </main>
   );
-}
+}