06 - Complete Demo Page

Assemble all components into a working demo (60 min)

---

Main Page Component

Create src/app/(core)/cad-cam-demo/page.tsx:

"use client";

import { useState, useCallback } from "react";
import { SensorData, DesignParams, MLPrediction } from "./utils/types";
import { calculateDesignParams } from "./utils/design-calculator";
import { mockMLPrediction } from "@/lib/cad/simulator";

// Components
import { SensorSimulator } from "./components/SensorSimulator";
import { ParameterPanel } from "./components/ParameterPanel";
import { DesignPreview } from "./components/DesignPreview";
import { Tank3DModel } from "./components/Tank3DModel";
import { GCodeViewer } from "./components/GCodeViewer";

export default function CADCAMDemoPage() {
  // State
  const [sensorData, setSensorData] = useState<SensorData | null>(null);
  const [designParams, setDesignParams] = useState<DesignParams | null>(null);
  const [mlPrediction, setMlPrediction] = useState<MLPrediction | null>(null);
  const [isRunning, setIsRunning] = useState(false);
  const [activeView, setActiveView] = useState<"2d" | "3d" | "gcode">("2d");

  // Handle sensor data update
  const handleSensorUpdate = useCallback((data: SensorData) => {
    setSensorData(data);

    // Get ML prediction (mock for hackathon)
    const prediction = mockMLPrediction(data);
    setMlPrediction(prediction);

    // Calculate design parameters from ML output
    const params = calculateDesignParams(data, prediction);
    setDesignParams(params);
  }, []);

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      {/* Header */}
      <div className="max-w-7xl mx-auto mb-6">
        <h1 className="text-3xl font-bold text-gray-900">CAD/CAM Integration Demo</h1>
        <p className="text-gray-600 mt-1">ML-driven design automation for water treatment equipment</p>
      </div>

      {/* Main Layout */}
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Column - Input */}
        <div className="space-y-6">
          {/* Controls */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <h3 className="text-lg font-semibold mb-4">Simulation Control</h3>
            <button
              onClick={() => setIsRunning(!isRunning)}
              className={`w-full py-3 rounded-lg text-white font-medium transition ${
                isRunning ? "bg-red-500 hover:bg-red-600" : "bg-green-500 hover:bg-green-600"
              }`}
            >
              {isRunning ? "⏹ Stop Simulation" : "▶ Start Simulation"}
            </button>

            {/* Status */}
            <div className="mt-4 flex items-center gap-2">
              <div className={`w-3 h-3 rounded-full ${isRunning ? "bg-green-500 animate-pulse" : "bg-gray-300"}`} />
              <span className="text-sm text-gray-600">{isRunning ? "Simulation Running" : "Simulation Stopped"}</span>
            </div>
          </div>

          {/* Sensor Simulator */}
          <SensorSimulator onDataUpdate={handleSensorUpdate} isRunning={isRunning} />

          {/* Parameters */}
          <ParameterPanel params={designParams} mlPrediction={mlPrediction} />
        </div>

        {/* Right Column - Output (2 cols) */}
        <div className="lg:col-span-2 space-y-6">
          {/* View Tabs */}
          <div className="bg-white rounded-xl shadow-md p-2 flex gap-2">
            {[
              { id: "2d", label: "2D Drawing", icon: "📐" },
              { id: "3d", label: "3D Model", icon: "🎲" },
              { id: "gcode", label: "G-code", icon: "⚙️" },
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveView(tab.id as any)}
                className={`flex-1 py-3 px-4 rounded-lg font-medium transition ${
                  activeView === tab.id ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                }`}
              >
                <span className="mr-2">{tab.icon}</span>
                {tab.label}
              </button>
            ))}
          </div>

          {/* View Content */}
          {activeView === "2d" && <DesignPreview params={designParams} />}
          {activeView === "3d" && <Tank3DModel params={designParams} />}
          {activeView === "gcode" && <GCodeViewer params={designParams} />}

          {/* Data Flow Diagram */}
          <div className="bg-white rounded-xl shadow-md p-6">
            <h3 className="text-lg font-semibold mb-4">Integration Flow</h3>
            <div className="flex items-center justify-between text-sm">
              <div className="text-center">
                <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto ${sensorData ? "bg-green-100" : "bg-gray-100"}`}>
                  📡
                </div>
                <div className="mt-2 font-medium">Sensors</div>
                <div className="text-xs text-gray-500">(Simulated)</div>
              </div>

              <div className="text-2xl text-gray-300">→</div>

              <div className="text-center">
                <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto ${mlPrediction ? "bg-blue-100" : "bg-gray-100"}`}>
                  🧠
                </div>
                <div className="mt-2 font-medium">ML Model</div>
                <div className="text-xs text-gray-500">Prediction</div>
              </div>

              <div className="text-2xl text-gray-300">→</div>

              <div className="text-center">
                <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto ${designParams ? "bg-purple-100" : "bg-gray-100"}`}>
                  📐
                </div>
                <div className="mt-2 font-medium">CAD</div>
                <div className="text-xs text-gray-500">Design Gen</div>
              </div>

              <div className="text-2xl text-gray-300">→</div>

              <div className="text-center">
                <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto ${designParams ? "bg-orange-100" : "bg-gray-100"}`}>
                  ⚙️
                </div>
                <div className="mt-2 font-medium">CAM</div>
                <div className="text-xs text-gray-500">G-code</div>
              </div>

              <div className="text-2xl text-gray-300">→</div>

              <div className="text-center">
                <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto">🏭</div>
                <div className="mt-2 font-medium">CNC</div>
                <div className="text-xs text-gray-500">(Simulated)</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div className="max-w-7xl mx-auto mt-8 text-center text-sm text-gray-500">
        <p>Edubotx × Neilsoft | Hackathon Demo</p>
        <p className="mt-1">All sensors and manufacturing are simulated for demonstration</p>
      </div>
    </div>
  );
}

