=== Dockerfile ===
FROM node:18-alpine

WORKDIR /app

COPY package.json package-lock.json* ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

=== package.json ===
{
  "name": "fireant-clone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "lucide-react": "^0.330.0",
    "recharts": "^2.12.0",
    "clsx": "^2.1.0",
    "tailwind-merge": "^2.2.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.17",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3",
    "@types/node": "^20.11.17",
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19"
  }
}

=== next.config.js ===
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: 'standalone',
}

module.exports = nextConfig

=== postcss.config.js ===
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

=== tailwind.config.js ===
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        fireant: {
          bg: '#0b0e11',
          panel: '#15191e',
          border: '#2a2e39',
          green: '#00f4b0',
          red: '#ff3747',
          yellow: '#ffd600',
          text: '#d1d5db',
          textMuted: '#6b7280',
          accent: '#2962ff'
        }
      },
      fontSize: {
        xxs: '0.65rem',
      }
    },
  },
  plugins: [],
}

=== styles/globals.css ===
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 11, 14, 17;
  --background-end-rgb: 11, 14, 17;
}

body {
  color: rgb(var(--foreground-rgb));
  background: #0b0e11;
  overflow: hidden; /* App-like feel */
}

/* Custom Scrollbar for the dashboard feel */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #15191e; 
}

::-webkit-scrollbar-thumb {
  background: #2a2e39; 
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4b5563; 
}

