Android_Retail/src/Pages/GstInvoiceSetup/GstInvoiceSetupList.jsx

import { useState, useEffect, useCallback, useMemo } from 'react';
import { useDispatch } from 'react-redux';
import { Space } from 'antd';
import {
    EditFilled,
    DeleteFilled,
    PlusOutlined,
    ReloadOutlined,
} from '@ant-design/icons';
import {
    changeBreadCrumb,

} from '../../Features/AppPage/CenterPage.js';
import { Tables } from '../../Components/Tables/Table';
import FormHeader from '../PageComponents/FormHeader.jsx';
import { useNavigate, useLocation } from 'react-router-dom';
import Search from '../../Components/Forms/Search.jsx';
import Buttons from '../../Components/Forms/Buttons';
import { getSession } from '../../Services/Others';
import { Messages } from '../../Components/Notifications/Messages';
import { deleteEInvoice, getEInvoice } from '../../Features/GStInvoice/gstinvoice.js';
const subDirectory = import.meta.env.BASE_URL;

const items = [
    {
        name: 'Home',
        link: `${subDirectory}app-page/home`,
    },

    {
        name: 'GST Invoice Setup',
        link: `${subDirectory}setting/gst-invoice-setup`,
    },
];

const GstInvoiceSetupList = () => {


    const navigate = useNavigate();
    const location = useLocation();
    const dispatch = useDispatch();

    const CompId = getSession('CompId');
    const BranchId = getSession('BranchId');
    const UserId = getSession('UserId');
    const UserType = getSession('UserType');

    const [messageType, setMessageType] = useState(null);
    const [messageData, setMessageData] = useState(null);
    const [TableData, setTableData] = useState([]);
    const [filteredInfo, setFilteredInfo] = useState({});
    const [sortedInfo, setSortedInfo] = useState({});
    const [searchedText, setSearchedText] = useState('');
    const [page, setpage] = useState(1);


    console.log(TableData, 'TableData');




    useEffect(() => {
        fetchData();
        dispatch(changeBreadCrumb({ items: items }));
    }, []);

    useEffect(() => {
        if (location.state?.message) {
            setMessageType(location.state.type);
            setMessageData(location.state.message);
        }
    }, []);

    const fetchData = async () => {
        const data = {
            branchId: BranchId,
            compId: CompId
        }
        const res = await dispatch(getEInvoice(data)).unwrap()

        if (res?.data?.statusCode === 1) {
            setTableData(res?.data?.data)
        }
        console.log(res, 'fsdfdfsdfsdf');

    }


    const handleChange = (pagination, filters, sorter) => {
        setFilteredInfo(filters);
        setSortedInfo(sorter);
    };

    const handlePageChange = (current) => {
        setpage(current);
    };


    const actionsFormatter = async (row, rowIndex) => {
        if (row.ActiveStatus !== 'D') {
            navigate(
                `${subDirectory}setting/gst-invoice-setup/update`,
                { state: { editstate: row } },
                { key: rowIndex }
            );
        }
    };

    const filteredTableData = useMemo(() => {
        if (!searchedText) return TableData;

        return TableData.filter(
            (item) =>
                item?.GSTNo?.toLowerCase().includes(searchedText.toLowerCase()) ||
                item?.TradeName?.toLowerCase().includes(searchedText.toLowerCase())
        );
    }, [searchedText, TableData]);



    const statusFormatter = async (row) => {
        const data = {
            uniqueId: row?.UniqueId,
            activeStatus: "D",
            updatedBy: UserId
        }
        const res = await dispatch(deleteEInvoice(data)).unwrap()
        console.log(res);
        if (res?.data?.statusCode === 1) {
            setMessageType("success");
            setMessageData("E-InvoiceMaster DeActive Successfully");
            fetchData();
        } else {
            setMessageType("error");
            setMessageData(res?.data?.response || "Failed to update status");
        }

    }

    const handleReload = async (row) => {
        const alreadyActive = TableData.find(
            (item) =>
                item.ActiveStatus === "A" && item.UniqueId !== row.UniqueId
        );
        if (alreadyActive) {
            setMessageType("warning");
            setMessageData(
                "One E-Invoice record is already active"
            );
            return;
        }
        const data = {
            uniqueId: row?.UniqueId,
            activeStatus: "A",
            updatedBy: UserId
        }
        const res = await dispatch(deleteEInvoice(data)).unwrap()
        console.log(res);
        if (res?.data?.statusCode === 1) {
            setMessageType("success");
            setMessageData("E-InvoiceMaster Active Successfully");
            fetchData();
        } else {
            setMessageType("error");
            setMessageData(res?.data?.response || "Failed to update status");
        }
    }

    const onSearch = (value) => {
        setSearchedText(value);
    };
    const onSearchChange = (e) => {
        setSearchedText(e?.target?.value);
    };

    const columns = [
        {
            title: 'Sl.No',
            key: 'sno',
            align: 'center',
            width: '60px',
            render: (text, object, index) => (
                <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
            ),
        },
        {
            title: 'GST No',
            key: 'GSTNo',
            dataIndex: 'GSTNo',
            align: 'center', 

        },
        {
            title: 'Legal Name',
            key: 'LegalName',
            dataIndex: 'LegalName',
            align: 'center', 

        },
        {
            title: 'Trade Name',
            key: 'TradeName',
            dataIndex: 'TradeName',
            align: 'center', 

        },
        {
            title: 'State Code ',
            key: 'StateCode',
            dataIndex: 'StateCode',
            align: 'center', 

        },
        {
            title: "Action",
            key: "Action",
            align: "center",
            width: '100px',
            render: (_, record, index) =>

                <Space size="middle">
                    {false ? (
                        <span style={{ color: "#999" }}>—</span>
                    ) : record.ActiveStatus === "A" ? (
                        <div className="actionDiv">
                            <EditFilled
                                style={{ color: "#1292EE" }}
                                onClick={() => actionsFormatter(record, index)}
                            />
                            <DeleteFilled
                                style={{ color: "#FF4D4F" }}
                                onClick={() => statusFormatter(record)}
                            />
                        </div>
                    ) : (
                        <ReloadOutlined
                            style={{ color: "#52C41A" }}
                            onClick={() => handleReload(record)}
                        />
                    )}
                </Space>

        },

    ];



    const onComplete = useCallback(() => {
        setMessageData(null);
        setMessageType(null);
    }, []);

    const handelAddButton = () => {

        navigate(`${subDirectory}setting/gst-invoice-setup/new`);


    };

    return (
        <div className="userPageTable">
            <div className="userPageContent">
                <Messages
                    messageType={messageType}
                    messageData={messageData}
                    onComplete={onComplete}
                />
                <div className="formAddNew">
                    <div>
                        <FormHeader title={'GST Invoice Setup'} />
                    </div>
                    <div className="searchAddDiv">
                        <div className="formSearch">
                            <Search
                                placeholder="Search"
                                onSearch={onSearch}
                                onSearchChange={onSearchChange}
                            />
                        </div>
                        <Buttons
                            buttonText={'Add New'}
                            handleSubmit={() => handelAddButton()}
                            // disabled={addnewAccess}
                            color="901D77"
                            icon={<PlusOutlined />}
                        >
                            OPEN
                        </Buttons>
                    </div>
                </div>
                <div className="reportTable">
                    <Tables
                        columns={columns}
                        data={filteredTableData}
                        dataSource={filteredTableData}
                        pagination={handlePageChange}
                        onChange={handleChange}
                    />{' '}
                </div>
            </div>
        </div>
    );
};

export default GstInvoiceSetupList;