feat: Initial admin dashboard setup with Next.js

admin-dashboard/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

admin-dashboard/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

admin-dashboard/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

admin-dashboard/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

admin-dashboard/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "admin-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "next": "15.3.2"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@tailwindcss/postcss": "^4",
+    "tailwindcss": "^4",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.2",
+    "@eslint/eslintrc": "^3"
+  }
+}

admin-dashboard/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

admin-dashboard/src/app/api/products/[id]/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { Product, products } from '../db'; // Import from db.ts at the parent level
+
+interface Params {
+  id: string;
+}
+
+// GET /api/products/[id] - Get a single product
+export async function GET(request: NextRequest, context: { params: Params }) {
+  const { id } = context.params;
+  const product = products.find(p => p.id === id);
+
+  if (!product) {
+    return NextResponse.json({ error: 'Product not found' }, { status: 404 });
+  }
+  return NextResponse.json(product);
+}
+
+// PUT /api/products/[id] - Update a product
+export async function PUT(request: NextRequest, context: { params: Params }) {
+  const { id } = context.params;
+  try {
+    const body = await request.json();
+    const { name, price } = body;
+
+    if (!name || typeof price !== 'number') {
+      return NextResponse.json({ error: 'Name and price are required' }, { status: 400 });
+    }
+
+    const productIndex = products.findIndex(p => p.id === id);
+    if (productIndex === -1) {
+      return NextResponse.json({ error: 'Product not found' }, { status: 404 });
+    }
+
+    const updatedProduct: Product = { ...products[productIndex], name, price };
+    products[productIndex] = updatedProduct;
+    return NextResponse.json(updatedProduct);
+  } catch (error) {
+    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+  }
+}
+
+// DELETE /api/products/[id] - Delete a product
+export async function DELETE(request: NextRequest, context: { params: Params }) {
+  const { id } = context.params;
+  const productIndex = products.findIndex(p => p.id === id);
+
+  if (productIndex === -1) {
+    return NextResponse.json({ error: 'Product not found' }, { status: 404 });
+  }
+
+  products.splice(productIndex, 1);
+  return NextResponse.json({ message: 'Product deleted successfully' });
+}

admin-dashboard/src/app/api/products/db.ts

@@ -0,0 +1,11 @@
+export interface Product {
+  id: string;
+  name: string;
+  price: number;
+}
+
+// In-memory store for products
+export let products: Product[] = [
+  { id: '1', name: 'Product A', price: 100 },
+  { id: '2', name: 'Product B', price: 200 },
+];

admin-dashboard/src/app/api/products/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { Product, products } from './db'; // Import from db.ts
+
+// GET /api/products - List all products
+export async function GET(request: NextRequest) {
+  return NextResponse.json(products);
+}
+
+// POST /api/products - Create a new product
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { name, price } = body;
+
+    if (!name || typeof price !== 'number') {
+      return NextResponse.json({ error: 'Name and price are required' }, { status: 400 });
+    }
+
+    const newProduct: Product = {
+      id: String(products.length + 1), // Simple ID generation (consider a more robust solution for real apps)
+      name,
+      price,
+    };
+    products.push(newProduct);
+    return NextResponse.json(newProduct, { status: 201 });
+  } catch (error) {
+    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+  }
+}

admin-dashboard/src/app/components/Layout.tsx

@@ -0,0 +1,54 @@
+'use client'; // Required for usePathname
+
+import Link from 'next/link';
+import React from 'react';
+import { usePathname } from 'next/navigation'; // For active link highlighting
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const pathname = usePathname();
+
+  const navLinkClasses = (path: string) => {
+    const isActive = pathname === path;
+    return `block py-2 px-3 rounded-md text-base font-medium transition-colors duration-150 ease-in-out
+            ${isActive 
+              ? 'bg-gray-900 text-white' 
+              : 'text-gray-300 hover:bg-gray-700 hover:text-white'
+            }`;
+  };
+
+  return (
+    <div className="flex h-screen bg-gray-100">
+      {/* Sidebar */}
+      <aside className="w-64 bg-gray-800 text-white flex flex-col shadow-lg">
+        <div className="p-4 border-b border-gray-700">
+          <h1 className="text-2xl font-semibold text-white">Admin Panel</h1>
+        </div>
+        <nav className="flex-grow p-4 space-y-2">
+          <Link href="/dashboard" className={navLinkClasses('/dashboard')}>
+            Dashboard
+          </Link>
+          <Link href="/users" className={navLinkClasses('/users')}>
+            Users
+          </Link>
+          <Link href="/products" className={navLinkClasses('/products')}>
+            Products
+          </Link>
+          <Link href="/settings" className={navLinkClasses('/settings')}>
+            Settings
+          </Link>
+        </nav>
+      </aside>
+
+      {/* Main Content Area */}
+      <main className="flex-1 p-6 overflow-y-auto bg-gray-50"> {/* Added subtle bg color */}
+        {children}
+      </main>
+    </div>
+  );
+};
+
+export default Layout;