fix manage member

src/pages/members/manage-members/CustomerDetailModal.tsx

@@ -1,18 +1,9 @@
 import React, { useState, useEffect } from "react";
 import axios from 'axios';
-import {
+import { Dialog,DialogActions,DialogContent,DialogTitle,TextField,Button,MenuItem,Select,InputLabel,FormControl,Typography,
-  Dialog,
+  InputAdornment,Grid,Box
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField,
-  Button,
-  MenuItem,
-  Select,
-  InputLabel,
-  FormControl,
-  Typography
 } from "@mui/material";
+import UploadFileIcon from "@mui/icons-material/UploadFile";
 import Divider from '@mui/material/Divider';
 import { initialMember } from "./Columns";
 import { apiConfig } from '@/config/api.config';
@@ -25,7 +16,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
   const [aldeias, setAldeias] = useState([]);
   const [postoAdm, setPostoAdm] = useState([]);
   const [sucos, setSucos] = useState([]);
-
+  
   useEffect(() => {
     setFormData(initialData || {}); // Sync formData when initialData changes
     fetchMasterData()
@@ -81,7 +72,11 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
   const handleChange = async (e: any) => {
     const { name, value } = e.target;
     if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
-    setFormData({ ...formData, [name]: value });
+    if (name === "file_selfie" || name === "photouser") { // FOR FILE ONLY
+      setFormData({ ...formData, [name]: e.target.files[0] });
+    } else {
+      setFormData({ ...formData, [name]: value });
+    }
   };
 
   async function getMasterAfter(name: string, id: any) {
@@ -159,7 +154,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
         <TextField disabled fullWidth margin="dense" label="Group" name="group" value={formData.group_name} onChange={handleChange} />
-        <TextField disabled={viewOnly} type="file" fullWidth margin="dense" label="Photo" name="photouser" value={formData.photouser} onChange={handleChange} />
+        {fileTextFile("Photo", formData.photouser, "photouser", handleChange)}
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
         <TextField disabled={viewOnly} fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
@@ -180,8 +175,17 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
             <MenuItem value="passport">Passport</MenuItem>
           </Select>
         </FormControl>
+        
+        {/* AGENT & PREMIUM DATA */}
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
         <TextField disabled={viewOnly} type="number" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
+        <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Merchant Address" name="merchantaddress" value={formData.merchantaddress} onChange={handleChange} />
+        {fileTextFile("File Selfie", formData.file_selfie, "file_selfie", handleChange)}
+        {fileTextFile("File Document", formData.file_document_id, "file_document_id", handleChange)}
+        {fileTextFile("File Document & Selfie", formData.file_document_id_selfie, "file_document_id_selfie", handleChange)}
+        {fileTextFile("File Commercial License", formData.file_commercial_license, "file_commercial_license", handleChange)}
+        {/* AGENT & PREMIUM DATA */}
+        
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} />
         {/* <TextField fullWidth margin="dense" label="Password" name="password" type="password" value={formData.password} onChange={handleChange} /> */}
         {/* <TextField fullWidth margin="dense" label="PIN" name="pin" value={formData.pin} onChange={handleChange} /> */}
@@ -239,14 +243,25 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
 
         <Divider className="pt-7"/>
         <Typography sx={{color:'grey'}}>Bank</Typography>
-        <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Name" name="bank_name" value={formData.bank_name} onChange={handleChange} />
+        <FormControl fullWidth margin="dense">
+          <InputLabel>Bank Name</InputLabel>
+          <Select disabled={viewOnly} name="bank_name" value={formData.bank_name} onChange={handleChange}>
+            <MenuItem value="BNCTL">BNCTL</MenuItem>
+            <MenuItem value="BRI">BRI</MenuItem>
+            <MenuItem value="BNU">BNU</MenuItem>
+            <MenuItem value="Mandiri">Mandiri</MenuItem>
+          </Select>
+        </FormControl>
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
         <TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
         <Divider className="pt-7"/>
-        <Typography sx={{color:'grey'}}>Approval</Typography>
+        {getAdmAccess(page)}
         {
           page === 'kyc' ? (
-            <TextField fullWidth margin="dense" label="Approval Description" name="description" value={formData.description} onChange={handleChange} />
+            <>
+              <Typography sx={{color:'grey'}}>Approval</Typography>
+              <TextField fullWidth margin="dense" label="Approval Description" name="description" value={formData.description} onChange={handleChange} />
+            </>
           ) : ('')
         }
       </DialogContent>
@@ -267,3 +282,74 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
 };
 
 export default CustomerDialog;
+
+function fileTextFile(label: string, value: any, name: string, handleChange: any) {
+  return (
+    <TextField
+    margin="dense"
+    label={label}
+    variant="outlined"
+    fullWidth
+    value={value}
+    placeholder="Choose a file..."
+    InputProps={{
+      readOnly: true,
+      endAdornment: (
+        <InputAdornment position="end">
+          <input
+            type="file"
+            id="file-upload"
+            style={{ display: "none" }}
+            onChange={handleChange}
+            name={name}
+          />
+          <label htmlFor="file-upload">
+            <Button
+              component="span"
+              variant="contained"
+              color="primary"
+              startIcon={<UploadFileIcon />}
+            >
+              Browse
+            </Button>
+          </label>
+        </InputAdornment>
+      ),
+    }}
+  />
+  )
+}
+
+function getAdmAccess(page: string) {
+  if (page !== "kyc") {
+    return (
+      <Box p={3} boxShadow={3} borderRadius={2} bgcolor="white">
+        <Typography variant="h6" gutterBottom>Access Administration</Typography>
+        <Grid container spacing={3}>
+          <Grid item xs={6} container direction="column" spacing={2}>
+            <Grid item>
+              <Typography variant="body2">Unblock PIN</Typography>
+              <Button variant="contained" color="primary">Unblock PIN</Button>
+            </Grid>
+            <Grid item>
+              <Typography variant="body2">Reset PIN</Typography>
+              <Button variant="contained" color="primary">Reset PIN</Button>
+            </Grid>
+          </Grid>
+          <Grid item xs={6} container direction="column" spacing={2}>
+            <Grid item>
+              <Typography variant="body2">Change Group</Typography>
+              <Button variant="contained" color="primary">Change Group</Button>
+            </Grid>
+            <Grid item>
+              <Typography variant="body2">Edit Member</Typography>
+              <Button variant="contained" color="primary">Edit Member</Button>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Box>
+    )
+  } else {
+    return ('')
+  }
+}