React Dashboard Ui Code Templates Free Download

admin

August 7, 2022

Share with

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

app.js

import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';

import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import Sidemenu from './menu.js';
import Dashboard from './dashboard.js';
import Clients from './clients.js';
import Projects from './projects.js';
import Tasks from './tasks.js';
import Payments from './payments.js';



export default function front() {
	return (
		<React.Fragment>
			<Box sx={{ flexGrow: 1 }}>
				<AppBar position="static">
					<Toolbar>
						<IconButton
							size="large"
							edge="start"
							color="inherit"
							aria-label="menu"
							sx={{ mr: 2 }}>
							<MenuIcon />
						</IconButton>
						<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
							venkter
						</Typography>
					</Toolbar>
				</AppBar>
			</Box>
			<Box sx={{ flexGrow: 1 }}>
				<Grid container spacing={2}>
					{' '}
					<Router>
						<Grid item xs={2}>
							{' '}
							<Sidemenu />
						</Grid>
						<Grid item xs={9}>
							<Switch>
								<Route path="/dashboard">
									<Dashboard />
								</Route>
								<Route path="/clients">
									<Clients />
								</Route>
								<Route path="/projects">
									<Projects />
								</Route>
								<Route path="/tasks">
									<Tasks />
								</Route>
								<Route path="/payments">
									<Payments />
								</Route>
							
							</Switch>
						</Grid>
					</Router>
				</Grid>
			</Box>
		</React.Fragment>
	);
}

import * as React from 'react';
import "./App.css";
import Paper from '@mui/material/Paper';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

import HomeTwoToneIcon from '@mui/icons-material/HomeTwoTone';
import AccountCircleTwoToneIcon from '@mui/icons-material/AccountCircleTwoTone';
import DashboardCustomizeTwoToneIcon from '@mui/icons-material/DashboardCustomizeTwoTone';
import AssignmentTurnedInTwoToneIcon from '@mui/icons-material/AssignmentTurnedInTwoTone';
import MonetizationOnTwoToneIcon from '@mui/icons-material/MonetizationOnTwoTone';
import LogoutTwoToneIcon from '@mui/icons-material/LogoutTwoTone';


const styles = {
  menu:{
    padding:'1em',
    width:'180px',
    borderRadius:0,            
        }
      }
 



export default function Sidemenu() {
  return (
		<Paper style={styles.menu}>
			<MenuList className="SideMenus">
				<ListItemText
					sx={{
						padding: '1em',
						textAlign: 'center',
						color: '#6cd642',
						fontWeight: '500',
						m: 1,
					}}
					gutterBottom
					component="div">
					<Link to="/">VENKTER</Link>
				</ListItemText>

				<Link to="/dashboard">
					<MenuItem>
						<ListItemIcon>
							<HomeTwoToneIcon fontSize="small" />
						</ListItemIcon>
						<ListItemText>Dashboard</ListItemText>
					</MenuItem>
				</Link>
				<Link to="/clients">
					<MenuItem>
						<ListItemIcon>
							<AccountCircleTwoToneIcon fontSize="small" />
						</ListItemIcon>
						<ListItemText>Clients</ListItemText>
					</MenuItem>
				</Link>
				<Link to="/projects">
					<MenuItem>
						<ListItemIcon>
							<DashboardCustomizeTwoToneIcon fontSize="small" />
						</ListItemIcon>
						<ListItemText>Projects</ListItemText>
					</MenuItem>
				</Link>
				<Link to="/tasks">
					<MenuItem>
						<ListItemIcon>
							<AssignmentTurnedInTwoToneIcon fontSize="small" />
						</ListItemIcon>
						<ListItemText>Tasks</ListItemText>
					</MenuItem>
				</Link>
				<Link to="/payments">
					<MenuItem>
						<ListItemIcon>
							<MonetizationOnTwoToneIcon fontSize="small" />
						</ListItemIcon>
						<ListItemText>Payments</ListItemText>
					</MenuItem>
				</Link>
				<MenuItem>
					<ListItemIcon>
						<LogoutTwoToneIcon fontSize="small" />
					</ListItemIcon>
					<ListItemText>Logout</ListItemText>
				</MenuItem>
			</MenuList>
		</Paper>
	);
}

Dashbaord

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import HomeIcon from '@mui/icons-material/Home';

const Item = styled(Paper)(({ theme }) => ({
	...theme.typography.body2,
	padding: theme.spacing(4),
	color: theme.palette.text.secondary,
}));



export default function Dashboard() {
	return (
 		<Box margin="dense" sx={{ width: '100%', marginTop: '10px', color: '#333' }}>
			<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }} justifyContent="center" columns={{ xs: 6, sm: 9, md: 12 }} > 
				<Grid item xs={6} sm={3} md={4}>
					<Item>
						<HomeIcon
							sx={{
								background: '#92E04C',
								borderRadius: '30px',
								padding: '5px',
  							}}
						/>
						<Box
							component="span"
							sx={{
								color: '#333',
								fontSize: 22,
								paddingRight: 5,
								paddingLeft: 2,
								width: '30px;',
								height: '30px',
								fontWeight: '600',
							}}>
							Client
						</Box>
						<Box
							component="span"
							sx={{ color: 'primary.main', fontSize: 22, padding: 0 }}>
							224
						</Box>
					</Item>
				</Grid>
				<Grid item item xs={6} sm={3} md={4}>
					<Item>
						<HomeIcon
							sx={{
								background: '#92E04C',
								borderRadius: '30px',
								padding: '5px',
							}}
						/>
						<Box
							component="span"
							sx={{
								color: '#333',
								fontSize: 22,
								paddingRight: 5,
								paddingLeft: 2,
								width: '30px;',
								height: '30px',
								fontWeight: '600',
							}}>
							Projects
						</Box>
						<Box
							component="span"
							sx={{ color: 'primary.main', fontSize: 22, padding: 0 }}>
							225
						</Box>
					</Item>
				</Grid>
				<Grid item item xs={12} sm={3} md={4}>
					<Item>
						<HomeIcon
							sx={{
								background: '#92E04C',
								borderRadius: '30px',
								padding: '5px',
							}}
						/>
						<Box
							component="span"
							sx={{
								color: '#333',
								fontSize: 22,
								paddingRight: 5,
								paddingLeft: 2,
								width: '30px;',
								height: '30px',
								fontWeight: '600',
							}}>
							Sales
						</Box>
						<Box
							component="span"
							sx={{ color: 'primary.main', fontSize: 22, padding: 0 }}>
							225
						</Box>
					</Item>
				</Grid>

			</Grid>
			
		</Box>
	);
}

Clients

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import Button from '@mui/material/Button';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';




const Item = styled(Paper)(({ theme }) => ({
 	padding: theme.spacing(5),
 }));



