Skip to content

Commit

Permalink
menu bar with logout and some minor tweeks in the trades grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@mnsrulz
mnsrulz committed Apr 17, 2024
1 parent 743b7a7 commit f1ac6c4
Show file tree
Hide file tree
Showing 6 changed files with 203 additions and 8 deletions.
12 changes: 12 additions & 0 deletions src/app/api/watchlist/route.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,16 @@ export async function POST(request: Request) {
})
}
return NextResponse.json(inputJson);
}

//may be better to expose as a separte endoint??
export async function DELETE(request: Request) {
const inputJson: AddToWatchlistRequest = await request.json();
const { symbol } = inputJson;
await prisma.watchlist.delete({
where: {
symbol
}
});
return NextResponse.json(inputJson);
}
184 changes: 180 additions & 4 deletions src/app/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,25 @@ import {
} from 'react-router-dom';

import { StaticRouter } from 'react-router-dom/server';
import { ButtonGroup, Button } from '@mui/material';
import { ButtonGroup, Button, AppBar, Avatar, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip } from '@mui/material';
import { useState } from 'react';
import MenuIcon from '@mui/icons-material/Menu';
import AdbIcon from '@mui/icons-material/Adb';
import AccountCircle from '@mui/icons-material/AccountCircle';
import { signOut } from 'next-auth/react'

/*
<Button><Link href="/" className=''>Home</Link></Button>
<Button><Link href="/trades" className=''>Trades</Link></Button>
<Button><Link href="/history">History</Link></Button>
*/

const pages = [
{ title: 'Home', href: '/' },
{ title: 'Trades', href: '/trades' },
{ title: 'History', href: '/history' }
];
const settings = ['Profile', 'Logout'];

function Router(props: { children?: React.ReactNode }) {
const { children } = props;
Expand Down Expand Up @@ -74,14 +92,172 @@ function CurrentRoute() {
}

export default function TabsRouter() {
const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);

const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElUser(event.currentTarget);
};

const handleCloseNavMenu = () => {
setAnchorElNav(null);
};

const handleCloseUserMenu = () => {
setAnchorElUser(null);
};

const handleSignout = () => {
handleCloseUserMenu();
signOut();
}

return (
<Router>
<Box sx={{ width: '100%', padding: '0px 0px 20px 0px' }} >
{/* <Routes>
{/* <Routes>
<Route path="*" element={<CurrentRoute />} />
</Routes> */}
{/* <Box sx={{ width: '100%', padding: '0px 0px 20px 0px' }} >
<MyTabs />
</Box>
</Box> */}
<AppBar position="static" sx={{ margin: '0px 0px 20px 0px' }}>
<Container maxWidth="xl">
<Toolbar disableGutters>
{/* <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} /> */}
{/* <Typography
variant="h6"
noWrap
component="a"
href="#app-bar-with-responsive-menu"
sx={{
mr: 2,
display: { xs: 'none', md: 'flex' },
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
MZ
</Typography> */}

<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
{pages.map((page) => (
<MenuItem key={page.title} onClick={handleCloseNavMenu} LinkComponent={Link} href={page.href}>
{/* {page.title} */}
<Typography textAlign="center">{page.title}</Typography>
{/* <Button
key={page.title}
onClick={handleCloseNavMenu}
href={page.href}
LinkComponent={Link}
sx={{ my: 2, color: 'white', display: 'block' }}>
</Button> */}
</MenuItem>
))}
</Menu>
</Box>
<AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
<Typography
variant="h5"
noWrap
component="a"
href="#app-bar-with-responsive-menu"
sx={{
mr: 2,
display: { xs: 'flex', md: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
LOGO
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
key={page.title}
onClick={handleCloseNavMenu}
href={page.href}
LinkComponent={Link}
sx={{ my: 2, color: 'white', display: 'block' }}>
{page.title}
{/* <Link href={page.href}>
</Link> */}
</Button>
))}
</Box>

<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<AccountCircle />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{/* {settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))} */}
<MenuItem key='signout' onClick={handleSignout}>
<Typography textAlign="center">Sign Out</Typography>
</MenuItem>
</Menu>
</Box>
</Toolbar>
</Container>
</AppBar>
</Router>
);
}
6 changes: 5 additions & 1 deletion src/components/trades.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const TradeList = () => {
// { 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: 'lastContractPrice', width: 80, headerName: 'Last 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 },
{
Expand All @@ -64,6 +64,10 @@ export const TradeList = () => {
field: 'actualProfitPerDay', width: 70, headerName: 'PnL/day', type: 'number', valueFormatter: currencyFormatter,
renderCell: (p) => <ConditionalFormattingBox value={p.value * 10} formattedValue={p.formattedValue} />
},
{
field: 'remainingProfitPerDay', width: 70, headerName: 'Remaining PnL/day', type: 'number', valueFormatter: currencyFormatter,
renderCell: (p) => <ConditionalFormattingBox value={p.value * 10} formattedValue={p.formattedValue} />
},
{
field: 'maximumRisk', width: 60, headerName: 'Risk', type: 'number', valueFormatter: fixedCurrencyFormatter,
renderCell: (p) => <ConditionalFormattingBox value={-p.value / 100} formattedValue={p.formattedValue} />
Expand Down
2 changes: 1 addition & 1 deletion src/lib/socket.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export const useMyStockList = () => {
}, []);

const removeFromWatchlist = useCallback((item: SearchTickerItem) => {
ky.delete(`/api/watchlist`, { json: item }).json().then(r => setMyTickers(mytickers.filter(i => i.symbol != item.symbol)));
ky.delete(`/api/watchlist`, { json: item }).json().then(r => setMyTickers((ii) => ii.filter(i => i.symbol != item.symbol)));
}, []);

return { mytickers, addToWatchlist, removeFromWatchlist };
Expand Down
1 change: 1 addition & 0 deletions src/lib/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export interface ITradeView extends Trade {
actualProfit: number
actualAnnualizedReturn: number
actualProfitPerDay: number
remainingProfitPerDay: number
buyCost: number,
sellCost: number,
isClosed: boolean,
Expand Down
6 changes: 4 additions & 2 deletions src/lib/useTrades.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -27,6 +27,7 @@ export const mapTradeToView = (trade: Trade): ITradeView => {
const maxAnnualizedReturn = (sellCost / maximumRisk) * (365 / tradeDays);
const actualAnnualizedReturn = (actualProfit / maximumRisk) * (365 / actualTradeDays);
const actualProfitPerDay = (actualProfit / actualTradeDays);
const remainingProfitPerDay = actualProfit > 0 ? ((maximumProfit - actualProfit) / (tradeDays - actualTradeDays)) : NaN;

return {
...trade,
Expand All @@ -40,7 +41,8 @@ export const mapTradeToView = (trade: Trade): ITradeView => {
actualProfitPerDay,
isClosed,
maxReturn,
actualProfit
actualProfit,
remainingProfitPerDay
}
}

Expand Down

0 comments on commit f1ac6c4

Please sign in to comment.