made the preview component added the chart but data is static.

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@canvasjs/react-charts": "^1.0.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.0.2",

frontend/src/components/Preview.tsx

@@ -0,0 +1,89 @@
+// import React from 'react';
+// // @ts-ignore 
+// import CanvasJSReact from '@canvasjs/react-charts';
+
+// const CanvasJS = CanvasJSReact.CanvasJS;
+// const CanvasJSChart = CanvasJSReact.CanvasJSChart;
+
+// const Preview = () => {
+//   const options = {
+//     animationEnabled: true,
+//     title: {
+//       text: "Fruit Distribution"
+//     },
+//     data: [{
+//       type: "doughnut",
+//       showInLegend: true,
+//       indexLabel: "{name}: {y}%",
+//       yValueFormatString: "#,###'%'",
+//       dataPoints: [
+//         { name: "Open", y: 45 },
+//         { name: "IN Progress", y: 25 },
+//         { name: "Review", y: 20 },
+//       ]
+//     }]
+//   };
+
+//   return (
+//     <div className="border-2 border-gray-300 rounded-md flex items-center justify-center p-4 h-full w-full">
+//       <CanvasJSChart options={options} />
+//     </div>
+//   );
+// };
+
+// export default Preview;
+
+import React from 'react';
+// @ts-ignore
+import CanvasJSReact from '@canvasjs/react-charts';
+
+const CanvasJS = CanvasJSReact.CanvasJS;
+const CanvasJSChart = CanvasJSReact.CanvasJSChart;
+
+const Preview = () => {
+
+  const options = {
+    animationEnabled: true,
+    title: {
+      text: "Preview",
+      horizontalAlign: "left",  // Align the title to the right
+      verticalAlign: "top",      // Position the title at the top
+      fontSize: 16,              // Adjust font size
+      fontWeight: "bold",      // Make the title less bold
+      fontFamily: "Arial",       // Change the font family if desired
+    },
+    data: [{
+      type: "doughnut",
+      showInLegend: true,   // Show the legend if you want to keep it
+      indexLabel: null,     // Remove the lined labels on the segments
+      yValueFormatString: "#,###'%'",
+      dataPoints: [
+        { name: "Open", y: 45, color: "#2986cc" },
+        { name: "In Progress", y: 25, color: "#9fc5e8" },
+        { name: "Review", y: 20, color:"#0b5394" },
+      ]
+      ,
+      innerRadius: "60%",  // Adjust this value to change the inner radius of the doughnut
+      radius: "80%", 
+    }],
+    legend: {
+      // Customize the legend here if needed
+      verticalAlign: "bottom",
+      horizontalAlign: "center",
+      fontSize: 12,
+      fontFamily: "tahoma",
+      cursor: "pointer",
+      itemclick: function(e:React.MouseEvent<HTMLButtonElement>) {
+        // function if want to add some event on clicking over the labels
+      }
+    }
+  };
+
+  return (
+    <div className="border-2 border-gray-300 rounded-md flex items-center justify-center p-4 h-full w-full">
+      <CanvasJSChart options={options} />
+    </div>
+  );
+};
+
+export default Preview;

frontend/src/components/ProjectSummary.tsx

@@ -37,7 +37,7 @@ interface ProjectSummaryProps {
   ];
 
   return (
-    <div className='border border-gray-300 rounded-md'>
+    <div className='border border-gray-300 rounded-md w-full lg:basis-2/3 md:basis-full ' style={{contain: 'content'}}>
       <div className='w-full flex justify-between items-center p-3'>
         <h2 className="lg:text-xl md:text-lg font-semibold">Project Summary</h2>
         <div className='flex gap-4'>
@@ -48,9 +48,9 @@ interface ProjectSummaryProps {
           ))}
         </div>
       </div>
-      <div className='p-4' style={{ height: '17rem', overflow: 'auto' }}>
+      <div className='p-4' style={{ height: '17rem', overflow: 'auto', contain: 'content' }}>
         <TableContainer component={Paper} style={{ maxHeight: '100%', overflowX: 'hidden' }}>
