257 lines
13 KiB
TypeScript
257 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { Box, TextField, Typography, Grid, Button, Card, CardMedia, CardContent } from '@mui/material';
|
|
import Layout from '@/components/layout/landing-layout';
|
|
import Container from '@/components/common/Container';
|
|
import { useMyNavigation } from '@/hooks/useMyNavigation';
|
|
|
|
export default function UserEditForm() {
|
|
const { back, replace } = useMyNavigation();
|
|
const [userData, setUserData] = useState({
|
|
fullName: 'Helen Zhou',
|
|
birthDate: '1990-11-11',
|
|
phone: '+998 99 365 48 11',
|
|
serialNumber: 'AB342534',
|
|
pinfl: '12548965451254',
|
|
address: 'Toshkent sh. Uchtepa 12',
|
|
aviaID: 'AT010001',
|
|
cargoID: 'T010001',
|
|
branch: 'Toshkent sh',
|
|
});
|
|
const token = localStorage.getItem('token');
|
|
|
|
const [passportFrontImage, setPassportFrontImage] = useState<string | null>(
|
|
'https://a57.foxnews.com/static.foxnews.com/foxnews.com/content/uploads/2018/09/1200/675/Ireland-Plastic-Passports-1.jpg?ve=1&tl=1'
|
|
);
|
|
const [passportBackImage, setPassportBackImage] = useState<string | null>(
|
|
'https://nebula.wsimg.com/08bfbadc8356b6a0ba6fd1a05dbc4987?AccessKeyId=80E5C6BFDBBCCE7AC676&disposition=0&alloworigin=1'
|
|
);
|
|
const [userImage, setUserImage] = useState<string | null>(
|
|
'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZmVtYWxlJTIwcHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D'
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
replace('/');
|
|
}
|
|
}, []);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setUserData({ ...userData, [e.target.name]: e.target.value });
|
|
};
|
|
|
|
const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>, key?: string) => {
|
|
if (event.target.files && event.target.files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onload = e => {
|
|
if (e.target) {
|
|
if (key === 'front') setPassportFrontImage(e.target.result as string);
|
|
else if (key === 'user') setUserImage(e.target.result as string);
|
|
else setPassportBackImage(e.target.result as string);
|
|
}
|
|
};
|
|
reader.readAsDataURL(event.target.files[0]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<Container>
|
|
<Box sx={{ p: { xs: 2, sm: 4 }, mx: 'auto' }}>
|
|
<Typography variant='h6' fontWeight='bold' mb={2}>
|
|
{"Ma'lumotlarni tahrirlash"}
|
|
</Typography>
|
|
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField fullWidth label="To'liq ism" name='fullName' value={userData.fullName} onChange={handleChange} />
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
fullWidth
|
|
type='date'
|
|
label="Tug'ilgan kun"
|
|
name='birthDate'
|
|
value={userData.birthDate}
|
|
onChange={handleChange}
|
|
InputLabelProps={{ shrink: true }}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField fullWidth label='Telefon raqam' name='phone' value={userData.phone} onChange={handleChange} />
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
fullWidth
|
|
label='Seriya raqam'
|
|
name='serialNumber'
|
|
value={userData.serialNumber}
|
|
onChange={handleChange}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField fullWidth label='PINFL' name='pinfl' value={userData.pinfl} onChange={handleChange} />
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField fullWidth label='Qulay filial' name='branch' value={userData.branch} onChange={handleChange} />
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField fullWidth label='Adres' name='address' value={userData.address} onChange={handleChange} />
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField fullWidth label='Avia ID' name='aviaID' value={userData.aviaID} onChange={handleChange} />
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField fullWidth label='Kargo ID' name='cargoID' value={userData.cargoID} onChange={handleChange} />
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Box mt={3} sx={{ display: 'flex', gap: '50px' }}>
|
|
<Box>
|
|
<Typography variant='body1' fontWeight='bold' mb={1}>
|
|
Rasmingiz
|
|
</Typography>
|
|
|
|
<input
|
|
type='file'
|
|
accept='image/*'
|
|
onChange={e => handleImageUpload(e, 'user')}
|
|
style={{ display: 'none' }}
|
|
id='user-upload'
|
|
/>
|
|
<label htmlFor='user-upload'>
|
|
<Card
|
|
sx={{
|
|
width: '80px',
|
|
height: '80px',
|
|
borderRadius: '50%',
|
|
cursor: 'pointer',
|
|
border: '1px dashed gray',
|
|
display: 'inline-block',
|
|
}}
|
|
>
|
|
{userImage ? (
|
|
<CardMedia
|
|
component='img'
|
|
sx={{
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover',
|
|
objectPosition: 'center',
|
|
}}
|
|
image={userImage}
|
|
alt='Passport Image'
|
|
/>
|
|
) : (
|
|
<CardContent sx={{ textAlign: 'center', p: 4 }}>
|
|
<Typography variant='body2' color='gray'>
|
|
Yuklash uchun bosing
|
|
</Typography>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
</label>
|
|
</Box>
|
|
|
|
<Box>
|
|
<Typography variant='body1' fontWeight='bold' mb={1}>
|
|
Passport rasmi
|
|
</Typography>
|
|
<input
|
|
type='file'
|
|
accept='image/*'
|
|
onChange={e => handleImageUpload(e, 'front')}
|
|
style={{ display: 'none' }}
|
|
id='passport-front-upload'
|
|
/>
|
|
<input
|
|
type='file'
|
|
accept='image/*'
|
|
onChange={handleImageUpload}
|
|
style={{ display: 'none' }}
|
|
id='passport-back-upload'
|
|
/>
|
|
<Box sx={{ display: 'flex', gap: '15px' }}>
|
|
<label htmlFor='passport-front-upload'>
|
|
<Card
|
|
sx={{
|
|
maxWidth: 250,
|
|
cursor: 'pointer',
|
|
border: '1px dashed gray',
|
|
display: 'inline-block',
|
|
}}
|
|
>
|
|
{passportFrontImage ? (
|
|
<CardMedia
|
|
component='img'
|
|
height='140'
|
|
sx={{
|
|
maxWidth: '200px',
|
|
maxHeight: '200px',
|
|
objectFit: 'contain',
|
|
objectPosition: 'center',
|
|
}}
|
|
image={passportFrontImage}
|
|
alt='Passport Image'
|
|
/>
|
|
) : (
|
|
<CardContent sx={{ textAlign: 'center', p: 4 }}>
|
|
<Typography variant='body2' color='gray'>
|
|
Yuklash uchun bosing
|
|
</Typography>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
</label>
|
|
{(!!passportFrontImage || !!passportBackImage) && (
|
|
<label htmlFor='passport-back-upload'>
|
|
<Card
|
|
sx={{
|
|
maxWidth: 250,
|
|
cursor: 'pointer',
|
|
border: '1px dashed gray',
|
|
display: 'inline-block',
|
|
}}
|
|
>
|
|
{!!passportBackImage ? (
|
|
<CardMedia
|
|
component='img'
|
|
height='140'
|
|
sx={{
|
|
maxWidth: '200px',
|
|
maxHeight: '200px',
|
|
objectFit: 'contain',
|
|
objectPosition: 'center',
|
|
}}
|
|
image={passportBackImage}
|
|
alt='Passport Image'
|
|
/>
|
|
) : (
|
|
<CardContent sx={{ textAlign: 'center', p: 4 }}>
|
|
<Typography variant='body2' color='gray'>
|
|
Yuklash uchun bosing
|
|
</Typography>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
</label>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box mt={3} display='flex' justifyContent='flex-end' gap={2}>
|
|
<Button onClick={back} variant='outlined' color='primary'>
|
|
Bekor qilish
|
|
</Button>
|
|
<Button variant='contained' color='primary'>
|
|
Saqlash
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Layout>
|
|
);
|
|
}
|