feat(camera): Refactor camera management with new components, update localization keys, and enhance API integration

src/pages/Manager/Device/Camera/components/CameraFormModal.tsx

@@ -0,0 +1,174 @@
+import {
+  Button,
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Row,
+  Select,
+} from 'antd';
+
+// Camera types
+const CAMERA_TYPES = [
+  { label: 'HIKVISION', value: 'HIKVISION' },
+  { label: 'DAHUA', value: 'DAHUA' },
+  { label: 'GENERIC', value: 'GENERIC' },
+];
+
+interface CameraFormValues {
+  name: string;
+  type: string;
+  account: string;
+  password: string;
+  ipAddress: string;
+  rtspPort: number;
+  httpPort: number;
+  stream: number;
+  channel: number;
+}
+
+interface CameraFormModalProps {
+  open: boolean;
+  onCancel: () => void;
+  onSubmit: (values: CameraFormValues) => void;
+}
+
+const CameraFormModal: React.FC<CameraFormModalProps> = ({
+  open,
+  onCancel,
+  onSubmit,
+}) => {
+  const [form] = Form.useForm<CameraFormValues>();
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      onSubmit(values);
+      form.resetFields();
+    } catch (error) {
+      console.error('Validation failed:', error);
+    }
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  return (
+    <Modal
+      title="Tạo mới camera"
+      open={open}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="cancel" onClick={handleCancel}>
+          Hủy
+        </Button>,
+        <Button key="submit" type="primary" onClick={handleSubmit}>
+          Đồng ý
+        </Button>,
+      ]}
+      width={500}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{
+          type: 'HIKVISION',
+          rtspPort: 554,
+          httpPort: 80,
+          stream: 0,
+          channel: 0,
+        }}
+      >
+        <Form.Item
+          label="Tên"
+          name="name"
+          rules={[{ required: true, message: 'Vui lòng nhập tên' }]}
+        >
+          <Input placeholder="nhập dữ liệu" />
+        </Form.Item>
+
+        <Form.Item
+          label="Loại"
+          name="type"
+          rules={[{ required: true, message: 'Vui lòng chọn loại' }]}
+        >
+          <Select options={CAMERA_TYPES} />
+        </Form.Item>
+
+        <Form.Item
+          label="Tài khoản"
+          name="account"
+          rules={[{ required: true, message: 'Vui lòng nhập tài khoản' }]}
+        >
+          <Input placeholder="nhập tài khoản" autoComplete="off" />
+        </Form.Item>
+
+        <Form.Item
+          label="Mật khẩu"
+          name="password"
+          rules={[{ required: true, message: 'Vui lòng nhập mật khẩu' }]}
+        >
+          <Input.Password
+            placeholder="nhập mật khẩu"
+            autoComplete="new-password"
+          />
+        </Form.Item>
+
+        <Form.Item
+          label="Địa chỉ IP"
+          name="ipAddress"
+          rules={[{ required: true, message: 'Vui lòng nhập địa chỉ IP' }]}
+        >
+          <Input placeholder="192.168.1.10" />
+        </Form.Item>
+
+        <Row gutter={16}>
+          <Col span={12}>
+            <Form.Item
+              label="Cổng RTSP"
+              name="rtspPort"
+              rules={[{ required: true, message: 'Vui lòng nhập cổng RTSP' }]}
+            >
+              <InputNumber style={{ width: '100%' }} min={0} max={65535} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="Cổng HTTP"
+              name="httpPort"
+              rules={[{ required: true, message: 'Vui lòng nhập cổng HTTP' }]}
+            >
+              <InputNumber style={{ width: '100%' }} min={0} max={65535} />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Row gutter={16}>
+          <Col span={12}>
+            <Form.Item
+              label="Luồng"
+              name="stream"
+              rules={[{ required: true, message: 'Vui lòng nhập luồng' }]}
+            >
+              <InputNumber style={{ width: '100%' }} min={0} />
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item
+              label="Kênh"
+              name="channel"
+              rules={[{ required: true, message: 'Vui lòng nhập kênh' }]}
+            >
+              <InputNumber style={{ width: '100%' }} min={0} />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+    </Modal>
+  );
+};
+
+export default CameraFormModal;