"use client"; import type React from "react"; import { expirationDates, formatCurrency, formatLargeNumber, formatNumber, formatPercent, generateOptionsChain, getChangeColor, OptionContract, } from "@/data/options-chain"; import { AnimatePresence, motion } from "framer-motion"; import { Activity, BarChart2, Clock, Eye, Info, RefreshCw, Search, TrendingDown, TrendingUp, } from "lucide-react"; import { useState } from "react"; const OptionsChainViewer = () => { const [symbol, setSymbol] = useState("AAPL"); const [stockPrice, setStockPrice] = useState(195.71); const [selectedExpiration, setSelectedExpiration] = useState( expirationDates[0]?.date || "", ); const [optionsChain, setOptionsChain] = useState( generateOptionsChain(stockPrice), ); const [view, setView] = useState<"basic" | "greeks">("basic"); const [showCalls, setShowCalls] = useState(true); const [showPuts, setShowPuts] = useState(true); const [showITM, setShowITM] = useState(true); const [showOTM, setShowOTM] = useState(true); const [searchSymbol, setSearchSymbol] = useState(symbol); const [isLoading, setIsLoading] = useState(false); // Filter options chain based on settings const filteredOptionsChain = optionsChain.filter((contract) => { if (!showITM && (contract.call.inTheMoney || contract.put.inTheMoney)) { return false; } if (!showOTM && (!contract.call.inTheMoney || !contract.put.inTheMoney)) { return false; } return true; }); // Handle refresh const handleRefresh = () => { setIsLoading(true); // Simulate API call setTimeout(() => { setOptionsChain(generateOptionsChain(stockPrice)); setIsLoading(false); console.log("Options chain refreshed"); }, 1000); }; // Handle expiration change const handleExpirationChange = (date: string) => { setSelectedExpiration(date); console.log("Selected expiration changed to:", date); // Simulate API call setIsLoading(true); setTimeout(() => { setOptionsChain(generateOptionsChain(stockPrice)); setIsLoading(false); }, 500); }; // Handle symbol change const handleSymbolChange = () => { if (searchSymbol.trim() === "") return; console.log("Symbol changed to:", searchSymbol); // Simulate API call setIsLoading(true); setTimeout(() => { setOptionsChain(generateOptionsChain(stockPrice)); setIsLoading(false); }, 500); }; // Handle symbol search form submit const handleSearchSubmit = (e: React.FormEvent) => { e.preventDefault(); handleSymbolChange(); }; return (

{/* Header */}

Options Chain Viewer

Analyze options contracts and strategies

Refresh

{/* Stock Info */}

{symbol}

Last Price: {formatCurrency(stockPrice)}

Selected Expiration:

{/* View Tabs */}

setView("basic")} > Basic View setView("greeks")} > Greeks View

{/* Options Chain Table */}

{isLoading ? (

Loading options data...

) : ( {showCalls && ( <> {view === "basic" && ( <> )} {view === "greeks" && ( <> )} )} {showPuts && ( <> {view === "basic" && ( <> )} {view === "greeks" && ( <> )} )} {filteredOptionsChain.map((contract) => ( {showCalls && ( <> {view === "basic" && ( <> )} {view === "greeks" && ( <> )} )} {showPuts && ( <> {view === "basic" && ( <> )} {view === "greeks" && ( <> )} )} ))}

Volume	Open Int	Bid	Ask	Last	Change	IV	Delta	Gamma	Theta	Vega	Strike	Last	Change	Bid	Ask	Open Int	Volume	IV	Delta	Gamma	Theta	Vega
{formatLargeNumber(contract.call.volume)}	{formatLargeNumber(contract.call.openInterest)}	{formatCurrency(contract.call.bid)}	{formatCurrency(contract.call.ask)}	{formatCurrency(contract.call.last)}	{formatPercent(contract.call.changePercent)}	{formatNumber( contract.call.impliedVolatility * 100, )} %	{formatNumber(contract.call.delta)}	{formatNumber(contract.call.gamma, 3)}	{formatNumber(contract.call.theta, 3)}	{formatNumber(contract.call.vega, 3)}	{formatCurrency(contract.strike).replace("$", "")}	{formatCurrency(contract.put.last)}	{formatPercent(contract.put.changePercent)}	{formatCurrency(contract.put.bid)}	{formatCurrency(contract.put.ask)}	{formatLargeNumber(contract.put.openInterest)}	{formatLargeNumber(contract.put.volume)}	{formatNumber( contract.put.impliedVolatility * 100, )} %	{formatNumber(contract.put.delta)}	{formatNumber(contract.put.gamma, 3)}	{formatNumber(contract.put.theta, 3)}	{formatNumber(contract.put.vega, 3)}

)}

{/* Footer */}

Last updated: {new Date().toLocaleTimeString()}

Data is delayed by 15 minutes

); }; export default OptionsChainViewer;