From 8de173121c78516d8c6683baf878bdd3892f3cd6 Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Tue, 9 Apr 2024 04:36:56 +0000
Subject: [PATCH 01/13] added the call option price calculation

---
 src/components/mystocks.tsx           |   5 +-
 src/components/stock-options-view.tsx | 123 ++++++++++++++++----------
 2 files changed, 77 insertions(+), 51 deletions(-)

diff --git a/src/components/mystocks.tsx b/src/components/mystocks.tsx
index 9ab91ce..61254e2 100644
--- a/src/components/mystocks.tsx
+++ b/src/components/mystocks.tsx
@@ -1,16 +1,13 @@
 'use client';
 import * as React from 'react';
-import { RemoveItemFromMyList, SearchTickerItem, useMyStockList } from '../lib/socket';
+import { SearchTickerItem } from '../lib/socket';
 import DeleteIcon from '@mui/icons-material/Delete';
 import InfoIcon from '@mui/icons-material/Info';
 import { DataGrid, GridActionsCellItem, GridColDef, useGridApiRef } from '@mui/x-data-grid';
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
 import { useState } from 'react';
-import { StockOptionsView } from './stock-options-view';
 import { StockTickerView } from './stock-ticker';
 import AddTradeIcon from '@mui/icons-material/Add';
 import { AddTradeDialog } from './add-trade';
-import Link from 'next/link';
 import { GridLinkAction } from './GridLinkAction';
 
 
diff --git a/src/components/stock-options-view.tsx b/src/components/stock-options-view.tsx
index b3ab60e..e1fc724 100644
--- a/src/components/stock-options-view.tsx
+++ b/src/components/stock-options-view.tsx
@@ -13,7 +13,7 @@ interface ITickerProps {
 }
 
 type NumberRange = { start: number, end: number }
-type IStrikePriceSliderPorps = { allStrikePricesValues: number[], onChange: (v: NumberRange) => void }
+type IStrikePriceSliderPorps = { allStrikePricesValues: number[], onChange: (v: NumberRange) => void, currentPrice: number }
 
 const StrikePriceSlider = (props: IStrikePriceSliderPorps) => {
     const { allStrikePricesValues, onChange } = props;
@@ -29,17 +29,35 @@ const StrikePriceSlider = (props: IStrikePriceSliderPorps) => {
         });
     };
 
+    //todoo
+    // function calculateValue(value: number) {
+    //     return 2 ** value;
+    // }
+
+/*
+
+                    144
+
+        0                       200
+          20 70   120   160 180  
+
+
+
+*/
+
     return <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
-        <span>Strike Price Range:</span>
+        <span>Strike Price Range: {strikePriceRange[0]} - {strikePriceRange[1]}</span>
+
         <Slider
             getAriaLabel={() => 'Temperature range'}
             value={strikePriceRange}
             onChange={handleChange}
-            valueLabelDisplay="on"
+            //valueLabelDisplay="on"
             min={minStrikePrice}
             max={maxStrikePrice}
             marks={strikePriceMarks}
             step={null}
+            // scale={calculateValue}
         //getAriaValueText={valuetext}
         />
     </Stack>
