rough dashboard components

src/Dashboard.tsx

@@ -0,0 +1,140 @@
+import * as React from "react";
+import { Box, Container, Grid, Typography, Avatar } from "@mui/material";
+import LatestItemsList, { LatestItem } from "./components/LatestItemsList";
+import ProgressCard from "./components/ProgressCard";
+import HistoryChart from "./components/HistoryChart";
+import ShoppingBagIcon from "@mui/icons-material/ShoppingBag";
+import SubscriptionsIcon from "@mui/icons-material/Subscriptions";
+import RestaurantIcon from "@mui/icons-material/Restaurant";
+import FoodBankIcon from "@mui/icons-material/FoodBank";
+
+const mockLatestItems: LatestItem[] = [
+  {
+    id: 1,
+    icon: <ShoppingBagIcon sx={{ color: "#388e3c" }} />,
+    iconBgColor: "#e8f5e9", 
+    title: "Grocery Shopping",
+    subtitle: "Buy some grocery",
+    amount: "Rs 3000",
+    timeAgo: "3 days ago",
+  },
+  {
+    id: 2,
+    icon: <SubscriptionsIcon sx={{ color: "#7b1fa2" }} />,
+    iconBgColor: "#f3e5f5", 
+    title: "Subscription",
+    subtitle: "Netflix monthly",
+    amount: "Rs 800",
+    timeAgo: "5 days ago",
+  },
+  {
+    id: 3,
+    icon: <RestaurantIcon sx={{ color: "#d32f2f" }} />,
+    iconBgColor: "#ffebee", 
+    title: "Food",
+    subtitle: "Buy a chinese noodles",
+    amount: "Rs 1000",
+    timeAgo: "6 days ago",
+  },
+  {
+    id: 4,
+    icon: <FoodBankIcon sx={{ color: "#fbc02d" }} />,
+    iconBgColor: "#fff8e1", 
+    title: "Food Club",
+    subtitle: "Buy a chinese noodles",
+    amount: "Rs 1000",
+    timeAgo: "6 days ago",
+  },
+];
+
+const mockChartData = {
+  today: [
+    { id: "6am", amount: 100 },
+    { id: "9am", amount: 500 },
+    { id: "12pm", amount: 200 },
+    { id: "3pm", amount: 1000, highlighted: true },
+    { id: "6pm", amount: 600 },
+    { id: "9pm", amount: 300 },
+  ],
+  week: [
+    { id: "Mon", amount: 1500 },
+    { id: "Tue", amount: 1000 },
+    { id: "Wed", amount: 2000 },
+    { id: "Thu", amount: 500, highlighted: true },
+    { id: "Fri", amount: 3000 },
+    { id: "Sat", amount: 4500 },
+    { id: "Sun", amount: 2000 },
+  ],
+  month: [
+    { id: "Week 1", amount: 10000 },
+    { id: "Week 2", amount: 5000 },
+    { id: "Week 3", amount: 12000, highlighted: true },
+    { id: "Week 4", amount: 8000 },
+  ],
+  year: [
+    { id: "Q1", amount: 50000 },
+    { id: "Q2", amount: 45000 },
+    { id: "Q3", amount: 60000, highlighted: true },
+    { id: "Q4", amount: 48000 },
+  ],
+};
+
+export default function Dashboard() {
+  return (
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <Grid container spacing={4}>
+        {/* Left Column */}
+        <Grid item xs={12} md={6}>
+          {/* User Greeting */}
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: 4, px: 2 }}>
+             <Avatar sx={{ width: 56, height: 56, mr: 2 }} src="https://i.pravatar.cc/150?img=5" />
+             <Box>
+                <Typography variant="h5" fontWeight={700}>Hello Ananya</Typography>
+                <Typography variant="subtitle1" color="text.secondary">Good Morning</Typography>
+             </Box>
+          </Box>
+
+          <ProgressCard
+            header="Account Balance"
+            summary="Rs 2,700,00"
+            progressAmount={270000}
+            totalAmount={270000}
+            colorTheme="info"
+          />
+          
+          <Box mt={4}>
+            <LatestItemsList 
+              title="Recent Transactions" 
+              items={mockLatestItems} 
+              onViewAll={() => {}} 
+            />
+          </Box>
+        </Grid>
+
+        {/* Right Column */}
+        <Grid item xs={12} md={6}>
+           <Box sx={{ mb: 4, display: 'flex', justifyContent: 'center' }}>
+             <Typography variant="h6" fontWeight={700}>Statistics</Typography>
+           </Box>
+           
+          <ProgressCard
+            header="Total Expense"
+            progressAmount={27000}
+            totalAmount={30000}
+            summary="Rs 27000 / Rs 30000 per month"
+            colorTheme="info"
+          />
+          
+          <Box mt={4}>
+            <HistoryChart
+              header="Expense Breakdown"
+              summary="Limit each day Rs 5000/-"
+              tabs={["Today", "Week", "Month", "Year"]}
+              data={mockChartData}
+            />
+          </Box>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}