=> {
10 | try {
11 | const popularProducts = await prisma.products.findMany({
12 | take: 15,
13 | orderBy: {
14 | stockQuantity: "desc",
15 | },
16 | });
17 | const salesSummary = await prisma.salesSummary.findMany({
18 | take: 5,
19 | orderBy: {
20 | date: "desc",
21 | },
22 | });
23 | const purchaseSummary = await prisma.purchaseSummary.findMany({
24 | take: 5,
25 | orderBy: {
26 | date: "desc",
27 | },
28 | });
29 | const expenseSummary = await prisma.expenseSummary.findMany({
30 | take: 5,
31 | orderBy: {
32 | date: "desc",
33 | },
34 | });
35 | const expenseByCategorySummaryRaw = await prisma.expenseByCategory.findMany(
36 | {
37 | take: 5,
38 | orderBy: {
39 | date: "desc",
40 | },
41 | }
42 | );
43 | const expenseByCategorySummary = expenseByCategorySummaryRaw.map(
44 | (item) => ({
45 | ...item,
46 | amount: item.amount.toString(),
47 | })
48 | );
49 |
50 | res.json({
51 | popularProducts,
52 | salesSummary,
53 | purchaseSummary,
54 | expenseSummary,
55 | expenseByCategorySummary,
56 | });
57 | } catch (error) {
58 | res.status(500).json({ message: "Error retrieving dashboard metrics" });
59 | }
60 | };
61 |
--------------------------------------------------------------------------------
/client/src/app/inventory/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useGetProductsQuery } from "@/state/api";
4 | import Header from "@/app/(components)/Header";
5 | import { DataGrid, GridColDef } from "@mui/x-data-grid";
6 |
7 | const columns: GridColDef[] = [
8 | { field: "productId", headerName: "ID", width: 90 },
9 | { field: "name", headerName: "Product Name", width: 200 },
10 | {
11 | field: "price",
12 | headerName: "Price",
13 | width: 110,
14 | type: "number",
15 | valueGetter: (value, row) => `$${row.price}`,
16 | },
17 | {
18 | field: "rating",
19 | headerName: "Rating",
20 | width: 110,
21 | type: "number",
22 | valueGetter: (value, row) => (row.rating ? row.rating : "N/A"),
23 | },
24 | {
25 | field: "stockQuantity",
26 | headerName: "Stock Quantity",
27 | width: 150,
28 | type: "number",
29 | },
30 | ];
31 |
32 | const Inventory = () => {
33 | const { data: products, isError, isLoading } = useGetProductsQuery();
34 |
35 | if (isLoading) {
36 | return Loading...
;
37 | }
38 |
39 | if (isError || !products) {
40 | return (
41 |
42 | Failed to fetch products
43 |
44 | );
45 | }
46 |
47 | return (
48 |
49 |
50 | row.productId}
54 | checkboxSelection
55 | className="bg-white shadow rounded-lg border border-gray-200 mt-5 !text-gray-700"
56 | />
57 |
58 | );
59 | };
60 |
61 | export default Inventory;
62 |
--------------------------------------------------------------------------------
/client/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 | import { createThemes } from "tw-colors";
3 | import colors from "tailwindcss/colors";
4 |
5 | const baseColors = [
6 | "gray",
7 | "red",
8 | "yellow",
9 | "green",
10 | "blue",
11 | "indigo",
12 | "purple",
13 | "pink",
14 | ];
15 |
16 | const shadeMapping = {
17 | "50": "900",
18 | "100": "800",
19 | "200": "700",
20 | "300": "600",
21 | "400": "500",
22 | "500": "400",
23 | "600": "300",
24 | "700": "200",
25 | "800": "100",
26 | "900": "50",
27 | };
28 |
29 | const generateThemeObject = (colors: any, mapping: any, invert = false) => {
30 | const theme: any = {};
31 | baseColors.forEach((color) => {
32 | theme[color] = {};
33 | Object.entries(mapping).forEach(([key, value]: any) => {
34 | const shadeKey = invert ? value : key;
35 | theme[color][key] = colors[color][shadeKey];
36 | });
37 | });
38 | return theme;
39 | };
40 |
41 | const lightTheme = generateThemeObject(colors, shadeMapping);
42 | const darkTheme = generateThemeObject(colors, shadeMapping, true);
43 |
44 | const themes = {
45 | light: {
46 | ...lightTheme,
47 | white: "#ffffff",
48 | },
49 | dark: {
50 | ...darkTheme,
51 | white: colors.gray["950"],
52 | black: colors.gray["50"],
53 | },
54 | };
55 |
56 | const config: Config = {
57 | darkMode: "class",
58 | content: [
59 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
60 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
61 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
62 | ],
63 | theme: {
64 | extend: {
65 | backgroundImage: {
66 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
67 | "gradient-conic":
68 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
69 | },
70 | },
71 | },
72 | plugins: [createThemes(themes)],
73 | };
74 |
75 | export default config;
76 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Build a Fullstack Inventory Management Dashboard
2 |
3 | [](https://www.youtube.com/watch?v=ddKQ8sZo_v8)
4 |
5 | Link to related video: https://www.youtube.com/watch?v=ddKQ8sZo_v8
6 |
7 | ## Tutorial
8 |
9 | This repository contains the code corresponding to an in-depth tutorial available on my YouTube channel. It is highly suggested to watch the [tutorial video](https://www.youtube.com/watch?v=ddKQ8sZo_v8) as it includes detailed instructions on how to set up everything, including deploying AWS. This tutorial is designed for both beginners and experts.
10 |
11 | Join our [Discord community](https://discord.com/channels/1070200085440376872/1267499814678171698) for discussions about this specific app.
12 |
13 | ## Tech Stack
14 |
15 | - **Next JS**
16 | - **Tailwind**
17 | - **Redux Toolkit**
18 | - **Redux Toolkit Query**
19 | - **Material UI Data Grid**
20 | - **Node.js**
21 | - **Prisma**
22 | - **AWS EC2**
23 | - **AWS RDS**
24 | - **AWS API Gateway**
25 | - **AWS Amplify**
26 | - **AWS S3**
27 |
28 | ## Resources and Links
29 |
30 | ### Image Files
31 |
32 | - [Server assets to download](https://github.com/ed-roh/inventory-management/tree/master/server/assets)
33 |
34 | ### Configuration and Code
35 |
36 | - [tailwind.config.ts](https://github.com/ed-roh/inventory-management/blob/master/client/tailwind.config.ts) (to copy)
37 | - [Redux store file](https://github.com/ed-roh/inventory-management/blob/master/client/src/app/redux.tsx) (to copy)
38 | - [Seed files for database](https://github.com/ed-roh/inventory-management/blob/master/server/prisma/seed.ts) (to copy)
39 | - [Seed data files](https://github.com/ed-roh/inventory-management/tree/master/server/prisma/seedData) (to download)
40 |
41 | ### Additional Resources
42 |
43 | - [Data model diagram](https://drawsql.app/teams/team-3023/diagrams/56-inventorymanagement)
44 | - [Prisma schema file](https://github.com/ed-roh/inventory-management/blob/master/server/prisma/schema.prisma)
45 | - [AWS commands](https://github.com/ed-roh/inventory-management/blob/master/server/aws-ec2-instructions.md)
46 |
--------------------------------------------------------------------------------
/server/prisma/seed.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from "@prisma/client";
2 | import fs from "fs";
3 | import path from "path";
4 | const prisma = new PrismaClient();
5 |
6 | async function deleteAllData(orderedFileNames: string[]) {
7 | const modelNames = orderedFileNames.map((fileName) => {
8 | const modelName = path.basename(fileName, path.extname(fileName));
9 | return modelName.charAt(0).toUpperCase() + modelName.slice(1);
10 | });
11 |
12 | for (const modelName of modelNames) {
13 | const model: any = prisma[modelName as keyof typeof prisma];
14 | if (model) {
15 | await model.deleteMany({});
16 | console.log(`Cleared data from ${modelName}`);
17 | } else {
18 | console.error(
19 | `Model ${modelName} not found. Please ensure the model name is correctly specified.`
20 | );
21 | }
22 | }
23 | }
24 |
25 | async function main() {
26 | const dataDirectory = path.join(__dirname, "seedData");
27 |
28 | const orderedFileNames = [
29 | "products.json",
30 | "expenseSummary.json",
31 | "sales.json",
32 | "salesSummary.json",
33 | "purchases.json",
34 | "purchaseSummary.json",
35 | "users.json",
36 | "expenses.json",
37 | "expenseByCategory.json",
38 | ];
39 |
40 | await deleteAllData(orderedFileNames);
41 |
42 | for (const fileName of orderedFileNames) {
43 | const filePath = path.join(dataDirectory, fileName);
44 | const jsonData = JSON.parse(fs.readFileSync(filePath, "utf-8"));
45 | const modelName = path.basename(fileName, path.extname(fileName));
46 | const model: any = prisma[modelName as keyof typeof prisma];
47 |
48 | if (!model) {
49 | console.error(`No Prisma model matches the file name: ${fileName}`);
50 | continue;
51 | }
52 |
53 | for (const data of jsonData) {
54 | await model.create({
55 | data,
56 | });
57 | }
58 |
59 | console.log(`Seeded ${modelName} with data from ${fileName}`);
60 | }
61 | }
62 |
63 | main()
64 | .catch((e) => {
65 | console.error(e);
66 | })
67 | .finally(async () => {
68 | await prisma.$disconnect();
69 | });
70 |
--------------------------------------------------------------------------------
/server/prisma/schema.prisma:
--------------------------------------------------------------------------------
1 | // This is your Prisma schema file,
2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
3 |
4 | // Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
5 | // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
6 |
7 | generator client {
8 | provider = "prisma-client-js"
9 | }
10 |
11 | datasource db {
12 | provider = "postgresql"
13 | url = env("DATABASE_URL")
14 | }
15 |
16 | model Users {
17 | userId String @id
18 | name String
19 | email String
20 | }
21 |
22 | model Products {
23 | productId String @id
24 | name String
25 | price Float
26 | rating Float?
27 | stockQuantity Int
28 | Sales Sales[]
29 | Purchases Purchases[]
30 | }
31 |
32 | model Sales {
33 | saleId String @id
34 | productId String
35 | timestamp DateTime
36 | quantity Int
37 | unitPrice Float
38 | totalAmount Float
39 | product Products @relation(fields: [productId], references: [productId])
40 | }
41 |
42 | model Purchases {
43 | purchaseId String @id
44 | productId String
45 | timestamp DateTime
46 | quantity Int
47 | unitCost Float
48 | totalCost Float
49 | product Products @relation(fields: [productId], references: [productId])
50 | }
51 |
52 | model Expenses {
53 | expenseId String @id
54 | category String
55 | amount Float
56 | timestamp DateTime
57 | }
58 |
59 | model SalesSummary {
60 | salesSummaryId String @id
61 | totalValue Float
62 | changePercentage Float?
63 | date DateTime
64 | }
65 |
66 | model PurchaseSummary {
67 | purchaseSummaryId String @id
68 | totalPurchased Float
69 | changePercentage Float?
70 | date DateTime
71 | }
72 |
73 | model ExpenseSummary {
74 | expenseSummaryId String @id
75 | totalExpenses Float
76 | date DateTime
77 | ExpenseByCategory ExpenseByCategory[]
78 | }
79 |
80 | model ExpenseByCategory {
81 | expenseByCategoryId String @id
82 | expenseSummaryId String
83 | category String
84 | amount BigInt
85 | date DateTime
86 | expenseSummary ExpenseSummary @relation(fields: [expenseSummaryId], references: [expenseSummaryId])
87 | }
88 |
--------------------------------------------------------------------------------
/client/src/app/dashboard/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | CheckCircle,
5 | Package,
6 | Tag,
7 | TrendingDown,
8 | TrendingUp,
9 | } from "lucide-react";
10 | import CardExpenseSummary from "./CardExpenseSummary";
11 | import CardPopularProducts from "./CardPopularProducts";
12 | import CardPurchaseSummary from "./CardPurchaseSummary";
13 | import CardSalesSummary from "./CardSalesSummary";
14 | import StatCard from "./StatCard";
15 |
16 | const Dashboard = () => {
17 | return (
18 |
19 |
20 |
21 |
22 |
23 | }
26 | dateRange="22 - 29 October 2023"
27 | details={[
28 | {
29 | title: "Customer Growth",
30 | amount: "175.00",
31 | changePercentage: 131,
32 | IconComponent: TrendingUp,
33 | },
34 | {
35 | title: "Expenses",
36 | amount: "10.00",
37 | changePercentage: -56,
38 | IconComponent: TrendingDown,
39 | },
40 | ]}
41 | />
42 | }
45 | dateRange="22 - 29 October 2023"
46 | details={[
47 | {
48 | title: "Dues",
49 | amount: "250.00",
50 | changePercentage: 131,
51 | IconComponent: TrendingUp,
52 | },
53 | {
54 | title: "Pending Orders",
55 | amount: "147",
56 | changePercentage: -56,
57 | IconComponent: TrendingDown,
58 | },
59 | ]}
60 | />
61 | }
64 | dateRange="22 - 29 October 2023"
65 | details={[
66 | {
67 | title: "Sales",
68 | amount: "1000.00",
69 | changePercentage: 20,
70 | IconComponent: TrendingUp,
71 | },
72 | {
73 | title: "Discount",
74 | amount: "200.00",
75 | changePercentage: -10,
76 | IconComponent: TrendingDown,
77 | },
78 | ]}
79 | />
80 |
81 | );
82 | };
83 |
84 | export default Dashboard;
85 |
--------------------------------------------------------------------------------
/server/aws-ec2-instructions.md:
--------------------------------------------------------------------------------
1 | # EC2 Setup Instructions
2 |
3 | ## 1. Connect to EC2 Instance via EC2 Instance Connect
4 |
5 | ## 2. Install Node Version Manager (nvm) and Node.js
6 |
7 | - **Switch to superuser and install nvm:**
8 |
9 | ```
10 | sudo su -
11 | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
12 | ```
13 |
14 | - **Activate nvm:**
15 |
16 | ```
17 | . ~/.nvm/nvm.sh
18 | ```
19 |
20 | - **Install the latest version of Node.js using nvm:**
21 |
22 | ```
23 | nvm install node
24 | ```
25 |
26 | - **Verify that Node.js and npm are installed:**
27 |
28 | ```
29 | node -v
30 | npm -v
31 | ```
32 |
33 | ## 3. Install Git
34 |
35 | - **Update the system and install Git:**
36 |
37 | ```
38 | sudo yum update -y
39 | sudo yum install git -y
40 | ```
41 |
42 | - **Check Git version:**
43 |
44 | ```
45 | git --version
46 | ```
47 |
48 | - **Clone your code repository from GitHub:**
49 |
50 | ```
51 | git clone [your-github-link]
52 | ```
53 |
54 | - **Navigate to the directory and install packages:**
55 |
56 | ```
57 | cd inventory-management
58 | npm i
59 | ```
60 |
61 | - **Create Env File and Port 80:**
62 |
63 | ```
64 | echo "PORT=80" > .env
65 | ```
66 |
67 | - **Start the application:**
68 |
69 | ```
70 | npm start
71 | ```
72 |
73 | ## 4. Install pm2 (Production Process Manager for Node.js)
74 |
75 | - **Install pm2 globally:**
76 |
77 | ```
78 | npm i pm2 -g
79 | ```
80 |
81 | - **Create a pm2 ecosystem configuration file (inside server directory):**
82 |
83 | ```
84 | module.exports = { apps : [{ name: 'inventory-management', script: 'npm', args: 'run dev', env: { NODE_ENV: 'development', ENV_VAR1: 'environment-variable', } }], };
85 | ```
86 |
87 | - **Modify the ecosystem file if necessary:**
88 |
89 | ```
90 | nano ecosystem.config.js
91 | ```
92 |
93 | - **Set pm2 to restart automatically on system reboot:**
94 |
95 | ```
96 | sudo env PATH=$PATH:$(which node) $(which pm2) startup systemd -u $USER --hp $(eval echo ~$USER)
97 | ```
98 |
99 | - **Start the application using the pm2 ecosystem configuration:**
100 |
101 | ```
102 | pm2 start ecosystem.config.js
103 | ```
104 |
105 | - **Useful pm2 commands:**
106 |
107 | - **Stop all processes:**
108 |
109 | ```
110 | pm2 stop all
111 | ```
112 |
113 | - **Delete all processes:**
114 |
115 | ```
116 | pm2 delete all
117 | ```
118 |
119 | - **Check status of processes:**
120 |
121 | ```
122 | pm2 status
123 | ```
124 |
125 | - **Monitor processes:**
126 |
127 | ```
128 | pm2 monit
129 | ```
130 |
--------------------------------------------------------------------------------
/client/src/app/dashboard/CardPopularProducts.tsx:
--------------------------------------------------------------------------------
1 | import { useGetDashboardMetricsQuery } from "@/state/api";
2 | import { ShoppingBag } from "lucide-react";
3 | import React from "react";
4 | import Rating from "../(components)/Rating";
5 | import Image from "next/image";
6 |
7 | const CardPopularProducts = () => {
8 | const { data: dashboardMetrics, isLoading } = useGetDashboardMetricsQuery();
9 |
10 | return (
11 |
12 | {isLoading ? (
13 |
Loading...
14 | ) : (
15 | <>
16 |
17 | Popular Products
18 |
19 |
20 |
21 | {dashboardMetrics?.popularProducts.map((product) => (
22 |
26 |
27 |
36 |
37 |
38 | {product.name}
39 |
40 |
41 |
42 | ${product.price}
43 |
44 | |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
54 | {Math.round(product.stockQuantity / 1000)}k Sold
55 |
56 |
57 | ))}
58 |
59 |
60 | )}
61 |
34 | {/* HEADER */}
35 |
36 |
37 |
{title}
38 | {dateRange}
39 |
40 |
41 |
42 |
43 | {/* BODY */}
44 |
45 |
46 | {primaryIcon}
47 |
48 |
49 | {details.map((detail, index) => (
50 |
51 |
52 |
{detail.title}
53 |
{detail.amount}
54 |
55 |
60 |
61 |
66 | {formatPercentage(detail.changePercentage)}
67 |
68 |
69 |
}
71 |
72 | ))}
73 |
74 |
75 |
27 | {/* LEFT SIDE */}
28 |
29 |
35 |
36 |
37 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | {/* RIGHT SIDE */}
50 |
51 |
52 |
53 |
60 |
61 |
62 |
63 |
64 | 3
65 |
66 |
67 |
68 |
69 |
76 | Ed Roh
77 |
78 |
79 |
80 |
81 |
82 |
83 |
22 | {isLoading ? (
23 |
Loading...
24 | ) : (
25 | <>
26 | {/* HEADER */}
27 |
28 |
29 | Purchase Summary
30 |
31 |
32 |
33 |
34 | {/* BODY */}
35 |
36 | {/* BODY HEADER */}
37 |
38 |
Purchased
39 |
40 |
41 | {lastDataPoint
42 | ? numeral(lastDataPoint.totalPurchased).format("$0.00a")
43 | : "0"}
44 |
45 | {lastDataPoint && (
46 |
= 0
49 | ? "text-green-500"
50 | : "text-red-500"
51 | } flex ml-3`}
52 | >
53 | {lastDataPoint.changePercentage! >= 0 ? (
54 |
55 | ) : (
56 |
57 | )}
58 | {Math.abs(lastDataPoint.changePercentage!)}%
59 |
60 | )}
61 |
62 |
63 | {/* CHART */}
64 |
65 |
69 |
70 |
71 | [
73 | `$${value.toLocaleString("en")}`,
74 | ]}
75 | labelFormatter={(label) => {
76 | const date = new Date(label);
77 | return date.toLocaleDateString("en-US", {
78 | year: "numeric",
79 | month: "long",
80 | day: "numeric",
81 | });
82 | }}
83 | />
84 |
91 |
92 |
93 |
94 |
95 | )}
96 |
Loading...
;
35 | }
36 |
37 | if (isError || !products) {
38 | return (
39 |
40 | Failed to fetch products
41 |
42 | );
43 | }
44 |
45 | return (
46 |
47 | {/* SEARCH BAR */}
48 |
49 |
50 |
51 | setSearchTerm(e.target.value)}
56 | />
57 |
58 |
59 |
60 | {/* HEADER BAR */}
61 |
62 |
63 |
70 |
71 |
72 | {/* BODY PRODUCTS LIST */}
73 |
74 | {isLoading ? (
75 |
Loading...
76 | ) : (
77 | products?.map((product) => (
78 |
82 |
83 |
92 |
93 | {product.name}
94 |
95 |
${product.price.toFixed(2)}
96 |
97 | Stock: {product.stockQuantity}
98 |
99 | {product.rating && (
100 |
101 |
102 |
103 | )}
104 |
105 |
106 | ))
107 | )}
108 |
109 |
110 | {/* MODAL */}
111 |
setIsModalOpen(false)}
114 | onCreate={handleCreateProduct}
115 | />
116 |
56 |
57 |
58 |
130 |
131 |
48 |
49 |
50 |
55 | {label}
56 |
57 |
58 |
59 | );
60 | };
61 |
62 | const Sidebar = () => {
63 | const dispatch = useAppDispatch();
64 | const isSidebarCollapsed = useAppSelector(
65 | (state) => state.global.isSidebarCollapsed
66 | );
67 |
68 | const toggleSidebar = () => {
69 | dispatch(setIsSidebarCollapsed(!isSidebarCollapsed));
70 | };
71 |
72 | const sidebarClassNames = `fixed flex flex-col ${
73 | isSidebarCollapsed ? "w-0 md:w-16" : "w-72 md:w-64"
74 | } bg-white transition-all duration-300 overflow-hidden h-full shadow-md z-40`;
75 |
76 | return (
77 |
78 | {/* TOP LOGO */}
79 |
84 |
91 |
96 | EDSTOCK
97 |
98 |
99 |
105 |
106 |
107 | {/* LINKS */}
108 |
109 |
115 |
121 |
127 |
133 |
139 |
145 |
146 |
147 | {/* FOOTER */}
148 |
149 |
© 2024 Edstock
150 |
151 |
48 | {isLoading ? (
49 |
Loading...
50 | ) : (
51 | <>
52 | {/* HEADER */}
53 |
54 |
55 | Expense Summary
56 |
57 |
58 |
59 | {/* BODY */}
60 |
61 | {/* CHART */}
62 |
63 |
64 |
65 |
75 | {expenseCategories.map((entry, index) => (
76 | |
80 | ))}
81 |
82 |
83 |
84 |
85 |
86 | ${formattedTotalExpenses}
87 |
88 |
89 |
90 | {/* LABELS */}
91 |
92 | {expenseCategories.map((entry, index) => (
93 | -
97 |
101 | {entry.name}
102 |
103 | ))}
104 |
105 |
106 | {/* FOOTER */}
107 |
108 |
109 | {expenseSummary && (
110 |
111 |
112 |
113 | Average:{" "}
114 |
115 | ${expenseSummary.totalExpenses.toFixed(2)}
116 |
117 |
118 |
119 |
120 |
121 | 30%
122 |
123 |
124 | )}
125 |
126 |
127 | )}
128 |
Failed to fetch data
;
42 | }
43 |
44 | return (
45 |
46 | {isLoading ? (
47 |
Loading...
48 | ) : (
49 | <>
50 | {/* HEADER */}
51 |
52 |
53 | Sales Summary
54 |
55 |
56 |
57 |
58 | {/* BODY */}
59 |
60 | {/* BODY HEADER */}
61 |
62 |
63 |
Value
64 |
65 | $
66 | {(totalValueSum / 1000000).toLocaleString("en", {
67 | maximumFractionDigits: 2,
68 | })}
69 | m
70 |
71 |
72 |
73 | {averageChangePercentage.toFixed(2)}%
74 |
75 |
76 |
87 |
88 | {/* CHART */}
89 |
90 |
94 |
95 | {
98 | const date = new Date(value);
99 | return `${date.getMonth() + 1}/${date.getDate()}`;
100 | }}
101 | />
102 | {
104 | return `$${(value / 1000000).toFixed(0)}m`;
105 | }}
106 | tick={{ fontSize: 12, dx: -1 }}
107 | tickLine={false}
108 | axisLine={false}
109 | />
110 | [
112 | `$${value.toLocaleString("en")}`,
113 | ]}
114 | labelFormatter={(label) => {
115 | const date = new Date(label);
116 | return date.toLocaleDateString("en-US", {
117 | year: "numeric",
118 | month: "long",
119 | day: "numeric",
120 | });
121 | }}
122 | />
123 |
129 |
130 |
131 |
132 |
133 | {/* FOOTER */}
134 |
135 |
136 |
137 |
{salesData.length || 0} days
138 |
139 | Highest Sales Date:{" "}
140 | {highestValueDate}
141 |
142 |
143 |
144 |
145 | )}
146 |
Loading...
;
81 | }
82 |
83 | if (isError || !expensesData) {
84 | return (
85 |
86 | Failed to fetch expenses
87 |
88 | );
89 | }
90 |
91 | return (
92 |
93 | {/* HEADER */}
94 |
95 |
96 |
97 | A visual representation of expenses over time.
98 |
99 |
100 |
101 | {/* FILTERS */}
102 |
103 |
104 |
105 | Filter by Category and Date
106 |
107 |
108 | {/* CATEGORY */}
109 |
110 |
113 |
125 |
126 | {/* START DATE */}
127 |
128 |
131 | setStartDate(e.target.value)}
137 | />
138 |
139 | {/* END DATE */}
140 |
141 |
144 | setEndDate(e.target.value)}
150 | />
151 |
152 |
153 |
154 | {/* PIE CHART */}
155 |
156 |
157 |
158 | setActiveIndex(index)}
167 | >
168 | {aggregatedData.map(
169 | (entry: AggregatedDataItem, index: number) => (
170 | |
176 | )
177 | )}
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |