import React, { useState, useEffect, useRef } from "react"; import ReactToPrint from "react-to-print"; import { Head, useForm } from "@inertiajs/inertia-react"; import styled from "styled-components"; import { formatIDR } from "@/Utils"; const Table = styled.table` border: 1px solid black; border-collapse: collapse; max-width: 100%; width: 100%; height: 20px; font-family: "babyblue"; `; const Th = styled.th` /* border: 1px solid black; border-collapse: collapse; */ width: 100px; height: 20px; `; const Td = styled.td` border: 1px solid black; border-collapse: collapse; height: 20px; `; const Img = styled.img` width: 30px; height: auto; `; const Print = React.forwardRef((props, ref) => { const [items, setItems] = useState([]) const { name, expenses } = props useEffect(() => { const isExists = expenses.find(i => i.isChecked === true) if (isExists !== undefined) { setItems(expenses.filter(i => i.isChecked)) return } setItems(expenses) }, [expenses]) return ( <>
{/* {JSON.stringify(props)} */} {items.map((expense, index) => ( ))}
PT.Multisarana Bahteramandiri
NO. : ______________
Date : {new Date().toLocaleDateString("en-CA")} _____
Advance Requisition Voucher
NAME : {name} DEPARTMENT : Operation___
NO. DESCRIPTION AMOUNT APPROVED
DEPT.MANAGER
DIRECTOR
REQUESTED
TOTAL
ASLI PAYMENT SLIP
NO.
DESCRIPTION
AMOUNT
{index + 1}
{`${ expense.job_number !== null ? expense.job_number : "" } ${expense.description}`}
{`Rp.` + formatIDR(expense.amount)}
TOTAL USED
{`Rp.` + formatIDR( expenses .map((a) => a.amount) .reduce((a, b) => +a + +b, 0) )}
TOTAL ADVANCE
BALANCE
REQUESTORS
FINANCE MANAGER
DEPARTEMENT MANAGER
DIRECTOR
); }); export default Print;