tteld
6 months ago
parent
5eae5d0d74
commit
d12ed32c04
@ -0,0 +1,132 @@
|
||||
import { Form, Tabs, Row, Col, Input, Modal, Button, Select } from "antd";
|
||||
import { useState } from "react";
|
||||
import { useCompanyData } from "../../Hooks/Companies";
|
||||
// @ts-ignore
|
||||
import zippy from "../../assets/zippyicon.svg";
|
||||
// @ts-ignore
|
||||
import evo from "../../assets/evoicon.png";
|
||||
// @ts-ignore
|
||||
import zeelog from "../../assets/zeelogicon.svg";
|
||||
// @ts-ignore
|
||||
import ontime from "../../assets/ontimeicon.svg";
|
||||
// @ts-ignore
|
||||
import tt from "../../assets/tticon.svg";
|
||||
import { useCustomerByComanyData } from "../../Hooks/Customers";
|
||||
const TabPane = Tabs.TabPane;
|
||||
|
||||
const AssignedEdit = ({ recordData, editOpen, setEditOpen }: any) => {
|
||||
const handleCancel = () => {
|
||||
setEditOpen(!editOpen);
|
||||
};
|
||||
const onSubmit = () => {};
|
||||
|
||||
const [companyName, setCompanyName] = useState<string>();
|
||||
const [companyId, setCompanyId] = useState<number>();
|
||||
const [customerName, setCustomerName] = useState<string>();
|
||||
|
||||
const companyData = useCompanyData({ name: companyName });
|
||||
const customerData = useCustomerByComanyData({
|
||||
id: companyId,
|
||||
name: customerName,
|
||||
});
|
||||
|
||||
|
||||
const getImageSource = (source: string) => {
|
||||
switch (source) {
|
||||
case "Zippy":
|
||||
return zippy;
|
||||
case "EVO":
|
||||
return evo;
|
||||
case "Ontime":
|
||||
return ontime;
|
||||
case "Zeelog":
|
||||
return zeelog;
|
||||
case "TT":
|
||||
return tt;
|
||||
default:
|
||||
return tt;
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
onCancel={handleCancel}
|
||||
footer={null}
|
||||
open={editOpen}
|
||||
width={800}
|
||||
maskClosable={true}
|
||||
>
|
||||
<Form
|
||||
name="basic"
|
||||
layout="vertical"
|
||||
wrapperCol={{ span: 16 }}
|
||||
initialValues={{ ...recordData }}
|
||||
onFinish={onSubmit}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Row gutter={[16, 10]}>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
wrapperCol={{ span: "100%" }}
|
||||
label="Company"
|
||||
name="company"
|
||||
>
|
||||
<Select
|
||||
showSearch
|
||||
placeholder="Search Company"
|
||||
onSearch={(value: any) => setCompanyName(value)}
|
||||
options={companyData?.data?.map((item) => ({
|
||||
label: (
|
||||
<div>
|
||||
{item?.source && (
|
||||
<img
|
||||
style={{ width: 15, height: 20, paddingTop: 7 }}
|
||||
src={getImageSource(item?.source)}
|
||||
alt=""
|
||||
/>
|
||||
)}{" "}
|
||||
{item?.name}
|
||||
</div>
|
||||
),
|
||||
value: item?.id,
|
||||
}))}
|
||||
value={companyName}
|
||||
filterOption={false}
|
||||
autoClearSearchValue={false}
|
||||
allowClear
|
||||
onChange={(value: any) => setCompanyId(value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Form.Item
|
||||
wrapperCol={{ span: "100%" }}
|
||||
label="Driver"
|
||||
name="customer"
|
||||
>
|
||||
<Select
|
||||
showSearch
|
||||
placeholder="Search Driver"
|
||||
onSearch={(value: any) => setCustomerName(value)}
|
||||
options={customerData?.data?.map((item) => ({
|
||||
label: item?.name,
|
||||
value: item?.id,
|
||||
}))}
|
||||
value={customerName}
|
||||
filterOption={false}
|
||||
autoClearSearchValue={false}
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssignedEdit;
|
||||
@ -0,0 +1,147 @@
|
||||
export const dark = {
|
||||
components: {
|
||||
Table: {
|
||||
colorBgContainer: "#202020",
|
||||
colorText: "#BBBBBB",
|
||||
headerColor: "#BBBBBB",
|
||||
borderColor: "#3A3A3A",
|
||||
headerSplitColor: "#3A3A3A",
|
||||
rowHoverBg: "#333333",
|
||||
colorBorder: "#3A3A3A",
|
||||
},
|
||||
Layout: {
|
||||
bodyBg: "#181818",
|
||||
},
|
||||
Input: {
|
||||
colorBgContainer: "#2A2A2A",
|
||||
colorBgContainerDisabled: "#2A2A2A",
|
||||
colorText: "#BBBBBB",
|
||||
colorTextPlaceholder: "#BBBBBB",
|
||||
colorBorder: "#3A3A3A",
|
||||
colorFillSecondary: "rgba(0, 0, 0, 0.02)",
|
||||
activeBorderColor: "#3A3A3A",
|
||||
activeShadow: "#3A3A3A",
|
||||
hoverBorderColor: "#3A3A3A",
|
||||
},
|
||||
Select: {
|
||||
colorBgContainer: "#2A2A2A",
|
||||
colorText: "#BBBBBB",
|
||||
colorTextPlaceholder: "#BBBBBB",
|
||||
colorBorder: "rgba(150, 150, 150, 0.493)",
|
||||
colorPrimaryHover: "rgba(249, 158, 44, 1)",
|
||||
colorIconHover: "#BBB",
|
||||
optionSelectedBg: "#2A2A2A",
|
||||
colorBgElevated: "#333",
|
||||
controlOutline: "none",
|
||||
optionActiveBg: "#333333",
|
||||
colorTextQuaternary: "#3A3A3A",
|
||||
},
|
||||
Button: {
|
||||
colorBorderSecondary: "rgba(249, 158, 44, 1)",
|
||||
colorPrimary: "rgba(249, 158, 44, 1)",
|
||||
colorPrimaryHover: "#BBBBBB",
|
||||
colorIcon: "rgba(249, 158, 44, 1)",
|
||||
colorIconHover: "rgba(249, 158, 44, 1)",
|
||||
primaryShadow: "none",
|
||||
dangerShadow: "none",
|
||||
colorTextDisabled: "#AAAAAA",
|
||||
borderColorDisabled: "#3A3A3A",
|
||||
},
|
||||
// Form: {
|
||||
// labelColor: "#BBBBBB",
|
||||
// },
|
||||
Tabs: {
|
||||
itemColor: "#BBBBBB",
|
||||
itemHoverColor: "#FFFFFF",
|
||||
itemSelectedColor: "rgba(249, 158, 44, 1)",
|
||||
colorPrimaryActive: "rgba(249, 158, 44, 1)",
|
||||
inkBarColor: "rgba(249, 158, 44, 1)",
|
||||
},
|
||||
Modal: {
|
||||
contentBg: "#3A3A3A",
|
||||
headerBg: "#3A3A3A",
|
||||
titleColor: "#FFFFFF",
|
||||
colorText: "#BBBBBB",
|
||||
colorBgTextActive: "#BBBBBB",
|
||||
colorBgTextHover: "#BBBBBB",
|
||||
},
|
||||
Menu: {
|
||||
darkItemSelectedBg: "#3A3A3A",
|
||||
colorBgContainer: "#fff",
|
||||
},
|
||||
Switch: {
|
||||
colorPrimary: "#565656",
|
||||
colorPrimaryHover: "#737373",
|
||||
},
|
||||
Radio: {
|
||||
colorText: "#737373",
|
||||
colorBorder: "#3A3A3A",
|
||||
colorPrimaryActive: "#BBBBBB",
|
||||
buttonCheckedBg: "rgba(249, 158, 44, 1)",
|
||||
colorPrimaryHover: "#737373",
|
||||
colorPrimary: "#565656",
|
||||
},
|
||||
Dropdown: {
|
||||
colorBgContainer: "#3A3A3A",
|
||||
colorText: "#BBBBBB",
|
||||
colorPrimaryHover: "#565656",
|
||||
colorPrimary: "#333333",
|
||||
},
|
||||
DatePicker: {
|
||||
colorBgContainer: "#3A3A3A",
|
||||
colorBgElevated: "#3A3A3A",
|
||||
colorText: "#BBBBBB",
|
||||
colorTextPlaceholder: "#BBBBBB",
|
||||
colorIcon: "#fff",
|
||||
colorIconHover: "#fff",
|
||||
colorPrimary: "rgba(249, 158, 44, 1)",
|
||||
hoverBorderColor: "#BBBBBB",
|
||||
},
|
||||
Empty: {
|
||||
colorText: "rgba(249, 158, 44, 1)",
|
||||
colorTextDisabled: "rgba(249, 158, 44, 1)",
|
||||
},
|
||||
},
|
||||
token: {
|
||||
fontFamily: "Inter, sans-serif",
|
||||
colorText: "#bbb",
|
||||
borderRadius: 8,
|
||||
},
|
||||
};
|
||||
export const light = {
|
||||
components: {
|
||||
Select: {
|
||||
colorTextPlaceholder: "rgba(155, 157, 170, 1)",
|
||||
colorPrimary: "rgba(249, 158, 44, 1)",
|
||||
colorPrimaryHover: "rgba(249, 158, 44, 1)",
|
||||
},
|
||||
Tabs: {
|
||||
inkBarColor: "rgba(249, 158, 44, 1)",
|
||||
itemSelectedColor: "rgba(24, 26, 41, 1)",
|
||||
itemHoverColor: "rgba(24, 26, 41, 1)",
|
||||
},
|
||||
Input: {
|
||||
hoverBorderColor: "rgba(249, 158, 44, 1)",
|
||||
activeBorderColor: "rgba(249, 158, 44, 1)",
|
||||
colorTextPlaceholder: "rgba(155, 157, 170, 1)",
|
||||
},
|
||||
Upload: {
|
||||
colorPrimaryHover: "rgba(249, 158, 44, 1)",
|
||||
},
|
||||
Button: {
|
||||
colorPrimary: "rgba(249, 158, 44, 1)",
|
||||
colorPrimaryHover: "rgba(249, 158, 44, 1)",
|
||||
},
|
||||
Textarea: {
|
||||
colorBorder: "0px 1px 3px 0px rgba(20, 22, 41, 0.1)",
|
||||
},
|
||||
Menu: {
|
||||
darkItemSelectedBg: "rgba(255, 255, 255, 0.08)",
|
||||
},
|
||||
},
|
||||
token: {
|
||||
fontFamily: "Inter, sans-serif",
|
||||
color: "#262626",
|
||||
borderRadius: 8,
|
||||
},
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
export type TPagination<T> = {
|
||||
data: T;
|
||||
page_size: number;
|
||||
|
||||
};
|
||||
|
||||
next: string | null;
|
||||
previous: string | null;
|
||||
};
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
import { TCall } from "../CallRequests/TCall";
|
||||
import { TRequests } from "../Requests/TRequests";
|
||||
import { TTask } from "../Tasks/TTasks";
|
||||
|
||||
export type TSocket = {
|
||||
type: string;
|
||||
task?: TTask;
|
||||
callback_request?: TCall;
|
||||
driver_request?: TRequests;
|
||||
};
|
||||
|
||||
Loading…
Reference in new issue