export default function BasicGrid() {
 
  const [Profile, setAge] = React.useState('');
	const [agel, setAgel] = React.useState('');

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

	const handleChangel = (event) => {
		setAgel(event.target.value);
	};
	
	
	return (
		<Box className="MainForm">
			<Grid container spacing={0} margin={0} columns={16} zeroMinWidth={0} sx={{ background: '#fff'}}>
				<Grid item md={8} xs={16}>
					<Item spacing={5}>
						<Typography variant="h4" component="h2">
							{' '}
							Clients{' '}
						</Typography>
						<TextField
							id="standard-basic"
							label="First Name"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Mobile"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="WhatsApp"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Email"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Address"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="outlined-multiline-static"
							label="Notes"
							fullWidth
							multiline
							rows={2}
							variant="standard"
						/>

						<div>
							<FormControl
								variant="standard"
								sx={{ width: '60%', marginTop: '20px', marginBottom: '20px' }}>
								<InputLabel id="demo-simple-select-standard-label">
									Profile
								</InputLabel>
								<Select
									fullwidth
									labelId="demo-simple-select-standard-label"
									id="demo-simple-select-standard"
									value={Profile}
									onChange={handleChange}
									label="Age">
									<MenuItem value="">
										<em>None</em>
									</MenuItem>
									<MenuItem value={10}>Ten</MenuItem>
									<MenuItem value={20}>Twenty</MenuItem>
									<MenuItem value={30}>Thirty</MenuItem>
								</Select>
							</FormControl>

							<FormControl
								variant="standard"
								sx={{ width: '60%', marginTop: '10px', marginBottom: '20px' }}>
								<InputLabel id="demo-simple-select-filled-label">
									Status
								</InputLabel>
								<Select
									labelId="demo-simple-select-filled-labell"
									id="demo-simple-select-filledl"
									value={agel}
									onChange={handleChangel}>
									<MenuItem value="">
										<em>None</em>
									</MenuItem>
									<MenuItem value={10}>Ten</MenuItem>
									<MenuItem value={20}>Twenty</MenuItem>
									<MenuItem value={30}>Thirty</MenuItem>
								</Select>
							</FormControl>
						</div>

						<Button sx={{ margin: '10px auto 10px auto' }} variant="contained">
							Save
						</Button>
					</Item>
				</Grid>
				<Grid item xs={16} md={8}>
					<Item spacing={5}>
						<Typography variant="h4" component="h2">
						 
							Company Details 
						</Typography>
						<TextField
							id="standard-basic"
							label="Company Name"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Mobile"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Whats App"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Email"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Company Address"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="outlined-multiline-static"
							label="Notes"
							fullWidth
							multiline
							rows={2}
							variant="standard"
						/>
						<Fab
							color="primary"
							variant="string"
							sx={{ margin: '10px auto 10px auto' }}
							aria-label="add">
							<AddIcon />
						</Fab>
					</Item>
				</Grid>
			</Grid>
		</Box>
	);
}

Projects

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import Button from '@mui/material/Button';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

const Item = styled(Paper)(({ theme }) => ({
	padding: theme.spacing(5),
}));

export default function Projects() {
	const [Profile, setAge] = React.useState('');
	const [agel, setAgel] = React.useState('');

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

	const handleChangel = (event) => {
		setAgel(event.target.value);
	};

	return (
		<Box className="MainForm">
			<Grid
				container
				spacing={0}
				margin={0}
				columns={16}
				zeroMinWidth={0}
				sx={{ background: '#fff' }}>
				<Grid item md={8} xs={16}>
					<Item spacing={5}>
						<Typography variant="h4" component="h2">
							{' '}
							Projects{' '}
						</Typography>
						<TextField
							id="standard-basic"
							label="Project Name"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Price"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="outlined-multiline-static"
							label="Notes"
							fullWidth
							multiline
							rows={2}
							variant="standard"
						/>

						<div spacing={5}>
							<FormControl
								variant="standard"
								sx={{
									width: '300px',
									marginTop: '20px',
									marginBottom: '20px',
								}}>
								<InputLabel id="demo-simple-select-standard-label">
									Profile
								</InputLabel>
								<Select
									fullwidth
									labelId="demo-simple-select-standard-label"
									id="demo-simple-select-standard"
									value={Profile}
									onChange={handleChange}
									label="Age">
									<MenuItem value="io">
										<em>None</em>
									</MenuItem>
									<MenuItem value={10}>Ten</MenuItem>
									<MenuItem value={20}>Twenty</MenuItem>
									<MenuItem value={30}>Thirty</MenuItem>
								</Select>
							</FormControl>

							<FormControl
								variant="standard"
								sx={{ width: '60%', marginTop: '10px', marginBottom: '20px' }}>
								<InputLabel id="demo-simple-select-filled-label">
									Status
								</InputLabel>
								<Select
									labelId="demo-simple-select-filled-labell"
									id="demo-simple-select-filledl"
									value={agel}
									onChange={handleChangel}>
									<MenuItem value="">
										<em>None</em>
									</MenuItem>
									<MenuItem value={10}>Ten</MenuItem>
									<MenuItem value={20}>Twenty</MenuItem>
									<MenuItem value={30}>Thirty</MenuItem>
								</Select>
							</FormControl>
						</div>

						<Button sx={{ margin: '10px auto 10px auto' }} variant="contained">
							Save
						</Button>
					</Item>
				</Grid>

 			</Grid>
		</Box>
	);
}

