Create Home Dashborad UI Template

frontend/src/components/Home.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { injectIntl } from 'react-intl'
 import { Breadcrumb, BreadcrumbItem, Grid } from '@carbon/react';
+import HomeDashBoard from './home/Dashboard.tsx'
 
 
 
@@ -19,6 +20,9 @@ class Home extends React.Component {
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  </Breadcrumb>
  </Grid>
+ <div> 
+ <HomeDashBoard/>
+ </div> 
  </>
  );
 

frontend/src/components/home/Dashboard.css

@@ -0,0 +1,40 @@
+/* src/components/Dashboard.css */
+.dashboard-container {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 50px;
+ padding: 50px;
+}
+
+.dashboard-tile {
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ background-color: #f4f4f4;
+}
+
+.tile-title {
+ margin: 0;
+ font-size: 1.2rem;
+}
+
+.tile-subtitle {
+ margin-top: 5px;
+ color: #666;
+}
+
+.tile-value {
+ margin-top: 10px;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.tile-icon {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+
+.clickable-icon {
+ cursor: pointer;
+}

frontend/src/components/home/Dashboard.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Icon, Link, Grid, Tile, ClickableTile, Column, ExpandableTile, TileAboveTheFoldContent, TileBelowTheFoldContent } from '@carbon/react';
+import './Dashboard.css';
+import { ArrowUpRight } from '@carbon/react/icons';
+interface DashBoardProps {
+}
+
+const HomeDashBoard: React.FC<DashBoardProps> = () => {
+
+ const tilesData = [
+ { title: 'In Progress', subtitle: 'Awaiting Result Entry', value: '0' },
+ { title: 'Ready For Validation', subtitle: 'Awaiting Review', value: '0' },
+ { title: 'Orders Completed Today', subtitle: 'Total Orders Completed Today', value: '0' },
+ { title: 'Patiallly Completed Today', subtitle: 'Total Orders Completed Today', value: '0' },
+ { title: 'Orders Entered By User', subtitle: 'Entered by user Today', value: '0' },
+ { title: 'Orders Rejected', subtitle: 'Rejected By Lab Today', value: '0' },
+ { title: 'Un Printed Results', subtitle: 'Un Prited Results Today', value: '0' },
+ { title: 'Incoming Orders', subtitle: 'Electronic Orders', value: '0' },
+ { title: 'Average Turn Around time', subtitle: 'Reception to Validation', value: '0' },
+ { title: 'Delayed Turn Around', subtitle: 'More Than 96 hours', value: '0' },
+ // { title: 'Tile 11', subtitle: 'Subtitle 1', value: '0' },
+ // { title: 'Tile 12', subtitle: 'Subtitle 1', value: '100' },
+ // ... add data for other tiles
+ ];
+
+ return (
+ <>
+ <div className="dashboard-container">
+ {tilesData.map((tile, index) => (
+ <Tile key={index} className="dashboard-tile">
+ <h3 className="tile-title">{tile.title}</h3>
+ <p className="tile-subtitle">{tile.subtitle}</p>
+ <p className="tile-value">{tile.value}</p>
+ <div className="tile-icon">
+ <Link href="#">
+ <ArrowUpRight
+ className="clickable-icon"
+ />
+ </Link>
+ </div>
+ </Tile>
+ ))}
+ </div>
+
+ </>
+ );
+
+}
+export default HomeDashBoard;