Skip to content

Instantly share code, notes, and snippets.

@shricodev

shricodev/changes.patch Secret

Created March 11, 2026 14:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shricodev/61d485a452f2aab8eb41ceaa31ddd9f9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shricodev/61d485a452f2aab8eb41ceaa31ddd9f9 to your computer and use it in GitHub Desktop.
Download ZIP
Claude Sonnet 4.6 - Code Changes (git patch)
Raw
changes.patch
diff --git a/app/components/EarningsChart.tsx b/app/components/EarningsChart.tsx
new file mode 100644
index 0000000..fd9a496
--- /dev/null
+++ b/app/components/EarningsChart.tsx
@@ -0,0 +1,158 @@
+import Image from "next/image";
+
+const imgCircleChart =
+ "https://www.figma.com/api/mcp/asset/6b3ee65a-8dab-4ed4-8529-1c6e6f2db3c3";
+const imgCircleChart1 =
+ "https://www.figma.com/api/mcp/asset/1ea458cb-d6d3-4f18-b54c-a61eba602c3f";
+const imgEllipse7 =
+ "https://www.figma.com/api/mcp/asset/98d6d37f-5d46-4806-906b-d9a86a44c691";
+const imgEllipse8 =
+ "https://www.figma.com/api/mcp/asset/7a2d0ef3-45f1-434a-b514-47f7cb6352b1";
+const imgEllipse9 =
+ "https://www.figma.com/api/mcp/asset/f2845f9c-1c07-49b9-995c-335274e71c73";
+const imgEllipse10 =
+ "https://www.figma.com/api/mcp/asset/11513ee4-968c-4fe3-af0f-ace377656bc9";
+const imgEllipse4 =
+ "https://www.figma.com/api/mcp/asset/1a102d28-b547-49b4-88cb-6dec9eb67593";
+const imgEllipse13 =
+ "https://www.figma.com/api/mcp/asset/e7b9cda0-137b-44cc-ad46-fdcf27845d38";
+const imgEllipse3 =
+ "https://www.figma.com/api/mcp/asset/bae1607e-f415-49b9-b43b-d3c5cc4b22c0";
+const imgShape10 =
+ "https://www.figma.com/api/mcp/asset/53e022da-bc80-41b0-be1b-ce061073eb8b";
+
+function CircleChart() {
+ return (
+ <div className="relative size-[216px] flex-shrink-0">
+ <Image
+ src={imgCircleChart}
+ alt=""
+ fill
+ className="object-contain"
+ unoptimized
+ />
+ <div className="absolute inset-[10%]">
+ <div className="absolute inset-[0_0_1%_0]">
+ <Image
+ src={imgEllipse7}
+ alt=""
+ fill
+ className="object-contain"
+ unoptimized
+ />
+ </div>
+ </div>
+ <div className="absolute inset-[20.5%]">
+ <div className="absolute inset-[0_0_0_3.68%]">
+ <Image
+ src={imgEllipse9}
+ alt=""
+ fill
+ className="object-contain"
+ unoptimized
+ />
+ </div>
+ </div>
+ <Image
+ src={imgCircleChart1}
+ alt=""
+ fill
+ className="object-contain"
+ unoptimized
+ />
+ <div className="absolute inset-[10%]">
+ <div className="absolute inset-[1.08%_0_0_0]">
+ <Image
+ src={imgEllipse8}
+ alt=""
+ fill
+ className="object-contain"
+ unoptimized
+ />
+ </div>
+ </div>
+ <div className="absolute inset-[20.5%]">
+ <div className="absolute inset-[12.51%_0_0_0]">
+ <Image
+ src={imgEllipse10}
+ alt=""
+ fill
+ className="object-contain"
+ unoptimized
+ />
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default function EarningsChart() {
+ return (
+ <div className="bg-white border border-[#E6EDFF] flex items-start p-[20px] rounded-[12px] w-[296px] flex-shrink-0">
+ <div className="flex flex-col gap-[20px] items-center w-full">
+ {/* Header */}
+ <div className="flex items-center justify-between w-full">
+ <p className="font-bold text-[20px] text-black leading-[1.5] whitespace-nowrap">
+ Earnings
+ </p>
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[41.67%_16.67%]">
+ <Image
+ src={imgShape10}
+ alt="More options"
+ fill
+ className="object-contain"
+ />
+ </div>
+ </div>
+ </div>
+
+ {/* Circle chart */}
+ <CircleChart />
+
+ {/* Legend */}
+ <div className="flex items-center gap-[20px]">
+ <div className="flex items-center gap-[8px]">
+ <div className="relative size-[8px] flex-shrink-0">
+ <Image
+ src={imgEllipse4}
+ alt=""
+ fill
+ className="object-contain"
+ />
+ </div>
+ <p className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Offline
+ </p>
+ </div>
+ <div className="flex items-center gap-[8px]">
+ <div className="relative size-[8px] flex-shrink-0">
+ <Image
+ src={imgEllipse13}
+ alt=""
+ fill
+ className="object-contain"
+ />
+ </div>
+ <p className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Online
+ </p>
+ </div>
+ <div className="flex items-center gap-[8px]">
+ <div className="relative size-[8px] flex-shrink-0">
+ <Image
+ src={imgEllipse3}
+ alt=""
+ fill
+ className="object-contain"
+ />
+ </div>
+ <p className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Trade
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
new file mode 100644
index 0000000..8292071
--- /dev/null
+++ b/app/components/Header.tsx
@@ -0,0 +1,85 @@
+import Image from "next/image";
+
+const imgShape17 =
+ "https://www.figma.com/api/mcp/asset/666843dd-a040-4c8c-b4a3-31e18f65ef0c";
+const imgShape18 =
+ "https://www.figma.com/api/mcp/asset/1c4a7d7c-42d7-4a62-bc2e-f29308ff259a";
+const imgShape5 =
+ "https://www.figma.com/api/mcp/asset/b9e77a68-7a29-4f0f-be5b-53fc2a3fe0a4";
+const imgIndicator =
+ "https://www.figma.com/api/mcp/asset/3c0957c7-a5a7-4741-b00c-a3e3503b59bf";
+const imgAvatar =
+ "https://www.figma.com/api/mcp/asset/38a74f4f-6560-4cf2-8b74-e708a584f3dc";
+
+export default function Header() {
+ return (
+ <header className="flex items-start justify-between w-full">
+ {/* Title + Subtitle */}
+ <div className="flex flex-col gap-[4px]">
+ <p className="font-bold text-[28px] text-black leading-[1.5]">
+ Welcome Back, Marci
+ </p>
+ <p className="font-bold text-[16px] text-[#7C8DB5] leading-[1.5]">
+ Here is the information about all your orders
+ </p>
+ </div>
+
+ {/* Right Elements */}
+ <div className="flex items-center gap-[32px] flex-shrink-0">
+ {/* Icons */}
+ <div className="flex items-start gap-[24px]">
+ {/* Search */}
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[8.96%]">
+ <Image
+ src={imgShape17}
+ alt="Search"
+ fill
+ className="object-contain"
+ />
+ </div>
+ </div>
+
+ {/* Bell with notification dot */}
+ <div className="relative inline-grid place-items-start leading-[0]">
+ <div className="col-start-1 row-start-1 relative overflow-hidden size-[24px]">
+ <div className="absolute inset-[8.96%_13.12%_8.96%_13.13%]">
+ <Image
+ src={imgShape18}
+ alt="Notifications"
+ fill
+ className="object-contain"
+ />
+ </div>
+ </div>
+ <div className="col-start-1 row-start-1 relative size-[4px] ml-[20px]">
+ <Image src={imgIndicator} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ </div>
+
+ {/* Profile */}
+ <div className="flex items-center gap-[12px]">
+ <div className="relative size-[32px] rounded-full overflow-hidden flex-shrink-0">
+ <Image
+ src={imgAvatar}
+ alt="Marci Fumons"
+ fill
+ className="object-cover"
+ />
+ </div>
+ <div className="flex items-start gap-[8px]">
+ <span className="font-bold text-[16px] text-black leading-[1.5] whitespace-nowrap">
+ Marci Fumons
+ </span>
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[38.12%_25.63%_33.96%_25.63%]">
+ <Image src={imgShape5} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+ );
+}
diff --git a/app/components/OrderList.tsx b/app/components/OrderList.tsx
new file mode 100644
index 0000000..21dc451
--- /dev/null
+++ b/app/components/OrderList.tsx
@@ -0,0 +1,215 @@
+import Image from "next/image";
+
+const imgShape9 =
+ "https://www.figma.com/api/mcp/asset/736318a0-6955-4b56-8799-9811cd4d014b";
+const imgShape10 =
+ "https://www.figma.com/api/mcp/asset/53e022da-bc80-41b0-be1b-ce061073eb8b";
+const imgShape19 =
+ "https://www.figma.com/api/mcp/asset/7d245d7e-45fc-4245-9dd5-1fa9ee1ca007";
+const imgEllipse4 =
+ "https://www.figma.com/api/mcp/asset/1a102d28-b547-49b4-88cb-6dec9eb67593";
+const imgEllipse13 =
+ "https://www.figma.com/api/mcp/asset/e7b9cda0-137b-44cc-ad46-fdcf27845d38";
+
+type StatusType = "new" | "delivery" | "processing";
+
+interface OrderRow {
+ no: number;
+ id: string;
+ date: string;
+ customerName: string;
+ location: string;
+ amount: string;
+ status: StatusType;
+}
+
+const orders: OrderRow[] = [
+ {
+ no: 1,
+ id: "#12594",
+ date: "Dec 1, 2021",
+ customerName: "Frank Murlo",
+ location: "312 S Wilmette Ave",
+ amount: "$847.69",
+ status: "new",
+ },
+ {
+ no: 2,
+ id: "#12490",
+ date: "Nov 15, 2021",
+ customerName: "Thomas Bleir",
+ location: "Lathrop Ave, Harvey",
+ amount: "$477.14",
+ status: "delivery",
+ },
+ {
+ no: 3,
+ id: "#12306",
+ date: "Nov 02, 2021",
+ customerName: "Bill Norton",
+ location: "5685 Bruce Ave, Portage",
+ amount: "$477.14",
+ status: "delivery",
+ },
+];
+
+function StatusBadge({ status }: { status: StatusType }) {
+ if (status === "new") {
+ return (
+ <div className="bg-white flex items-center gap-[8px] px-[12px] py-[4px] rounded-[8px] shadow-[0px_2px_10px_0px_rgba(124,141,181,0.12)] inline-flex">
+ <div className="relative size-[8px] flex-shrink-0">
+ <Image src={imgEllipse4} alt="" fill className="object-contain" />
+ </div>
+ <p className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ New Order
+ </p>
+ </div>
+ );
+ }
+
+ return (
+ <div className="bg-white flex items-center gap-[8px] px-[12px] py-[4px] rounded-[8px] shadow-[0px_2px_10px_0px_rgba(124,141,181,0.12)] inline-flex">
+ <div className="relative size-[8px] flex-shrink-0">
+ <Image src={imgEllipse13} alt="" fill className="object-contain" />
+ </div>
+ <p className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ On Delivery
+ </p>
+ </div>
+ );
+}
+
+function SortIcon() {
+ return (
+ <div className="relative overflow-hidden size-[12px] flex-shrink-0">
+ <div className="absolute inset-[8.96%]">
+ <Image src={imgShape19} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ );
+}
+
+export default function OrderList() {
+ return (
+ <div className="bg-white border border-[#E6EDFF] flex flex-col gap-[12px] p-[20px] rounded-[10px]">
+ {/* Header row */}
+ <div className="flex items-center justify-between">
+ <p className="font-bold text-[20px] text-black leading-[1.5] whitespace-nowrap">
+ Order List
+ </p>
+ <div className="bg-white flex items-center gap-[4px] pl-[12px] pr-[8px] py-[4px] rounded-[8px] shadow-[0px_2px_10px_0px_rgba(124,141,181,0.12)]">
+ <p className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Monthly
+ </p>
+ <div className="relative overflow-hidden size-[16px] flex-shrink-0">
+ <div className="absolute inset-[38.12%_25.63%_33.96%_25.63%]">
+ <Image src={imgShape9} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ </div>
+ </div>
+
+ {/* Table */}
+ <div className="w-full overflow-x-auto">
+ <table className="w-full border-collapse" style={{ minWidth: "900px" }}>
+ <thead>
+ <tr className="border-b border-[#E6EDFF]">
+ <th className="text-left py-[18px] pr-4 font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap w-[50px]">
+ No
+ </th>
+ <th className="text-left py-[18px] pr-4 w-[100px]">
+ <div className="flex items-center gap-[4px]">
+ <span className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ ID
+ </span>
+ <SortIcon />
+ </div>
+ </th>
+ <th className="text-left py-[18px] pr-4 w-[130px]">
+ <span className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Date
+ </span>
+ </th>
+ <th className="text-left py-[18px] pr-4 w-[160px]">
+ <div className="flex items-center gap-[4px]">
+ <span className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Customer Name
+ </span>
+ <SortIcon />
+ </div>
+ </th>
+ <th className="text-left py-[18px] pr-4">
+ <span className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Location
+ </span>
+ </th>
+ <th className="text-left py-[18px] pr-4 w-[110px]">
+ <div className="flex items-center gap-[4px]">
+ <span className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Amount
+ </span>
+ <SortIcon />
+ </div>
+ </th>
+ <th className="text-left py-[18px] pr-4 w-[160px]">
+ <div className="flex items-center gap-[4px]">
+ <span className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Status Order
+ </span>
+ <SortIcon />
+ </div>
+ </th>
+ <th className="text-left py-[18px] w-[60px]">
+ <span className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Action
+ </span>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ {orders.map((order) => (
+ <tr
+ key={order.id}
+ className="border-b border-[#E6EDFF] last:border-b-0"
+ >
+ <td className="py-[18px] pr-4 font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ {order.no}
+ </td>
+ <td className="py-[18px] pr-4 font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ {order.id}
+ </td>
+ <td className="py-[18px] pr-4 font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ {order.date}
+ </td>
+ <td className="py-[18px] pr-4 font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ {order.customerName}
+ </td>
+ <td className="py-[18px] pr-4 font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ {order.location}
+ </td>
+ <td className="py-[18px] pr-4 font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ {order.amount}
+ </td>
+ <td className="py-[16px] pr-4">
+ <StatusBadge status={order.status} />
+ </td>
+ <td className="py-[15px]">
+ <div className="relative overflow-hidden size-[24px]">
+ <div className="absolute inset-[41.67%_16.67%]">
+ <Image
+ src={imgShape10}
+ alt="More options"
+ fill
+ className="object-contain"
+ />
+ </div>
+ </div>
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ );
+}
diff --git a/app/components/OrdersAnalyticsChart.tsx b/app/components/OrdersAnalyticsChart.tsx
new file mode 100644
index 0000000..e457e2a
--- /dev/null
+++ b/app/components/OrdersAnalyticsChart.tsx
@@ -0,0 +1,199 @@
+import Image from "next/image";
+
+const imgEllipse3 =
+ "https://www.figma.com/api/mcp/asset/bae1607e-f415-49b9-b43b-d3c5cc4b22c0";
+const imgEllipse13 =
+ "https://www.figma.com/api/mcp/asset/e7b9cda0-137b-44cc-ad46-fdcf27845d38";
+const imgShape9 =
+ "https://www.figma.com/api/mcp/asset/736318a0-6955-4b56-8799-9811cd4d014b";
+const imgLine9 =
+ "https://www.figma.com/api/mcp/asset/1de87cec-da05-4034-80b8-46c81ba9209c";
+const imgLine10 =
+ "https://www.figma.com/api/mcp/asset/a8e66a6e-48fc-4985-9158-20ffd77eb3e1";
+const imgLine11 =
+ "https://www.figma.com/api/mcp/asset/c7a2f67c-321f-47d6-b1d5-2794de85d682";
+const imgBg =
+ "https://www.figma.com/api/mcp/asset/2a76caca-f4ac-4cb0-b0c7-031b2adc2c54";
+const imgChart1 =
+ "https://www.figma.com/api/mcp/asset/be67e627-2da9-4309-bb83-5daacca38f6b";
+const imgChart2 =
+ "https://www.figma.com/api/mcp/asset/d702a7ac-4a20-4019-b915-8a0159720bfc";
+const imgEllipse12 =
+ "https://www.figma.com/api/mcp/asset/6ae1b32b-47a8-4d94-a182-c5f983cc79e5";
+const imgPin =
+ "https://www.figma.com/api/mcp/asset/259052d9-a4ee-4b16-9386-f4a60f779206";
+
+const GRID_ROWS = [
+ { label: "100", lineImg: imgLine9 },
+ { label: "80", lineImg: imgLine10 },
+ { label: "60", lineImg: imgLine11 },
+ { label: "40", lineImg: imgLine11 },
+ { label: "20", lineImg: imgLine11 },
+ { label: "0", lineImg: imgLine11 },
+];
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"];
+
+export default function OrdersAnalyticsChart() {
+ return (
+ <div className="bg-white border border-[#E6EDFF] flex flex-col gap-[24px] p-[20px] rounded-[12px] flex-1 min-w-0">
+ {/* Title row */}
+ <div className="flex items-center justify-between">
+ <p className="font-bold text-[20px] text-black leading-[1.5] whitespace-nowrap">
+ Orders Analytics
+ </p>
+ <div className="flex items-center gap-[20px]">
+ {/* Offline legend */}
+ <div className="flex items-center gap-[8px]">
+ <div className="relative size-[8px] flex-shrink-0">
+ <Image
+ src={imgEllipse3}
+ alt=""
+ fill
+ className="object-contain"
+ />
+ </div>
+ <p className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Offline orders
+ </p>
+ </div>
+ {/* Online legend */}
+ <div className="flex items-center gap-[8px]">
+ <div className="relative size-[8px] flex-shrink-0">
+ <Image
+ src={imgEllipse13}
+ alt=""
+ fill
+ className="object-contain"
+ />
+ </div>
+ <p className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Online orders
+ </p>
+ </div>
+ {/* Filter dropdown */}
+ <div className="bg-white flex items-center gap-[4px] pl-[12px] pr-[8px] py-[4px] rounded-[8px] shadow-[0px_2px_10px_0px_rgba(124,141,181,0.12)]">
+ <p className="font-bold text-[12px] text-black leading-[1.5] whitespace-nowrap">
+ Monthly
+ </p>
+ <div className="relative overflow-hidden size-[16px] flex-shrink-0">
+ <div className="absolute inset-[38.12%_25.63%_33.96%_25.63%]">
+ <Image src={imgShape9} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ {/* Chart area */}
+ <div className="relative h-[250px] w-full">
+ {/* Grid lines */}
+ <div className="absolute inset-0 flex flex-col gap-[19px]">
+ {GRID_ROWS.map(({ label, lineImg }) => (
+ <div key={label} className="flex items-center justify-between">
+ <p className="font-bold text-[14px] text-[#7C8DB5] leading-[1.5] text-right w-[23px] flex-shrink-0">
+ {label}
+ </p>
+ <div className="relative h-0 flex-1 ml-[15px]">
+ <div className="absolute inset-[-1px_0_0_0]">
+ <Image
+ src={lineImg}
+ alt=""
+ fill
+ className="object-fill"
+ unoptimized
+ />
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+
+ {/* Month labels */}
+ <div className="absolute bottom-0 left-0 right-0 flex justify-between pl-[38px]">
+ {MONTHS.map((month) => (
+ <p
+ key={month}
+ className="font-bold text-[14px] text-[#7C8DB5] leading-[1.5]"
+ >
+ {month}
+ </p>
+ ))}
+ </div>
+
+ {/* Chart highlight background */}
+ <div className="absolute top-[29px] left-[41.5%] w-[3.7%] h-[181px]">
+ <Image src={imgBg} alt="" fill className="object-fill" unoptimized />
+ </div>
+
+ {/* Chart line 1 (orange) */}
+ <div className="absolute top-[64px] left-[40px] right-0 h-[102px]">
+ <div className="absolute inset-[-0.98%_-0.14%]">
+ <Image
+ src={imgChart1}
+ alt="Online orders chart"
+ fill
+ className="object-fill"
+ unoptimized
+ />
+ </div>
+ </div>
+
+ {/* Chart line 2 (blue) */}
+ <div className="absolute top-[77px] left-[40px] right-0 h-[101px]">
+ <div className="absolute inset-[-0.99%_-0.14%]">
+ <Image
+ src={imgChart2}
+ alt="Offline orders chart"
+ fill
+ className="object-fill"
+ unoptimized
+ />
+ </div>
+ </div>
+
+ {/* Data point marker */}
+ <div className="absolute top-[87px] left-[41.2%] size-[8px]">
+ <div className="absolute inset-[-100%_-125%_-150%_-125%]">
+ <Image
+ src={imgEllipse12}
+ alt=""
+ fill
+ className="object-contain"
+ unoptimized
+ />
+ </div>
+ </div>
+
+ {/* Tooltip */}
+ <div className="absolute top-[12px] left-[33.6%] flex flex-col items-center">
+ <div className="bg-white flex flex-col items-start p-[12px] rounded-[8px] shadow-[0px_2px_10px_0px_rgba(124,141,181,0.12)]">
+ <div className="flex flex-col items-center whitespace-nowrap">
+ <p className="font-bold text-[12px] text-[#7C8DB5] leading-[1.5]">
+ 15 Aug 2022
+ </p>
+ <p className="font-bold text-[16px] text-black leading-[1.5]">
+ $59,492.10
+ </p>
+ </div>
+ </div>
+ <div className="flex items-center justify-center">
+ <div className="rotate-180">
+ <div className="relative h-[5px] w-[12px]">
+ <div className="absolute inset-[6.03%_0_0_0]">
+ <Image
+ src={imgPin}
+ alt=""
+ fill
+ className="object-contain"
+ unoptimized
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
new file mode 100644
index 0000000..29e239d
--- /dev/null
+++ b/app/components/Sidebar.tsx
@@ -0,0 +1,181 @@
+import Image from "next/image";
+
+const imgIcon =
+ "https://www.figma.com/api/mcp/asset/dda89c45-7a02-47d6-823b-ce5117664968";
+const imgShape3 =
+ "https://www.figma.com/api/mcp/asset/36900441-56d8-4ac7-af3b-585528176b6d";
+const imgShape4 =
+ "https://www.figma.com/api/mcp/asset/12cfda77-db4f-47f1-bce7-a1379c0adcf5";
+const imgShape5 =
+ "https://www.figma.com/api/mcp/asset/b9e77a68-7a29-4f0f-be5b-53fc2a3fe0a4";
+const imgShape6 =
+ "https://www.figma.com/api/mcp/asset/6d1dcaa7-589b-47d9-ae1a-51599d3b9aa9";
+const imgShape7 =
+ "https://www.figma.com/api/mcp/asset/a687263b-bcef-42ff-bc11-6f18cb0b310b";
+const imgShape8 =
+ "https://www.figma.com/api/mcp/asset/d4b5237c-949f-46f2-bcba-64ddbf543521";
+const imgShapeHelp =
+ "https://www.figma.com/api/mcp/asset/385f30a3-7490-427c-93df-73e5e4e8f9e2";
+const imgShapeChat =
+ "https://www.figma.com/api/mcp/asset/c5765458-57d8-4284-8504-6009fad75f73";
+const imgShapeLogout =
+ "https://www.figma.com/api/mcp/asset/3b661149-4b11-4cf0-94b1-88a67bab60dc";
+
+export default function Sidebar() {
+ return (
+ <aside className="relative w-[285px] flex-shrink-0 flex flex-col h-screen border-r border-[#E6EDFF]">
+ {/* Active indicator bar for Overview */}
+ <div className="absolute right-0 top-[158px] w-[4px] h-[24px] bg-[#347AE2] rounded-tl-[2px] rounded-bl-[2px]" />
+
+ {/* Logo */}
+ <div className="flex items-center gap-[4px] pl-[51px] pt-[60px]">
+ <div className="relative size-[30px] flex-shrink-0">
+ <Image src={imgIcon} alt="Aeon logo" fill className="object-contain" />
+ </div>
+ <span className="font-bold text-[20px] text-black tracking-[0.2px] leading-normal">
+ Aeon
+ </span>
+ </div>
+
+ {/* Top Navigation */}
+ <nav className="flex flex-col gap-[28px] pl-[56px] mt-[72px]">
+ {/* Overview — active */}
+ <div className="flex items-center gap-[12px] w-[193px]">
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[13.13%_8.96%_13.12%_8.96%]">
+ <Image src={imgShape3} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ <span className="font-bold text-[16px] text-[#347AE2] leading-[1.5]">
+ Overview
+ </span>
+ </div>
+
+ {/* Product */}
+ <div className="flex items-center justify-between w-[193px]">
+ <div className="flex items-center gap-[12px]">
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[13.13%_13.12%_8.96%_13.13%]">
+ <Image src={imgShape4} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ <span className="font-bold text-[16px] text-[#7C8DB5] leading-[1.5]">
+ Product
+ </span>
+ </div>
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[38.12%_25.63%_33.96%_25.63%]">
+ <Image src={imgShape5} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ </div>
+
+ {/* Orders */}
+ <div className="flex items-center justify-between w-[193px]">
+ <div className="flex items-center gap-[12px]">
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[11.04%_15.21%]">
+ <Image src={imgShape6} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ <span className="font-bold text-[16px] text-[#7C8DB5] leading-[1.5]">
+ Orders
+ </span>
+ </div>
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[38.12%_25.63%_33.96%_25.63%]">
+ <Image src={imgShape5} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ </div>
+
+ {/* Checkout */}
+ <div className="flex items-center justify-between w-[193px]">
+ <div className="flex items-center gap-[12px]">
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[13.13%_13.12%_8.96%_13.13%]">
+ <Image src={imgShape7} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ <span className="font-bold text-[16px] text-[#7C8DB5] leading-[1.5]">
+ Checkout
+ </span>
+ </div>
+ <div className="flex items-center justify-center p-[3px]">
+ <div className="bg-[#FF3B30] flex items-center justify-center px-[5.5px] rounded-[17px]">
+ <span className="font-bold text-[12px] text-white leading-[1.5]">
+ 2
+ </span>
+ </div>
+ </div>
+ </div>
+
+ {/* Setting */}
+ <div className="flex items-center gap-[12px] w-[193px]">
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[4.79%_8.96%_8.96%_8.96%]">
+ <Image src={imgShape8} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ <span className="font-bold text-[16px] text-[#7C8DB5] leading-[1.5]">
+ Setting
+ </span>
+ </div>
+ </nav>
+
+ {/* Bottom Navigation */}
+ <nav className="flex flex-col gap-[28px] pl-[56px] mt-auto pb-[60px]">
+ {/* Help Centre */}
+ <div className="flex items-center gap-[12px] w-[193px]">
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[8.96%]">
+ <Image
+ src={imgShapeHelp}
+ alt=""
+ fill
+ className="object-contain"
+ />
+ </div>
+ </div>
+ <span className="font-bold text-[16px] text-[#7C8DB5] leading-[1.5]">
+ Help Centre
+ </span>
+ </div>
+
+ {/* Contact us */}
+ <div className="flex items-center gap-[12px] w-[193px]">
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[8.96%_7.08%]">
+ <Image
+ src={imgShapeChat}
+ alt=""
+ fill
+ className="object-contain"
+ />
+ </div>
+ </div>
+ <span className="font-bold text-[16px] text-[#7C8DB5] leading-[1.5]">
+ Contact us
+ </span>
+ </div>
+
+ {/* Log out */}
+ <div className="flex items-center gap-[12px] w-[193px]">
+ <div className="relative overflow-hidden size-[24px] flex-shrink-0">
+ <div className="absolute inset-[8.96%]">
+ <Image
+ src={imgShapeLogout}
+ alt=""
+ fill
+ className="object-contain"
+ />
+ </div>
+ </div>
+ <span className="font-bold text-[16px] text-[#FF3B30] leading-[1.5]">
+ Log out
+ </span>
+ </div>
+ </nav>
+ </aside>
+ );
+}
diff --git a/app/components/StatsCards.tsx b/app/components/StatsCards.tsx
new file mode 100644
index 0000000..a223c21
--- /dev/null
+++ b/app/components/StatsCards.tsx
@@ -0,0 +1,135 @@
+import Image from "next/image";
+
+const imgShape11 =
+ "https://www.figma.com/api/mcp/asset/4916b96c-a858-4597-b7d5-61a30b39c8b1";
+const imgShape13 =
+ "https://www.figma.com/api/mcp/asset/4297cdc2-a1b5-44a4-b1bb-423d0c8638e7";
+const imgShape14 =
+ "https://www.figma.com/api/mcp/asset/ac578965-9275-4742-9b61-b5303d0e62d9";
+const imgShape16 =
+ "https://www.figma.com/api/mcp/asset/f21d0ca7-cefe-474b-8d1c-9d7a9038c67d";
+const imgShapeUp =
+ "https://www.figma.com/api/mcp/asset/eb67ad6a-8873-4179-8a90-1d14929034a2";
+const imgShapeDown =
+ "https://www.figma.com/api/mcp/asset/3bcf1911-b07b-405c-8424-0b9ee5fdcc4a";
+
+interface StatCardProps {
+ value: string;
+ label: string;
+ iconSrc: string;
+ iconInset: string;
+ trendValue: string;
+ trendText: string;
+ trendUp: boolean;
+}
+
+function StatCard({
+ value,
+ label,
+ iconSrc,
+ iconInset,
+ trendValue,
+ trendText,
+ trendUp,
+}: StatCardProps) {
+ return (
+ <div className="flex flex-col gap-[12px] w-[198px]">
+ {/* Top row: text + icon */}
+ <div className="flex items-start justify-between w-full">
+ <div className="flex flex-col items-start leading-[1.5] text-black whitespace-nowrap">
+ <p className="font-semibold text-[28px]">{value}</p>
+ <p className="font-bold text-[16px]">{label}</p>
+ </div>
+ <div className="bg-white flex items-start p-[10px] rounded-[12px] shadow-[0px_2px_10px_0px_rgba(124,141,181,0.12)] flex-shrink-0">
+ <div className="relative overflow-hidden size-[24px]">
+ <div className={`absolute ${iconInset}`}>
+ <Image src={iconSrc} alt="" fill className="object-contain" />
+ </div>
+ </div>
+ </div>
+ </div>
+
+ {/* Bottom row: trend */}
+ <div className="flex items-start gap-[12px] w-full">
+ <div className="flex items-center gap-[8px]">
+ <div className="relative overflow-hidden size-[20px] flex-shrink-0">
+ <div className="absolute flex inset-[4.37%_5.09%_4.38%_3.66%] items-center justify-center">
+ <div
+ className={`flex-none h-[13.315px] w-[17.657px] ${trendUp ? "-rotate-45" : "rotate-135"}`}
+ >
+ <div className="relative size-full">
+ <Image
+ src={trendUp ? imgShapeUp : imgShapeDown}
+ alt=""
+ fill
+ className="object-contain"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ <p className="font-bold text-[14px] text-[#7C8DB5] leading-[1.5] whitespace-nowrap">
+ {trendValue}
+ </p>
+ </div>
+ <p className="font-bold text-[14px] text-[#7C8DB5] leading-[1.5] flex-1 min-w-0">
+ {trendText}
+ </p>
+ </div>
+ </div>
+ );
+}
+
+function VerticalDivider() {
+ return (
+ <div className="flex items-center justify-center h-[102px] w-px">
+ <div className="w-px h-full bg-[#E6EDFF]" />
+ </div>
+ );
+}
+
+export default function StatsCards() {
+ return (
+ <div className="bg-white border border-[#E6EDFF] flex items-center gap-[38px] p-[20px] rounded-[12px]">
+ <StatCard
+ value="89,935"
+ label="Total users"
+ iconSrc={imgShape11}
+ iconInset="inset-[13.13%_8.96%_13.12%_13.13%]"
+ trendValue="10.2"
+ trendText="+1.01% this week"
+ trendUp={true}
+ />
+ <VerticalDivider />
+ <StatCard
+ value="23,283.5"
+ label="Total products"
+ iconSrc={imgShape13}
+ iconInset="inset-[13.13%_13.12%_8.96%_13.13%]"
+ trendValue="3.1"
+ trendText="+0.49% this week"
+ trendUp={true}
+ />
+ <VerticalDivider />
+ <StatCard
+ value="46,827"
+ label="Total users"
+ iconSrc={imgShape14}
+ iconInset="inset-[8.96%]"
+ trendValue="2.56"
+ trendText="-0.91% this week"
+ trendUp={false}
+ />
+ <VerticalDivider />
+ <StatCard
+ value="124,854"
+ label="Refunded"
+ iconSrc={imgShape16}
+ iconInset="inset-[8.96%_8.96%_17.29%_8.96%]"
+ trendValue="7.2"
+ trendText="+1.51% this week"
+ trendUp={true}
+ />
+ </div>
+ );
+}
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..83a87cb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,19 +8,11 @@
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
- --font-sans: var(--font-geist-sans);
- --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
+ --font-sans: var(--font-poppins);
}
body {
background: var(--background);
color: var(--foreground);
- font-family: Arial, Helvetica, sans-serif;
+ font-family: var(--font-poppins), sans-serif;
}
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..da768fd 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,16 @@
import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Poppins } from "next/font/google";
import "./globals.css";
-const geistSans = Geist({
- variable: "--font-geist-sans",
- subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
- variable: "--font-geist-mono",
+const poppins = Poppins({
+ weight: ["400", "500", "600", "700"],
subsets: ["latin"],
+ variable: "--font-poppins",
});
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: "Aeon Dashboard",
+ description: "Dashboard Design Concept",
};
export default function RootLayout({
@@ -24,11 +20,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
- <body
- className={`${geistSans.variable} ${geistMono.variable} antialiased`}
- >
- {children}
- </body>
+ <body className={`${poppins.variable} antialiased`}>{children}</body>
</html>
);
}
diff --git a/app/page.tsx b/app/page.tsx
index 295f8fd..71ae990 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,63 +1,28 @@
-import Image from "next/image";
+import Sidebar from "./components/Sidebar";
+import Header from "./components/Header";
+import StatsCards from "./components/StatsCards";
+import OrdersAnalyticsChart from "./components/OrdersAnalyticsChart";
+import EarningsChart from "./components/EarningsChart";
+import OrderList from "./components/OrderList";
-export default function Home() {
+export default function Dashboard() {
return (
- <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
- <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
- <Image
- className="dark:invert"
- src="/next.svg"
- alt="Next.js logo"
- width={100}
- height={20}
- priority
- />
- <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
- <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
- To get started, edit the page.tsx file.
- </h1>
- <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
- Looking for a starting point or more instructions? Head over to{" "}
- <a
- href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
- className="font-medium text-zinc-950 dark:text-zinc-50"
- >
- Templates
- </a>{" "}
- or the{" "}
- <a
- href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
- className="font-medium text-zinc-950 dark:text-zinc-50"
- >
- Learning
- </a>{" "}
- center.
- </p>
- </div>
- <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
- <a
- className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
- href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- <Image
- className="dark:invert"
- src="/vercel.svg"
- alt="Vercel logomark"
- width={16}
- height={16}
- />
- Deploy Now
- </a>
- <a
- className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
- href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
- target="_blank"
- rel="noopener noreferrer"
- >
- Documentation
- </a>
+ <div className="flex h-screen bg-white overflow-hidden">
+ <Sidebar />
+
+ {/* Main content */}
+ <main className="flex-1 overflow-y-auto overflow-x-auto">
+ <div className="min-w-[1060px] px-10 pt-[60px] pb-10 flex flex-col gap-[32px]">
+ <Header />
+ <StatsCards />
+
+ {/* Charts row */}
+ <div className="flex items-start gap-[32px]">
+ <OrdersAnalyticsChart />
+ <EarningsChart />
+ </div>
+
+ <OrderList />
</div>
</main>
</div>
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..52e8201 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,18 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
- /* config options here */
+ images: {
+ dangerouslyAllowSVG: true,
+ contentDispositionType: "attachment",
+ contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+ remotePatterns: [
+ {
+ protocol: "https",
+ hostname: "www.figma.com",
+ pathname: "/api/mcp/asset/**",
+ },
+ ],
+ },
};
export default nextConfig;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment