Merge pull request StabilityNexus#69 from khushal1512/main

feat(ui): implement core dashboard routes, navigation, and responsive token and metric card components

Author: KanishkSogani

.gitignore

@@ -23,13 +23,13 @@
 # misc
 .DS_Store
 *.pem
-
+.vscode/
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
-
+pnpm-lock.yaml
 # env files (can opt-in for committing if needed)
 .env*
 !.env.example

app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import DashboardMetrics from "@/components/dashboard/DashboardMetrics";
+import { TokenList } from "@/components/dashboard/TokenList";
+
+const historyTokens = [
+  {
+    tokenId: "0x123...abc",
+    name: "Vaccine Certificate",
+    type: "Health",
+    expiresIn: "3 years",
+    actionWalletId: "0xkhushal...512",
+    historyAction: "endorsed" as const,
+  },
+  {
+    tokenId: "0x456...def",
+    name: "University Degree",
+    type: "Education",
+    expiresIn: "Never",
+    actionWalletId: "0xadmin...001",
+    historyAction: "revoked" as const,
+  },
+  {
+    tokenId: "0x789...ghi",
+    name: "Employment Record",
+    type: "Work",
+    expiresIn: "10 years",
+    actionWalletId: "0xcompany...789",
+    historyAction: "flagged" as const,
+  },
+];
+
+const DashboardPage = () => {
+  return (
+    <div className="flex min-h-screen flex-col gap-8 bg-app-bg pb-12">
+      <DashboardMetrics
+        name="Khushal Agarwal"
+        age={20}
+        nationality="Indian"
+        walletAddress="0x9032345320958093280943r82"
+        endorsers={128}
+        lastUpdated="1 Day Ago"
+        trustScore={98}
+        trustFlags="None"
+        trustDescription="Your On-Chain Reputation is excellent"
+        totalEndorsements={70}
+        activeTokens={14}
+        socials={3}
+        badgesEarned="300+ Trust Received"
+      />
+
+      <div className="px-4 sm:px-6 md:pr-14 md:pl-10">
+        <TokenList variant="history" tokens={historyTokens} />
+      </div>
+    </div>
+  );
+};
+
+export default DashboardPage;

app/(dashboard)/discover/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { TokenList } from "@/components/dashboard/TokenList";
+
+const discoverTokens = [
+  {
+    tokenId: "0xabc123",
+    name: "Early Adopter",
+    type: "Achievement",
+    expiresIn: "Never",
+    endorsements: 156,
+  },
+  {
+    tokenId: "0xdef456",
+    name: "Verified Human",
+    type: "Identity",
+    expiresIn: "1 year",
+    endorsements: 89,
+  },
+  {
+    tokenId: "0xghi789",
+    name: "Alpha Tester",
+    type: "Access",
+    expiresIn: "6 months",
+    endorsements: 34,
+  },
+  {
+    tokenId: "0xjkl012",
+    name: "Governance Delegate",
+    type: "Role",
+    expiresIn: "2 years",
+    endorsements: 210,
+  },
+  {
+    tokenId: "0xmno345",
+    name: "Bug Bounty Hunter",
+    type: "Skill",
+    expiresIn: "Never",
+    endorsements: 12,
+  },
+];
+
+export default function DiscoverPage() {
+  return (
+    <main className="flex flex-col gap-6 px-4 pt-9 pb-12 sm:px-6 md:pr-14 md:pl-10">
+      <TokenList
+        variant="discover"
+        tokens={discoverTokens}
+        onEndorse={(id) => console.log("Endorsing token:", id)}
+        onRevoke={(id) => console.log("Revoking token:", id)}
+      />
+    </main>
+  );
+}

app/(dashboard)/home/page.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Metrics from "@/components/dashboard/Metrics";
+import { TokenList } from "@/components/dashboard/TokenList";
+
+// Sample token data — replace with real data from your API/contract using wagmi hooks
+const sampleTokens = [
+  {
+    tokenId: "0x1a2b3c",
+    name: "Vaccine",
+    type: "Oracle",
+    expiresIn: "5 years",
+    endorsements: 42,
+    historyAction: "endorsed" as const,
+    actionWalletId: "0xkhu...512",
+  },
+  {
+    tokenId: "0x4d5e6f",
+    name: "KYC Verified",
+    type: "Identity",
+    expiresIn: "2 years",
+    endorsements: 18,
+    historyAction: "flagged" as const,
+    actionWalletId: "0xmod...999",
+  },
+  {
+    tokenId: "0x7g8h9i",
+    name: "Education",
+    type: "Credential",
+    expiresIn: "10 years",
+    endorsements: 65,
+    historyAction: "revoked" as const,
+    actionWalletId: "0xuni...001",
+  },
+  {
+    tokenId: "0xj0k1l2",
+    name: "Employment",
+    type: "Attestation",
+    expiresIn: "1 year",
+    endorsements: 12,
+  },
+];
+
+export default function Home() {
+  return (
+    <main className="flex flex-col gap-6 px-4 pt-9 pb-12 sm:px-6 md:pr-14 md:pl-10">
+      <Metrics
+        totalEndorsements={70}
+        activeTokens={14}
+        socials={3}
+        badgesEarned="300+ Trust Received"
+      />
+
+      <TokenList variant="tokens" tokens={sampleTokens} />
+
+      <TokenList variant="history" tokens={sampleTokens.slice(0, 3)} />
+    </main>
+  );
+}

app/(dashboard)/layout.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { DashboardSidebar } from "@/components/layout/SideBar";
+import { DashboardNavbar } from "@/components/layout/NavBar";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex h-screen overflow-hidden bg-dashboard-bg">
+      {/* Sidebar */}
+      <div className="no-scrollbar h-full">
+        <DashboardSidebar />
+      </div>
+
+      {/* Main content area (navbar + page) */}
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        {/* Top navbar */}
+        <DashboardNavbar />
+
+        {/* Page content */}
+        <main className="no-scrollbar flex-1 overflow-y-auto bg-app-bg">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

app/token/page.tsx app/(dashboard)/settings/page.tsxapp/token/page.tsx renamed to app/(dashboard)/settings/page.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function PublicProfileLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    // You can add public-facing headers or footers here later if you want
+    <section className="min-h-screen bg-[#0a0a0a]">{children}</section>
+  );
+}

app/[username]/layout.tsx

@@ -0,0 +1,13 @@
+export default function UsernamePage({
+  params,
+}: {
+  params: { username: string };
+}) {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-app-bg">
+      <h1 className="font-utsaha text-2xl font-semibold text-white">
+        @{params.username}
+      </h1>
+    </main>
+  );
+}