Tasks

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import Button from '@mui/material/Button';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
 


const Item = styled(Paper)(({ theme }) => ({
	padding: theme.spacing(5),
}));

export default function Projects() {
	const [Profile, setAge] = React.useState('');
	const [agel, setAgel] = React.useState('');

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

	const handleChangel = (event) => {
		setAgel(event.target.value);
	};
 


	return (
		<Box className="MainForm">
			<Grid
				container
				spacing={0}
				margin={0}
				columns={16}
				zeroMinWidth={0}
				sx={{ background: '#fff' }}>
				<Grid item md={8} xs={16}>
					<Item spacing={5}>
						<Typography variant="h4" component="h2">
							Tasks
						</Typography>
						<FormControl
							variant="standard"
							sx={{
								width: '300px',
								marginTop: '20px',
								marginBottom: '20px',
							}}>
							<InputLabel id="demo-simple-select-standard-label">
								Projects
							</InputLabel>
							<Select
								fullwidth
								labelId="demo-simple-select-standard-label"
								id="demo-simple-select-standard"
								value={Profile}
								onChange={handleChange}
								label="Age">
								<MenuItem value="io">
									<em>None</em>
								</MenuItem>
								<MenuItem value={10}>Ten</MenuItem>
								<MenuItem value={20}>Twenty</MenuItem>
								<MenuItem value={30}>Thirty</MenuItem>
							</Select>
						</FormControl>

						<TextField
							id="outlined-multiline-static"
							label="Description"
							fullWidth
							multiline
							rows={2}
							variant="standard"
						/>

						<TextField
							id="standard-basic"
							label="Hours"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Date"
							variant="standard"
							fullWidth
						/>

					 
							 
						 

						<Button sx={{ margin: '10px auto 10px auto' }} variant="contained">
							Save
						</Button>
					</Item>
				</Grid>
			</Grid>
		</Box>
	);
}

Payments

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import Button from '@mui/material/Button';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
 


const Item = styled(Paper)(({ theme }) => ({
	padding: theme.spacing(5),
}));

export default function Projects() {
	const [Profile, setAge] = React.useState('');
	const [agel, setAgel] = React.useState('');

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

	const handleChangel = (event) => {
		setAgel(event.target.value);
	};
 


	return (
		<Box className="MainForm">
			<Grid
				container
				spacing={0}
				margin={0}
				columns={16}
				zeroMinWidth={0}
				sx={{ background: '#fff' }}>
				<Grid item md={8} xs={16}>
					<Item spacing={5}>
						<Typography variant="h4" component="h2">
							Payments
						</Typography>
						<FormControl
							variant="standard"
							sx={{
								width: '300px',
								marginTop: '20px',
								marginBottom: '20px',
							}}>
							<InputLabel id="demo-simple-select-standard-label">
								Payment Mode
							</InputLabel>
							<Select
								fullwidth
								labelId="demo-simple-select-standard-label"
								id="demo-simple-select-standard"
								value={Profile}
								onChange={handleChange}
								label="Age">
								<MenuItem value={'s'}>Cash</MenuItem>
								<MenuItem value={'20'}>Net Banking</MenuItem>
								<MenuItem value={'Cheque'}>Cheque</MenuItem>
							</Select>
						</FormControl>

						<TextField
							id="outlined-multiline-static"
							label="Description"
							fullWidth
							multiline
							rows={2}
							variant="standard"
						/>

						<TextField
							id="standard-basic"
							label="Amount"
							variant="standard"
							fullWidth
						/>

						<TextField
							id="standard-basic"
							label="Date"
							variant="standard"
							fullWidth
						/>

						<Button sx={{ margin: '10px auto 10px auto' }} variant="contained">
							Save
						</Button>
					</Item>
				</Grid>
			</Grid>
		</Box>
	);
}

Tagged in :

admin

VENKTERTECH

React Dashboard Ui Code Templates Free Download

Menu

Dashbaord

Clients

Projects

Tasks

Payments

More Articles & Posts

Free Blobs

Js Cheat Sheet

Programming myths