nice-app-web/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx

import moment from 'moment';
import { IMAGE_ROOT } from "@/shared/constants/common";
import { useState, useEffect } from "react";
import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send-filter";
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PATHS } from "@/shared/constants/paths";
import { LinkPaymentPendingList } from "./link-payment-pending-list";
import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod } from "../../model/types";

export const LinkPaymentPendingSendWrap = () => {
    const { navigate } = useNavigate();

    const [filterOn, setFilterOn] = useState<boolean>(false);
    const [mid, setMid] = useState<string>('nictest001m');
    const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.ALL)
    const [searchKeyword, setSearchKeyword] = useState<string>('');
    const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
    const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
    const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
    const [sendingStatus, setSendingStatus] = useState<LinkPaymentSendingStatus>(LinkPaymentSendingStatus.ALL);

    const [listItems, setListItems] = useState({});

    const onClickToOpenFilter = () => {
        setFilterOn(!filterOn);
    };
    const onClickToNavigate = () => {
        navigate(PATHS.additionalService.linkPayment.request)
    }

    const callList = () => {
        setListItems({
            '20250608': [
                {
                    transactionId: 'pending1',
                    customerName: '김*환(7000)',
                    status: '발송요청',
                    channel: 'SMS',
                    amount: 5254000
                },
                {
                    transactionId: 'pending2',
                    customerName: '김*환(7000)',
                    status: '발송요청',
                    channel: 'SMS',
                    amount: 5254000
                },
                {
                    transactionId: 'pending3',
                    customerName: '김*환(7000)',
                    status: '발송요청',
                    channel: '이메일',
                    amount: 5254000
                },
                {
                    transactionId: 'pending4',
                    customerName: '김*환(7000)',
                    status: '발송취소',
                    channel: 'SMS',
                    amount: 5254000
                },
                {
                    transactionId: 'pending5',
                    customerName: '김*환(7000)',
                    status: '발송취소',
                    channel: 'SMS',
                    amount: 5254000
                }
            ]
        });
    };

    useEffect(() => {
        callList();
    }, []);
    return (
        <>
            <section className="summary-section pt-30">
                <div className="credit-controls">
                    <div>
                        <input
                            className="credit-period"
                            type="text"
                            value="2025.06.01 ~ 2025.06.30"
                            readOnly={true}
                        />
                        <button
                            className="filter-btn"
                            aria-label="필터"
                        >
                            <img
                                src={IMAGE_ROOT + '/ico_setting.svg'}
                                alt="검색옵션"
                                onClick={() => onClickToOpenFilter()}
                            />
                        </button>
                    </div>
                    <button
                        className="download-btn"
                        aria-label="다운로드"
                    >
                        <img
                            src={IMAGE_ROOT + '/ico_download.svg'}
                            alt="다운로드"
                        />
                    </button>
                </div>
            </section>

            <section className="filter-section">
                <div className="sort-options">
                    <button className="sort-btn active">최신순</button>
                    <span className="sort-divider">|</span>
                    <button className="sort-btn">고액순</button>
                </div>
                <div className="excrow">
                    <div className="full-menu-keywords no-padding">
                        <span className="keyword-tag active">전체</span>
                        <span className="keyword-tag">성공</span>
                        <span className="keyword-tag">실패</span>
                    </div>
                </div>
            </section>

            <LinkPaymentPendingList
                listItems={listItems}
            />
            <div className="apply-row">
                <button
                    className="btn-50 btn-blue flex-1"
                    onClick={() => onClickToNavigate()}
                >결제 신청</button>
            </div>
            <LinkPaymentPendingSendFilter
                filterOn={filterOn}
                setFilterOn={setFilterOn}
                mid={mid}
                searchType={searchType}
                searchKeyword={searchKeyword}
                startDate={startDate}
                endDate={endDate}
                sendMethod={sendMethod}
                sendingStatus={sendingStatus}
                setMid={setMid}
                setSearchType={setSearchType}
                setSearchKeyword={setSearchKeyword}
                setStartDate={setStartDate}
                setEndDate={setEndDate}
                setSendMethod={setSendMethod}
                setSendingStatus={setSendingStatus}
            ></LinkPaymentPendingSendFilter>
        </>
    )
}