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

@@ -1,4 +1,4 @@
 import React, { useState, useEffect } from 'react';
 import Dropdown from './common/Dropdown';
 import { TableContainer, Table, TableBody, TableCell, TableHead, TableRow, Paper } from '@mui/material';
 import { Project } from '../interfaces/interfaces';
@@ -37,7 +37,7 @@
  ];
 
  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 @@
  ))}
  </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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import Footer from './components/Footer';
 import Sidebar from './components/Sidebar';
 import Navbar from './components/Navbar';
 
@@ -31,7 +31,7 @@
  };
  return (
  <>
- <div className="flex">
+ <div className="flex h-full">
  <Sidebar isOnlyIcon={isOnlyIcon}/>
  <div className='w-full'>
  <Navbar toggleSidebar={toggleSidebar} />
@@ -43,9 +43,6 @@
  </div>
 
  </div>
- <div>
- <Footer/>
- </div>
  </>
  );
 };

frontend/src/pages/Dashboard.tsx

@@ -5,35 +5,33 @@
 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 @@
  <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>
  );
 };