160 lines
4.7 KiB
TypeScript
160 lines
4.7 KiB
TypeScript
import * as React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Card from '@mui/material/Card';
|
|
import CardActions from '@mui/material/CardActions';
|
|
import CardContent from '@mui/material/CardContent';
|
|
import Divider from '@mui/material/Divider';
|
|
import Grid from '@mui/material/Grid';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
import * as URLS from 'config/urls';
|
|
import useUsageData from 'hooks/useUsageData.ee';
|
|
|
|
export default function UsageDataInformation() {
|
|
const usageData = useUsageData();
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Card sx={{ mb: 3, p: 2 }}>
|
|
<CardContent>
|
|
<Box sx={{ mb: 1, display: 'flex', justifyContent: 'space-between' }}>
|
|
<Typography variant="h6" fontWeight="bold">
|
|
Subscription plan
|
|
</Typography>
|
|
{/* <Chip label="Active" color="success" /> */}
|
|
</Box>
|
|
<Divider sx={{ mb: 3 }} />
|
|
<Grid
|
|
container
|
|
item
|
|
xs={12}
|
|
spacing={1}
|
|
sx={{ mb: [2, 2, 8] }}
|
|
alignItems="stretch"
|
|
>
|
|
<Grid item xs={12} md={4}>
|
|
<Card
|
|
sx={{
|
|
height: '100%',
|
|
backgroundColor: (theme) => theme.palette.background.default,
|
|
}}
|
|
>
|
|
<CardContent>
|
|
<Typography variant="subtitle2" sx={{ pb: 0.5 }}>
|
|
Monthly quota
|
|
</Typography>
|
|
<Typography variant="h6" fontWeight="bold">
|
|
Free trial
|
|
</Typography>
|
|
</CardContent>
|
|
<CardActions>
|
|
<Button size="small">Upgrade plan</Button>
|
|
</CardActions>
|
|
</Card>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} md={4}>
|
|
<Card
|
|
sx={{
|
|
height: '100%',
|
|
backgroundColor: (theme) => theme.palette.background.default,
|
|
}}
|
|
>
|
|
<CardContent>
|
|
<Typography variant="subtitle2" sx={{ pb: 0.5 }}>
|
|
Next bill amount
|
|
</Typography>
|
|
|
|
<Typography variant="h6" fontWeight="bold">
|
|
---
|
|
</Typography>
|
|
</CardContent>
|
|
|
|
<CardActions>
|
|
{/* <Button size="small">Update billing info</Button> */}
|
|
</CardActions>
|
|
</Card>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} md={4}>
|
|
<Card
|
|
sx={{
|
|
height: '100%',
|
|
backgroundColor: (theme) => theme.palette.background.default,
|
|
}}
|
|
>
|
|
<CardContent>
|
|
<Typography variant="subtitle2" sx={{ pb: 0.5 }}>
|
|
Next bill date
|
|
</Typography>
|
|
<Typography variant="h6" fontWeight="bold">
|
|
---
|
|
</Typography>
|
|
</CardContent>
|
|
|
|
<CardActions>
|
|
{/* <Button disabled size="small">
|
|
monthly billing
|
|
</Button> */}
|
|
</CardActions>
|
|
</Card>
|
|
</Grid>
|
|
</Grid>
|
|
<Box>
|
|
<Typography variant="h6" fontWeight="bold">
|
|
Your usage
|
|
</Typography>
|
|
|
|
<Box>
|
|
<Typography
|
|
variant="subtitle2"
|
|
sx={{ color: 'text.secondary', mt: 1 }}
|
|
>
|
|
Last 30 days total usage
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Divider sx={{ mt: 2 }} />
|
|
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="subtitle2"
|
|
sx={{ color: 'text.secondary', mt: 2, fontWeight: 500 }}
|
|
>
|
|
Tasks
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="subtitle2"
|
|
sx={{ color: 'text.secondary', mt: 2, fontWeight: 500 }}
|
|
>
|
|
12300
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Divider sx={{ mt: 2 }} />
|
|
</Box>
|
|
|
|
<Button
|
|
component={Link}
|
|
to={URLS.SETTINGS_PLAN_UPGRADE}
|
|
size="small"
|
|
variant="contained"
|
|
sx={{ mt: 2 }}
|
|
>
|
|
Upgrade
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</React.Fragment>
|
|
);
|
|
}
|