Первый коммит

src/app/page.tsx

@@ -1,95 +1,44 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import mockData from "../data/mockData";
+import MetricCards from "../components/MetricCards";
+import Table from "../components/Table";
+import StatCharts from "../components/StatCharts";
+import styles from "../styles/dashboard.module.css";
 
-export default function Home() {
+function formatCurrency(amount: number) {
+  return amount.toLocaleString("ru-RU", {
+    style: "currency",
+    currency: "RUB",
+    minimumFractionDigits: 0,
+  });
+}
+
+export default function DashboardPage() {
   return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
+    <div className={styles.dashboard}>
+      <h1 className={styles.title}>Дашборд</h1>
+      <MetricCards  />
+      <StatCharts />
+      {/* <div className={styles.tableBlock}>
+        <h3 className={styles.tableTitle}>Последние продажи</h3>
+        <Table
+          headers={["ID реферала", "Агент", "Сумма продажи", "Комиссия", "Дата", "Статус"]}
+          data={mockData.dashboard.recentSales}
+          renderRow={(sale: any, index: number) => (
+            <tr key={index}>
+              <td>{sale.id}</td>
+              <td>{sale.agent}</td>
+              <td>{formatCurrency(sale.amount)}</td>
+              <td>{formatCurrency(sale.commission)}</td>
+              <td>{sale.date}</td>
+              <td>
+                <span className={sale.status === "Выплачено" ? styles.statusPaid : styles.statusPending}>
+                  {sale.status}
+                </span>
+              </td>
+            </tr>
+          )}
         />
-        <ol>
-          <li>
-            Get started by editing <code>src/app/page.tsx</code>.
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.secondary}
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      </div> */}
     </div>
   );
 }