From 28de8e64e8cd283c4e0b342562c53a381f243368 Mon Sep 17 00:00:00 2001
From: unknown <benhurchrinstoper@gmail.com>
Date: Tue, 1 Apr 2025 22:38:34 +0700
Subject: [PATCH] fix show image document

---
 .../manage-members/CustomerDetailModal.tsx    | 88 ++++++++++---------
 1 file changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/pages/members/manage-members/CustomerDetailModal.tsx b/src/pages/members/manage-members/CustomerDetailModal.tsx
index f52e42b..3de8037 100644
--- a/src/pages/members/manage-members/CustomerDetailModal.tsx
+++ b/src/pages/members/manage-members/CustomerDetailModal.tsx
@@ -163,16 +163,16 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <FormControl fullWidth margin="dense">
           <InputLabel>Gender</InputLabel>
           <Select disabled={viewOnly} name="gender" value={formData.gender} onChange={handleChange}>
-            <MenuItem value="M">Male</MenuItem>
-            <MenuItem value="F">Female</MenuItem>
+            <MenuItem key={1} value="M">Male</MenuItem>
+            <MenuItem key={2} value="F">Female</MenuItem>
           </Select>
         </FormControl>
         <FormControl fullWidth margin="dense">
           <InputLabel>Identity Type</InputLabel>
           <Select disabled={viewOnly} name="identity_type" value={formData.identity_type} onChange={handleChange}>
-            <MenuItem value="eleitoral_id">Eleitoral ID</MenuItem>
-            <MenuItem value="bihete_de_identidade">Bihete de Identidade</MenuItem>
-            <MenuItem value="passport">Passport</MenuItem>
+            <MenuItem key={1} value="eleitoral_id">Eleitoral ID</MenuItem>
+            <MenuItem key={2} value="bihete_de_identidade">Bihete de Identidade</MenuItem>
+            <MenuItem key={3} value="passport">Passport</MenuItem>
           </Select>
         </FormControl>
         
@@ -181,9 +181,13 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <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)}
+        <img width={300} height={250} srcSet={formData.file_selfie} src={formData.file_selfie} alt={"file_selfie"} style={{borderRadius: 10}}/>
         {fileTextFile("File Document", formData.file_document_id, "file_document_id", handleChange)}
+        <img width={300} height={250} srcSet={formData.file_document_id} src={formData.file_document_id} alt={"file_document_id"} style={{borderRadius: 10}}/>
         {fileTextFile("File Document & Selfie", formData.file_document_id_selfie, "file_document_id_selfie", handleChange)}
+        <img width={300} height={250} srcSet={formData.file_document_id_selfie} src={formData.file_document_id_selfie} alt={"file_document_id_selfie"} style={{borderRadius: 10}}/>
         {fileTextFile("File Commercial License", formData.file_commercial_license, "file_commercial_license", handleChange)}
+        <img width={300} height={250} srcSet={formData.file_commercial_license} src={formData.file_commercial_license} alt={"file_commercial_license"} style={{borderRadius: 10}}/>
         {/* AGENT & PREMIUM DATA */}
         
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} />
@@ -192,8 +196,8 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <FormControl fullWidth margin="dense">
           <InputLabel>Status</InputLabel>
           <Select disabled={viewOnly} name="status" value={formData.status} onChange={handleChange}>
-            <MenuItem value="Y">Active</MenuItem>
-            <MenuItem value="N">Inactive</MenuItem>
+            <MenuItem key={1} value="Y">Active</MenuItem>
+            <MenuItem key={2} value="N">Inactive</MenuItem>
           </Select>
         </FormControl>
         
@@ -246,10 +250,10 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <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>
+            <MenuItem key={1} value="BNCTL">BNCTL</MenuItem>
+            <MenuItem key={2} value="BRI">BRI</MenuItem>
+            <MenuItem key={3} value="BNU">BNU</MenuItem>
+            <MenuItem key={4} value="Mandiri">Mandiri</MenuItem>
           </Select>
         </FormControl>
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
@@ -286,37 +290,37 @@ 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>
-      ),
-    }}
-  />
+      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>
+        ),
+      }}
+    />
   )
 }