UI Components – Artemis Library

import { Box, Grid, Typography, Avatar, Button, TextField }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            padding: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        avatar: {
            mt: theme.spacing(1),
            padding: theme.spacing(1.5),
            backgroundColor: theme.palette.primary[500]
        },
        title: {
            color: theme.palette.common.dark
        },
        subtitle: {
            color: theme.palette.grey[500]
        },
        search: {
            position: 'absolute',
            right: 16

import { useState } from 'react';
import { Box, Grid, Typography, Button, Link, Breadcrumbs, FormControl, Select, MenuItem } from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const [date1, setDate1] = useState("20/04/2021");
    const [date2, setDate2] = useState("24/04/2021");

    const handleChange1 = (event) => {
      setDate1(event.target.value);
    };

    const handleChange2 = (event) => {
        setDate2(event.target.value);
    };

    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        },
        text: {
            color: theme.palette.grey[500],

import { useState } from 'react';
import { Box, Grid, Typography, Button, Link, Breadcrumbs, FormControl, Select, MenuItem } from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const [date1, setDate1] = useState("20/04/2021");
    const [date2, setDate2] = useState("24/04/2021");

    const handleChange1 = (event) => {
      setDate1(event.target.value);
    };

    const handleChange2 = (event) => {
        setDate2(event.target.value);
    };

    const styles = {
        section: {
            p: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white
        },
        text: {
            color: theme.palette.grey[500],

import { useState } from 'react';
import { Grid, Box, Typography, Tabs, Tab }  from '@mui/material';
import theme from '../../theme/theme.js';

const Header = (props) => {
    const styles = {
        section: {
            pt: theme.spacing(3.75),
            pl: theme.spacing(3.75),
            pr: theme.spacing(3.75),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.grey[50]
        },
        tab: {
            fontSize: theme.spacing(1.75),
            color: theme.palette.grey[300]
        }
    }
    const [value, setValue] = useState(0);

    const handleChange = (event, newValue) => {
      setValue(newValue);
    };

import { Grid, Box, Typography, Container, TextField, Button, Link }  from '@mui/material';
import theme from '../../theme/theme';

const FileTable = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        search: {
            position: 'absolute',
            right: 16
        },
        wrapperTextField: {
            position: 'relative',
            [theme.breakpoints.up('lg')]: {
                width: theme.spacing(41.25)
            }
        },
        textField: {
            backgroundColor: theme.palette.common.white,
            fontWeight: theme.typography.fontWeightRegular,
        },
        img: {
            display: 'block'

import { useState } from 'react';
import { Grid, Box, Typography, Container, Chip, Button, Link, Checkbox, FormControl, Select, MenuItem, Pagination, Stack }  from '@mui/material';
import theme from '../../theme/theme';

const UserTable = (props) => {
    const [age, setAge] = useState('');

    const handleChange = (event) => {
      setAge(event.target.value);
    };
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        scroll: {
            overflow: 'auto'
        },
        body: {
            width: theme.spacing(144),
            [theme.breakpoints.up('lg')]: {
                width: 'auto'
            }
        },
        thLeftRadius: {

import { Grid, Box, Typography, Chip, Container }  from '@mui/material';
import theme from '../../theme/theme.js';

const StatTiles = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            p: theme.spacing(3),
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        subtitle: {
            color: theme.palette.grey[600],
            pl: theme.spacing(1)
        },
        unit: {
            color: theme.palette.grey[800],
            mt: theme.spacing(1),
            mb: theme.spacing(1)
        },
        chip: {

import { useState } from 'react';
import { Grid, Box, Typography, Container, Chip, Button, Stepper, Step, StepLabel, StepContent, Paper }  from '@mui/material';
import theme from '../../theme/theme';

const TaskTables = (props) => {
    const [activeStep, setActiveStep] = useState(0);

    const handleNext = () => {
      setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };
  
    const handleBack = () => {
      setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };
  
    const handleReset = () => {
      setActiveStep(0);
    };

    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {

import { useState } from 'react';
import { Grid, Box, Typography, Link, Button, Divider, List, ListItemButton, ListItemIcon, ListItemText, Collapse, Chip, Avatar } from '@mui/material';
import theme from '../../theme/theme';

const Menu = (props) => {
    const [mobile, setMobile] = useState({ display: 'none' })
    const [open1, setOpen1] = useState(false);
    const [open3, setOpen3] = useState(false);
    const [open4, setOpen4] = useState(false);
    const [open5, setOpen5] = useState(false);
    const [open6, setOpen6] = useState(false);
    
    const handleClick1 = () => {
        setOpen1(!open1);
    };
    const handleClick3 = () => {
        setOpen3(!open3);
    };
    const handleClick4 = () => {
        setOpen4(!open4);
    };
    const handleClick5 = () => {
        setOpen5(!open5);
    };

import { Grid, Box, Typography, Container, Link }  from '@mui/material';
import theme from '../../theme/theme';

const GeneralTables = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            width: theme.spacing(144),
            [theme.breakpoints.up('lg')]: {
                width: 'auto'
            }
        },
        scroll: {
            overflow: 'auto',
            boxShadow: theme.shadows[1]
        },
        subtitle: {
            color: theme.palette.grey[500],
        },
        subtitle2: {

import { useState } from 'react';
import Chart from "react-apexcharts";
import { Grid, Box, Typography, Chip, Container }  from '@mui/material';
import theme from '../../theme/theme.js';

const GraphTiles = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            pt: theme.spacing(3),
            textAlign: 'center',
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        subtitle: {
            color: theme.palette.grey[500],
            mb: theme.spacing(1)
        },
        unit: {
            color: theme.palette.grey[800],
        },

import { useState } from 'react';
import Chart from "react-apexcharts";
import { Grid, Box, Typography, Chip, Container, LinearProgress, MenuItem, Select, FormControl, Button }  from '@mui/material';
import theme from '../../theme/theme';

const Stats = (props) => {
    const [age, setAge] = useState('Monthly');

    const handleChange = (event) => {
      setAge(event.target.value);
    };

    const styles = {
        section: {
            py: theme.spacing(2)
        },
        wrapper: {
            padding: theme.spacing(3),
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        title: {
            color: theme.palette.grey[800],

import React from "react";
import { Grid, Box, Link, Typography, Container, Chip, Button }  from '@mui/material';
import theme from '../../theme/theme';

const Content = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        box: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1],
            overflow: 'hidden',
            height: '100%'
        },
        header: {
            pt: theme.spacing(3),
            px: theme.spacing(3),
            pb: theme.spacing(4),
            width: '100%',
        },
        bottom: {
            display: 'flex',

import { Grid, Box, Typography, Link, Container, Chip}  from '@mui/material';
import theme from '../../theme/theme';

const TransactionTables = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2),
        },
        box: {
            backgroundColor: theme.palette.common.white,
            py: theme.spacing(2),
            px: theme.spacing(3),
            borderRadius: `${theme.spacing(0.5)} ${theme.spacing(0.5)} 0 0`
        },
        header: {
            borderBottom: 1,
            borderColor: theme.palette.grey[50]
        },
        scroll: {
            overflow: 'auto'
        },
        content: {
            boxShadow: theme.shadows[1],
            width: '100%'

import { Grid, Box, Typography, Container, Chip, Button, AvatarGroup, Avatar, Link } from '@mui/material';
import theme from '../../theme/theme';

const KanbanBoard = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        topPrimary: {
            borderRadius: theme.spacing(0.5),
            backgroundColor: theme.palette.common.white,
            px: theme.spacing(3),
            py: theme.spacing(1.8),
            borderTop: 2,
            borderColor: theme.palette.primary[500],
            boxShadow: theme.shadows[1]
        },
        topWarning: {
            borderRadius: theme.spacing(0.5),
            backgroundColor: theme.palette.common.white,
            px: theme.spacing(3),
            py: theme.spacing(1.8),
            borderTop: 2,
            borderColor: theme.palette.warning[500],

import { Grid, Box, Typography, Container, Chip, Avatar, Button, AvatarGroup, LinearProgress } from '@mui/material';
import theme from '../../theme/theme';

const Projects = (props) => {
    const styles = {
        section: {
            py: theme.spacing(2)
        },
        card: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),
            boxShadow: theme.shadows[1]
        },
        top: {
            pt: theme.spacing(3),
            px: theme.spacing(3),
            pb: theme.spacing(1.5)
        },
        bottom: {
            padding: theme.spacing(3),
            backgroundColor: theme.palette.grey[50] + '40'
        },
        avatarSecondary: {
            backgroundColor: theme.palette.secondary[500]

import { useState } from 'react';
import Chart from "react-apexcharts";
import { Grid, Box, Typography, Container, MenuItem, Select, FormControl }  from '@mui/material';
import theme from '../../theme/theme';

const Graphs = (props) => {
    const [month, setMonth] = useState('March');
    const [period, setPeriod] = useState('Weekly');

    const handleMonth = (event) => {
        setMonth(event.target.value);
    };

    const handlePeriod = (event) => {
        setPeriod(event.target.value);
    };

    const styles = {
        section: {
            py: theme.spacing(2)
        },
        wrapper: {
            backgroundColor: theme.palette.common.white,
            borderRadius: theme.spacing(0.5),

import { Box, Grid, Link, Typography }  from '@mui/material';
import theme from '../../theme/theme.js';

const Navbar = (props) => {
    const styles = {
        section: {
            px: theme.spacing(3),
            py: theme.spacing(2.3),
            mb: theme.spacing(2),
            backgroundColor: theme.palette.common.white,
            boxShadow: theme.shadows[1]
        },
        link: {
            textDecoration: 'none',
            color: theme.palette.grey[800]
        },
        hoverLink: {
            '&:hover': {
                color: theme.palette.grey[700]
            }
        },
        hoverIcons: {
            color: theme.palette.grey[200],
            '&:hover': {

import { useState } from 'react';
import { Grid, Box, Typography, Container, Tabs, Tab, Checkbox, LinearProgress, Button, Link }  from '@mui/material';
import theme from '../../theme/theme';

function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  }

import { useState } from 'react';
import { Grid, Box, Typography, Container, Tabs, Tab, Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import theme from '../../theme/theme';

function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
}