Skip to content

Commit 6eed62a

Browse files
steve8708steve8708
authored
Merge pull request #3 from steve8708/ai/main/b982e2a2-1da3-40bb-9dde-f263d1de08b6
Add CRM dashboard with navigation and analytics
2 parents aa8dbb0 + 41ba776 commit 6eed62a

27 files changed

+2216
-52
lines changed

‎src/App.tsx‎

Lines changed: 23 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,39 @@
11
import * as React from "react";
2-
import Container from "@mui/material/Container";
2+
import { BrowserRouter, Routes, Route } from "react-router-dom";
3+
import CssBaseline from "@mui/material/CssBaseline";
34
import Typography from "@mui/material/Typography";
4-
import Link from "@mui/material/Link";
5-
import Slider from "@mui/material/Slider";
6-
import PopoverMenu from "./PopOverMenu";
7-
import ProTip from "./ProTip";
8-
import { BrowserRouter, Routes, Route, Link as RouterLink } from "react-router-dom";
5+
import Box from "@mui/material/Box";
6+
import CrmDashboard from "./crm/CrmDashboard";
97

10-
function Copyright() {
8+
function NotFound() {
119
return (
12-
<Typography
13-
variant="body2"
14-
align="center"
10+
<Box
1511
sx={{
16-
color: "text.secondary",
12+
display: "flex",
13+
flexDirection: "column",
14+
alignItems: "center",
15+
justifyContent: "center",
16+
height: "100vh",
1717
}}
1818
>
19-
{"Copyright © "}
20-
<Link color="inherit" href="https://mui.com/">
21-
Your Website
22-
</Link>{" "}
23-
{new Date().getFullYear()}
24-
{"."}
25-
</Typography>
19+
<Typography variant="h3" component="h1" gutterBottom>
20+
404: Page Not Found
21+
</Typography>
22+
<Typography variant="body1">
23+
The page you're looking for doesn't exist or has been moved.
24+
</Typography>
25+
</Box>
2626
);
2727
}
2828

2929
export default function App() {
3030
return (
3131
<BrowserRouter>
32-
<Container maxWidth="sm">
33-
<div className="my-4">
34-
<Typography variant="h4" component="h1" sx={{ mb: 2 }}>
35-
Material UI Vite example with Tailwind CSS in TypeScript
36-
</Typography>
37-
<nav style={{ marginBottom: 16 }}>
38-
<Link component={RouterLink} to="/" sx={{ mr: 2 }}>
39-
Home
40-
</Link>
41-
<Link component={RouterLink} to="/second">
42-
Second Page
43-
</Link>
44-
</nav>
45-
<Routes>
46-
<Route
47-
path="/"
48-
element={
49-
<>
50-
<Slider
51-
className="my-4"
52-
defaultValue={30}
53-
classes={{ active: "shadow-none" }}
54-
slotProps={{ thumb: { className: "hover:shadow-none" } }}
55-
/>
56-
<PopoverMenu />
57-
<ProTip />
58-
</>
59-
}
60-
/>
61-
<Route path="/second" element={<Typography variant="h6">This is the second page!</Typography>} />
62-
</Routes>
63-
<Copyright />
64-
</div>
65-
</Container>
32+
<CssBaseline enableColorScheme />
33+
<Routes>
34+
<Route path="/*" element={<CrmDashboard />} />
35+
<Route path="*" element={<NotFound />} />
36+
</Routes>
6637
</BrowserRouter>
6738
);
6839
}

‎src/crm/CrmDashboard.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as React from "react";
2+
import { Outlet, Routes, Route } from "react-router-dom";
3+
import type {} from "@mui/x-date-pickers/themeAugmentation";
4+
import type {} from "@mui/x-charts/themeAugmentation";
5+
import type {} from "@mui/x-data-grid-pro/themeAugmentation";
6+
import type {} from "@mui/x-tree-view/themeAugmentation";
7+
import { alpha } from "@mui/material/styles";
8+
import CssBaseline from "@mui/material/CssBaseline";
9+
import Box from "@mui/material/Box";
10+
import Stack from "@mui/material/Stack";
11+
import CrmAppNavbar from "./components/CrmAppNavbar";
12+
import CrmHeader from "./components/CrmHeader";
13+
import CrmSideMenu from "./components/CrmSideMenu";
14+
import CrmMainDashboard from "./components/CrmMainDashboard";
15+
import Customers from "./pages/Customers";
16+
import Deals from "./pages/Deals";
17+
import Contacts from "./pages/Contacts";
18+
import Tasks from "./pages/Tasks";
19+
import Reports from "./pages/Reports";
20+
import Settings from "./pages/Settings";
21+
import AppTheme from "../shared-theme/AppTheme";
22+
import {
23+
chartsCustomizations,
24+
dataGridCustomizations,
25+
datePickersCustomizations,
26+
treeViewCustomizations,
27+
} from "../dashboard/theme/customizations";
28+
29+
const xThemeComponents = {
30+
...chartsCustomizations,
31+
...dataGridCustomizations,
32+
...datePickersCustomizations,
33+
...treeViewCustomizations,
34+
};
35+
36+
export default function CrmDashboard() {
37+
return (
38+
<AppTheme themeComponents={xThemeComponents}>
39+
<CssBaseline enableColorScheme />
40+
<Box sx={{ display: "flex", height: "100vh" }}>
41+
<CrmSideMenu />
42+
<CrmAppNavbar />
43+
{/* Main content */}
44+
<Box
45+
component="main"
46+
sx={(theme) => ({
47+
flexGrow: 1,
48+
backgroundColor: theme.vars
49+
? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
50+
: alpha(theme.palette.background.default, 1),
51+
overflow: "auto",
52+
})}
53+
>
54+
<Stack
55+
spacing={2}
56+
sx={{
57+
alignItems: "center",
58+
mx: 3,
59+
pb: 5,
60+
mt: { xs: 8, md: 0 },
61+
}}
62+
>
63+
<CrmHeader />
64+
<Routes>
65+
<Route index element={<CrmMainDashboard />} />
66+
<Route path="customers" element={<Customers />} />
67+
<Route path="deals" element={<Deals />} />
68+
<Route path="contacts" element={<Contacts />} />
69+
<Route path="tasks" element={<Tasks />} />
70+
<Route path="reports" element={<Reports />} />
71+
<Route path="settings" element={<Settings />} />
72+
</Routes>
73+
<Outlet />
74+
</Stack>
75+
</Box>
76+
</Box>
77+
</AppTheme>
78+
);
79+
}

‎src/crm/components/CrmActivitiesTimeline.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import * as React from "react";
2+
import Box from "@mui/material/Box";
3+
import Card from "@mui/material/Card";
4+
import CardContent from "@mui/material/CardContent";
5+
import Typography from "@mui/material/Typography";
6+
import Stack from "@mui/material/Stack";
7+
import Button from "@mui/material/Button";
8+
import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
9+
import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
10+
import PhoneRoundedIcon from "@mui/icons-material/PhoneRounded";
11+
import MeetingRoomRoundedIcon from "@mui/icons-material/MeetingRoomRounded";
12+
import EditNoteRoundedIcon from "@mui/icons-material/EditNoteRounded";
13+
14+
// Sample activities data
15+
const activities = [
16+
{
17+
id: 1,
18+
type: "email",
19+
title: "Email sent to Acme Corp",
20+
description: "Proposal follow-up email sent",
21+
time: "11:30 AM",
22+
icon: <EmailRoundedIcon fontSize="small" />,
23+
color: "primary",
24+
},
25+
{
26+
id: 2,
27+
type: "call",
28+
title: "Call with TechSolutions Inc",
29+
description: "Discussed implementation timeline",
30+
time: "10:15 AM",
31+
icon: <PhoneRoundedIcon fontSize="small" />,
32+
color: "success",
33+
},
34+
{
35+
id: 3,
36+
type: "meeting",
37+
title: "Meeting scheduled",
38+
description: "Demo for Global Media next Monday",
39+
time: "Yesterday",
40+
icon: <MeetingRoomRoundedIcon fontSize="small" />,
41+
color: "warning",
42+
},
43+
{
44+
id: 4,
45+
type: "note",
46+
title: "Note added",
47+
description: "Added details about RetailGiant requirements",
48+
time: "Yesterday",
49+
icon: <EditNoteRoundedIcon fontSize="small" />,
50+
color: "info",
51+
},
52+
];
53+
54+
export default function CrmActivitiesTimeline() {
55+
return (
56+
<Card
57+
variant="outlined"
58+
sx={{
59+
height: "100%",
60+
display: "flex",
61+
flexDirection: "column",
62+
}}
63+
>
64+
<CardContent sx={{ p: 0, "&:last-child": { pb: 0 }, flexGrow: 1 }}>
65+
<Stack
66+
direction="row"
67+
justifyContent="space-between"
68+
alignItems="center"
69+
spacing={2}
70+
sx={{ p: 2, pb: 1 }}
71+
>
72+
<Typography variant="h6" component="h3">
73+
Recent Activities
74+
</Typography>
75+
<Button endIcon={<ArrowForwardRoundedIcon />} size="small">
76+
View All
77+
</Button>
78+
</Stack>
79+
80+
<Box sx={{ p: 2 }}>
81+
{activities.map((activity) => (
82+
<Box
83+
key={activity.id}
84+
sx={{
85+
display: "flex",
86+
mb: 2,
87+
gap: 2,
88+
alignItems: "flex-start",
89+
}}
90+
>
91+
<Box
92+
sx={{
93+
bgcolor: `${activity.color}.main`,
94+
borderRadius: "50%",
95+
p: 0.75,
96+
display: "flex",
97+
color: "white",
98+
}}
99+
>
100+
{activity.icon}
101+
</Box>
102+
<Box sx={{ flexGrow: 1 }}>
103+
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
104+
<Typography variant="subtitle2" component="span">
105+
{activity.title}
106+
</Typography>
107+
<Typography variant="caption" color="text.secondary">
108+
{activity.time}
109+
</Typography>
110+
</Box>
111+
<Typography variant="body2" color="text.secondary">
112+
{activity.description}
113+
</Typography>
114+
</Box>
115+
</Box>
116+
))}
117+
</Box>
118+
</CardContent>
119+
</Card>
120+
);
121+
}

‎src/crm/components/CrmAppNavbar.tsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import * as React from "react";
2+
import { styled } from "@mui/material/styles";
3+
import AppBar from "@mui/material/AppBar";
4+
import Box from "@mui/material/Box";
5+
import Stack from "@mui/material/Stack";
6+
import MuiToolbar from "@mui/material/Toolbar";
7+
import { tabsClasses } from "@mui/material/Tabs";
8+
import Typography from "@mui/material/Typography";
9+
import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
10+
import BusinessRoundedIcon from "@mui/icons-material/BusinessRounded";
11+
import CrmSideMenuMobile from "./CrmSideMenuMobile";
12+
import MenuButton from "../../dashboard/components/MenuButton";
13+
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
14+
15+
const Toolbar = styled(MuiToolbar)({
16+
width: "100%",
17+
padding: "12px",
18+
display: "flex",
19+
flexDirection: "column",
20+
alignItems: "start",
21+
justifyContent: "center",
22+
gap: "12px",
23+
flexShrink: 0,
24+
[`& ${tabsClasses.flexContainer}`]: {
25+
gap: "8px",
26+
p: "8px",
27+
pb: 0,
28+
},
29+
});
30+
31+
export default function CrmAppNavbar() {
32+
const [open, setOpen] = React.useState(false);
33+
34+
const toggleDrawer = (newOpen: boolean) => () => {
35+
setOpen(newOpen);
36+
};
37+
38+
return (
39+
<AppBar
40+
position="fixed"
41+
sx={{
42+
display: { xs: "auto", md: "none" },
43+
boxShadow: 0,
44+
bgcolor: "background.paper",
45+
backgroundImage: "none",
46+
borderBottom: "1px solid",
47+
borderColor: "divider",
48+
top: "var(--template-frame-height, 0px)",
49+
}}
50+
>
51+
<Toolbar variant="regular">
52+
<Stack
53+
direction="row"
54+
sx={{
55+
alignItems: "center",
56+
flexGrow: 1,
57+
width: "100%",
58+
gap: 1,
59+
}}
60+
>
61+
<Stack
62+
direction="row"
63+
spacing={1}
64+
sx={{ justifyContent: "center", mr: "auto" }}
65+
>
66+
<CrmLogo />
67+
<Typography
68+
variant="h5"
69+
component="h1"
70+
sx={{ color: "text.primary" }}
71+
>
72+
Acme CRM
73+
</Typography>
74+
</Stack>
75+
<ColorModeIconDropdown />
76+
<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
77+
<MenuRoundedIcon />
78+
</MenuButton>
79+
<CrmSideMenuMobile open={open} toggleDrawer={toggleDrawer} />
80+
</Stack>
81+
</Toolbar>
82+
</AppBar>
83+
);
84+
}
85+
86+
export function CrmLogo() {
87+
return (
88+
<Box
89+
sx={{
90+
width: "1.75rem",
91+
height: "1.75rem",
92+
bgcolor: "primary.main",
93+
borderRadius: "8px",
94+
display: "flex",
95+
justifyContent: "center",
96+
alignItems: "center",
97+
alignSelf: "center",
98+
boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
99+
}}
100+
>
101+
<BusinessRoundedIcon sx={{ color: "white", fontSize: "1.25rem" }} />
102+
</Box>
103+
);
104+
}

0 commit comments

Comments
 (0)