Upload app.py with huggingface_hub

app.py

@@ -0,0 +1,615 @@
+=== 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' })
+}