- {formatTime(currentDate)}
+ {formatTime(currentDate)}
|
- {formatDate(currentDate)}
+ {formatDate(currentDate)}
diff --git a/client/src/components/common/Header/components/SearchInput.tsx b/client/src/components/common/Header/components/SearchInput.tsx
index 4186d84..7456d37 100644
--- a/client/src/components/common/Header/components/SearchInput.tsx
+++ b/client/src/components/common/Header/components/SearchInput.tsx
@@ -7,7 +7,7 @@ const SearchInput = () => {
return (
= ({ className = "" }) => {
})
diff --git a/client/src/components/dashboard/DisplayCard.tsx b/client/src/components/dashboard/DisplayCard.tsx
new file mode 100644
index 0000000..b90499a
--- /dev/null
+++ b/client/src/components/dashboard/DisplayCard.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import { TrendingUp, TrendingDown, type LucideProps } from "lucide-react";
+
+export type MiniStatItem = {
+ label: string;
+ value: number;
+ icon: React.ComponentType<{ className?: string } & LucideProps>;
+ deltaPct?: number;
+ hint?: string;
+ valueSuffix?: string;
+ formatValue?: (v: number) => string;
+ className?: string;
+};
+
+const nfMG = new Intl.NumberFormat("fr-MG");
+const fmtArShort = (n: number) =>
+ n >= 1_000_000
+ ? `Ar ${(n / 1_000_000).toFixed(1)}M`
+ : n >= 1_000
+ ? `Ar ${(n / 1_000).toFixed(1)}k`
+ : `Ar ${nfMG.format(n)}`;
+
+export default function MiniStatCard({
+ label,
+ value,
+ icon: Icon,
+ deltaPct,
+ hint = "From last month",
+ valueSuffix,
+ formatValue,
+ className = "",
+}: MiniStatItem) {
+ const isUp = typeof deltaPct === "number" ? deltaPct >= 0 : undefined;
+ const deltaColor =
+ isUp === undefined
+ ? "bg-slate-100 text-slate-600"
+ : isUp
+ ? "bg-emerald-50 text-emerald-600"
+ : "bg-rose-50 text-rose-600";
+
+ const valueStr = formatValue
+ ? formatValue(value)
+ : valueSuffix
+ ? nfMG.format(value)
+ : fmtArShort(value);
+
+ return (
+
+ {/* Header */}
+
+
+ {/* Value */}
+
+ {valueStr}
+ {valueSuffix ? valueSuffix : ""}
+
+
+ {/* Delta */}
+
+ {typeof deltaPct === "number" && (
+
+ {isUp ? (
+
+ ) : (
+
+ )}
+ {isUp ? "+" : ""}
+ {deltaPct.toFixed(1)}%
+
+ )}
+ {hint}
+
+
+ );
+}
diff --git a/client/src/components/dashboard/Layout.tsx b/client/src/components/dashboard/Layout.tsx
new file mode 100644
index 0000000..11c62fe
--- /dev/null
+++ b/client/src/components/dashboard/Layout.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+export default function Layout({
+ title,
+ children,
+ graphClassName,
+ titleClassName,
+}: {
+ title?: string;
+ children: ReactNode;
+ graphClassName?: string;
+ titleClassName?: string;
+}) {
+ return (
+
+ {" "}
+ {title && (
+
+ {title}
+
+ )}
+
+ {children}
+
+
+ );
+}
diff --git a/client/src/components/dashboard/MonthlyBarchart.tsx b/client/src/components/dashboard/MonthlyBarchart.tsx
new file mode 100644
index 0000000..ee7229d
--- /dev/null
+++ b/client/src/components/dashboard/MonthlyBarchart.tsx
@@ -0,0 +1,119 @@
+import { useMemo, useState } from "react";
+import {
+ Bar,
+ BarChart,
+ CartesianGrid,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+import Layout from "./Layout";
+import { fmtAr, fmtShort } from "../../utils/formatter";
+export type Row = { month: string; spending: number; income: number };
+
+const COLORS = {
+ spending: "#FF8042",
+ income: "#00C49F",
+};
+
+export function MonthlyBarChart({ data }: { data: Row[] }) {
+ const [show, setShow] = useState({ spending: true, income: true });
+
+ const totals = useMemo(
+ () => ({
+ spending: data.reduce((a, c) => a + c.spending, 0),
+ income: data.reduce((a, c) => a + c.income, 0),
+ }),
+ [data]
+ );
+
+ return (
+
+ {/* Toggles */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `Ar ${fmtShort(v)}`}
+ allowDecimals={false}
+ domain={["auto", "auto"]}
+ />
+ [fmtAr(Number(v)), String(name)]}
+ />
+
+ {show.spending && (
+
+ )}
+ {show.income && (
+
+ )}
+
+
+
+ );
+}
diff --git a/client/src/components/dashboard/PieGraph.tsx b/client/src/components/dashboard/PieGraph.tsx
new file mode 100644
index 0000000..6960bbc
--- /dev/null
+++ b/client/src/components/dashboard/PieGraph.tsx
@@ -0,0 +1,97 @@
+import { useMemo } from "react";
+import Layout from "./Layout";
+import {
+ PieChart,
+ Pie,
+ Cell,
+ Tooltip,
+ ResponsiveContainer,
+ Legend,
+} from "recharts";
+import { fmtAr } from "../../utils/formatter";
+
+export type PieItem = { name: string; value: number; color?: string };
+
+const FALLBACK_COLORS = ["#FF8042", "#0088FE", "#00C49F", "#FFBB28", "#AF19FF"];
+const formatAr = (v: number) => `Ar ${v.toLocaleString("fr-MG")}`;
+
+export default function PieGraph({
+ title = "By category",
+ data,
+ heightClass = "h-44 sm:h-56 md:h-64",
+}: {
+ title?: string;
+ data: PieItem[];
+ heightClass?: string;
+}) {
+ const total = useMemo(
+ () => data.reduce((acc, item) => acc + item.value, 0),
+ [data]
+ );
+ return (
+
+
+
+
+ {data.map((d, i) => (
+ |
+ ))}
+
+
+ formatAr(v)} />
+
+
+
+ Total: {fmtAr(total)}
+
+ );
+}
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index f8120e7..f2818b3 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -1,6 +1,100 @@
+import { useState } from "react";
+import StatCard, {
+ type MiniStatItem,
+} from "../components/dashboard/DisplayCard";
+import { type PieItem } from "../components/dashboard/PieGraph";
+import {
+ MonthlyBarChart,
+ type Row,
+} from "../components/dashboard/MonthlyBarchart";
+import { Percent, ReceiptCent, Wallet } from "lucide-react";
+import PieGraph from "../components/dashboard/PieGraph";
+
+const mockTotals: MiniStatItem[] = [
+ { label: "Revenue", value: 82450, icon: Wallet, deltaPct: 6.4 },
+ { label: "Expenses", value: 24780, icon: ReceiptCent, deltaPct: -0.11 },
+ {
+ label: "Sold",
+ value: 65,
+ icon: Percent,
+ deltaPct: -0.8,
+ },
+];
+
+const monthlyData: Row[] = [
+ { month: "Avril", spending: 120000, income: 180000 },
+ { month: "Mai", spending: 95000, income: 165000 },
+ { month: "Juin", spending: 110000, income: 170000 },
+ { month: "Juil", spending: 130000, income: 190000 },
+];
+const expensesByCat: PieItem[] = [
+ { name: "Food", value: 45000, color: "#FF8042" },
+ { name: "Transport", value: 20000, color: "#0088FE" },
+ { name: "Shopping", value: 30000, color: "#00C49F" },
+ { name: "Bills", value: 25000, color: "#FFBB28" },
+ { name: "Entertainment", value: 15000, color: "#AF19FF" },
+];
+
+const incomeByCat: PieItem[] = [
+ { name: "Salary", value: 120000, color: "#22c55e" },
+ { name: "Freelance", value: 65000, color: "#06b6d4" },
+ { name: "Investments", value: 30000, color: "#a78bfa" },
+ { name: "Other", value: 15000, color: "#f472b6" },
+];
+
function Dashboard() {
+ const [activeGraph, setActiveGraph] = useState<"expenses" | "income">(
+ "expenses"
+ );
+
+ const currentPieData =
+ activeGraph === "expenses" ? expensesByCat : incomeByCat;
+ const currentTitle =
+ activeGraph === "expenses"
+ ? "Expenses — by category"
+ : "Income — by category";
+
return (
-
+
+
+
+ {mockTotals.map((item) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/client/src/ui/Breadcrumb.tsx b/client/src/ui/Breadcrumb.tsx
new file mode 100644
index 0000000..56a5847
--- /dev/null
+++ b/client/src/ui/Breadcrumb.tsx
@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom";
+
+function Breadcrumb({ path }: { path: string }) {
+ let splitted: string[] = [];
+
+ if (path == "/") {
+ splitted.push("Dahsboard");
+ } else {
+ splitted = path.split("/");
+ splitted = splitted.slice(1);
+ }
+
+ return (
+
+ {splitted.map((l) => (
+
+ {l[0].toUpperCase() + l.slice(1)} {">"}
+
+ ))}
+
+ );
+}
+
+export default Breadcrumb;
diff --git a/client/src/utils/formatter.ts b/client/src/utils/formatter.ts
new file mode 100644
index 0000000..2995b36
--- /dev/null
+++ b/client/src/utils/formatter.ts
@@ -0,0 +1,7 @@
+export const fmtShort = (n: number) =>
+ n >= 1_000_000
+ ? `${(n / 1_000_000).toFixed(1)}M`
+ : n >= 1_000
+ ? `${(n / 1_000).toFixed(1)}k`
+ : `${n}`;
+export const fmtAr = (n: number) => `Ar ${n.toLocaleString("fr-MG")}`;
diff --git a/client/tsconfig.app.json b/client/tsconfig.app.json
index 227a6c6..1597d8c 100644
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@@ -19,7 +19,6 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
- "erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
diff --git a/server/package.json b/server/package.json
index 95bd8f4..d367d71 100644
--- a/server/package.json
+++ b/server/package.json
@@ -12,7 +12,8 @@
"prisma:migrate": "prisma migrate dev",
"prisma:deploy": "prisma migrate deploy",
"prisma:studio": "prisma studio",
- "prisma:seed": "node prisma/seed.js"
+ "prisma:seed": "node ./prisma/seed.js"
+
},
"keywords": [
"express",
diff --git a/server/prisma/migrations/20250824074829_dev/migration.sql b/server/prisma/migrations/20250824074829_dev/migration.sql
new file mode 100644
index 0000000..cdd1879
--- /dev/null
+++ b/server/prisma/migrations/20250824074829_dev/migration.sql
@@ -0,0 +1,92 @@
+-- CreateTable
+CREATE TABLE "public"."user" (
+ "user_id" SERIAL NOT NULL,
+ "username" VARCHAR(50) NOT NULL,
+ "email" VARCHAR(255) NOT NULL,
+ "hashed_password" VARCHAR(255) NOT NULL,
+ "firstname" VARCHAR(100) NOT NULL,
+ "lastname" VARCHAR(100) NOT NULL,
+ "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "updated_at" TIMESTAMP(3) NOT NULL,
+
+ CONSTRAINT "user_pkey" PRIMARY KEY ("user_id")
+);
+
+-- CreateTable
+CREATE TABLE "public"."expense_category" (
+ "category_id" SERIAL NOT NULL,
+ "category_name" VARCHAR(50) NOT NULL,
+ "icon_url" VARCHAR(500),
+ "is_custom" BOOLEAN NOT NULL DEFAULT false,
+ "user_id" INTEGER,
+ "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "updated_at" TIMESTAMP(3) NOT NULL,
+
+ CONSTRAINT "expense_category_pkey" PRIMARY KEY ("category_id")
+);
+
+-- CreateTable
+CREATE TABLE "public"."income_category" (
+ "category_id" SERIAL NOT NULL,
+ "category_name" VARCHAR(50) NOT NULL,
+ "icon_url" VARCHAR(500),
+ "icon_emoji" VARCHAR(10),
+ "is_custom" BOOLEAN NOT NULL DEFAULT false,
+ "user_id" INTEGER,
+ "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "updated_at" TIMESTAMP(3) NOT NULL,
+
+ CONSTRAINT "income_category_pkey" PRIMARY KEY ("category_id")
+);
+
+-- CreateTable
+CREATE TABLE "public"."expense" (
+ "expense_id" SERIAL NOT NULL,
+ "amount" DOUBLE PRECISION NOT NULL,
+ "description" VARCHAR(2000),
+ "type" VARCHAR(20) NOT NULL DEFAULT 'ONE_TIME',
+ "receipt_upload" VARCHAR(2000),
+ "creation_date" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "expense_date" TIMESTAMP(3),
+ "start_date" TIMESTAMP(3),
+ "end_date" TIMESTAMP(3),
+ "user_id" INTEGER NOT NULL,
+ "category_id" INTEGER NOT NULL,
+
+ CONSTRAINT "expense_pkey" PRIMARY KEY ("expense_id")
+);
+
+-- CreateTable
+CREATE TABLE "public"."income" (
+ "income_id" SERIAL NOT NULL,
+ "amount" DOUBLE PRECISION NOT NULL,
+ "date" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "source" VARCHAR(100) NOT NULL,
+ "description" VARCHAR(2000),
+ "creation_date" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "user_id" INTEGER NOT NULL,
+ "category_id" INTEGER NOT NULL,
+
+ CONSTRAINT "income_pkey" PRIMARY KEY ("income_id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_email_key" ON "public"."user"("email");
+
+-- AddForeignKey
+ALTER TABLE "public"."expense_category" ADD CONSTRAINT "expense_category_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "public"."user"("user_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."income_category" ADD CONSTRAINT "income_category_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "public"."user"("user_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."expense" ADD CONSTRAINT "expense_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "public"."user"("user_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."expense" ADD CONSTRAINT "expense_category_id_fkey" FOREIGN KEY ("category_id") REFERENCES "public"."expense_category"("category_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."income" ADD CONSTRAINT "income_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "public"."user"("user_id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."income" ADD CONSTRAINT "income_category_id_fkey" FOREIGN KEY ("category_id") REFERENCES "public"."income_category"("category_id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/server/prisma/seed.js b/server/prisma/seed.js
index e8089c9..f3a7935 100644
--- a/server/prisma/seed.js
+++ b/server/prisma/seed.js
@@ -52,8 +52,8 @@ const main = async () => {
});
console.log(`created: ${item.category_name}`);
}
-
console.log('Seed completed.');
+
}
main()