Skip to content

Commit

Permalink
committed
Browse files Browse the repository at this point in the history
  • Loading branch information
@MinhazAyaaz
MinhazAyaaz committed Sep 2, 2024
1 parent 5a91882 commit 7857d10
Show file tree
Hide file tree
Showing 13 changed files with 986 additions and 614 deletions.
370 changes: 212 additions & 158 deletions package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.13.7",
"@mui/material": "^5.11.10",
"@mui/material": "^5.14.12",
"@mui/x-date-pickers": "^6.0.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
Expand Down
2 changes: 1 addition & 1 deletion src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,4 @@
to {
transform: rotate(360deg);
}
}
}
166 changes: 0 additions & 166 deletions src/Components/Chullora.js
View file
Original file line number Diff line number Diff line change
@@ -1,166 +0,0 @@
import React from "react";
import { useState, useEffect } from "react";
import { ChulloraRun } from "../data/ChulloraRun";
import Detailed from "./Detailed";

function Chullora(props) {
const [tableRows, setTableRows] = useState([]);
const [tableValues, setTableValues] = useState([]);
let top = 0;

useEffect(() => {

const rowsArray = [];
const valuesArray = [];

const json = ChulloraRun.ChulloraRun.map((item) => {

let pickupScore="NA";
let deliveryScore="NA";
let complianceScore="NA";
let productivityScore="NA";
let totalScore="Run not active";

props.DataTwoA?.map((temp) => {
if(item["Run #"]==temp["Run #"]){
pickupScore = temp["Pickup Score"];
deliveryScore = temp["Delivery Score"]
complianceScore = temp["Compliance Score"]
productivityScore = temp["Productivity Score"]
totalScore = temp["Overall Score"]
}
})

return {
...item,
"Pickup Score": pickupScore,
"Delivery Score": deliveryScore,
"Compliance Score": complianceScore,
"Productivity Score": productivityScore,
"Total Score (%)": totalScore,
};
});

// Sort JSON based on "Total Score (%)"
json.sort((a, b) => {
const scoreA = parseFloat(a["Total Score (%)"]);
const scoreB = parseFloat(b["Total Score (%)"]);
return scoreB - scoreA; // Sort in descending order
});

const newData = json.map((item) => {
if(item["Total Score (%)"]!="Run not active"){
top++;
}
else{
top = ""
}
return{
...item,
"Top 5?":top,
"OSH cost grouping" : "Chullora",
}
});

newData.map((d) => {
rowsArray.push(Object.keys(d));
valuesArray.push(Object.values(d));
});

// Filtered Column Names
setTableRows(rowsArray[0]);

// Filtered Values
setTableValues(valuesArray);
}, []);

return (
<div className="w-full">
<table class="table-auto border-x border-b w-full text-left text-gray-800">
<thead className="">
<tr>
{tableRows.map((rows, index) => {
return (
<th
className="font-bold p-2 border-b border-l border-[#dc291e] text-left bg-[#dc291e] text-white"
key={index}
>
{rows}
</th>
);
})}
</tr>
</thead>
<tbody>
{tableValues.map((value, index) => {
return (
<tr className="odd:bg-gray-100 hover:!bg-red-200" key={index}>
{value.map((val, i) => {
return (
<td className="p-2 border-b border-l text-left" key={i}>
{val}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"055"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"358"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"257"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"155"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"160"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"358"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"059"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"060"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"152"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"153"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"155"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"156"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"157"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"158"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"160"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"255"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"256"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"257"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"258"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"260"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"352"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"358"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"359"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"360"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"452"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"458"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"460"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"558"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-between">
<Detailed runNumber={"559"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"560"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"658"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"660"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
<div className="w-full flex flex-wrap justify-center">
<Detailed runNumber={"758"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
<Detailed runNumber={"760"} DataTwoA={props.DataTwoAFull} DataTwoFour={props.DataTwoFour}/>
</div>
</div>
);
}

export default Chullora;
130 changes: 95 additions & 35 deletions src/Components/TableOne.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
import React from 'react'
import {useState,useEffect} from 'react'
import {useState,useEffect,useRef} from 'react'
import {
Table,
TableHead,
TableBody,
TableRow,
TableCell,
Paper,
TablePagination,
TableContainer,
} from "@mui/material";
import "./styles.css";

function TableOne(props){
const [tableRows, setTableRows] = useState([]);
const [tableValues, setTableValues] = useState([]);
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [selectedRow, setSelectedRow] = useState(null);
const tableRef = useRef(null);

const Chullora = 36
const Matraville = 27
const OSH = 77
Expand Down Expand Up @@ -121,44 +137,88 @@ function TableOne(props){

setTableRows(rowsArray[0]);
setTableValues(valuesArray);

// Add click event listener to Paper component
const handleOutsideClick = (event) => {
if (tableRef.current && !tableRef.current.contains(event.target)) {
setSelectedRow(null); // Clicked outside the table, deselect the row
}
};

document.addEventListener("click", handleOutsideClick);
return () => {
document.removeEventListener("click", handleOutsideClick);
};
}, []);

const handleChangePage = (event, newPage) => {
setPage(newPage);
};

const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};

const handleRowClick = (rowData) => {
if (selectedRow === rowData) {
setSelectedRow(null); // Deselect the row if it's already selected
} else {
setSelectedRow(rowData);
}
};

return(
<table class="table-auto border-x border-b w-full text-left text-gray-800">
<thead className="">
<tr>
{tableRows.map((rows, index) => {
return (
<th
className="font-bold p-2 border-b border-l border-[#dc291e] text-left bg-[#dc291e] text-white"
key={index}
>
{rows}
</th>
);
})}
</tr>
</thead>
<tbody>
{tableValues.map((value, index) => {
return (
<tr className="odd:bg-gray-100 hover:!bg-red-200" key={index}>
{value.map((val, i) => {
return (
<td
className="p-2 border-b border-l text-left"
key={i}
>
{val}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
<Paper className="w-full px-[30px]">
<TableContainer>
<Table>
<TableHead className="bg-[#d32f2f]">
<TableRow>
{tableRows.map((row, index) => (
<TableCell key={index} sx={{ color: "#ffffff", fontWeight: 600 }}>
{row}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody ref={tableRef}>
{tableValues
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((value, index) => (
<TableRow
selected={selectedRow === value}
key={index}
className={`hover:bg-red-200 ${
index % 2 === 0 ? "odd:bg-gray-100" : ""
}`}
onClick={() => handleRowClick(value)}
>
{value.map((val, i) => (
<TableCell
key={i}
sx={{
color: selectedRow === value ? "#ffffff" : "",
fontWeight: 400,
}}
>
{val}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div"
count={tableValues.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
</Paper>
)


Expand Down
Loading

0 comments on commit 7857d10

Please sign in to comment.