Scribd
Upload
11 views5 pages

DetailPengujian TSX

This document provides details on a blending recipe including raw material names, ratios, scheduled and actual amounts. It displays this information in tables along with lot numbers and edit buttons. The recipe details are retrieved from an API call using the id parameter.

Uploaded by

JTD3A15Mitodius Nicho
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views5 pages

DetailPengujian TSX

This document provides details on a blending recipe including raw material names, ratios, scheduled and actual amounts. It displays this information in tables along with lot numbers and edit buttons. The recipe details are retrieved from an API call using the id parameter.

Uploaded by

JTD3A15Mitodius Nicho
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

/* eslint-disable prettier/prettier */

import Page from "@/components/Page";


import { Icon } from "@iconify/react";
import editFill from '@iconify/icons-eva/edit-fill';
import { Container, Stack, Typography, Card, Table, TableHead, TableRow, TableCell,
TableBody, Button, Link, Box } from "@material-ui/core";
import React, { useEffect, useState } from "react";
import { Link as RouterLink, useParams } from 'react-router-dom';
import grafik from '@iconify/icons-ic/outline-auto-graph';
import axios from "axios";
import data from "@iconify/icons-ant-design/bug-filled";

const DetailPengujian = (): JSX.Element => {


const { idpengujian } = useParams();
const [datapeng, setdata] = useState<any[]>([]);

useEffect(() => {
async function fetchData() {
try {
const response = await axios.get(`/api/blendOrder/get/$
{idpengujian}}`);
const datas = response.data;
setdata(datas);
console.log(datapeng); // This will log the updated data
} catch (error) {
console.error('API request error:', error);
}
}
fetchData();
}, [idpengujian]);
return (
<Page title="Blending Work Order">
<Container maxWidth="xl">
<Stack direction="row" alignItems="center" justifyContent="space-
between" mb={2}>
<Typography variant="h5" gutterBottom>
<b>Recipe</b>
</Typography>
</Stack>
<Table>
<TableRow>
<TableCell>
<Card variant='outlined' sx={{ boxShadow: 1, px: 1, mb:
1}}>
{datapeng.map((items) => {
return(
<Table>
<TableBody>

<TableRow>
<TableCell>Lot Number</TableCell>
<TableCell>:</TableCell>
<TableCell>{items.lot}</TableCell>
</TableRow>
<TableRow>
<TableCell>No WO</TableCell>
<TableCell>:</TableCell>

<TableCell>{items.no_wo}</TableCell>
</TableRow>
<TableRow>
<TableCell>Input Date</TableCell>
<TableCell>:</TableCell>

<TableCell>{(items.tgl_input).substring(0,10)}</TableCell>
</TableRow>
<TableRow>
<TableCell>Product Code</TableCell>
<TableCell>:</TableCell>

<TableCell>{items.kode_p}</TableCell>
</TableRow>
</TableBody>
</Table>
)
})}
</Card>
</TableCell>
<TableCell>
<Card variant='outlined' sx={{ boxShadow: 1, px: 1, mb:
1}}>
{datapeng.map((items) => {
return(
<Table>
<TableBody>

<TableRow>
<TableCell>Production
Tank</TableCell>
<TableCell>:</TableCell>

<TableCell>{items.tanki}</TableCell>
</TableRow>
<TableRow>
<TableCell>Volume (L)</TableCell>
<TableCell>:</TableCell>

<TableCell>{items.volume}</TableCell>
</TableRow>
<TableRow>

<TableCell>Density/Ammount</TableCell>
<TableCell>:</TableCell>
<TableCell>{items.density} /
{parseInt(items.volume)*parseFloat(items.density)} kg</TableCell>
</TableRow>
<TableRow>
<TableCell>Machine</TableCell>
<TableCell>:</TableCell>
<TableCell>Density</TableCell>
</TableRow>
</TableBody>
</Table>
)
})}
</Card>
</TableCell>
</TableRow>
</Table>
<Box
display={'flex'}
justifyContent={'flex-end'}
alignItems={'flex-end'}
>
<Link to="/target" color="inherit" underline="hover"
component={RouterLink}>
<Button variant="outlined" sx={{ px: 1, mb: 2, mr: 2, mt: 2}}>
Target
</Button>
</Link>
</Box>
<Card variant='outlined' sx={{ boxShadow: 3 }}>
<Table>
<TableHead>
<TableRow>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell align="center" colSpan={2}><b>Production
Control</b></TableCell>
<TableCell align="center" colSpan={2}><b>QC
Confirm</b></TableCell>
<TableCell
align="center"><b>Production</b></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableHead>
<TableRow>
<TableCell align="center"><b>Raw
Material</b></TableCell>
<TableCell align="center"><b>Name of Raw
Material</b></TableCell>
<TableCell align="center"><b>Mass
Ratio</b></TableCell>
<TableCell align="center"><b>Schedule Amount
(kg)</b></TableCell>
<TableCell align="center"><b>Mass
Ratio</b></TableCell>
<TableCell align="center"><b>Schedule Amount (kg)
Target</b></TableCell>
<TableCell align="center"><b>Actual Quantity
(kg)</b></TableCell>
<TableCell align="center"><b>Lot
Number</b></TableCell>
<TableCell align="center"><b>Action</b></TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Base oil-1</TableCell>
<TableCell>200HV / YUBASE 6</TableCell>
<TableCell align="center">54,525%</TableCell>
<TableCell align="center">4,095</TableCell>
<TableCell align="center">56,565%</TableCell>
<TableCell align="center">4,273</TableCell>
<TableCell align="center">4274</TableCell>
<TableCell align="center">200723T101</TableCell>
<TableCell align="center" >
<a href="/updatedetailrecipe"><Icon
icon={editFill} color="#b01c33" width={25} height={25} /></a>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Base oil-2</TableCell>
<TableCell>100HV / YUBASE 4</TableCell>
<TableCell align="center">30,672%</TableCell>
<TableCell align="center">2,549</TableCell>
<TableCell align="center">28,535%</TableCell>
<TableCell align="center">2,371</TableCell>
<TableCell align="center">2367</TableCell>
<TableCell align="center">180723T106</TableCell>
<TableCell align="center" >
<a href="/updatedetailrecipe"><Icon
icon={editFill} color="#b01c33" width={25} height={25} /></a>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Additive-1</TableCell>
<TableCell>TZ-966</TableCell>
<TableCell align="center">7,700%</TableCell>
<TableCell align="center">639,8</TableCell>
<TableCell align="center">7,700%</TableCell>
<TableCell align="center">639,8</TableCell>
<TableCell align="center">639.8</TableCell>
<TableCell align="center">2022229650</TableCell>
<TableCell align="center" >
<a href="/updatedetailrecipe"><Icon
icon={editFill} color="#b01c33" width={25} height={25} /></a>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Additive-2</TableCell>
<TableCell>TZ-1503</TableCell>
<TableCell align="center">6,600%</TableCell>
<TableCell align="center">548,4</TableCell>
<TableCell align="center">7,700%</TableCell>
<TableCell align="center">548,4</TableCell>
<TableCell align="center">548,4</TableCell>
<TableCell align="center">2023225633</TableCell>
<TableCell align="center" >
<a href="/updatedetailrecipe"><Icon
icon={editFill} color="#b01c33" width={25} height={25} /></a>
</TableCell>
</TableRow>
<TableRow>
<TableCell>Additive-3</TableCell>
<TableCell>TZ-1253</TableCell>
<TableCell align="center">0,500%</TableCell>
<TableCell align="center">41,5</TableCell>
<TableCell align="center">0,500%</TableCell>
<TableCell align="center">41,5</TableCell>
<TableCell align="center">41,6</TableCell>
<TableCell align="center">2111301639</TableCell>
<TableCell align="center" >
<a href="/updatedetailrecipe"><Icon
icon={editFill} color="#b01c33" width={25} height={25} /></a>
</TableCell>
</TableRow>
</TableBody>
</Table>
</Card>
</Container>
</Page>
);
};

export default DetailPengujian;

You might also like