@@ -71,7 +89,6 @@ export const StockOptionsView = (props: ITickerProps) => {
     })).filter(n => n.value >= strikePriceRange.start && n.value <= strikePriceRange.end);
 
     workingStrikePrices.sort(function (a, b) { return a.value - b.value; }).forEach(s => {
-
         columns.push({
             field: s.strikePrice,
             width: 10, headerName: `${parseFloat(s.strikePrice)}`,
@@ -101,11 +118,25 @@ export const StockOptionsView = (props: ITickerProps) => {
             o[s.strikePrice] = price && (() => {
                 switch (valueMode) {
                     case 'TOTAL_RETURN':
-                        return (data.currentPrice > s.value ? price : (price - (s.value - data.currentPrice))) / s.value;
+                        /*
+                        135
+                            138 --> 1.10
+
+                        */
+                        if (putCallTabValue == 'PUT') {
+                            return (data.currentPrice > s.value ? price : (price - (s.value - data.currentPrice))) / s.value;
+                        } else {
+                            return (price / data.currentPrice);
+                        }
                     case 'ANNUAL_RETURN':
-                        const sellCost = (data.currentPrice > s.value ? price : (price - (s.value - data.currentPrice)));
-                        const risk = s.value;
-                        return (sellCost / risk) * (365 / numberofdays);
+                        if (putCallTabValue == 'PUT') {
+                            const sellCost = (data.currentPrice > s.value ? price : (price - (s.value - data.currentPrice)));
+                            const risk = s.value;
+                            return (sellCost / risk) * (365 / numberofdays);
+                        } else {
+                            const sellCost = (data.currentPrice < s.value ? price : (price - (data.currentPrice - s.value)));
+                            return (sellCost / data.currentPrice) * (365 / numberofdays);
+                        }
                     default:
                         return price
                 }
@@ -120,7 +151,7 @@ export const StockOptionsView = (props: ITickerProps) => {
             <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
             <BootstrapInput id="demo-customized-textbox" />
         </FormControl> */}
-        <StrikePriceSlider allStrikePricesValues={allStrikePricesValues} onChange={setStrikePriceRange} />
+        <StrikePriceSlider currentPrice={data.currentPrice} allStrikePricesValues={allStrikePricesValues} onChange={setStrikePriceRange} />
         <FormControl sx={{ m: 1 }} variant="standard">
             <InputLabel>Price Mode</InputLabel>
             <Select value={priceMode} onChange={(e, v) => setPriceMode(e.target.value as PriceModeType)}            >
@@ -145,44 +176,42 @@ export const StockOptionsView = (props: ITickerProps) => {
             </Tabs>
         </Box>
         {
-            putCallTabValue == 'PUT' ?
-                <DataGrid rows={traderows}
-                    disableColumnMenu={true}
-                    disableColumnFilter={true}
-                    disableColumnSorting={true}
-                    columns={columns}
-                    density="compact"
-                    // disableRowSelectionOnClick
-                    columnHeaderHeight={32}
-                    rowHeight={32}
-                    hideFooter={true}
-                    showColumnVerticalBorder={true}
-                    showCellVerticalBorder={true}
-                    sx={{
-                        [`& .${gridClasses.cell}:focus, & .${gridClasses.cell}:focus-within`]: {
-                            outline: 'none',
-                        },
-                        [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.columnHeader}:focus-within`]:
-                        {
-                            outline: 'none',
-                        },
-                        [`& .${gridClasses.columnHeader}`]:
-                        {
-                            fontSize: '0.7rem',
-                            fontWeight: 500
-                        },
-                        [`& .${gridClasses.cell}`]:
-                        {
-                            fontSize: '0.7rem',
-                            padding: 0
-                        },
-                    }}
-                // style={{
-                //     // fontSize: '12px'
-                // }}
-                // apiRef={apiRef} 
-                />
-                : <div>UNDER DEVELOPMENT... CHECK AFTER FEW DAYS!!!</div>
+            <DataGrid rows={traderows}
+                disableColumnMenu={true}
+                disableColumnFilter={true}
+                disableColumnSorting={true}
+                columns={columns}
+                density="compact"
+                // disableRowSelectionOnClick
+                columnHeaderHeight={32}
+                rowHeight={32}
+                hideFooter={true}
+                showColumnVerticalBorder={true}
+                showCellVerticalBorder={true}
+                sx={{
+                    [`& .${gridClasses.cell}:focus, & .${gridClasses.cell}:focus-within`]: {
+                        outline: 'none',
+                    },
+                    [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.columnHeader}:focus-within`]:
+                    {
+                        outline: 'none',
+                    },
+                    [`& .${gridClasses.columnHeader}`]:
+                    {
+                        fontSize: '0.7rem',
+                        fontWeight: 500
+                    },
+                    [`& .${gridClasses.cell}`]:
+                    {
+                        fontSize: '0.7rem',
+                        padding: 0
+                    },
+                }}
+            // style={{
+            //     // fontSize: '12px'
+            // }}
+            // apiRef={apiRef} 
+            />
         }
         {/* <DataGrid rows={d1}
             columns={columns}

From 1b118aca803713a2d5bcab05ac87c5dae14a986b Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Tue, 9 Apr 2024 08:31:41 -0400
Subject: [PATCH 02/13] Update stock-options-view.tsx

---
 src/components/stock-options-view.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/stock-options-view.tsx b/src/components/stock-options-view.tsx
index e1fc724..91c9390 100644
--- a/src/components/stock-options-view.tsx
+++ b/src/components/stock-options-view.tsx
@@ -46,7 +46,7 @@ const StrikePriceSlider = (props: IStrikePriceSliderPorps) => {
 */
 
     return <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
-        <span>Strike Price Range: {strikePriceRange[0]} - {strikePriceRange[1]}</span>
+        <div>Strike Price Range: {strikePriceRange[0]} - {strikePriceRange[1]}</div>
 
         <Slider
             getAriaLabel={() => 'Temperature range'}
@@ -218,4 +218,4 @@ export const StockOptionsView = (props: ITickerProps) => {
             sx={{ display: 'grid' }}
             getRowId={(r) => `${r.symbol} - ${r.name}`} /> */}
     </Paper>
-}
\ No newline at end of file
+}

From 18bfbc840590641159c548e191d6510ef69356f3 Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Wed, 10 Apr 2024 01:18:59 +0000
Subject: [PATCH 03/13] show call sell option prices

---
 src/app/api/symbols/search/route.ts   | 13 ++++++++
 src/components/stock-options-view.tsx |  2 +-
 src/components/trades.tsx             | 47 +++++++++++++++------------
 src/lib/useTrades.ts                  | 20 +++++++-----
 4 files changed, 51 insertions(+), 31 deletions(-)
 create mode 100644 src/app/api/symbols/search/route.ts

diff --git a/src/app/api/symbols/search/route.ts b/src/app/api/symbols/search/route.ts
new file mode 100644
index 0000000..e0ab0c6
--- /dev/null
+++ b/src/app/api/symbols/search/route.ts
@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from "next/server";
+import yf from 'yahoo-finance2';
+
+export async function GET(request: NextRequest, p: { params: { symbol: string } }) {
+    const q = request.nextUrl.searchParams.get('q');
+    if (!q) return NextResponse.json({ 'error': 'q parameter is not provided in the request.' }, {
+        status: 400
+    });
+    const resp = await yf.search(q);
+    return NextResponse.json({
+        items: resp
+    });
+}
\ No newline at end of file
diff --git a/src/components/stock-options-view.tsx b/src/components/stock-options-view.tsx
index 91c9390..b5eec83 100644
--- a/src/components/stock-options-view.tsx
+++ b/src/components/stock-options-view.tsx
@@ -49,7 +49,7 @@ const StrikePriceSlider = (props: IStrikePriceSliderPorps) => {
         <div>Strike Price Range: {strikePriceRange[0]} - {strikePriceRange[1]}</div>
 
         <Slider
-            getAriaLabel={() => 'Temperature range'}
+            getAriaLabel={() => 'Strike price'}
             value={strikePriceRange}
             onChange={handleChange}
             //valueLabelDisplay="on"
diff --git a/src/components/trades.tsx b/src/components/trades.tsx
index ed5cc8b..81d8b49 100644
--- a/src/components/trades.tsx
+++ b/src/components/trades.tsx
@@ -1,18 +1,13 @@
 'use client';
-import { GridColDef, GridActionsCellItem, DataGrid, useGridApiRef, gridClasses, GridCellParams } from "@mui/x-data-grid";
-import { Trade } from "@prisma/client";
-import ky from "ky";
-import { useState, useEffect } from "react";
+import { GridColDef, GridActionsCellItem, DataGrid, useGridApiRef, gridClasses } from "@mui/x-data-grid";
+import { useState } from "react";
 import DeleteIcon from '@mui/icons-material/Delete';
 import CloseIcon from '@mui/icons-material/Close';
 import dayjs from 'dayjs';
 import { CloseTradeCloseDialogReason, CloseTradeDialog } from "./close-trade";
 import { ConfirmDialog } from "./confirm-dialog";
-import { useShowCloseTrades } from "@/lib/hooks";
-import { Box, FormControlLabel, Switch, Typography } from "@mui/material";
+import { FormControlLabel, Switch } from "@mui/material";
 
-import { red, green } from '@mui/material/colors';
-import { getColor } from "@/lib/color";
 import { ConditionalFormattingBox } from "./conditional-formatting";
 import { useTrades } from "@/lib/useTrades";
 import { percentageFormatter } from "@/lib/formatters";
@@ -21,6 +16,14 @@ import { ITradeView } from "@/lib/types";
 const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format;
 const fixedCurrencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format;
 const dateFormatter = (v: string) => v && dayjs(v.substring(0, 10)).format('DD/MM/YYYY');   //to avoid utc conversion strip the time part
+const shortDateFormatter = (v: string) => v && dayjs(v.substring(0, 10)).format('DD/MM/YYYY');   //to avoid utc conversion strip the time part
+
+const TickerName = (p: { trade: ITradeView }) => {
+    const { trade } = p;
+
+    return <div>{trade.symbol} {trade.strikePrice as unknown as string} {shortDateFormatter(trade.contractExpiry as unknown as string)} x {trade.numberOfContracts}</div>
+
+}
 
 export const TradeList = () => {
     const { trades, deleteTrade, reloadTrade } = useTrades();
@@ -43,15 +46,18 @@ export const TradeList = () => {
     }
 
     const columns: GridColDef<ITradeView>[] = [
-        { field: 'transactionStartDate', width: 90, headerName: 'Start', valueFormatter: dateFormatter },
-        { field: 'transactionEndDate', width: 90, headerName: 'End', valueFormatter: dateFormatter },
-        { field: 'contractExpiry', width: 90, headerName: 'Expiry', valueFormatter: dateFormatter },
-        { field: 'contractType', width: 90, headerName: 'Type', },
-        { field: 'symbol', width: 60, headerName: 'Ticker', },
+        { field: 'Ticker', minWidth: 150, flex: 1, headerName: 'Contract', renderCell: (p) => <TickerName trade={p.row} /> },
+        // { field: 'transactionStartDate', width: 90, headerName: 'Start', valueFormatter: dateFormatter },
+        // { field: 'transactionEndDate', width: 90, headerName: 'End', valueFormatter: dateFormatter },
+        // { field: 'contractExpiry', width: 90, headerName: 'Expiry', valueFormatter: dateFormatter },
+        { field: 'contractType', width: 70, headerName: 'Type', },
+        // { field: 'symbol', width: 60, headerName: 'Ticker', },
+
         // { field: 'isClosed', headerName: 'Cleared', type: 'boolean' },
-        { field: 'strikePrice', width: 90, headerName: 'Strike Price', type: 'number', valueFormatter: currencyFormatter },
-        { field: 'numberOfContracts', width: 60, sortable: false, filterable: false, hideable: false, headerName: 'Size', type: 'number' },
+        // { field: 'strikePrice', width: 90, headerName: 'Strike Price', type: 'number', valueFormatter: currencyFormatter },
+        // { field: 'numberOfContracts', width: 60, sortable: false, filterable: false, hideable: false, headerName: 'Size', type: 'number' },
         { field: 'contractPrice', width: 60, headerName: 'Price', type: 'number', valueFormatter: currencyFormatter },
+        { field: 'lastContractPrice', width: 60, headerName: 'Price', type: 'number', valueFormatter: currencyFormatter },
         { field: 'buyCost', width: 70, headerName: 'Buy Cost', type: 'number', valueFormatter: fixedCurrencyFormatter },
         { field: 'sellCost', width: 70, headerName: 'Sell Cost', type: 'number', valueFormatter: fixedCurrencyFormatter },
         {
@@ -75,11 +81,10 @@ export const TradeList = () => {
             renderCell: (p) => <ConditionalFormattingBox value={p.value} formattedValue={p.formattedValue} />
         },
         {
-            field: 'maxReturn', width: 120, headerName: 'Max Profit%', type: 'number', valueFormatter: percentageFormatter,
+            field: 'maxReturn', width: 120, headerName: 'Max Profit%', type: 'number',
             renderCell: (p) => {
-                return <span>
-                    {percentageFormatter(p.row.maxReturn)}/{percentageFormatter(p.row.maxAnnualizedReturn)}
-                </span>
+                const fmValue = percentageFormatter(p.row.maxReturn) + '/' + percentageFormatter(p.row.maxAnnualizedReturn);
+                return <ConditionalFormattingBox value={p.row.maxAnnualizedReturn * 1000} formattedValue={fmValue} />
             }
         },
         // { field: 'maxAnnualizedReturn', headerName: 'Max Annualized%', type: 'number', valueFormatter: percentageFormatter },
@@ -113,8 +118,8 @@ export const TradeList = () => {
             }
         }
     ];
-    const handleCloseCloseTrade = (reason: CloseTradeCloseDialogReason) => {        
-        if(currentTrade) {
+    const handleCloseCloseTrade = (reason: CloseTradeCloseDialogReason) => {
+        if (currentTrade) {
             const closedTradeId = currentTrade.id;
             setOpenCloseTrade(false);
             setCurrentTrade(null);
diff --git a/src/lib/useTrades.ts b/src/lib/useTrades.ts
index 4453dbd..1d25f66 100644
--- a/src/lib/useTrades.ts
+++ b/src/lib/useTrades.ts
@@ -5,21 +5,24 @@ import ky from "ky";
 import { useCallback, useEffect, useState } from "react";
 import { ITradeView } from "./types";
 
+const SellContracts = ['PUT_SELL', 'CALL_SELL'];
+
 const mapTradeToView = (trade: Trade): ITradeView => {
-    const sellCost = trade.contractType == 'PUT_SELL' ? (Number(trade.contractPrice) * 100 * trade.numberOfContracts) : 0;
-    const buyCost = (trade.contractType == 'PUT_SELL' && trade.contractPriceAtClose) ? (Number(trade.contractPriceAtClose) * 100 * trade.numberOfContracts) : NaN;
-    const maximumRisk = trade.contractType == 'PUT_SELL' ? (Number(trade.strikePrice) * 100 * trade.numberOfContracts) : 0;
-    const maximumProfit = trade.contractType == 'PUT_SELL' ? (Number(trade.contractPrice) * 100 * trade.numberOfContracts) : 0;
+    const isSellContract = SellContracts.includes(trade.contractType);
+    const sellCost = isSellContract ? (Number(trade.contractPrice) * 100 * trade.numberOfContracts) : 0;
+    const buyCost = (isSellContract && trade.contractPriceAtClose) ? (Number(trade.contractPriceAtClose) * 100 * trade.numberOfContracts) : NaN;
+    const maximumRisk = isSellContract ? (Number(trade.strikePrice) * 100 * trade.numberOfContracts) : 0;
+    const maximumProfit = isSellContract ? (Number(trade.contractPrice) * 100 * trade.numberOfContracts) : 0;
     const isClosed = trade.transactionEndDate ? true : false;
 
     // const tradeDaysAsOfToday = dayjs(trade.contractExpiry).diff(dayjs(), 'days') + 1;
-    const estimatedBuyCost = (trade.contractType == 'PUT_SELL' && trade.lastContractPrice) ? (Number(trade.lastContractPrice) * 100 * trade.numberOfContracts) : NaN;
+    const estimatedBuyCost = (isSellContract && trade.lastContractPrice) ? (Number(trade.lastContractPrice) * 100 * trade.numberOfContracts) : NaN;
     // const estimatedProfitAsOfToday = (trade.contractType == 'PUT_SELL' && !isClosed) ? (sellCost - buyCost) : NaN;
 
     const tradeDays = dayjs(trade.contractExpiry).diff(trade.transactionStartDate, 'days') + 1;
     const actualTradeDays = dayjs(trade.transactionEndDate || dayjs()).diff(trade.transactionStartDate, 'days') + 1;
-    const averageProfitPerDay = trade.contractType == 'PUT_SELL' ? maximumProfit / (tradeDays) : 0;
-    const actualProfit = (trade.contractType == 'PUT_SELL') ? (sellCost - (isClosed ? buyCost : estimatedBuyCost)) : NaN;
+    const averageProfitPerDay = isSellContract ? maximumProfit / (tradeDays) : 0;
+    const actualProfit = isSellContract ? (sellCost - (isClosed ? buyCost : estimatedBuyCost)) : NaN;
     const maxReturn = trade.strikePrice ? maximumProfit / (Number(trade.strikePrice) * trade.numberOfContracts * 100) : 0;
     const maxAnnualizedReturn = (sellCost / maximumRisk) * (365 / tradeDays);
     const actualAnnualizedReturn = (actualProfit / maximumRisk) * (365 / actualTradeDays);
@@ -67,5 +70,4 @@ export const useTrades = () => {
         }
     }, [trades]);
     return { trades, deleteTrade, reloadTrade };
-};
-
+};
\ No newline at end of file

From 6a47dd0202a508376bd6d0099831e5ff1473821a Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Wed, 10 Apr 2024 01:46:44 +0000
Subject: [PATCH 04/13] ui fix for close trade popup

---
 src/components/close-trade.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/close-trade.tsx b/src/components/close-trade.tsx
index 68b240e..a17659d 100644
--- a/src/components/close-trade.tsx
+++ b/src/components/close-trade.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Stack, InputAdornment } from '@mui/material';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Stack, InputAdornment, Typography, Grid } from '@mui/material';
 import { DatePickerElement, FormContainer, TextFieldElement, TextareaAutosizeElement } from 'react-hook-form-mui';
 
 export type CloseTradeCloseDialogReason = 'cancel' | 'close'
@@ -20,6 +20,7 @@ import { Trade } from '@prisma/client';
 export const CloseTradeDialog = (props: ITickerProps) => {
     const { onClose, open, tradeId } = props;
     const [trade, setTrade] = useState<Trade | null>(null);
+    const [p1, setp1 ] = useState(0);
 
     useEffect(() => {
         ky(`/api/trades/${tradeId}`).json<Trade>().then(j => setTrade(j));
@@ -47,7 +48,8 @@ export const CloseTradeDialog = (props: ITickerProps) => {
         contractPriceAtOpen: trade.contractPrice,
         tradeId: tradeId,
         notes: trade.notes,
-        transactionEndDate: dayjs()
+        transactionEndDate: dayjs(),
+        transactionStartDate: dayjs(trade.transactionStartDate).format('MM/DD/YYYY')
     }
 
     return <Dialog
@@ -60,10 +62,23 @@ export const CloseTradeDialog = (props: ITickerProps) => {
             <DialogContent dividers={true}>
                 <Stack spacing={2}  >
                     <LocalizationProvider dateAdapter={AdapterDayjs}>
-                        <TextFieldElement name={'tradeId'} label={'Trade Id'} required disabled />
-                        <TextFieldElement name={'symbol'} label={'Symbol'} required disabled />
-                        <TextFieldElement name={'contractPriceAtOpen'} label={'Contract Price at Open'} disabled required
-                            InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }} />
+                        {/* <Typography variant='h6'>{dv.symbol} ${dv.contractPriceAtOpen as unknown as string} - Purchased on {dv.transactionStartDate}</Typography> */}
+                        <Grid container >
+                            <Grid item xs={3}>
+                                <TextFieldElement name={'tradeId'} label={'Trade Id'} required disabled />
+                            </Grid>
+                            <Grid item xs={3}>
+                                <TextFieldElement name={'symbol'} label={'Symbol'} required disabled />
+                            </Grid>
+                            <Grid item xs={3}>
+                                <TextFieldElement name={'contractPriceAtOpen'} label={'Contract Price at Open'} disabled required
+                                    InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }} />
+                            </Grid>
+                            <Grid item xs={3}>
+                                <TextFieldElement name={'transactionStartDate'} label={'Purchase date'} disabled />
+                            </Grid>
+                        </Grid>
+
                         <DatePickerElement label="Transaction End Date" name="transactionEndDate" required disableFuture={true} disablePast={false} />
                         <TextFieldElement name={'contractPriceAtClose'} label={'Contract Price at close'} required
                             InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }} />

From dbee9a53c277d4e9a1933fb36d87787884f79ca8 Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Fri, 12 Apr 2024 02:53:03 +0000
Subject: [PATCH 05/13] show estimated price at trade close popup

---
 src/components/TickerName.tsx  |  9 ++++
 src/components/close-trade.tsx | 75 +++++++++++++++++++++++++---------
 src/components/trades.tsx      | 14 ++-----
 src/lib/formatters.ts          |  4 +-
 src/lib/useTrades.ts           |  2 +-
 5 files changed, 71 insertions(+), 33 deletions(-)
 create mode 100644 src/components/TickerName.tsx

diff --git a/src/components/TickerName.tsx b/src/components/TickerName.tsx
new file mode 100644
index 0000000..11d0103
--- /dev/null
+++ b/src/components/TickerName.tsx
@@ -0,0 +1,9 @@
+'use client';
+import { ITradeView } from "@/lib/types";
+import { shortDateFormatter } from "./trades";
+
+
+export const TickerName = (p: { trade: ITradeView; }) => {
+    const { trade } = p;
+    return <div>{trade.symbol} {trade.strikePrice as unknown as string} {shortDateFormatter(trade.contractExpiry as unknown as string)} x {trade.numberOfContracts}</div>;
+};
diff --git a/src/components/close-trade.tsx b/src/components/close-trade.tsx
index a17659d..e3e5559 100644
--- a/src/components/close-trade.tsx
+++ b/src/components/close-trade.tsx
@@ -1,9 +1,7 @@
 'use client';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Stack, InputAdornment, Typography, Grid } from '@mui/material';
-import { DatePickerElement, FormContainer, TextFieldElement, TextareaAutosizeElement } from 'react-hook-form-mui';
-
-export type CloseTradeCloseDialogReason = 'cancel' | 'close'
-
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Stack, InputAdornment, Typography, Grid, useMediaQuery, useTheme } from '@mui/material';
+import { DatePickerElement, FormContainer, TextFieldElement, TextareaAutosizeElement, useWatch } from 'react-hook-form-mui';
+export type CloseTradeCloseDialogReason = 'cancel' | 'close';
 interface ITickerProps {
     tradeId: string,
     open: boolean,
@@ -17,10 +15,41 @@ import dayjs from 'dayjs';
 import ky from 'ky';
 import { useEffect, useState } from 'react';
 import { Trade } from '@prisma/client';
+import { ITradeView } from '@/lib/types';
+import { mapTradeToView } from '@/lib/useTrades';
+import { currencyFormatter, percentageFormatter } from '@/lib/formatters';
+import { TickerName } from './TickerName';
+
+
+const SubComp = (props: { t: Trade }) => {
+    const [contractPriceAtClose] = useWatch({
+        name: ['contractPriceAtClose'],
+    });
+
+    const t1 = mapTradeToView({ ...props.t, lastContractPrice: contractPriceAtClose });
+    return (
+        <>
+            <Stack>
+                <Grid container>
+                    <Grid item xs={12}><TickerName trade={t1} /></Grid>
+                    <Grid item xs={6}>Max Profit: {t1.maximumProfit}</Grid>
+                    <Grid item xs={6}>Expected Profit per day: {currencyFormatter(t1.averageProfitPerDay)}</Grid>
+                    <Grid item xs={12}>Expected TotalReturn/Annual Return: {percentageFormatter(t1.maxReturn)}/{percentageFormatter(t1.maxAnnualizedReturn)}</Grid>
+                    <Grid>Estimated Profit: {currencyFormatter(t1.actualProfit)}</Grid>
+                    <Grid item xs={12}>Estimated Annualized Returns: {percentageFormatter(t1.actualAnnualizedReturn)}</Grid>
+                    <Grid>Estimated profit per day: {currencyFormatter(t1.actualProfitPerDay)}</Grid>
+                </Grid>
+            </Stack>
+        </>
+    )
+}
+
 export const CloseTradeDialog = (props: ITickerProps) => {
     const { onClose, open, tradeId } = props;
     const [trade, setTrade] = useState<Trade | null>(null);
-    const [p1, setp1 ] = useState(0);
+    const [p1, setp1] = useState(0);
+    const theme = useTheme();
+    const matches = useMediaQuery(theme.breakpoints.down('sm'));
 
     useEffect(() => {
         ky(`/api/trades/${tradeId}`).json<Trade>().then(j => setTrade(j));
@@ -49,41 +78,47 @@ export const CloseTradeDialog = (props: ITickerProps) => {
         tradeId: tradeId,
         notes: trade.notes,
         transactionEndDate: dayjs(),
-        transactionStartDate: dayjs(trade.transactionStartDate).format('MM/DD/YYYY')
+        contractExpiry: dayjs(trade.contractExpiry).format('MM/DD/YYYY'),
+        transactionStartDate: dayjs(trade.transactionStartDate).format('MM/DD/YYYY'),
+        contractPriceAtClose: trade.lastContractPrice
     }
 
     return <Dialog
         open={open}
-        maxWidth={'md'}
+        // maxWidth={'md'}
+        fullScreen={matches}
         fullWidth={true}
         onClose={onCloseRequest}>
         <FormContainer onSuccess={handleSubmit} defaultValues={dv}>
             <DialogTitle id="scroll-dialog-title">Close trade</DialogTitle>
             <DialogContent dividers={true}>
-                <Stack spacing={2}  >
+                <Stack rowGap={3}>
                     <LocalizationProvider dateAdapter={AdapterDayjs}>
                         {/* <Typography variant='h6'>{dv.symbol} ${dv.contractPriceAtOpen as unknown as string} - Purchased on {dv.transactionStartDate}</Typography> */}
-                        <Grid container >
-                            <Grid item xs={3}>
-                                <TextFieldElement name={'tradeId'} label={'Trade Id'} required disabled />
+                        <SubComp t={trade} />
+                        {/* <Grid container spacing={2}>
+                            <Grid item xs={6} >
+                                <TextFieldElement fullWidth name={'tradeId'} label={'Trade Id'} required disabled />
                             </Grid>
-                            <Grid item xs={3}>
-                                <TextFieldElement name={'symbol'} label={'Symbol'} required disabled />
+                            <Grid item xs={6}>
+                                <TextFieldElement fullWidth name={'symbol'} label={'Symbol'} required disabled />
                             </Grid>
-                            <Grid item xs={3}>
-                                <TextFieldElement name={'contractPriceAtOpen'} label={'Contract Price at Open'} disabled required
+                        </Grid>
+                        <Grid container spacing={2}>
+                            <Grid item xs={6}>
+                                <TextFieldElement fullWidth name={'contractPriceAtOpen'} label={'Contract Price at Open'} disabled required
                                     InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }} />
                             </Grid>
-                            <Grid item xs={3}>
-                                <TextFieldElement name={'transactionStartDate'} label={'Purchase date'} disabled />
+                            <Grid item xs={6}>
+                                <TextFieldElement fullWidth name={'transactionStartDate'} label={'Purchase date'} disabled />
                             </Grid>
-                        </Grid>
-
+                        </Grid> */}
                         <DatePickerElement label="Transaction End Date" name="transactionEndDate" required disableFuture={true} disablePast={false} />
                         <TextFieldElement name={'contractPriceAtClose'} label={'Contract Price at close'} required
                             InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }} />
                         <TextareaAutosizeElement label="Notes" name="notes" rows={5} />
                     </LocalizationProvider>
+
                 </Stack>
             </DialogContent>
             <DialogActions>
diff --git a/src/components/trades.tsx b/src/components/trades.tsx
index 81d8b49..dc52559 100644
--- a/src/components/trades.tsx
+++ b/src/components/trades.tsx
@@ -10,20 +10,12 @@ import { FormControlLabel, Switch } from "@mui/material";
 
 import { ConditionalFormattingBox } from "./conditional-formatting";
 import { useTrades } from "@/lib/useTrades";
-import { percentageFormatter } from "@/lib/formatters";
+import { currencyFormatter, fixedCurrencyFormatter, percentageFormatter } from "@/lib/formatters";
 import { ITradeView } from "@/lib/types";
+import { TickerName } from "./TickerName";
 
-const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format;
-const fixedCurrencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format;
 const dateFormatter = (v: string) => v && dayjs(v.substring(0, 10)).format('DD/MM/YYYY');   //to avoid utc conversion strip the time part
-const shortDateFormatter = (v: string) => v && dayjs(v.substring(0, 10)).format('DD/MM/YYYY');   //to avoid utc conversion strip the time part
-
-const TickerName = (p: { trade: ITradeView }) => {
-    const { trade } = p;
-
-    return <div>{trade.symbol} {trade.strikePrice as unknown as string} {shortDateFormatter(trade.contractExpiry as unknown as string)} x {trade.numberOfContracts}</div>
-
-}
+export const shortDateFormatter = (v: string) => v && dayjs(v.substring(0, 10)).format('DD/MM/YYYY');   //to avoid utc conversion strip the time part
 
 export const TradeList = () => {
     const { trades, deleteTrade, reloadTrade } = useTrades();
diff --git a/src/lib/formatters.ts b/src/lib/formatters.ts
index 65b7ce9..b5a9a6c 100644
--- a/src/lib/formatters.ts
+++ b/src/lib/formatters.ts
@@ -1 +1,3 @@
-export const percentageFormatter = (v: number) => v && Number(v).toLocaleString(undefined, { style: 'percent', minimumFractionDigits: 2 }) || '';
\ No newline at end of file
+export const percentageFormatter = (v: number) => v && Number(v).toLocaleString(undefined, { style: 'percent', minimumFractionDigits: 2 }) || '';
+export const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format;
+export const fixedCurrencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format;
diff --git a/src/lib/useTrades.ts b/src/lib/useTrades.ts
index 1d25f66..de092d8 100644
--- a/src/lib/useTrades.ts
+++ b/src/lib/useTrades.ts
@@ -7,7 +7,7 @@ import { ITradeView } from "./types";
 
 const SellContracts = ['PUT_SELL', 'CALL_SELL'];
 
-const mapTradeToView = (trade: Trade): ITradeView => {
+export const mapTradeToView = (trade: Trade): ITradeView => {
     const isSellContract = SellContracts.includes(trade.contractType);
     const sellCost = isSellContract ? (Number(trade.contractPrice) * 100 * trade.numberOfContracts) : 0;
     const buyCost = (isSellContract && trade.contractPriceAtClose) ? (Number(trade.contractPriceAtClose) * 100 * trade.numberOfContracts) : NaN;

From 443971f127b1c278dfe4bf376594d5b8081cfd1d Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Fri, 12 Apr 2024 03:03:44 +0000
Subject: [PATCH 06/13] fix the close price

---
 src/components/close-trade.tsx | 8 ++++++--
 src/lib/useTrades.ts           | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/close-trade.tsx b/src/components/close-trade.tsx
index e3e5559..2bb7406 100644
--- a/src/components/close-trade.tsx
+++ b/src/components/close-trade.tsx
@@ -25,8 +25,12 @@ const SubComp = (props: { t: Trade }) => {
     const [contractPriceAtClose] = useWatch({
         name: ['contractPriceAtClose'],
     });
+    
+    const [transactionEndDate] = useWatch({
+        name: ['transactionEndDate'],
+    });
 
-    const t1 = mapTradeToView({ ...props.t, lastContractPrice: contractPriceAtClose });
+    const t1 = mapTradeToView({ ...props.t, contractPriceAtClose, transactionEndDate });
     return (
         <>
             <Stack>
@@ -113,7 +117,7 @@ export const CloseTradeDialog = (props: ITickerProps) => {
                                 <TextFieldElement fullWidth name={'transactionStartDate'} label={'Purchase date'} disabled />
                             </Grid>
                         </Grid> */}
-                        <DatePickerElement label="Transaction End Date" name="transactionEndDate" required disableFuture={true} disablePast={false} />
+                        <DatePickerElement label="Transaction End Date" name="transactionEndDate" required disableFuture={false} disablePast={false} />
                         <TextFieldElement name={'contractPriceAtClose'} label={'Contract Price at close'} required
                             InputProps={{ startAdornment: <InputAdornment position="start">$</InputAdornment> }} />
                         <TextareaAutosizeElement label="Notes" name="notes" rows={5} />
diff --git a/src/lib/useTrades.ts b/src/lib/useTrades.ts
index de092d8..d676d05 100644
--- a/src/lib/useTrades.ts
+++ b/src/lib/useTrades.ts
@@ -7,7 +7,7 @@ import { ITradeView } from "./types";
 
 const SellContracts = ['PUT_SELL', 'CALL_SELL'];
 
-export const mapTradeToView = (trade: Trade): ITradeView => {
+export const mapTradeToView = (trade: Trade): ITradeView => {    
     const isSellContract = SellContracts.includes(trade.contractType);
     const sellCost = isSellContract ? (Number(trade.contractPrice) * 100 * trade.numberOfContracts) : 0;
     const buyCost = (isSellContract && trade.contractPriceAtClose) ? (Number(trade.contractPriceAtClose) * 100 * trade.numberOfContracts) : NaN;

From 33bd90a7becf0c66b21da680a8d3200717961861 Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Fri, 12 Apr 2024 03:05:48 +0000
Subject: [PATCH 07/13] fix currency display

---
 src/components/close-trade.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/close-trade.tsx b/src/components/close-trade.tsx
index 2bb7406..62ee0ec 100644
--- a/src/components/close-trade.tsx
+++ b/src/components/close-trade.tsx
@@ -17,7 +17,7 @@ import { useEffect, useState } from 'react';
 import { Trade } from '@prisma/client';
 import { ITradeView } from '@/lib/types';
 import { mapTradeToView } from '@/lib/useTrades';
-import { currencyFormatter, percentageFormatter } from '@/lib/formatters';
+import { currencyFormatter, fixedCurrencyFormatter, percentageFormatter } from '@/lib/formatters';
 import { TickerName } from './TickerName';
 
 
@@ -36,12 +36,12 @@ const SubComp = (props: { t: Trade }) => {
             <Stack>
                 <Grid container>
                     <Grid item xs={12}><TickerName trade={t1} /></Grid>
-                    <Grid item xs={6}>Max Profit: {t1.maximumProfit}</Grid>
+                    <Grid item xs={6}>Max Profit: {fixedCurrencyFormatter(t1.maximumProfit)}</Grid>
                     <Grid item xs={6}>Expected Profit per day: {currencyFormatter(t1.averageProfitPerDay)}</Grid>
                     <Grid item xs={12}>Expected TotalReturn/Annual Return: {percentageFormatter(t1.maxReturn)}/{percentageFormatter(t1.maxAnnualizedReturn)}</Grid>
-                    <Grid>Estimated Profit: {currencyFormatter(t1.actualProfit)}</Grid>
+                    <Grid>Estimated Profit: {fixedCurrencyFormatter(t1.actualProfit)}</Grid>
                     <Grid item xs={12}>Estimated Annualized Returns: {percentageFormatter(t1.actualAnnualizedReturn)}</Grid>
-                    <Grid>Estimated profit per day: {currencyFormatter(t1.actualProfitPerDay)}</Grid>
+                    <Grid>Estimated profit per day: {fixedCurrencyFormatter(t1.actualProfitPerDay)}</Grid>
                 </Grid>
             </Stack>
         </>

From 632b7d74add3b43f540431188765445b60ab4afb Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Sat, 13 Apr 2024 16:48:14 +0000
Subject: [PATCH 08/13] added auth

---
 package-lock.json                       | 155 +++++++++++-------------
 package.json                            |   2 +-
 src/app/api/auth/[...nextauth]/route.ts |  32 ++---
 src/app/api/trades/route.ts             |   2 +
 src/app/layout.tsx                      |   2 -
 src/app/login/page.tsx                  |   5 +
 src/app/page.tsx                        |   4 +-
 src/lib/auth.ts                         |  54 ++++++++-
 src/middleware.ts                       |  88 ++++++++------
 9 files changed, 197 insertions(+), 147 deletions(-)
 create mode 100644 src/app/login/page.tsx

diff --git a/package-lock.json b/package-lock.json
index 54bcbd2..cb0bf3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "lodash.debounce": "^4.0.8",
         "match-sorter": "^6.3.4",
         "next": "14.1.4",
-        "next-auth": "^4.24.7",
+        "next-auth": "^5.0.0-beta.16",
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.51.2",
@@ -51,6 +51,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@auth/core": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@auth/core/-/core-0.28.1.tgz",
+      "integrity": "sha512-gvp74mypYZADpTlfGRp6HE0G3pIHWvtJpy+KZ+8FvY0cmlIpHog+jdMOdd29dQtLtN25kF2YbfHsesCFuGUQbg==",
+      "dependencies": {
+        "@panva/hkdf": "^1.1.1",
+        "@types/cookie": "0.6.0",
+        "cookie": "0.6.0",
+        "jose": "^5.1.3",
+        "oauth4webapi": "^2.4.0",
+        "preact": "10.11.3",
+        "preact-render-to-string": "5.2.3"
+      },
+      "peerDependencies": {
+        "@simplewebauthn/browser": "^9.0.1",
+        "@simplewebauthn/server": "^9.0.2",
+        "nodemailer": "^6.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@simplewebauthn/browser": {
+          "optional": true
+        },
+        "@simplewebauthn/server": {
+          "optional": true
+        },
+        "nodemailer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
@@ -1137,6 +1167,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1803,9 +1838,9 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -3561,9 +3596,9 @@
       }
     },
     "node_modules/jose": {
-      "version": "4.15.5",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.5.tgz",
-      "integrity": "sha512-jc7BFxgKPKi94uOvEmzlSWFFe2+vASyXaKUpdQKatWAESU2MWjDfFf0fdfc83CDKcA5QecabZeNLyfhe3yKNkg==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.2.4.tgz",
+      "integrity": "sha512-6ScbIk2WWCeXkmzF6bRPmEuaqy1m8SbsRFMa/FLrSCkGIhj8OLVG/IH+XHVmNMx/KUo8cVWEE6oKR4dJ+S0Rkg==",
       "funding": {
         "url": "https://github.com/sponsors/panva"
       }
@@ -3888,27 +3923,26 @@
       }
     },
     "node_modules/next-auth": {
-      "version": "4.24.7",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.7.tgz",
-      "integrity": "sha512-iChjE8ov/1K/z98gdKbn2Jw+2vLgJtVV39X+rCP5SGnVQuco7QOr19FRNGMIrD8d3LYhHWV9j9sKLzq1aDWWQQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.13",
-        "@panva/hkdf": "^1.0.2",
-        "cookie": "^0.5.0",
-        "jose": "^4.15.5",
-        "oauth": "^0.9.15",
-        "openid-client": "^5.4.0",
-        "preact": "^10.6.3",
-        "preact-render-to-string": "^5.1.19",
-        "uuid": "^8.3.2"
+      "version": "5.0.0-beta.16",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-5.0.0-beta.16.tgz",
+      "integrity": "sha512-dX2snB+ezN23tFzSes3n3uosT9iBf0eILPYWH/R2fd9n3ZzdMQlRzq7JIOPeS1aLc84IuRlyuyXyx9XmmZB6og==",
+      "dependencies": {
+        "@auth/core": "0.28.1"
       },
       "peerDependencies": {
-        "next": "^12.2.5 || ^13 || ^14",
+        "@simplewebauthn/browser": "^9.0.1",
+        "@simplewebauthn/server": "^9.0.2",
+        "next": "^14",
         "nodemailer": "^6.6.5",
-        "react": "^17.0.2 || ^18",
-        "react-dom": "^17.0.2 || ^18"
+        "react": "^18.2.0"
       },
       "peerDependenciesMeta": {
+        "@simplewebauthn/browser": {
+          "optional": true
+        },
+        "@simplewebauthn/server": {
+          "optional": true
+        },
         "nodemailer": {
           "optional": true
         }
@@ -3933,10 +3967,13 @@
         }
       }
     },
-    "node_modules/oauth": {
-      "version": "0.9.15",
-      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
-      "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA=="
+    "node_modules/oauth4webapi": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-2.10.4.tgz",
+      "integrity": "sha512-DSoj8QoChzOCQlJkRmYxAJCIpnXFW32R0Uq7avyghIeB6iJq0XAblOD7pcq3mx4WEBDwMuKr0Y1qveCBleG2Xw==",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -3946,14 +3983,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
-      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -4078,14 +4107,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/oidc-token-hash": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz",
-      "integrity": "sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==",
-      "engines": {
-        "node": "^10.13.0 || >=12.0.0"
-      }
-    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4095,31 +4116,6 @@
         "wrappy": "1"
       }
     },
-    "node_modules/openid-client": {
-      "version": "5.6.5",
-      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.6.5.tgz",
-      "integrity": "sha512-5P4qO9nGJzB5PI0LFlhj4Dzg3m4odt0qsJTfyEtZyOlkgpILwEioOhVVJOrS1iVH494S4Ee5OCjjg6Bf5WOj3w==",
-      "dependencies": {
-        "jose": "^4.15.5",
-        "lru-cache": "^6.0.0",
-        "object-hash": "^2.2.0",
-        "oidc-token-hash": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/panva"
-      }
-    },
-    "node_modules/openid-client/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -4305,18 +4301,18 @@
       }
     },
     "node_modules/preact": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.20.1.tgz",
-      "integrity": "sha512-JIFjgFg9B2qnOoGiYMVBtrcFxHqn+dNXbq76bVmcaHYJFYR4lW67AOcXgAYQQTDYXDOg/kTZrKPNCdRgJ2UJmw==",
+      "version": "10.11.3",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
+      "integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
       }
     },
     "node_modules/preact-render-to-string": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz",
-      "integrity": "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==",
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.3.tgz",
+      "integrity": "sha512-aPDxUn5o3GhWdtJtW0svRC2SS/l8D9MAgo2+AWml+BhDImb27ALf04Q2d+AHqUUOc6RdSXFIBVa2gxzgMKgtZA==",
       "dependencies": {
         "pretty-format": "^3.8.0"
       },
@@ -5387,14 +5383,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -5673,7 +5661,8 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "node_modules/yaml": {
       "version": "1.10.2",
diff --git a/package.json b/package.json
index b12a4fa..ba43bdd 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "lodash.debounce": "^4.0.8",
     "match-sorter": "^6.3.4",
     "next": "14.1.4",
-    "next-auth": "^4.24.7",
+    "next-auth": "^5.0.0-beta.16",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.2",
diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
index 69422d7..08e8cbc 100644
--- a/src/app/api/auth/[...nextauth]/route.ts
+++ b/src/app/api/auth/[...nextauth]/route.ts
@@ -1,27 +1,13 @@
-import NextAuth, { NextAuthOptions } from 'next-auth'
+import NextAuth from 'next-auth'
+import { authOptions, NA } from '@/lib/auth';
 
-import CredentialsProvider from 'next-auth/providers/credentials'
-import { authenticate } from '@/lib/auth'
+// const { GET, POST } = NextAuth(authOptions).handlers;
+// export { GET, POST }
 
-const authOptions: NextAuthOptions = {
-    providers: [
-        CredentialsProvider({
-            name: 'credentials',
-            credentials: {
-                username: { label: "Username", type: "text", placeholder: "admin" },
-                password: { label: "Password", type: "password" }
-            },
-            async authorize(creds, req) {
-                if (authenticate(creds?.username, creds?.password)) {
-                    const user = { id: "1", name: "admin", email: "admin@mztrading-netlify.com" }
-                    return user
-                }
-                return null
-            }
-        })
-    ]
-}
+export const {
+    handlers: { GET, POST },
+    auth,
+} = NA;
 
-const handler = NextAuth(authOptions);
 
-export { handler as GET, handler as POST }
+// export { handler as GET, handler as POST }
diff --git a/src/app/api/trades/route.ts b/src/app/api/trades/route.ts
index 9c3edd1..52e3521 100644
--- a/src/app/api/trades/route.ts
+++ b/src/app/api/trades/route.ts
@@ -4,6 +4,8 @@ import { NextRequest, NextResponse } from "next/server";
 // export const runtime = 'edge'; //This specifies the runtime environment that the middleware function will be executed in.
 
 export async function GET(request: NextRequest, p: { params: { symbol: string } }) {
+    console.log(`in get`);
+    
     const resp = await prisma.trade.findMany();    
     return NextResponse.json({
         items: resp
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5b82659..90d587e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,8 +3,6 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import TabsRouter from "./routes";
 import { CssBaseline } from "@mui/material";
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 
 const inter = Inter({ subsets: ["latin"] });
 
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..3585909
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,5 @@
+export default function Page() { 
+    return <div>
+        This is the login page!!!
+    </div>
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7a16341..d554fa5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,8 +1,8 @@
 'use client';
-import { Autocomplete, Button, ButtonGroup, Grid, TextField } from '@mui/material';
+import { Grid } from '@mui/material';
 import * as React from 'react';
 import { TickerSearch } from '../components/ticker-search';
-import { AddTickerToMyList, SearchTickerItem, useMyStockList } from '@/lib/socket';
+import { useMyStockList } from '@/lib/socket';
 import { MyStockList } from '@/components/mystocks';
 
 export default function Page() {
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 066b714..4bbd184 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,11 +1,61 @@
+import { request } from 'http';
+import NextAuth, { NextAuthConfig } from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials'
+import { NextRequest } from 'next/server';
+
 const userName = process.env.adminUserName || 'admin';
 const secretPassword = process.env.adminPassword || 'admin';
 
-export const authenticate = (user: string | undefined, pass: string | undefined) => {
+export const authOptions = {
+    // pages: {
+    //     //signIn: '/login'
+    // },
+    callbacks: {
+        authorized({ auth, request }) {
+            const isLoggedIn = isAuthenticated(request) || !!auth?.user;
+            return isLoggedIn;
+        }
+    },
+    providers: [
+        CredentialsProvider({
+            name: 'credentials',
+            credentials: {
+                username: { label: "Username", type: "text", placeholder: "admin", defaultValue: 'admin' },
+                password: { label: "Password", type: "password" }
+            },
+            async authorize(creds, req) {
+                const { username, password } = creds;
+                if (authenticate(username as string, password as string)) {
+                    const user = { id: "1", name: "admin", email: "admin@mztrading-netlify.com" }
+                    return user;
+                }
+                return null
+            }
+        })
+    ]
+} satisfies NextAuthConfig;
+
+export const NA = NextAuth(authOptions);
+
+const authenticate = (user: string | undefined, pass: string | undefined) => {
     return user == userName && pass == secretPassword
 }
 
-export const credentials = {
+function isAuthenticated(req: NextRequest) {
+    return req.headers?.get('authorization') === credentials.base64;    
+    // const authheader = req.headers?.get('authorization');
+    // if (authheader) {
+    //     const [user, pass] = Buffer.from(authheader.split(' ')[1], 'base64').toString().split(':');
+    //     if (authenticate(user, pass)) {
+    //         return true;
+    //     } else {
+    //         return false;
+    //     }
+    // }
+    // return false;
+}
+
+const credentials = {
     userName,
     secretPassword,
     base64: Buffer.from(`${userName}:${secretPassword}`).toString('base64')
diff --git a/src/middleware.ts b/src/middleware.ts
index 52290c7..3502584 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,38 +1,58 @@
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-import { authenticate } from '@/lib/auth';
+import { authOptions } from '@/lib/auth';
+import NextAuth from 'next-auth';
+import { NA } from "@/lib/auth"
 
-async function isAuthenticated(req: NextRequest) {
-    const authheader = req.headers?.get('authorization');
-    if (authheader) {
-        const auth = Buffer.from(authheader.split(' ')[1], 'base64').toString().split(':');
-        const user = auth[0];
-        const pass = auth[1];
+export default NextAuth(authOptions).auth;
+//export default NA.auth;
 
-        if (authenticate(user, pass)) {
-            return true;
-        } else {
-            return false;
-        }
-    } else {
-        // const session = await getServerSession();
-        // if (session?.user?.name) {
-        //     return true;
-        // }
-    }
-    return false;
-}
+// export default NA.auth(async (req) => {
+//     const session = await NA.auth();
+//     if(session) {
+//         console.log(`user session found!`);
+//     }else {
+//         console.log(`user seession not found!!!`);
+        
+//     }
+//     console.log(req.nextUrl);
+// })
 
+export const config = { 
+       matcher: ['/((?!api/auth|_next/static|_next/image|.*\\.png$).*)']    
+};
 
-export async function middleware(req: NextRequest) {
-    if (await isAuthenticated(req)) {
-        return NextResponse.next();
-    } else {
-        return new NextResponse(null, {
-            headers: {
-                'WWW-Authenticate': 'Basic realm="mztrading"'
-            },
-            status: 401
-        })
-    }
-}
\ No newline at end of file
+// async function isAuthenticated(req: NextRequest) {
+//     const authheader = req.headers?.get('authorization');
+//     if (authheader) {
+//         const auth = Buffer.from(authheader.split(' ')[1], 'base64').toString().split(':');
+//         const user = auth[0];
+//         const pass = auth[1];
+
+//         if (authenticate(user, pass)) {
+//             return true;
+//         } else {
+//             return false;
+//         }
+//     } else {
+//         // const session = await getServerSession();
+//         // if (session?.user?.name) {
+//         //     return true;
+//         // }
+//     }
+//     return false;
+// }
+ 
+
+// export async function middleware(req: NextRequest, res: any) {
+//     //const session = await getServerSession(req as unknown as any, res as unknown as any, authOptions);
+
+//     // if (await isAuthenticated(req)) {
+//     //     return NextResponse.next();
+//     // } else {
+//     //     return new NextResponse(null, {
+//     //         headers: {
+//     //             'WWW-Authenticate': 'Basic realm="mztrading"'
+//     //         },
+//     //         status: 401
+//     //     })
+//     // }
+// }
\ No newline at end of file

From 597c26cc3cc2c9e3e77955b20710d7fa97d0fcbd Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Sat, 13 Apr 2024 16:50:54 +0000
Subject: [PATCH 09/13] fix build issue

---
 src/app/api/auth/[...nextauth]/route.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
index 08e8cbc..865bfc7 100644
--- a/src/app/api/auth/[...nextauth]/route.ts
+++ b/src/app/api/auth/[...nextauth]/route.ts
@@ -1,13 +1,13 @@
 import NextAuth from 'next-auth'
 import { authOptions, NA } from '@/lib/auth';
 
-// const { GET, POST } = NextAuth(authOptions).handlers;
-// export { GET, POST }
+const { GET, POST } = NextAuth(authOptions).handlers;
+export { GET, POST }
 
-export const {
-    handlers: { GET, POST },
-    auth,
-} = NA;
+// export const {
+//     handlers: { GET, POST },
+//     auth,
+// } = NA;
 
 
 // export { handler as GET, handler as POST }

From 2e1f7efb4e75681d590f8e56e6170cb31434ccbb Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Sat, 13 Apr 2024 17:06:29 +0000
Subject: [PATCH 10/13] add trust host to true

---
 src/lib/auth.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 4bbd184..943a1e5 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -10,6 +10,7 @@ export const authOptions = {
     // pages: {
     //     //signIn: '/login'
     // },
+    trustHost: true,
     callbacks: {
         authorized({ auth, request }) {
             const isLoggedIn = isAuthenticated(request) || !!auth?.user;

From 7fca43ea764b6ada5909fbbcf41dd931030d3d25 Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Sat, 13 Apr 2024 17:20:57 +0000
Subject: [PATCH 11/13] fix auth issue

---
 src/lib/auth.ts | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 943a1e5..d3a38ac 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,4 +1,3 @@
-import { request } from 'http';
 import NextAuth, { NextAuthConfig } from 'next-auth';
 import CredentialsProvider from 'next-auth/providers/credentials'
 import { NextRequest } from 'next/server';
@@ -43,17 +42,7 @@ const authenticate = (user: string | undefined, pass: string | undefined) => {
 }
 
 function isAuthenticated(req: NextRequest) {
-    return req.headers?.get('authorization') === credentials.base64;    
-    // const authheader = req.headers?.get('authorization');
-    // if (authheader) {
-    //     const [user, pass] = Buffer.from(authheader.split(' ')[1], 'base64').toString().split(':');
-    //     if (authenticate(user, pass)) {
-    //         return true;
-    //     } else {
-    //         return false;
-    //     }
-    // }
-    // return false;
+    return req.headers?.get('authorization')?.split(' ')[1] === credentials.base64;
 }
 
 const credentials = {

From e6b0bd08b8e3692dee7556deb0fb540a1f247049 Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Sat, 13 Apr 2024 23:05:40 +0000
Subject: [PATCH 12/13] use api for search ticker

---
 src/components/ticker-search.tsx |  6 +++---
 src/lib/socket.ts                | 36 ++++++++++++++++++++++++--------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/ticker-search.tsx b/src/components/ticker-search.tsx
index 19c3e41..b2849df 100644
--- a/src/components/ticker-search.tsx
+++ b/src/components/ticker-search.tsx
@@ -8,7 +8,7 @@ interface ITickerProps {
 }
 
 export const TickerSearch = (props: ITickerProps) => {
-    const [options, setOptions] = useState<any>([]);
+    const [options, setOptions] = useState<SearchTickerItem[]>([]);
     const onInputChange = (ev: any, value: any, reason: any) => {
         if (value) {
             getData(value);
@@ -23,7 +23,7 @@ export const TickerSearch = (props: ITickerProps) => {
       
     const getData = async (searchTerm: string) => {
         const result = await searchTicker(searchTerm);
-        setOptions(result.items);
+        setOptions(result);
     };
 
     return <Autocomplete filterOptions={(x) => x}
@@ -47,6 +47,6 @@ export const TickerSearch = (props: ITickerProps) => {
         )}
         options={options}
         getOptionLabel={(option: SearchTickerItem) => `${option.symbol} - ${option.name}`}
-        fullWidth
+        fullWidth        
     />
 }
\ No newline at end of file
diff --git a/src/lib/socket.ts b/src/lib/socket.ts
index 88accac..f67a885 100644
--- a/src/lib/socket.ts
+++ b/src/lib/socket.ts
@@ -20,15 +20,33 @@ export type SearchTickerResult = { items: SearchTickerItem[] };
 export type SearchTickerItem = { symbol: string, name: string }
 export type AddTickerToMyListResult = { success: boolean }
 export const searchTicker = async (searchTerm: string) => {
-    return new Promise<SearchTickerResult>((res, rej) => {
-        socket.emit('stock-list-request', {
+    const { items } = await ky('/api/symbols/search', {
+        searchParams: {
             q: searchTerm
-        });
-
-        socket.once(`stock-list-response`, (args: SearchTickerResult) => {
-            res(args);
-        });
-    });
+        }
+    }).json<{
+        items: {
+            quotes: {
+                symbol: string,
+                longname: string,
+                isYahooFinance: boolean
+            }[]
+        }
+    }>();
+
+    return items.quotes.filter(f => f.isYahooFinance).map(r => ({
+        symbol: r.symbol,
+        name: r.longname
+    }));
+    // return new Promise<SearchTickerResult>((res, rej) => {
+    //     socket.emit('stock-list-request', {
+    //         q: searchTerm
+    //     });
+
+    //     socket.once(`stock-list-response`, (args: SearchTickerResult) => {
+    //         res(args);
+    //     });
+    // });
 }
 
 export const AddTickerToMyList = (item: SearchTickerItem) => {
@@ -103,7 +121,7 @@ export const useOptionTracker = (symbol: string) => {
     const [isLoading, setIsLoading] = useState(false);
     useEffect(() => {
         setIsLoading(true);
-        ky(`/api/symbols/${symbol}/options/analyze`).json<OptionsData>().then(r => setOd(r)).finally(()=> setIsLoading(false));
+        ky(`/api/symbols/${symbol}/options/analyze`).json<OptionsData>().then(r => setOd(r)).finally(() => setIsLoading(false));
         // socket.emit('options-subscribe-request', item);
         // socket.on(`options-subscribe-response`, setOd);
         // return () => {

From 9c291ebbf67b63ea56aa76cf74bb0fc62f705518 Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Sat, 13 Apr 2024 23:53:35 +0000
Subject: [PATCH 13/13] default threshold to 10 percent for range

---
 src/components/stock-options-view.tsx | 73 ++++++++++++---------------
 src/lib/socket.ts                     | 17 ++++++-
 2 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/components/stock-options-view.tsx b/src/components/stock-options-view.tsx
index b5eec83..0c70266 100644
--- a/src/components/stock-options-view.tsx
+++ b/src/components/stock-options-view.tsx
@@ -1,8 +1,8 @@
 
 import * as React from 'react';
-import { useOptionTracker } from '../lib/socket';
+import { NumberRange, useOptionTracker } from '../lib/socket';
 import { GridColDef, DataGrid, gridClasses } from '@mui/x-data-grid';
-import { Box, FormControl, InputLabel, MenuItem, Paper, Select, Slider, Stack, Tab, Tabs } from '@mui/material';
+import { Box, FormControl, Grid, InputLabel, MenuItem, Paper, Select, Slider, Stack, Tab, Tabs } from '@mui/material';
 import { useState } from 'react';
 import dayjs from 'dayjs';
 import { percentageFormatter } from '@/lib/formatters';
@@ -12,55 +12,42 @@ interface ITickerProps {
     symbol: string
 }
 
-type NumberRange = { start: number, end: number }
-type IStrikePriceSliderPorps = { allStrikePricesValues: number[], onChange: (v: NumberRange) => void, currentPrice: number }
+
+type IStrikePriceSliderPorps = { allStrikePricesValues: number[], onChange: (v: NumberRange) => void, currentPrice: number, strikePriceRange: NumberRange }
 
 const StrikePriceSlider = (props: IStrikePriceSliderPorps) => {
-    const { allStrikePricesValues, onChange } = props;
+    const { allStrikePricesValues, onChange, strikePriceRange } = props;
+    const t = [strikePriceRange.start, strikePriceRange.end];
     const [minStrikePrice, maxStrikePrice] = [Math.min.apply(null, allStrikePricesValues), Math.max.apply(null, allStrikePricesValues)];
+    // const [minStrikePrice, maxStrikePrice] = [currentPrice - thresholdValue, currentPrice + thresholdValue];
     const strikePriceMarks = allStrikePricesValues.map(m => ({ value: m }));
-    const [strikePriceRange, setStrikePriceRange] = useState([minStrikePrice, maxStrikePrice]);
     const handleChange = (e: Event, v: number | number[]) => {
         const value = v as number[];
-        setStrikePriceRange(value);
         onChange({
             start: value[0],
             end: value[1]
         });
     };
 
-    //todoo
-    // function calculateValue(value: number) {
-    //     return 2 ** value;
-    // }
-
-/*
-
-                    144
-
-        0                       200
-          20 70   120   160 180  
-
-
-
-*/
-
-    return <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
-        <div>Strike Price Range: {strikePriceRange[0]} - {strikePriceRange[1]}</div>
-
-        <Slider
-            getAriaLabel={() => 'Strike price'}
-            value={strikePriceRange}
-            onChange={handleChange}
-            //valueLabelDisplay="on"
-            min={minStrikePrice}
-            max={maxStrikePrice}
-            marks={strikePriceMarks}
-            step={null}
+    return <div>
+        <div>Strike Price Range: {t[0]} - {t[1]}</div>
+        <Stack direction="row" sx={{ m: 1 }} alignItems="center">
+            <Grid item>
+            </Grid>
+            <Slider
+                getAriaLabel={() => 'Strike price'}
+                value={t}
+                onChange={handleChange}
+                valueLabelDisplay="auto"
+                min={minStrikePrice}
+                max={maxStrikePrice}
+                marks={strikePriceMarks}
+                step={null}
             // scale={calculateValue}
-        //getAriaValueText={valuetext}
-        />
-    </Stack>
+            //getAriaValueText={valuetext}
+            />
+        </Stack>
+    </div>
 }
 type PriceModeType = 'LAST_PRICE' | 'BID_PRICE' | 'ASK_PRICE'
 type ValueModeType = 'PRICE' | 'ANNUAL_RETURN' | 'TOTAL_RETURN'
@@ -68,8 +55,8 @@ type ValueModeType = 'PRICE' | 'ANNUAL_RETURN' | 'TOTAL_RETURN'
 const numberFormatter = (v: string) => v && Number(v);
 const todaysDate = dayjs();
 export const StockOptionsView = (props: ITickerProps) => {
-    const { data, isLoading } = useOptionTracker(props.symbol);
-    const [strikePriceRange, setStrikePriceRange] = useState<NumberRange>({ start: 0, end: Number.MAX_VALUE });
+    const { data, isLoading, strikePriceRange, setStrikePriceRange } = useOptionTracker(props.symbol);
+
     const [putCallTabValue, setPutCallTabValue] = useState<'PUT' | 'CALL'>('PUT');
     const [priceMode, setPriceMode] = useState<PriceModeType>('LAST_PRICE');
     const [valueMode, setValueMode] = useState<ValueModeType>('PRICE');
@@ -151,7 +138,11 @@ export const StockOptionsView = (props: ITickerProps) => {
             <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
             <BootstrapInput id="demo-customized-textbox" />
         </FormControl> */}
-        <StrikePriceSlider currentPrice={data.currentPrice} allStrikePricesValues={allStrikePricesValues} onChange={setStrikePriceRange} />
+        <StrikePriceSlider currentPrice={data.currentPrice}
+            allStrikePricesValues={allStrikePricesValues}
+            onChange={setStrikePriceRange}
+            strikePriceRange={strikePriceRange}
+        />
         <FormControl sx={{ m: 1 }} variant="standard">
             <InputLabel>Price Mode</InputLabel>
             <Select value={priceMode} onChange={(e, v) => setPriceMode(e.target.value as PriceModeType)}            >
diff --git a/src/lib/socket.ts b/src/lib/socket.ts
index f67a885..234f90f 100644
--- a/src/lib/socket.ts
+++ b/src/lib/socket.ts
@@ -116,12 +116,25 @@ type StockPriceData = {
     }
 }
 
+export type NumberRange = { start: number, end: number }
+
 export const useOptionTracker = (symbol: string) => {
     const [data, setOd] = useState<OptionsData>();
     const [isLoading, setIsLoading] = useState(false);
+    const [strikePriceRange, setStrikePriceRange] = useState<NumberRange>({ start: 0, end: Number.MAX_VALUE });
+
     useEffect(() => {
         setIsLoading(true);
-        ky(`/api/symbols/${symbol}/options/analyze`).json<OptionsData>().then(r => setOd(r)).finally(() => setIsLoading(false));
+        ky(`/api/symbols/${symbol}/options/analyze`).json<OptionsData>().then(r => {
+            setOd(r);
+            const { currentPrice } = r;
+            const thresholdValue = currentPrice * 0.1;
+            debugger;
+            setStrikePriceRange({
+                start: Math.round(currentPrice - thresholdValue),
+                end: Math.round(currentPrice + thresholdValue)
+            });
+        }).finally(() => setIsLoading(false));
         // socket.emit('options-subscribe-request', item);
         // socket.on(`options-subscribe-response`, setOd);
         // return () => {
@@ -129,7 +142,7 @@ export const useOptionTracker = (symbol: string) => {
         //     socket.off('options-subscribe-response', setOd);
         // }
     }, []);
-    return { data, isLoading };
+    return { data, isLoading, strikePriceRange, setStrikePriceRange };
 }