Slicing service dan benefit
This commit is contained in:
208
frontend/dashboard/src/components/DialogUpdateStatus.tsx
Normal file
208
frontend/dashboard/src/components/DialogUpdateStatus.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton, Grid } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { ReactElement } from 'react';
|
||||
import Iconify from './Iconify';
|
||||
import { Card } from '@mui/material';
|
||||
import { FormProvider, RHFTextField, RHFSwitch, RHFSelect } from './hook-form';
|
||||
import { Button } from '@mui/material';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import axios from '@/utils/axios';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type DataContent = {
|
||||
code: string;
|
||||
name: string;
|
||||
id: number;
|
||||
status: string
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
maxWidth?: string;
|
||||
data?: DataContent | undefined;
|
||||
description: string;
|
||||
};
|
||||
|
||||
type FormValuesProps = {
|
||||
value: string;
|
||||
active: boolean;
|
||||
};
|
||||
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const DialogUpdateStatus = ({ title, openDialog, setOpenDialog, data, maxWidth, content }: MuiDialogProps) => {
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
reason: Yup.string().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(NewCorporateSchema),
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (openDialog === false) {
|
||||
reset();
|
||||
}
|
||||
}, [openDialog, reset]);
|
||||
|
||||
const handleClose = () => {
|
||||
setOpenDialog(false);
|
||||
};
|
||||
|
||||
const handleUpdate = (id: number, status: number) => {
|
||||
axios
|
||||
.put(`/corporates/${id}/activation`, {
|
||||
// service_code: service.service_code,
|
||||
active: status,
|
||||
})
|
||||
.then((res) => {
|
||||
handleClose()
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
// console.log('asdasd', error.response.data.message)
|
||||
enqueueSnackbar(
|
||||
error.response.data.message ?? error.message ?? 'Failed Processing Request',
|
||||
{ variant: 'error' }
|
||||
);
|
||||
});
|
||||
}
|
||||
let maxWidthDialog = 'md';
|
||||
|
||||
if (maxWidth) {
|
||||
maxWidthDialog = maxWidth;
|
||||
}
|
||||
|
||||
const onSubmit = async (row : any) => {
|
||||
console.log('test')
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={'sm'}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
{title?.icon ? (
|
||||
<Stack direction="row">
|
||||
<Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
|
||||
<Typography variant="h6">{title?.name}</Typography>
|
||||
</Stack>
|
||||
) : (
|
||||
<Typography variant="h6">{title?.name ? title?.name : ''}</Typography>
|
||||
)}
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
|
||||
|
||||
{/* <Stack paddingX={2} paddingY={2}>
|
||||
<Typography variant='subtitle1'>{description}</Typography>
|
||||
</Stack>
|
||||
<Card>
|
||||
<Grid container paddingX={2} paddingY={2}>
|
||||
<Grid item xs={4} md={4}>
|
||||
<Typography variant='inherit'>Code</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<Typography variant='subtitle1'>{data?.code}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={4} md={4} marginTop={2}>
|
||||
<Typography variant='inherit'>Corporate Name</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={8} marginTop={2}>
|
||||
<Typography variant='subtitle1'>{data?.name}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
|
||||
<Typography marginTop={5} marginBottom={3} variant='subtitle1'>
|
||||
Reason for update*
|
||||
</Typography>
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<RHFSelect
|
||||
name="reason"
|
||||
label="Reason for update"
|
||||
>
|
||||
<option value=""></option>
|
||||
<option value="Agreement changed">Agreement changed</option>
|
||||
<option value="Endorsement">Endorsement</option>
|
||||
<option value="Renewal">Renewal</option>
|
||||
<option value="Worng Setting">Worng Setting</option>
|
||||
</RHFSelect>
|
||||
</FormProvider>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
direction={{ xs: 'column', md: 'row' }}
|
||||
spacing={2}
|
||||
marginTop={5}
|
||||
>
|
||||
<Stack direction="row" spacing={1}>
|
||||
<Button
|
||||
sx={{
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
variant="outlined"
|
||||
size="medium"
|
||||
fullWidth={true}
|
||||
onClick={() => setOpenDialog(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
{data?.status == 1 ?
|
||||
<Button
|
||||
sx={{
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
variant="contained"
|
||||
size="medium"
|
||||
fullWidth={true}
|
||||
color='error'
|
||||
onClick={() => handleUpdate(data?.id, 0)}
|
||||
>
|
||||
Inactive
|
||||
</Button>
|
||||
: <Button
|
||||
sx={{
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
variant="contained"
|
||||
size="medium"
|
||||
fullWidth={true}
|
||||
color='success'
|
||||
onClick={() => handleUpdate(data?.id, 1)}
|
||||
>
|
||||
Active
|
||||
</Button> }
|
||||
</Stack>
|
||||
</Stack> */}
|
||||
{content}
|
||||
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default DialogUpdateStatus;
|
||||
98
frontend/dashboard/src/components/Label.tsx
Normal file
98
frontend/dashboard/src/components/Label.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
// @mui
|
||||
import { alpha, Theme, useTheme, styled } from '@mui/material/styles';
|
||||
import { BoxProps } from '@mui/material';
|
||||
// theme
|
||||
import { ColorSchema } from '../theme/palette';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type LabelColor = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
|
||||
|
||||
type LabelVariant = 'filled' | 'outlined' | 'ghost';
|
||||
|
||||
const RootStyle = styled('span')(
|
||||
({
|
||||
theme,
|
||||
ownerState,
|
||||
}: {
|
||||
theme: Theme;
|
||||
ownerState: {
|
||||
color: LabelColor;
|
||||
variant: LabelVariant;
|
||||
};
|
||||
}) => {
|
||||
const isLight = theme.palette.mode === 'light';
|
||||
const { color, variant } = ownerState;
|
||||
|
||||
const styleFilled = (color: ColorSchema) => ({
|
||||
color: theme.palette[color].contrastText,
|
||||
backgroundColor: theme.palette[color].main,
|
||||
});
|
||||
|
||||
const styleOutlined = (color: ColorSchema) => ({
|
||||
color: theme.palette[color].main,
|
||||
backgroundColor: 'transparent',
|
||||
border: `1px solid ${theme.palette[color].main}`,
|
||||
});
|
||||
|
||||
const styleGhost = (color: ColorSchema) => ({
|
||||
color: theme.palette[color][isLight ? 'dark' : 'light'],
|
||||
backgroundColor: alpha(theme.palette[color].main, 0.16),
|
||||
});
|
||||
|
||||
return {
|
||||
height: 22,
|
||||
minWidth: 22,
|
||||
lineHeight: 0,
|
||||
borderRadius: 6,
|
||||
// cursor: 'default',
|
||||
alignItems: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
padding: theme.spacing(0, 1),
|
||||
color: theme.palette.grey[800],
|
||||
fontSize: theme.typography.pxToRem(12),
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
backgroundColor: theme.palette.grey[300],
|
||||
fontWeight: theme.typography.fontWeightBold,
|
||||
|
||||
...(color !== 'default'
|
||||
? {
|
||||
...(variant === 'filled' && { ...styleFilled(color) }),
|
||||
...(variant === 'outlined' && { ...styleOutlined(color) }),
|
||||
...(variant === 'ghost' && { ...styleGhost(color) }),
|
||||
}
|
||||
: {
|
||||
...(variant === 'outlined' && {
|
||||
backgroundColor: 'transparent',
|
||||
color: theme.palette.text.primary,
|
||||
border: `1px solid ${theme.palette.grey[500_32]}`,
|
||||
}),
|
||||
...(variant === 'ghost' && {
|
||||
color: isLight ? theme.palette.text.secondary : theme.palette.common.white,
|
||||
backgroundColor: theme.palette.grey[500_16],
|
||||
}),
|
||||
}),
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
interface Props extends BoxProps {
|
||||
color?: LabelColor;
|
||||
variant?: LabelVariant;
|
||||
}
|
||||
|
||||
export default function Label({ color = 'default', variant = 'ghost', children, sx }: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<RootStyle ownerState={{ color, variant }} sx={sx} theme={theme}>
|
||||
{children}
|
||||
</RootStyle>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function ThemeColorPresets({ children }: Props) {
|
||||
...defaultTheme,
|
||||
palette: {
|
||||
...defaultTheme.palette,
|
||||
primary: setColor,
|
||||
// primary: setColor,
|
||||
},
|
||||
customShadows: {
|
||||
...defaultTheme.customShadows,
|
||||
|
||||
Reference in New Issue
Block a user