---

Add Navigation Link

Update your sidebar/navigation to include the new page:

// In your navigation component, add:
{
  name: "CAD/CAM Demo",
  href: "/cad-cam-demo",
  icon: Factory, // from lucide-react
}

---

File Checklist

Make sure you have all these files:

src/app/(core)/cad-cam-demo/
├── page.tsx                    ✅ Main page
├── components/
│   ├── SensorSimulator.tsx     ✅ Sensor simulation
│   ├── ParameterPanel.tsx      ✅ Design params display
│   ├── DesignPreview.tsx       ✅ 2D SVG drawing
│   ├── Tank3DModel.tsx         ✅ 3D visualization
│   └── GCodeViewer.tsx         ✅ G-code simulator
└── utils/
    ├── types.ts                ✅ TypeScript types
    └── design-calculator.ts    ✅ ML → CAD logic

src/lib/cad/
└── simulator.ts                ✅ Sensor data generator

---

Run & Test

npm run dev

Then visit: http://localhost:3000/cad-cam-demo

---

Demo Script (For Hackathon)

1. Start simulation → Watch sensor values update
2. Show ML prediction → Class A/B/C based on water quality
3. View 2D drawing → SVG with dimensions, baffles, pipes
4. Switch to 3D → Interactive tank model with water
5. Show G-code → Play CNC simulation, watch toolpath
6. Explain flow → Sensors → ML → CAD → CAM → Manufacturing

---

Total Time: ~3.5 hours

Task	Time
Dependencies & setup	10 min
Types & calculator	15 min
Sensor simulator	30 min
Parameter panel	15 min
2D preview	45 min
3D model	45 min
G-code viewer	30 min
Main page assembly	30 min
Testing & polish	20 min
Total	~3.5 hrs

---

Summary

This hackathon demo shows:

• ✅ Sensor simulation (no real hardware needed)
• ✅ ML integration (mock or real API)
• ✅ Design automation (ML → CAD parameters)
• ✅ 2D CAD preview (SVG export)
• ✅ 3D visualization (Three.js)
• ✅ G-code generation (CNC simulation)

All running in Next.js with minimal dependencies!