Won

react.js

import LayoutMember from "@/layouts/LayoutMember";
import { TenantProductService } from "@/services/tenant/tenant-product";
import { ActionIcon, Button, Container, Grid, Group, LoadingOverlay, NumberInput, Paper, ScrollArea, Select, Table, Text, Textarea, TextInput, useMantineTheme } from "@mantine/core";
import { useForm, useDebouncedValue } from "@mantine/hooks";
import { useEffect, useState, useRef } from "react";
import { HiOutlinePlus, HiOutlineTrash } from "react-icons/hi";
import { BsPercent } from 'react-icons/bs'
import useStyles from '@/components/Estimate/styles/EstimateCreateStyles'
import { DatePicker } from "@mantine/dates";

// import '@/styles/estimate.css'
const TenantEstimateCreate = () => {
    const [loading, setLoading] = useState(false)
    const productService = new TenantProductService()
    const [productlist, setProductList] = useState([])
    const productref = useRef(null)
    const priceref = useRef(null)
    const qtyref = useRef(null)
    const discountref = useRef(null)
    const taxref = useRef(null)
    const subref = useRef(null)
    const [subtotal_value, setSubTotalValue] = useState('');

    const { classes } = useStyles()

    const [listfields, setListFields] = useState([
        { product_id: '', description: '', price_sell: '', qty: '', discount: '', tax_id: '' },
    ]);
    const form = useForm({
        initialValues: {
            no: '',
            no_ref: '',
            partner_id: '',
            note: '',
            date: new Date(),
            due_date: new Date(),
            tax_extra: '',
            subtotals: ''
        }
    })

    const serviceStack = async () => {
        await productService.getModels().then(res => {
            const list = (res.data.map(item => ({
                    key: item.id,
                    value: item.id, 
                    label: item.name
            })))
            setProductList(list)
        }).catch(err => err.response)
    }

    useEffect(() => {
        serviceStack()
    })

    const handleFormChange = (event, index) => {
        const datareal = [...listfields]
        datareal[index][event.target.id] = event.target.value
        setListFields(datareal)
    }

    const handleFormChangePrice = async (event, index) => {
        const datareal = [...listfields]
        if (priceref.current.id == 'price_sell') {
            if (event == undefined) {
                datareal[index][priceref.current.id] = 0
                setListFields(datareal)
            } else {
                datareal[index][priceref.current.id] = event
                setListFields(datareal)
            }
        }
    }

    const handleFormChangeQty = async (event, index) => {
        const datareal = [...listfields]
        if (qtyref.current.id == 'qty') {
            if (event == undefined) {
                datareal[index][qtyref.current.id] = 0
                setListFields(datareal)
            } else {
                datareal[index][qtyref.current.id] = event
                setListFields(datareal)
            }
        }
    }

    const handleFormChangeTax = async (event, index) => {
        const datareal = [...listfields]
        if (taxref.current.id == 'tax_id') {
            if (event == undefined) {
                datareal[index][taxref.current.id] = 0
                setListFields(datareal)
            } else {
                datareal[index][taxref.current.id] = event
                setListFields(datareal)
            }
        }
    }

    const handleFormChangeDiscount = async (event, index) => {
        const datareal = [...listfields]
        if (discountref.current.id == 'discount') {
            if (event == undefined) {
                datareal[index][discountref.current.id] = 0
                setListFields(datareal)
            } else {
                datareal[index][discountref.current.id] = event
                setListFields(datareal)
            }

        }
    }
    const handleFormChangeSelect = async (event, index) => {
        const datareal = [...listfields]

        if (productref.current == null) {
            // console.log(event, 'Change')
            datareal[index]['product_id'] = event
        } else {
            datareal[index][productref.current.id] = event
            setListFields(datareal)
        }

    }

    const handleFormChangeSelectFocus = async (event, index) => {
        const datareal = [...listfields]

        if (productref.current == null) {
            datareal[index][event.target.id] = event
            setListFields(datareal)
        } else {
            datareal[index][productref.current.id] = event
            setListFields(datareal)
        }

    }
    
    const addFields = () => {
        const objectform = [...listfields];
        const objectnew = { product_id: '', description: '', price_sell: '', qty: '', discount: '', tax_id: ''}
        objectform.push(objectnew)
        setListFields(objectform)
    }

    const removeFields = index => {
        const objectform = [...listfields];
        objectform.splice(index, 1);
        setListFields(objectform)
    }

    const CalculateSubTotal = () => {

        const submons =  listfields.reduce((prev, cur) => (prev += ((Number(cur.price_sell) * Number(cur.qty)) - ((Number(cur.price_sell) * Number(cur.discount) / 100) * Number(cur.qty)) +  ((Number(cur.price_sell) * Number(cur.qty)) * Number(cur.tax_id) / 100))), 0)

        // console.log(submons)
        return (
            // <NumberInput 
            //     hideControls
            //     readOnly
            //     variant="filled"
            //     {...form.getInputProps('subtotals')}
            // />
            <Text size="sm" weight={700} style={{ paddingLeft: 10 }}>Rp {submons}</Text>
        )
    }
    
    // console.log(subtotal_value)
    const handleSubmit = () => {
        console.log(listfields)
    }
    
    
    
    return (
        <LayoutMember>
            <form onSubmit={form.onSubmit(handleSubmit)}>

            <LoadingOverlay visible={loading} />
                <Paper shadow='xs' padding='xl'>
                    <Grid justify='space-between' mb={30}>
                        <Grid.Col span={12} xl={3} lg={3}>
                            <Text>Logo Slot</Text>
                        </Grid.Col>
                        <Grid.Col span={12} xl={3} lg={3}>
                            <TextInput 
                                label="No Estimasi"
                                // variant="filled"
                                {...form.getInputProps('no')}
                            />
                            <TextInput 
                                label="No Referensi"
                                // variant="filled"
                                {...form.getInputProps('no_ref')}
                            />
                            <TextInput 
                                label="Customer"
                                variant="filled"
                                {...form.getInputProps('partner_id')}
                            />
                        </Grid.Col>
                        <Grid.Col span={12} xl={3} lg={3}>
                            <DatePicker 
                                label="Tgl Invoice"
                                variant="filled"
                                {...form.getInputProps('date')}

                            />
                            <DatePicker 
                                label="Due Date Invoice"
                                variant="filled"
                                {...form.getInputProps('due_date')}

                            />
                        </Grid.Col>
                    </Grid>
                    {/* </Container> */}
                <ScrollArea>

                        <Table className={classes.table}>
                                <thead>
                                    <tr>
                                        <th className={classes.no_table}>No</th>
                                        <th className={classes.product_table}>Produk</th>
                                        <th className={classes.description_table}>Deskripsi</th>
                                        <th className={classes.price_table}>Harga</th>
                                        <th className={classes.qty_table}>Qty</th>
                                        <th className={classes.discount_table}>Disc</th>
                                        <th className={classes.tax_table}>Tax</th>
                                        <th className={classes.subtotal_table}>Sub Total</th>
                                        <th className={classes.action_table}>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {listfields && listfields.map((field, index) => {
                                        const subtotals = (Number(field.price_sell) * Number(field.qty)) - ((Number(field.price_sell) * Number(field.discount) / 100) * Number(field.qty)) +  ((Number(field.price_sell) * Number(field.qty)) * Number(field.tax_id) / 100)
                                        return (
                                            <tr key={index}>
                                                <td>
                                                    <Text mt={10} className={classes.no_td}>
                                                    {index + 1}
                                                    </Text>
                                                </td>
                                                <td>
                                                    <Select
                                                        className={classes.product_td}
                                                        placeholder='Produk'
                                                        style={{ marginTop: 0 }}
                                                        variant="filled"
                                                        ref={productref}
                                                        data={productlist}
                                                        id="product_id"                                          
                                                        value={field.product_id}
                                                        onChange={(event) => handleFormChangeSelect(event, index)}
                                                        onFocus={(event) => handleFormChangeSelectFocus(event, index)}
                                                    />
                                                </td>
                                                <td>
                                                    <Textarea
                                                        size="xs"
                                                        style={{ marginTop: 0 }}
                                                        className={classes.description_td}
                                                        id="description"
                                                        variant="filled"
                                                        autosize
                                                        minRows={1}
                                                        maxRows={2}
                                                        placeholder='Deskripsi'
                                                        value={field.description}
                                                        onChange={(event) => handleFormChange(event, index)}
                                                    />
                                                </td>
                                                <td>
                                                    <NumberInput
                                                        id="price_sell"
                                                        variant="filled"
                                                        style={{ marginTop: 0 }}
                                                        className={classes.price_td}
                                                        hideControls
                                                        ref={priceref}
                                                        placeholder='Price Sell'
                                                        value={field.price_sell}
                                                        onChange={(event) => handleFormChangePrice(event, index)}
                                                    />
                                                </td>
                                                <td>
                                                    <NumberInput
                                                        style={{ marginTop: 0 }}
                                                        placeholder='Qty'
                                                        id="qty"
                                                        variant="filled"
                                                        className={classes.qty_td}
                                                        ref={qtyref}
                                                        hideControls
                                                        value={field.qty}
                                                        onChange={(event) => handleFormChangeQty(event, index)}
                                                    />
                                                </td>
                                                <td>
                                                    <NumberInput
                                                        style={{ marginTop: 0 }}
                                                        placeholder='Discount'
                                                        id="discount"
                                                        variant="filled"
                                                        className={classes.discount_td}
                                                        hideControls
                                                        rightSection={<BsPercent style={{ fontSize: 13  }} />}
                                                        ref={discountref}
                                                        step={1}
                                                        defaultValue={0}
                                                        min={0}
                                                        value={field.discount}
                                                        onChange={(event) => handleFormChangeDiscount(event, index)}
                                                    />
                                                </td>
                                                <td>
                                                    <NumberInput
                                                        style={{ marginTop: 0 }}
                                                        variant="filled"
                                                        placeholder='Tax'
                                                        id="tax_id"
                                                        className={classes.tax_td}
                                                        defaultValue={0}
                                                        hideControls
                                                        rightSection={<BsPercent style={{ fontSize: 13  }} />}
                                                        ref={taxref}
                                                        value={field.tax_id}
                                                        onChange={(event) => handleFormChangeTax(event, index)}
                                                    />
                                                </td>
                                                <td>
                                                {isNaN(subtotals) ? (
                                                    <NumberInput 
                                                        value={0}
                                                        hideControls
                                                        variant="filled"
                                                        readOnly
                                                    />
                                                ): (
                                                    <NumberInput 
                                                        id="subs"
                                                        style={{ marginTop: 0 }}
                                                        className={classes.subtotal_td}
                                                        value={subtotals}
                                                        ref={subref}
                                                        hideControls
                                                        icon={<Text size="sm" style={{ color: '#000' }}>Rp</Text>}
                                                        variant="unstyled"
                                                        readOnly
                                                    />
                                                )}


                                                </td>
                                                <td>
                                                    <Group direction='row' mt={10}>
                                                        {index == 0 ? (
                                                            <></>
                                                        ): (
                                                            <ActionIcon variant="light" radius="md" size="md" color="red" onClick={() => removeFields(index)}><HiOutlineTrash style={{ fontSize: 18 }} /></ActionIcon>

                                                        )}
                                                    </Group>
                                                </td>
                                            </tr>
                                        )
                                    })}
                                   
                                    <tr>
                                        <td colSpan={5}></td>
                                        <td colSpan={2}><Text size="sm">Sub Total</Text></td>
                                        <td>
                                            <CalculateSubTotal />
                                        </td>
                                        <td></td>

                                    </tr>
                                    <tr>
                                        <td colSpan={5}></td>
                                        <td colSpan={2}><Text size="sm">Tax Extra</Text></td>
                                        <td>
                                            <NumberInput 
                                            style={{ marginTop: 0 }}
                                            variant="filled"
                                            placeholder='Tax Extra'
                                            id="tax_extra"
                                            // className={classes.tax_td}
                                            defaultValue={0}
                                            hideControls
                                            rightSection={<BsPercent style={{ fontSize: 13  }} />}
                                            // ref={taxref}
                                            {...form.getInputProps('tax_extra')}
                                            // onChange={(event) => handleFormChangeTax(event, index)}
                                            />
                                        </td>
                                        <td></td>

                                    </tr>
                                    <tr>
                                        <td colSpan={5}></td>
                                        <td colSpan={2}><Text size="sm">Discount Extra</Text></td>
                                        <td>
                                            <NumberInput 
                                            style={{ marginTop: 0 }}
                                            variant="filled"
                                            placeholder='Tax Extra'
                                            id="tax_extra"
                                            // className={classes.tax_td}
                                            defaultValue={0}
                                            hideControls
                                            rightSection={<BsPercent style={{ fontSize: 13  }} />}
                                            // ref={taxref}
                                            {...form.getInputProps('tax_extra')}
                                            // onChange={(event) => handleFormChangeTax(event, index)}
                                            />
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colSpan={5}></td>
                                        <td colSpan={2}><Text size="sm">Grand Total</Text></td>
                                        <td>
                                            <NumberInput 
                                                style={{ marginTop: 0 }}
                                                variant="filled"
                                                placeholder='Tax Extra'
                                                id="tax_extra"
                                                // className={classes.tax_td}
                                                defaultValue={0}
                                                hideControls
                                                icon={<Text size="sm">Rp</Text>}
                                                // rightSection={<BsPercent style={{ fontSize: 13  }} />}
                                                // ref={taxref}
                                                {...form.getInputProps('tax_extra')}
                                                // onChange={(event) => handleFormChangeTax(event, index)}
                                            />
                                        </td>
                                        <td></td>
                                    </tr>

                                </tbody>
                        </Table>
                    </ScrollArea>
                    

                    <Group mt={5}>
                        <Button variant="filled" onClick={() => addFields()} color='cyan' size="xs">Tambah Line</Button>
                    </Group>

                    <Grid justify='space-between'>
                        <Grid.Col span={12} xl={4} lg={4}>
                            <Textarea 
                                label="Note"
                                {...form.getInputProps('note')}
                            />
                            <Textarea 
                                label="Term"
                                {...form.getInputProps('note')}
                            />
                        </Grid.Col>
                        {/* <Grid.Col span={12} xl={4} lg={4}>
                            <Textarea 
                                label="Note"
                                {...form.getInputProps('note')}
                            />

                        </Grid.Col> */}
                        <Grid.Col span={12} xl={4} lg={4}>
                            <Group position="right">
                                <Button type="submit" fullWidth>Submit</Button>
                            </Group>

                        </Grid.Col>
                    </Grid>
                    
            </Paper>
            </form>

        </LayoutMember>
    )
}

export default TenantEstimateCreate