tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

LMSN-191

Browse Source 
Data corporate & member linking ke client portal
This commit is contained in:
ivan-sim
2023-10-09 09:15:35 +07:00
parent 84cf41dba8
commit 9a5eb0e74b
10 changed files with 1019 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx
View File

@@ -1,8 +1,11 @@
// mui
import { Button, Card, Stack, Typography, Grid, Switch, TextField } from '@mui/material';
import { FormHelperText, FormControl, Button, Card, Stack, Typography, Grid, Switch, TextField, IconButton, Select, MenuItem, InputLabel } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// components
import Iconify from '../../../components/Iconify';
import { fDate } from '../../../utils/formatTime';
import { fDate, fPostFormat } from '../../../utils/formatTime';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
@@ -16,10 +19,39 @@ export default function CardFamilyInformation({ data }) {
const [editedFamilyData, setEditedFamilyData] = useState({});
const { id } = useParams();
//Check Required
//State Field
const [nameField, setNameField] = useState('');
const [relationshipField, setRelationshipField] = useState('');
const [birthDateField, setBirthDateField] = useState('');
const [birthDateFieldCheck, setBirthDateFieldCheck] = useState(1);
const [emailField, setEmailField] = useState('');
const [emailFieldCheck, setEmailFieldCheck] = useState(false);
const [phoneField, setPhoneField] = useState('');
//State Field Error
const [nameFieldError, setNameFieldError] = useState('');
const [relationshipFieldError, setRelationshipFieldError] = useState('');
const [birthDateFieldError, setBirthDateFieldError] = useState('');
const [emailFieldError, setEmailFieldError] = useState('');
const [phoneFieldError, setPhoneFieldError] = useState('');
const handleEditData = (index) => {
setEditIndex(index);
setEditedFamilyData(data?.family[index] || {});
setOpenDialog(true);
setNameField(data?.family[index].name);
setRelationshipField(data?.family[index].relation_with_principal);
setBirthDateField(data?.family[index].birth_date);
setEmailField(data?.family[index].email);
setEmailFieldCheck(isValidEmail(data?.family[index].email));
setPhoneField(data?.family[index].phone);
setNameFieldError('');
setRelationshipFieldError('');
setBirthDateFieldError('');
setEmailFieldError('');
setPhoneFieldError('');
};
const handleCloseDialog = () => {
@@ -37,10 +69,14 @@ export default function CardFamilyInformation({ data }) {
updatedFamily[editIndex] = editedFamilyData;
// Perbarui data utama dengan data keluarga yang telah diperbarui
const updatedData = { ...data, family: updatedFamily };
const updatedData = { ...data, family: updatedFamily[editIndex]};
updatedData.family.birth_date = fPostFormat(updatedData.family.birth_date, 'yyyy-MM-dd') ;
const familyArray = [updatedData.family];
axios
.post('/update-family', updatedData.family)
.post('/update-family', familyArray)
.then((response) => {
enqueueSnackbar('Data updated successfully', { variant: 'success' });
setOpenDialog(false);
@@ -55,6 +91,17 @@ export default function CardFamilyInformation({ data }) {
}
}
};
console.log(data?.family);
const isValidEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
const isRequiredFieldsFilled = () => {
return nameField.trim() !== '' && relationshipField.trim() !== '' && birthDateField !== '' && birthDateFieldCheck !== 0 && emailField.trim() !== '' && emailFieldCheck && phoneField.trim() !== '';
};
return (
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
@@ -66,17 +113,17 @@ export default function CardFamilyInformation({ data }) {
sx={{ paddingY: 1, paddingX: 3 }}
>
<Typography variant="subtitle2">Beneficiary / Family</Typography>
<Button startIcon={<Iconify icon="ic:round-add" />} disabled>Add Member</Button>
{/*<Button startIcon={<Iconify icon="ic:round-add" />} disabled>Add Member</Button>*/}
</Stack>
{/* Stack 2 */}
<Grid container maxHeight="307px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
<Grid container maxHeight="584px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
{data?.family.map((familyMember, index) => (
<Grid item xs={12} sm={6} md={6} key={index}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
{/* Stack 1 */}
<Stack
direction="row"
alignItems="center"
alignItems="left"
justifyContent="space-between"
spacing={2}
sx={{ flex: '100%' }}
@@ -84,13 +131,17 @@ export default function CardFamilyInformation({ data }) {
{/* Row 1 */}
<Stack direction="row" spacing={1}>
<img
width={24}
height={24}
width={34}
height={34}
src="/images/husband-user-profile.png"
alt="user-profile"
style={{ borderRadius: '50%' }}
/>
<Stack>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{familyMember?.name}
</Typography>
<Typography variant="body2" color="#757575">
{familyMember.relation_with_principal === 'H'
? 'Husband'
: familyMember.relation_with_principal === 'W'
@@ -101,29 +152,72 @@ export default function CardFamilyInformation({ data }) {
? 'Daughter'
: ''}
</Typography>
</Stack>
</Stack>
{/* Row 2 */}
<Stack alignItems="center">
<Stack sx={{display:'none'}} alignItems="center">
<Typography variant="caption">Suspend</Typography>
<Switch aria-label="switch demo" disabled />
</Stack>
</Stack>
<Typography variant="body2" color="#757575">
{familyMember?.name}
</Typography>
<Typography variant="body2" color="#757575">
{familyMember?.birth_date ? fDate(familyMember?.birth_date) : ''}
</Typography>
<Typography variant="body2" color="#757575">
{familyMember?.phone}
</Typography>
{/* Stack 2 */}
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
marginTop={1.25}
alignItems="left"
spacing={10}
sx={{ flex: '100%' }}
>
<Typography sx={{width: '20%'}} variant="body2" color="#757575">
Date of Birth
</Typography>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{familyMember?.birth_date ? fDate(familyMember?.birth_date) : ''}
</Typography>
</Stack>
<Stack
direction="row"
alignItems="left"
spacing={10}
sx={{ flex: '100%' }}
>
<Typography sx={{width: '20%'}} variant="body2" color="#757575">
Email
</Typography>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{familyMember?.email}
</Typography>
</Stack>
<Stack
direction="row"
alignItems="left"
spacing={10}
sx={{ flex: '100%' }}
>
<Typography sx={{width: '20%'}} variant="body2" color="#757575">
Phone Number
</Typography>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{familyMember?.phone}
</Typography>
</Stack>
<Stack
direction="row"
alignItems="left"
spacing={10}
sx={{ flex: '100%' }}
>
<Typography sx={{width: '20%'}} variant="body2" color="#757575">
Status
</Typography>
<Typography variant="body2" sx={{ fontWeight: 500 }}>
{
familyMember?.phone === '1'
? 'Active'
: 'Inactive'
}
</Typography>
</Stack>
{/* Stack 2 */}
<Stack sx={{display:'none'}} direction="row" alignItems="center" justifyContent="space-between" marginTop={1.25}>
<Button color="error" startIcon={<Iconify icon="ic:round-close" />} disabled>
Remove
</Button>
@@ -136,32 +230,117 @@ export default function CardFamilyInformation({ data }) {
))}
</Grid>
{/* Dialog */}
<Dialog open={openDialog} onClose={handleCloseDialog}>
<DialogTitle>Edit Data</DialogTitle>
<Dialog open={openDialog} onClose={handleCloseDialog} fullWidth={true}>
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
<Stack direction="row" alignItems="center" justifyContent="space-between">
<Stack direction="row">
<Iconify width={25} height={25} sx={{ marginRight: '10px' }} />
<Typography variant="h6">Edit Data</Typography>
</Stack>
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialog}>
<CloseIcon />
</IconButton>
</Stack>
</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<TextField
label="Name"
required
value={editedFamilyData?.name || ''}
onChange={(e) => setEditedFamilyData({ ...editedFamilyData, name: e.target.value })}
onChange={(e) => {
setEditedFamilyData({ ...editedFamilyData, name: e.target.value })
setNameField(e.target.value);
setNameFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
}}
fullWidth
sx={{ marginTop: '16px' }}
error={!!nameFieldError}
helperText={nameFieldError}
/>
<FormControl>
<InputLabel htmlFor="relationship" required>
Relationship
</InputLabel>
<Select
id="relationship"
value={editedFamilyData?.relation_with_principal || ''}
onChange={(e) => {
setEditedFamilyData({ ...editedFamilyData, relation_with_principal: e.target.value })
setRelationshipField(e.target.value);
setRelationshipFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
}}
fullWidth
label="Relationship"
error={!!relationshipFieldError}
>
<MenuItem value="H">Husband</MenuItem>
<MenuItem value="W">Wife</MenuItem>
<MenuItem value="S">Son</MenuItem>
<MenuItem value="D">Daughter</MenuItem>
</Select>
<FormHelperText style={{ color: 'red' }}>{relationshipFieldError}</FormHelperText>
</FormControl>
<FormControl>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Date of Birth"
value={editedFamilyData?.birth_date || ''}
onChange={(newValue) => {
setEditedFamilyData({ ...editedFamilyData, birth_date: newValue });
setBirthDateField(newValue);
setBirthDateFieldError(newValue === '' || newValue === null ? 'This field is required' : '');
if(newValue !== null)
{
newValue = newValue.toString();
setBirthDateFieldCheck(newValue === 'Invalid Date' ? 0 : 1);
}
}}
inputFormat="dd-MM-yyyy"
renderInput={(params) => <TextField {...params} required/>}
/>
</LocalizationProvider>
<FormHelperText style={{ color: 'red' }}>{birthDateFieldError}</FormHelperText>
</FormControl>
<TextField
label="Email Address"
required
value={editedFamilyData?.email || ''}
onChange={(e) => setEditedFamilyData({ ...editedFamilyData, email: e.target.value })}
onChange={(e) => {
setEditedFamilyData({ ...editedFamilyData, email: e.target.value })
setEmailField(e.target.value);
setEmailFieldError(
e.target.value.trim() === '' ? 'This field is required' : !isValidEmail(e.target.value) ? 'Invalid email address' : ''
);
setEmailFieldCheck(isValidEmail(e.target.value));
}}
fullWidth
sx={{ marginTop: '16px' }}
error={!!emailFieldError}
helperText={emailFieldError}
/>
<TextField
label="Phone No."
value={editedFamilyData?.phone || ''}
onChange={(e) => setEditedFamilyData({ ...editedFamilyData, phone: e.target.value })}
onChange={(e) => {
let input = e.target.value;
// Hanya izinkan angka dan karakter '+'
input = input.replace(/[^0-9+]/g, '');
// Batasi panjang input menjadi 15 digit
const maxLength = 15;
const sanitizedInput = input.slice(0, maxLength);
setEditedFamilyData({ ...editedFamilyData, phone: sanitizedInput });
setPhoneField(sanitizedInput);
setPhoneFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
}}
fullWidth
sx={{ marginTop: '16px' }}
inputProps={{
inputMode: 'tel',
pattern: '^\\+?[0-9]*$', // Memungkinkan karakter '+' di awal, diikuti oleh angka
}}
error={!!phoneFieldError}
helperText={phoneFieldError}
/>
</Stack>
@@ -169,7 +348,7 @@ export default function CardFamilyInformation({ data }) {
<DialogActions>
<Button onClick={handleCloseDialog}>Cancel</Button>
<Button onClick={handleSaveData} variant="contained" color="primary">
<Button onClick={handleSaveData} variant="contained" color="primary" disabled={!isRequiredFieldsFilled()}>
Save
</Button>
</DialogActions>

233
frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx
View File

@@ -1,5 +1,6 @@
// mui
import { Button, IconButton, Card, Stack, Typography, TextField } from '@mui/material';
import { Button, IconButton, Card, Stack, Typography, TextField, InputLabel } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { CardMembership, Visibility as VisibilityIcon } from '@mui/icons-material';
// components
import Iconify from '../../../components/Iconify';
@@ -22,10 +23,42 @@ export default function CardPersonalInformation({ data }) {
const [phone, setPhone] = useState(data?.phone || '');
const [address, setAddress] = useState(data?.main_address_id || '');
/* const [updatedData, setUpdatedData] = useState(data); */
//Check Required
const [nameField, setNameField] = useState('');
const [weightField, setWeightField] = useState('');
const [heightField, setHeightField] = useState('');
const [emailField, setEmailField] = useState('');
const [emailFieldCheck, setEmailFieldCheck] = useState(false);
const [phoneField, setPhoneField] = useState('');
const [nameFieldError, setNameFieldError] = useState('');
const [weightFieldError, setWeightFieldError] = useState('');
const [heightFieldError, setHeightFieldError] = useState('');
const [emailFieldError, setEmailFieldError] = useState('');
const [phoneFieldError, setPhoneFieldError] = useState('');
useEffect(() => {
// Periksa apakah data sudah terdefinisi
if (data) {
// Atur state sesuai dengan data yang diterima
setNameField(data?.name || '');
setWeightField((data?.last_weight_kg || '').toString());
setHeightField((data?.last_height_cm || '').toString());
setEmailField(data?.email || '');
setEmailFieldCheck(isValidEmail(data?.email));
setPhoneField(data?.phone || '');
}
}, [data]);
const isValidEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
const isRequiredFieldsFilled = () => {
return nameField.trim() !== '' && weightField.trim() !== '' && heightField.trim() !== '' && emailField.trim() !== '' && emailFieldCheck && phoneField.trim() !== '';
};
//console.log(data);
const handleEditData = () => {
setWeight(data?.last_weight_kg || '');
@@ -35,6 +68,20 @@ export default function CardPersonalInformation({ data }) {
setAddress(data?.main_address_id || '');
setEditedData(data);
setOpenDialog(true);
if (data) {
// Atur state sesuai dengan data yang diterima
setNameField(data?.name || '');
setWeightField((data?.last_weight_kg || '').toString());
setHeightField((data?.last_height_cm || '').toString());
setEmailField(data?.email || '');
setPhoneField(data?.phone || '');
setNameFieldError('');
setWeightFieldError('');
setHeightFieldError('');
setEmailFieldError('');
setPhoneFieldError('');
}
};
const handleCloseDialog = () => {
@@ -79,10 +126,10 @@ export default function CardPersonalInformation({ data }) {
justifyContent="space-between"
sx={{ paddingY: 1, paddingX: 3 }}
>
<Typography variant="subtitle2">Informasi Pribadi</Typography>
<Button startIcon={<Iconify icon="heroicons:pencil-solid" />} onClick={handleEditData}>
<Typography variant="subtitle2">Personal Information</Typography>
{/*<Button startIcon={<Iconify icon="heroicons:pencil-solid" />} onClick={handleEditData}>
Edit Data
</Button>
</Button>*/}
</Stack>
{/* Stack 2 */}
<Stack direction="row" spacing={2} paddingX={2}>
@@ -110,100 +157,100 @@ export default function CardPersonalInformation({ data }) {
</IconButton>
</div>
<Stack direction="row" paddingY={1} spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '60%' }}>
<Typography variant="caption">Nama Lengkap</Typography>
<Stack sx={{ width: '36%' }}>
<Typography variant="caption">Full Name</Typography>
<Typography variant="body2"> {data?.name} </Typography>
</Stack>
<Stack sx={{ width: '20%' }}>
<Typography variant="caption">Berat Badan </Typography>
<Stack sx={{ width: '31%' }}>
<Typography variant="caption">Weight</Typography>
<Typography variant="body2">{data?.last_weight_kg} kg</Typography>
</Stack>
<Stack sx={{ width: '20%' }}>
<Typography variant="caption">Tinggi Badan </Typography>
<Stack sx={{ width: '30%' }}>
<Typography variant="caption">Height</Typography>
<Typography variant="body2">{data?.last_height_cm} cm</Typography>
</Stack>
</Stack>
</Stack>
{/* Stack 3 */}
<Stack maxHeight="338px" paddingX={2} sx={{ overflowY: 'auto' }}>
<Stack maxHeight="584px" paddingX={2} sx={{ overflowY: 'auto' }}>
{/* Stack 3.1 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Informasi Dasar</Typography>
{/*<Typography variant="subtitle2">Informasi Dasar</Typography>*/}
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Tempat Lahir</Typography>
<Stack sx={{ width: '40%' }}>
<Typography variant="caption">Place of Birth</Typography>
<Typography variant="body2"> {data?.birth_place} </Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Tanggal Lahir</Typography>
<Stack sx={{ width: '30%' }}>
<Typography variant="caption">Date of Birth</Typography>
<Typography variant="body2">
{' '}
{data?.birth_date ? fDate(data?.birth_date) : ''}
</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Jenis Kelamin</Typography>
<Stack sx={{ width: '30%' }}>
<Typography variant="caption">Gender</Typography>
<Typography variant="body2">{data?.gender ? data.gender.charAt(0).toUpperCase() + data.gender.slice(1) : ''}</Typography>
</Stack>
</Stack>
</Stack>
{/* Stack 3.2 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Informasi Kontak</Typography>
{/*<Typography variant="subtitle2">Informasi Kontak</Typography>*/}
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Nomor Telpon</Typography>
<Stack sx={{ width: '40%' }}>
<Typography variant="caption">Phone Number</Typography>
<Typography variant="body2">{data?.phone}</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Stack sx={{ width: '30%' }}>
<Typography variant="caption">Email</Typography>
<Typography variant="body2">{data?.email}</Typography>
</Stack>
<Stack sx={{ width: '30%' }}>
</Stack>
</Stack>
<Stack>
<Typography variant="caption">Alamat</Typography>
<Typography variant="caption">Address</Typography>
<Typography variant="body2">{data?.main_address_id}</Typography>
</Stack>
</Stack>
{/* Stack 3.3 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Identitas Diri</Typography>
{/*<Typography variant="subtitle2">Identitas Diri</Typography>*/}
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={2}
sx={{ flex: '100%' }}
>
<Stack>
<Typography variant="caption">Nomor NIK</Typography>
<Stack sx={{ width: '40%' }}>
<Typography variant="caption">ID Member</Typography>
<Typography variant="body2">{data?.nik}</Typography>
</Stack>
<Stack>
<Button variant="contained" startIcon={<VisibilityIcon />} disabled>
<Stack sx={{ width: '30%' }}>
<Typography variant="caption">Agama</Typography>
<Typography variant="body2">{data?.religion}</Typography>
</Stack>
<Stack sx={{ width: '30%' }}>
{/*<Button variant="contained" startIcon={<VisibilityIcon />} disabled>
Lihat Foto
</Button>
</Button>*/}
</Stack>
</Stack>
</Stack>
{/* Stack 3.4 */}
<Stack marginTop={2} spacing={1}>
<Typography variant="subtitle2">Informasi Lainnya</Typography>
{/*<Typography variant="subtitle2">Informasi Lainnya</Typography>*/}
<Stack direction="row" justifyContent="space-between" spacing={2} sx={{ flex: '100%' }}>
<Stack>
<Typography variant="caption">Agama</Typography>
<Typography variant="body2">{data?.religion}</Typography>
</Stack>
<Stack>
<Typography variant="caption">Status</Typography>
<Stack sx={{ width: '40%' }}>
<Typography variant="caption">Marital Status</Typography>
<Typography variant="body2">{data?.marital_status}</Typography>
</Stack>
<Stack>
<Typography variant="caption">Pendidikan</Typography>
<Stack sx={{ width: '30%' }}>
<Typography variant="caption">Education</Typography>
<Typography variant="body2">{data?.last_education}</Typography>
</Stack>
<Stack>
<Typography variant="caption">Pekerjaan</Typography>
<Stack sx={{ width: '30%' }}>
<Typography variant="caption">Occupation</Typography>
<Typography variant="body2">{data?.current_employment}</Typography>
</Stack>
</Stack>
@@ -211,44 +258,124 @@ export default function CardPersonalInformation({ data }) {
</Stack>
{/* Dialog */}
<Dialog open={openDialog} onClose={handleCloseDialog}>
<DialogTitle>Edit Data</DialogTitle>
<Dialog open={openDialog} onClose={handleCloseDialog} fullWidth={true}>
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
<Stack direction="row" alignItems="center" justifyContent="space-between">
<Stack direction="row">
<Iconify width={25} height={25} sx={{ marginRight: '10px' }} />
<Typography variant="h6">Edit Data</Typography>
</Stack>
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialog}>
<CloseIcon />
</IconButton>
</Stack>
</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<TextField
label="Full Name"
required
value={editedData ? editedData.name : ''}
onChange={(e) => setEditedData({ ...editedData, name: e.target.value })}
onChange={(e) =>{
setEditedData({ ...editedData, name: e.target.value });
setNameField(e.target.value);
setNameFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
}}
fullWidth
sx={{ marginTop: '16px' }}
inputProps={{ maxLength: 50 }}
error={!!nameFieldError}
helperText={nameFieldError}
/>
<TextField
label="Weight (kg)"
required
value={weight}
onChange={(e) => setWeight(e.target.value)}
onChange={(e) => {
let input = e.target.value;
// Hanya izinkan angka
input = input.replace(/[^0-9]/g, '');
// Batasi panjang input menjadi 3 digit
const maxLength = 3;
const sanitizedInput = input.slice(0, maxLength);
setWeight(sanitizedInput);
setWeightField(sanitizedInput);
setWeightFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
}}
fullWidth
sx={{ marginTop: '16px' }}
inputProps={{
inputMode: 'numeric',
pattern: '[0-9]*', // Memungkinkan hanya karakter angka
}}
error={!!weightFieldError}
helperText={weightFieldError}
/>
<TextField
label="Height (cm)"
required
value={height}
onChange={(e) => setHeight(e.target.value)}
onChange={(e) => {
let input = e.target.value;
// Hanya izinkan angka
input = input.replace(/[^0-9]/g, '');
// Batasi panjang input menjadi 3 digit
const maxLength = 3;
const sanitizedInput = input.slice(0, maxLength);
setHeight(sanitizedInput);
setHeightField(sanitizedInput);
setHeightFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
}}
fullWidth
sx={{ marginTop: '16px' }}
inputProps={{
inputMode: 'numeric',
pattern: '[0-9]*', // Memungkinkan hanya karakter angka
}}
error={!!heightFieldError}
helperText={heightFieldError}
/>
<TextField
label="Email Address"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
onChange={(e) => {
setEmail(e.target.value)
setEmailField(e.target.value);
setEmailFieldError(
e.target.value.trim() === '' ? 'This field is required' : !isValidEmail(e.target.value) ? 'Invalid email address' : ''
);
setEmailFieldCheck(isValidEmail(e.target.value));
}}
fullWidth
sx={{ marginTop: '16px' }}
error={!!emailFieldError}
helperText={emailFieldError}
/>
<TextField
label="Phone No."
required
value={phone}
onChange={(e) => setPhone(e.target.value)}
onChange={(e) => {
let input = e.target.value;
// Hanya izinkan angka dan karakter '+'
input = input.replace(/[^0-9+]/g, '');
// Batasi panjang input menjadi 13 digit
const maxLength = 15;
const sanitizedInput = input.slice(0, maxLength);
setPhone(sanitizedInput);
setPhoneField(sanitizedInput);
setPhoneFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
}}
fullWidth
sx={{ marginTop: '16px' }}
inputProps={{
inputMode: 'tel',
pattern: '^\\+?[0-9]*$', // Memungkinkan karakter '+' di awal, diikuti oleh angka
}}
error={!!phoneFieldError}
helperText={phoneFieldError}
/>
{/* <TextField
label="Address"
@@ -264,7 +391,7 @@ export default function CardPersonalInformation({ data }) {
<DialogActions>
<Button onClick={handleCloseDialog}>Cancel</Button>
<Button onClick={handleSaveData} variant="contained" color="primary">
<Button onClick={handleSaveData} variant="contained" color="primary" disabled={!isRequiredFieldsFilled()}>
Save
</Button>
</DialogActions>

2
frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMember.tsx
View File

@@ -133,7 +133,7 @@ export default function DialogClaimSubmitMember({
const response = await axios.get(`${corporateValue}/members`, {
params: { ...appliedParams, type: 'claim-submit' },
});
//console.log(response.data.data);
setData(response.data.data);
}
})();