revenue-fe/src/pages/members/kyc-delete-member/blocks/DetailDialog.tsx

import {
	Dialog,
	DialogBody,
	DialogContent,
	DialogHeader,
	DialogTitle
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { useManageKycDeletionContext } from '../hooks';
import { apiConfig } from '@/config/api.config';
import { useDataGrid } from '@/components';
import { useState } from 'react';
import ConfirmDialog from '@/components/confirm';

const API_URL = apiConfig.service_customer;
const DetailDialog = () => {
	const { showDetailDialog, setShowDetailDialog, detailKyc, handleApproveReject } = useManageKycDeletionContext();
	const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }])
	const [dialogOpen, setDialogOpen] = useState(false);
  	const [dialogType, setDialogType] = useState('');
	const { reload } = useDataGrid();

	async function handleYes() {
		await handleApproveReject(detailKyc.id, dialogType)
		setDialogOpen(false)
		reload()
	}

	function onSubmit(type:string) {
		setDialogType(type)
		setDialogOpen(true)
	}

	return (
		<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
			<ConfirmDialog
				open={dialogOpen}
				onClose={() => setDialogOpen(false)}
				title="Confirm Action"
				content={`Are you sure you want to ${dialogType === 'Y' ? 'Approve' : 'Reject'}?`}
				onYes={handleYes}
				onNo={() => setDialogOpen(false)}
			/>
			<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden max-h-[90vh] overflow-y-auto">
				<DialogHeader>
					<DialogTitle>Customer Deletion Details </DialogTitle>
				</DialogHeader>
				<DialogBody>
					{/* Tab Content */}
					{detailKyc && detailKyc != null ? (
						<div className="flex flex-col">
							{generateInput(detailKyc, null, 'Group', 'group_name', 'text', false, true)}
							{generateInput(detailKyc, null, 'Username', 'username', 'text', false, true)}
							{generateInput(detailKyc, null, 'Full Name', 'fullname', 'text', false, true)}
                            {generateList(detailKyc, null, genders, 'customers_gender', 'Gender', false, false)}
							{generateInput(detailKyc, null, 'Date of Birth', 'birthdate', 'date', false, true)}
							{generateInput(detailKyc, null, 'Mother Name', 'registered_mother_fullname', 'text', false, true)}
							{generateInput(detailKyc, null, 'MSISDN', 'registered_msisdn', 'text', false, true)}
							{generateInput(detailKyc, null, 'Reason Deletion', 'reason_deletion', 'text', false, true)}
							{/* {generateInput(detailKyc, null, 'Reason Note', 'reason_note', 'text', false, false)} */}
							{generateInput(detailKyc, null, 'Status Approval', 'status_approve', 'text', false, true)}

							<div className="flex justify-end gap-2 mt-3">
								<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</Button>
								<Button onClick={async() => {
									// await handleApproveReject(detailKyc.id, 'N')
									// reload()
									onSubmit('N')
								}} variant="destructive" color="warning" disabled={detailKyc.status_approve==='Waiting Approval'?false:true}>Reject</Button>
								<Button onClick={async() => {
									// await handleApproveReject(detailKyc.id, 'Y')
									// reload()
									onSubmit('Y')
								}} variant="default" color="primary" disabled={detailKyc.status_approve==='Waiting Approval'?false:true}>Approve</Button>
							</div>
						</div>
					) : (<div></div>)}
				</DialogBody>
			</DialogContent>
		</Dialog>
	);
};

export default DetailDialog;

function generateInput(formData: any, handleChange: any, label: string, name: string, type: string, required: boolean, disabled: boolean) {
	function generateDate(isoString: string) {
		return isoString.slice(0, 10); // "2000-01-18"
	}

	type Code = 'W' | 'Y' | 'N' | 'T' | 'P' | 'D' | 'L';
	interface Reason {
		label: string;
	}

	const statusMap: Record<Code, Reason> = {
		W: { label: 'Waiting Approval' },
		Y: { label: 'Approve' },
		N: { label: 'Reject' },
		T: { label: 'Tidak lagi menggunakan layanan' },
		P: { label: 'Privasi dan keamanan' },
		D: { label: 'Akun ganda' },
		L: { label: 'Lainnya' }
	};
	if (name == 'reason_deletion' || name == 'status_approve') {
		const status = formData[name] as Code
		const fixStatus = statusMap[status] ?? { label: formData[name] }
		formData[name] = fixStatus.label
	}
	return (
		<>
			<div className="w-full mt-5">
				<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
					<label className="form-label flex items-center gap-1 max-w-56">
						{label}<span className="text-red-500">{required ? "*" : ""}</span>
					</label>
					<Input
						className="input"
						readOnly={disabled}
						required={required}
						type={type}
						name={name}
						value={formData[name] ? (type === 'date' ? generateDate(formData[name]) : formData[name]) : ""}
						onChange={handleChange}
					/>
				</div>
			</div>
		</>
	)
}

function generateList(formData:any, handleChange: any, list:any, name:string, label: string, required: boolean, disabled: boolean) {
	return (
		<>
			<div className="w-full pt-6">
				<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
				<label className="form-label flex items-center gap-1 max-w-56">{label}
				<span className="text-red-600">{required?"*":""}</span></label>
				<Select disabled={disabled} required={required} value={formData[name]} onValueChange={(e) => (handleChange({ target : { name, value: e }}))}>
					<SelectTrigger>
						<SelectValue placeholder={`Select ${label}`} />
					</SelectTrigger>
					<SelectContent>
						{list.map((el: any, idx: any) => (
							<SelectItem key={idx} value={el.id}>{el.name}</SelectItem>
						))}
					</SelectContent>
				</Select>
				</div>
			</div>
		</>
	)
}