-          <Table stickyHeader sx={{ minWidth: 650 }} aria-label="project table">
+          <Table stickyHeader sx={{ minWidth: '15rem'}} aria-label="project table">
             <TableHead>
               <TableRow>
                 <TableCell style={{ fontWeight: 'bold' }}>Project Name</TableCell>

frontend/src/components/Sidebar.tsx

@@ -14,7 +14,7 @@ const menuItems = [
 
 const Sidebar: React.FC<{ isOnlyIcon: boolean }> = ({ isOnlyIcon }) => {
   return (
-    <aside className={` bg-blue-500 text-white h-screen p-1 ${isOnlyIcon ? 'w-16' : 'w-56'}`}>
+    <aside className={` bg-blue-500 text-white h-6/7 p-1 ${isOnlyIcon ? 'w-16' : 'w-56'}`}>
       <div className='py-3'>
         <div className="text-xl font-bold pb-3 flex justify-center">
           { !isOnlyIcon ? 

frontend/src/components/StatsCard.tsx

@@ -26,7 +26,7 @@ const statsData = [
 
 function StatsCard() {
   return (
-    <div className="grid lg:grid-cols-3 md:grid-cols-1  gap-4 py-4">
+    <div className="grid lg:grid-cols-3 md:grid-cols-1 w-full gap-4 py-4">
       {statsData.map((stat) => (
         <div key={stat.id} className="flex p-5 border border-gray-300 rounded-md gap-3">
           <div className={`w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center`}>

frontend/src/layout.tsx

@@ -31,7 +31,7 @@ const Layout: React.FC = () => {
   };
   return (
     <>
-    <div className="flex">
+    <div className="flex h-full">
         <Sidebar isOnlyIcon={isOnlyIcon}/>
         <div className='w-full'>
           <Navbar toggleSidebar={toggleSidebar} />
@@ -43,9 +43,6 @@ const Layout: React.FC = () => {
         </div>
 
     </div>
-    <div>
-      <Footer/>
-    </div>
     </>
   );
 };

frontend/src/pages/Dashboard.tsx

@@ -5,35 +5,33 @@ import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined
 import ProjectSummary from '../components/ProjectSummary';
 import { ApiResponse, Project } from '../interfaces/interfaces';
 import { getProjects } from '../services/api/projectService';
-
-
-
+import Preview from '../components/Preview';
 
 
 const Dashboard: React.FC = () => {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
-  // useEffect(() => {
-  //   const fetchProjects = async () => {
-  //     try {
-  //       const result: ApiResponse = await getProjects();
-  //       console.log(result.data)
-  //       if (result.success) {
-  //         setProjects(result.data);
-  //       }
-  //     } catch (error) {
-  //       console.error('Error fetching projects:', error);
-  //     } finally {
-  //       setLoading(false);
-  //     }
-  //   };
-
-  //   fetchProjects();
-  // }, []);
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        const result: ApiResponse = await getProjects();
+        console.log(result.data)
+        if (result.success) {
+          setProjects(result.data);
+        }
+      } catch (error) {
+        console.error('Error fetching projects:', error);
+      } finally {
+        setLoading(false);  
+      }
+    };
+
+    fetchProjects();
+  }, []);
 
   return (
-    <div className="p-2">
+    <div className="p-2 w-full">
       <div className="flex flex-col md:flex-row">
         <div className="w-full md:w-3/4 flex flex-col md:mb-0">
           <div className='w-full flex justify-between items-center'>
@@ -49,14 +47,13 @@ const Dashboard: React.FC = () => {
           <MeetingCard />
         </div>
       </div>
-      <div className="flex">
-        <div className="basis-2/3">
-          <ProjectSummary projects={projects}/>
-        </div>
-        <div className="basis-1/3 flex justify-center items-center">
-        place for the Preview 
+      <div className="flex flex-wrap py-4 lg:border-t-2 border-gray-300 w-full">
+        <ProjectSummary projects={projects} />
+        <div className="lg:basis-1/3 md:basis-full lg:pl-4">
+          <Preview/>
         </div>
       </div>
+
   </div>
   );
 };