Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new UI -- first push #25

Closed
wants to merge 1 commit into from
Closed

new UI -- first push #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16,699 changes: 11,051 additions & 5,648 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"yup": "^0.32.11"
},
"scripts": {
"start": "PORT=5000 react-scripts start",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
Expand Down
Binary file added public/assets/aailogo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/ryanblair.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/assets/user.png
View file
Open in desktop
Binary file not shown.
3 changes: 3 additions & 0 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,13 @@ import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, useMode } from "./theme";
import Calendar from "./scenes/calendar/calendar";


function App() {
const [theme, colorMode] = useMode();
const [isSidebar, setIsSidebar] = useState(true);



return (
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>
Expand Down
18 changes: 9 additions & 9 deletions src/data/mockData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,71 +7,71 @@ export const mockDataTeam = [
email: "jonsnow@gmail.com",
age: 35,
phone: "(665)121-5454",
access: "admin",
status: "Complete",
},
{
id: 2,
name: "Cersei Lannister",
email: "cerseilannister@gmail.com",
age: 42,
phone: "(421)314-2288",
access: "manager",
status: "Processing",
},
{
id: 3,
name: "Jaime Lannister",
email: "jaimelannister@gmail.com",
age: 45,
phone: "(422)982-6739",
access: "user",
status: "user",
},
{
id: 4,
name: "Anya Stark",
email: "anyastark@gmail.com",
age: 16,
phone: "(921)425-6742",
access: "admin",
status: "Complete",
},
{
id: 5,
name: "Daenerys Targaryen",
email: "daenerystargaryen@gmail.com",
age: 31,
phone: "(421)445-1189",
access: "user",
status: "Complete",
},
{
id: 6,
name: "Ever Melisandre",
email: "evermelisandre@gmail.com",
age: 150,
phone: "(232)545-6483",
access: "manager",
status: "Processing",
},
{
id: 7,
name: "Ferrara Clifford",
email: "ferraraclifford@gmail.com",
age: 44,
phone: "(543)124-0123",
access: "user",
status: "user",
},
{
id: 8,
name: "Rossini Frances",
email: "rossinifrances@gmail.com",
age: 36,
phone: "(222)444-5555",
access: "user",
status: "user",
},
{
id: 9,
name: "Harvey Roxie",
email: "harveyroxie@gmail.com",
age: 65,
phone: "(444)555-6239",
access: "admin",
status: "Complete",
},
];

Expand Down
69 changes: 33 additions & 36 deletions src/scenes/dashboard/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import GeographyChart from "../../components/GeographyChart";
import BarChart from "../../components/BarChart";
import StatBox from "../../components/StatBox";
import ProgressCircle from "../../components/ProgressCircle";
import Team from "../team";


const Dashboard = () => {
const theme = useTheme();
Expand All @@ -21,12 +23,12 @@ const Dashboard = () => {
<Box m="20px">
{/* HEADER */}
<Box display="flex" justifyContent="space-between" alignItems="center">
<Header title="DASHBOARD" subtitle="Welcome to your dashboard" />
<Header title="Coaching Overview" subtitle="" />

<Box>
<Button
sx={{
backgroundColor: colors.blueAccent[700],
backgroundColor: "#1CA3DE",
color: colors.grey[100],
fontSize: "14px",
fontWeight: "bold",
Expand All @@ -53,10 +55,11 @@ const Dashboard = () => {
display="flex"
alignItems="center"
justifyContent="center"
borderRadius="15px"
>
<StatBox
title="12,361"
subtitle="Emails Sent"
title="N/A"
subtitle="Questions Asked"
progress="0.75"
increase="+14%"
icon={
Expand All @@ -72,10 +75,11 @@ const Dashboard = () => {
display="flex"
alignItems="center"
justifyContent="center"
borderRadius="15px"
>
<StatBox
title="431,225"
subtitle="Sales Obtained"
title="N/A"
subtitle="Questions Answered"
progress="0.50"
increase="+21%"
icon={
Expand All @@ -91,10 +95,11 @@ const Dashboard = () => {
display="flex"
alignItems="center"
justifyContent="center"
borderRadius="15px"
>
<StatBox
title="32,441"
subtitle="New Clients"
title="N/A"
subtitle="Agreements"
progress="0.30"
increase="+5%"
icon={
Expand All @@ -110,10 +115,11 @@ const Dashboard = () => {
display="flex"
alignItems="center"
justifyContent="center"
borderRadius="15px"
>
<StatBox
title="1,325,134"
subtitle="Traffic Received"
title="N/A"
subtitle="Principles"
progress="0.80"
increase="+43%"
icon={
Expand All @@ -126,18 +132,12 @@ const Dashboard = () => {

{/* ROW 2 */}
<Box
gridColumn="span 8"
gridRow="span 2"
backgroundColor={colors.primary[400]}
gridColumn="span 12" // initially span 8
gridRow="span 3" // initially span 3
backgroundColor="transparent"
>
<Box
mt="25px"
p="0 30px"
display="flex "
justifyContent="space-between"
alignItems="center"
>
<Box>

{/* <Box>
<Typography
variant="h5"
fontWeight="600"
Expand All @@ -152,20 +152,17 @@ const Dashboard = () => {
>
$59,342.32
</Typography>
</Box>
<Box>
<IconButton>
<DownloadOutlinedIcon
sx={{ fontSize: "26px", color: colors.greenAccent[500] }}
/>
</IconButton>
</Box>
</Box>
<Box height="250px" m="-20px 0 0 0">
<LineChart isDashboard={true} />
</Box> */}
<Box height="250px" m="-20px 0 0 0">
<Typography m="-10px">
<Team isDashboard={true} />
</Typography>

</Box>
</Box>
<Box

{/* Extra Feature Templates for Future Versions */}
{/* <Box
gridColumn="span 4"
gridRow="span 2"
backgroundColor={colors.primary[400]}
Expand Down Expand Up @@ -214,10 +211,10 @@ const Dashboard = () => {
</Box>
</Box>
))}
</Box>
</Box> */}

{/* ROW 3 */}
<Box
{/* <Box
gridColumn="span 4"
gridRow="span 2"
backgroundColor={colors.primary[400]}
Expand Down Expand Up @@ -275,7 +272,7 @@ const Dashboard = () => {
<Box height="200px">
<GeographyChart isDashboard={true} />
</Box>
</Box>
</Box> */}
</Box>
</Box>
);
Expand Down
Loading