.text-up { color: #00f4b0; }
.text-down { color: #ff3747; }
.text-ref { color: #ffd600; }

=== components/Sidebar.jsx ===
import React from 'react';
import { 
  LayoutDashboard, 
  LineChart, 
  Newspaper, 
  Settings, 
  User, 
  Bell, 
  Search,
  Briefcase,
  TrendingUp
} from 'lucide-react';

const Sidebar = () => {
  const navItems = [
    { icon: <LayoutDashboard size={20} />, label: 'Dashboard', active: true },
    { icon: <TrendingUp size={20} />, label: 'Market' },
    { icon: <Briefcase size={20} />, label: 'Portfolio' },
    { icon: <LineChart size={20} />, label: 'Technical' },
    { icon: <Newspaper size={20} />, label: 'News' },
    { icon: <Bell size={20} />, label: 'Alerts' },
  ];

  return (
    <div className="w-16 h-screen bg-fireant-panel border-r border-fireant-border flex flex-col items-center py-4 z-20">
      <div className="mb-6 text-fireant-accent font-bold text-xl">FA</div>
      
      <div className="flex-1 flex flex-col gap-2 w-full">
        {navItems.map((item, index) => (
          <button 
            key={index}
            className={`w-full h-12 flex items-center justify-center transition-colors relative group
              ${item.active 
                ? 'text-fireant-accent border-l-2 border-fireant-accent bg-fireant-bg' 
                : 'text-fireant-textMuted hover:text-white hover:bg-fireant-bg'}`}
          >
            {item.icon}
            {/* Tooltip */}
            <span className="absolute left-14 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
              {item.label}
            </span>
          </button>
        ))}
      </div>

      <div className="flex flex-col gap-4 mt-auto">
        <button className="text-fireant-textMuted hover:text-white p-2">
          <Settings size={20} />
        </button>
        <button className="text-fireant-textMuted hover:text-white p-2 mb-2">
          <User size={20} />
        </button>
      </div>
    </div>
  );
};

export default Sidebar;

=== components/Header.jsx ===
import React from 'react';
import { Search, Menu, Bell, Download } from 'lucide-react';

const Header = () => {
  return (
    <header className="h-12 bg-fireant-panel border-b border-fireant-border flex items-center px-4 justify-between shrink-0">
      <div className="flex items-center gap-4">
        <div className="relative">
          <Search className="absolute left-2 top-1.5 text-fireant-textMuted" size={16} />
          <input 
            type="text" 
            placeholder="Search symbol (e.g. VCB, FPT)..." 
            className="bg-fireant-bg border border-fireant-border rounded text-sm pl-8 pr-4 py-1 w-64 focus:outline-none focus:border-fireant-accent text-white placeholder-gray-600"
          />
        </div>
        
        <div className="hidden md:flex gap-4 text-xs font-medium">
          <div className="flex items-center gap-2">
            <span className="text-fireant-textMuted">VNINDEX</span>
            <span className="text-fireant-green">1,250.35</span>
            <span className="bg-fireant-green/10 text-fireant-green px-1 rounded">+12.5 (+1.01%)</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-fireant-textMuted">VN30</span>
            <span className="text-fireant-red">1,260.10</span>
            <span className="bg-fireant-red/10 text-fireant-red px-1 rounded">-2.1 (-0.15%)</span>
          </div>
        </div>
      </div>

      <div className="flex items-center gap-4">
        <a 
          href="https://huggingface.co/spaces/akhaliq/anycoder" 
          target="_blank" 
          rel="noreferrer"
          className="text-xs font-semibold text-fireant-accent hover:text-white transition-colors bg-fireant-accent/10 px-3 py-1 rounded-full border border-fireant-accent/20"
        >
          Built with anycoder
        </a>
        <button className="bg-fireant-accent text-white text-xs px-3 py-1.5 rounded hover:bg-blue-600 transition-colors font-medium hidden sm:block">
          Upgrade Pro
        </button>
        <Bell className="text-fireant-textMuted hover:text-white cursor-pointer" size={18} />
      </div>
    </header>
  );
};

export default Header;

=== components/ChartWidget.jsx ===
import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { time: '09:00', price: 85.2 },
  { time: '09:30', price: 85.8 },
  { time: '10:00', price: 86.1 },
  { time: '10:30', price: 85.9 },
  { time: '11:00', price: 86.5 },
  { time: '11:30', price: 86.8 },
  { time: '13:00', price: 87.2 },
  { time: '13:30', price: 87.0 },
  { time: '14:00', price: 87.5 },
  { time: '14:30', price: 87.9 },
];

const ChartWidget = ({ symbol = "FPT" }) => {
  return (
    <div className="flex flex-col h-full bg-fireant-panel rounded border border-fireant-border overflow-hidden">
      <div className="px-3 py-2 border-b border-fireant-border flex justify-between items-center bg-fireant-bg/50">
        <div className="flex items-center gap-2">
          <span className="font-bold text-white">{symbol}</span>
          <span className="text-xs text-fireant-textMuted">Daily Chart</span>
        </div>
        <div className="flex gap-1">
          {['1D', '1W', '1M', '3M', '1Y'].map(t => (
            <button key={t} className={`text-xs px-2 py-0.5 rounded ${t === '1D' ? 'bg-fireant-accent text-white' : 'text-fireant-textMuted hover:bg-fireant-border'}`}>
              {t}
            </button>
          ))}
        </div>
      </div>
      
      <div className="flex-1 w-full min-h-[200px] p-2">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={data}>
            <defs>
              <linearGradient id="colorPrice" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#00f4b0" stopOpacity={0.3}/>
                <stop offset="95%" stopColor="#00f4b0" stopOpacity={0}/>
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="#2a2e39" vertical={false} />
            <XAxis dataKey="time" stroke="#6b7280" fontSize={10} tickLine={false} axisLine={false} />
            <YAxis domain={['auto', 'auto']} stroke="#6b7280" fontSize={10} orientation="right" tickLine={false} axisLine={false} />
            <Tooltip 
              contentStyle={{ backgroundColor: '#15191e', borderColor: '#2a2e39', fontSize: '12px' }}
              itemStyle={{ color: '#00f4b0' }}
            />
            <Area type="monotone" dataKey="price" stroke="#00f4b0" fillOpacity={1} fill="url(#colorPrice)" strokeWidth={2} />
          </AreaChart>
        </ResponsiveContainer>
      </div>
      
      <div className="h-8 border-t border-fireant-border flex items-center px-3 gap-4 text-xs text-fireant-textMuted">
        <span>O: <span className="text-white">85.2</span></span>
        <span>H: <span className="text-fireant-green">87.9</span></span>
        <span>L: <span className="text-fireant-red">85.0</span></span>
        <span>C: <span className="text-white">87.9</span></span>
        <span>Vol: <span className="text-yellow-400">2.5M</span></span>
      </div>
    </div>
  );
};

export default ChartWidget;

=== components/Watchlist.jsx ===
import React, { useState, useEffect } from 'react';
import { MoreHorizontal, Plus } from 'lucide-react';

const initialStocks = [
  { symbol: 'VCB', ref: 89.5, price: 91.2, change: 1.7, pct: 1.9, vol: '1.2M' },
  { symbol: 'FPT', ref: 105.0, price: 106.5, change: 1.5, pct: 1.4, vol: '2.5M' },
  { symbol: 'HPG', ref: 28.0, price: 27.8, change: -0.2, pct: -0.7, vol: '15.4M' },
  { symbol: 'VNM', ref: 68.5, price: 68.5, change: 0, pct: 0, vol: '800K' },
  { symbol: 'TCB', ref: 35.2, price: 36.0, change: 0.8, pct: 2.2, vol: '5.1M' },
  { symbol: 'SSI', ref: 34.5, price: 35.1, change: 0.6, pct: 1.7, vol: '8.2M' },
  { symbol: 'MWG', ref: 45.0, price: 44.2, change: -0.8, pct: -1.7, vol: '3.4M' },
  { symbol: 'STB', ref: 30.1, price: 30.5, change: 0.4, pct: 1.3, vol: '12.1M' },
  { symbol: 'VPB', ref: 19.5, price: 19.6, change: 0.1, pct: 0.5, vol: '9.5M' },
  { symbol: 'MSN', ref: 65.0, price: 64.5, change: -0.5, pct: -0.7, vol: '1.1M' },
];

const Watchlist = () => {
  const [stocks, setStocks] = useState(initialStocks);

  // Simulate live data updates
  useEffect(() => {
    const interval = setInterval(() => {
      setStocks(current => current.map(stock => {
        if (Math.random() > 0.7) {
          const move = (Math.random() - 0.5) * 0.5;
          const newPrice = Number((stock.price + move).toFixed(2));
          const change = Number((newPrice - stock.ref).toFixed(2));
          const pct = Number(((change / stock.ref) * 100).toFixed(1));
          return { ...stock, price: newPrice, change, pct };
        }
        return stock;
      }));
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  const getColor = (val) => {
    if (val > 0) return 'text-fireant-green';
    if (val < 0) return 'text-fireant-red';
    return 'text-fireant-yellow';
  };

  return (
    <div className="flex flex-col h-full bg-fireant-panel rounded border border-fireant-border">
      <div className="px-3 py-2 border-b border-fireant-border flex justify-between items-center bg-fireant-bg/50">
        <span className="font-bold text-sm text-white">Watchlist VN30</span>
        <div className="flex gap-2">
          <button className="text-fireant-textMuted hover:text-white"><Plus size={16}/></button>
          <button className="text-fireant-textMuted hover:text-white"><MoreHorizontal size={16}/></button>
        </div>
      </div>
      
      <div className="flex-1 overflow-auto">
        <table className="w-full text-xs text-right">
          <thead className="bg-fireant-bg text-fireant-textMuted sticky top-0">
            <tr>
              <th className="text-left p-2">Symbol</th>
              <th className="p-2">Price</th>
              <th className="p-2">+/-</th>
              <th className="p-2">%</th>
              <th className="p-2">Vol</th>
            </tr>
          </thead>
          <tbody>
            {stocks.map((s) => (
              <tr key={s.symbol} className="border-b border-fireant-border/50 hover:bg-fireant-bg/50 cursor-pointer group">
                <td className={`text-left p-2 font-bold ${getColor(s.change)}`}>{s.symbol}</td>
                <td className={`p-2 ${getColor(s.change)}`}>{s.price.toFixed(2)}</td>
                <td className={`p-2 ${getColor(s.change)}`}>{s.change > 0 ? '+' : ''}{s.change.toFixed(2)}</td>
                <td className={`p-2 ${getColor(s.change)}`}>{s.pct > 0 ? '+' : ''}{s.pct}%</td>
                <td className="p-2 text-white">{s.vol}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Watchlist;

=== components/OrderBook.jsx ===
import React from 'react';

const OrderBook = () => {
  const bids = [
    { price: 87.8, vol: '10.5K', w: '80%' },
    { price: 87.7, vol: '5.2K', w: '40%' },
    { price: 87.6, vol: '15.1K', w: '90%' },
    { price: 87.5, vol: '20.0K', w: '100%' },
    { price: 87.4, vol: '3.5K', w: '20%' },
  ];

  const asks = [
    { price: 87.9, vol: '8.2K', w: '60%' },
    { price: 88.0, vol: '12.4K', w: '75%' },
    { price: 88.1, vol: '4.1K', w: '30%' },
    { price: 88.2, vol: '9.8K', w: '65%' },
    { price: 88.3, vol: '2.2K', w: '15%' },
  ];

  return (
    <div className="flex flex-col h-full bg-fireant-panel rounded border border-fireant-border">
      <div className="px-3 py-2 border-b border-fireant-border bg-fireant-bg/50">
        <span className="font-bold text-sm text-white">Order Book</span>
      </div>
      
      <div className="flex-1 flex flex-col text-xs overflow-hidden">
        {/* Asks (Sellers) - Red */}
        <div className="flex-1 flex flex-col-reverse overflow-hidden">
          {asks.map((a, i) => (
            <div key={i} className="flex relative hover:bg-fireant-bg/50 cursor-pointer py-0.5">
              <div className="absolute right-0 top-0 bottom-0 bg-fireant-red/10" style={{ width: a.w }}></div>
              <div className="flex-1 z-10 pl-2 text-fireant-textMuted">{a.vol}</div>
              <div className="flex-1 z-10 text-right pr-2 text-fireant-red">{a.price}</div>
            </div>
          ))}
        </div>
        
        <div className="h-8 border-y border-fireant-border flex items-center justify-between px-4 bg-fireant-bg">
           <span className="text-fireant-green font-bold text-lg">87.90</span>
           <span className="text-fireant-textMuted">Last Match</span>
        </div>

        {/* Bids (Buyers) - Green */}
        <div className="flex-1 overflow-hidden">
          {bids.map((b, i) => (
            <div key={i} className="flex relative hover:bg-fireant-bg/50 cursor-pointer py-0.5">
              <div className="absolute right-0 top-0 bottom-0 bg-fireant-green/10" style={{ width: b.w }}></div>
              <div className="flex-1 z-10 pl-2 text-fireant-textMuted">{b.vol}</div>
              <div className="flex-1 z-10 text-right pr-2 text-fireant-green">{b.price}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default OrderBook;

=== components/NewsWidget.jsx ===
import React from 'react';
import { ExternalLink } from 'lucide-react';

const news = [
  { id: 1, time: '14:30', title: 'VN-Index gains 12 points as banking stocks surge', source: 'CafeF' },
  { id: 2, time: '13:15', title: 'Foreign investors net sold 500 billion VND today', source: 'Vietstock' },
  { id: 3, time: '11:45', title: 'FPT reports 20% profit growth in Q1 2024', source: 'FireAnt' },
  { id: 4, time: '10:20', title: 'Oil prices stabilize amidst global tensions', source: 'Reuters' },
  { id: 5, time: '09:45', title: 'Morning brief: Market opens green, liquidity improves', source: 'VnEconomy' },
  { id: 6, time: '09:00', title: 'State Bank continues to manage exchange rate flexibly', source: 'SBV' },
];

const NewsWidget = () => {
  return (
    <div className="flex flex-col h-full bg-fireant-panel rounded border border-fireant-border">
      <div className="px-3 py-2 border-b border-fireant-border bg-fireant-bg/50 flex justify-between items-center">
        <span className="font-bold text-sm text-white">Latest News</span>
        <button className="text-xs text-fireant-accent hover:underline">View All</button>
      </div>
      
      <div className="flex-1 overflow-auto p-2">
        <div className="flex flex-col gap-3">
          {news.map((item) => (
            <div key={item.id} className="group cursor-pointer border-b border-fireant-border/30 pb-2 last:border-0">
              <div className="flex justify-between text-xs text-fireant-textMuted mb-1">
                <span>{item.time}</span>
                <span className="text-fireant-accent">{item.source}</span>
              </div>
              <h4 className="text-sm text-gray-300 group-hover:text-fireant-accent transition-colors line-clamp-2 leading-snug">
                {item.title}
              </h4>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default NewsWidget;

=== components/Layout.jsx ===
import React from 'react';
import Sidebar from './Sidebar';
import Header from './Header';

const Layout = ({ children }) => {
  return (
    <div className="flex h-screen w-screen bg-fireant-bg text-fireant-text overflow-hidden font-sans">
      <Sidebar />
      <div className="flex-1 flex flex-col min-w-0">
        <Header />
        <main className="flex-1 overflow-hidden p-2 relative">
          {children}
        </main>
      </div>
    </div>
  );
};

export default Layout;

=== pages/index.js ===
import React from 'react';
import Layout from '../components/Layout';
import Watchlist from '../components/Watchlist';
import ChartWidget from '../components/ChartWidget';
import OrderBook from '../components/OrderBook';
import NewsWidget from '../components/NewsWidget';

export default function Dashboard() {
  return (
    <Layout>
      {/* Main Grid Layout */}
      <div className="grid grid-cols-12 grid-rows-6 gap-2 h-full w-full">
        
        {/* Left Column: Watchlist (Takes 3 cols, full height) */}
        <div className="col-span-12 md:col-span-4 lg:col-span-3 row-span-3 md:row-span-6">
          <Watchlist />
        </div>

        {/* Middle Column: Chart & Order Book */}
        <div className="col-span-12 md:col-span-8 lg:col-span-6 row-span-6 flex flex-col gap-2">
          {/* Chart takes upper 2/3 */}
          <div className="flex-[2] min-h-0">
            <ChartWidget symbol="FPT" />
          </div>
          {/* Order Book takes lower 1/3 */}
          <div className="flex-1 min-h-0 grid grid-cols-2 gap-2">
             <OrderBook />
             {/* Another widget placeholder (e.g., Foreign Flow) */}
             <div className="bg-fireant-panel border border-fireant-border rounded p-3 flex flex-col">
                <div className="text-sm font-bold text-white mb-2 border-b border-fireant-border pb-2">Foreign Flow</div>
                <div className="flex-1 flex items-center justify-center text-fireant-textMuted text-xs">
                  <div className="text-center">
                    <div className="mb-1">Net Buy</div>
                    <div className="text-xl text-fireant-green font-bold">+45.2B</div>
                  </div>
                </div>
             </div>
          </div>
        </div>

        {/* Right Column: News & Events (Hidden on smaller tablets, visible on large screens) */}
        <div className="hidden lg:block lg:col-span-3 row-span-6 flex flex-col gap-2">
          <div className="flex-1 min-h-0">
            <NewsWidget />
          </div>
          <div className="h-1/3 bg-fireant-panel border border-fireant-border rounded p-3">
             <div className="text-sm font-bold text-white mb-2">Market Movers</div>
             <div className="space-y-2 text-xs">
                <div className="flex justify-between items-center">
                   <span>VCB</span>
                   <span className="text-fireant-green">+2.5%</span>
                </div>
                <div className="flex justify-between items-center">
                   <span>BID</span>
                   <span className="text-fireant-green">+1.8%</span>
                </div>
                <div className="flex justify-between items-center">
                   <span>VHM</span>
                   <span className="text-fireant-red">-1.2%</span>
                </div>
             </div>
          </div>
        </div>

      </div>
    </Layout>
  );
}

=== pages/_app.js ===
import '../styles/globals.css';
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>FireAnt Dashboard Clone</title>
        <meta name="description" content="Financial dashboard clone built with Next.js and Tailwind" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

=== pages/api/hello.js ===
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}