react

src/components/Dashboard/Extension.js

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { TextField, Button, Typography, Select, MenuItem } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+const Extension = ({ onSubmit }) => {
+  const [formData, setFormData] = useState({
+    type: '',
+    fieldName: '',
+    mapping: '',
+    dataType: ''
+  });
+
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (typeof onSubmit === 'function') {
+      onSubmit(formData.dataType);
+    }
+    // Navigate to CodeExtension page with the form data
+    navigate('/Codeextension', { state: { formData } });
+  };
+
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+      <Typography variant="h4" gutterBottom>Add Item</Typography>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <Select
+            label="Type"
+            name="type"
+            value={formData.type}
+            onChange={handleChange}
+            fullWidth
+            required
+          >
+            <MenuItem value="Header">Header</MenuItem>
+            <MenuItem value="Line">Line</MenuItem>
+          </Select>
+        </div>
+        <div>
+          <TextField
+            label="Field Name"
+            name="fieldName"
+            value={formData.fieldName}
+            onChange={handleChange}
+            fullWidth
+            required
+          />
+        </div>
+        <div>
+          <Select
+            label="Mapping"
+            name="mapping"
+            value={formData.mapping}
+            onChange={handleChange}
+            fullWidth
+            required
+          >
+            {[...Array(15).keys()].map(num => (
+              <MenuItem key={num + 1} value={`EXTN${num + 1}`}>{`EXTN${num + 1}`}</MenuItem>
+            ))}
+          </Select>
+        </div>
+        <div>
+          <Select
+            label="Data Type"
+            name="dataType"
+            value={formData.dataType}
+            onChange={handleChange}
+            fullWidth
+            required
+          >
+            <MenuItem value="textfield">Textfield</MenuItem>
+            <MenuItem value="longtext">Longtext</MenuItem>
+            <MenuItem value="date">Date</MenuItem>
+            <MenuItem value="checkbox">Checkbox</MenuItem>
+            <MenuItem value="radiobutton">Radiobutton</MenuItem>
+            <MenuItem value="autocomplete">Autocomplete</MenuItem>
+          </Select>
+        </div>
+        <Button type="submit" variant="contained" sx={{ mt: 2 }}>Submit</Button>
+      </form>
+    </div>
+  );
+};
+
+export default Extension;