+
);
diff --git a/src/assets/data/data.js b/src/assets/data/data.js
index ca664a3..7b46f5f 100644
--- a/src/assets/data/data.js
+++ b/src/assets/data/data.js
@@ -1,82 +1,149 @@
-export const trades = [
+const trades = [
{
- id: 4,
- symbol: "HDFC",
type: "SELL",
+ symbol: "HDFC",
category: "EQUITY",
tradeType: "INTRADAY",
- timestamp: "24 Oct 2024 11:15:45 AM"
+ date: "24 Oct 2024",
+ time: "11:15:45 AM"
},
{
- id: 5,
- symbol: "TCS",
type: "BUY",
+ symbol: "TCS",
category: "EQUITY",
tradeType: "POSITIONAL",
- timestamp: "24 Oct 2024 11:30:22 AM"
+ date: "24 Oct 2024",
+ time: "11:30:22 AM"
},
{
- id: 6,
- symbol: "ICICI",
type: "SELL",
+ symbol: "ICICI",
category: "EQUITY",
tradeType: "SWING",
- timestamp: "24 Oct 2024 12:05:10 PM"
+ date: "24 Oct 2024",
+ time: "12:05:10 PM"
},
{
- id: 7,
- symbol: "BHARTIARTL",
type: "BUY",
+ symbol: "BHARTIARTL",
category: "EQUITY",
tradeType: "INTRADAY",
- timestamp: "24 Oct 2024 12:45:33 PM"
+ date: "24 Oct 2024",
+ time: "12:45:33 PM"
},
{
- id: 8,
- symbol: "WIPRO",
type: "SELL",
+ symbol: "WIPRO",
category: "EQUITY",
tradeType: "POSITIONAL",
- timestamp: "24 Oct 2024 01:20:15 PM"
+ date: "24 Oct 2024",
+ time: "01:20:15 PM"
},
{
- id: 9,
- symbol: "HCLTECH",
type: "BUY",
+ symbol: "HCLTECH",
category: "EQUITY",
tradeType: "SWING",
- timestamp: "24 Oct 2024 01:55:40 PM"
+ date: "24 Oct 2024",
+ time: "01:55:40 PM"
},
{
- id: 10,
- symbol: "SBIN",
type: "SELL",
+ symbol: "SBIN",
category: "EQUITY",
tradeType: "INTRADAY",
- timestamp: "24 Oct 2024 02:10:05 PM"
+ date: "24 Oct 2024",
+ time: "02:10:05 PM"
},
{
- id: 11,
- symbol: "INFY",
type: "BUY",
+ symbol: "INFY",
category: "EQUITY",
tradeType: "POSITIONAL",
- timestamp: "24 Oct 2024 02:30:18 PM"
+ date: "24 Oct 2024",
+ time: "02:30:18 PM"
+ },
+ {
+ type: "SELL",
+ symbol: "LT",
+ category: "EQUITY",
+ tradeType: "SWING",
+ date: "24 Oct 2024",
+ time: "02:45:50 PM"
+ },
+ {
+ type: "BUY",
+ symbol: "MARUTI",
+ category: "EQUITY",
+ tradeType: "INTRADAY",
+ date: "24 Oct 2024",
+ time: "03:15:25 PM"
+ },
+ {
+ type: "SELL",
+ symbol: "LT",
+ category: "EQUITY",
+ tradeType: "SWING",
+ date: "24 Oct 2024",
+ time: "02:45:50 PM"
+ },
+ {
+ type: "BUY",
+ symbol: "MARUTI",
+ category: "EQUITY",
+ tradeType: "INTRADAY",
+ date: "24 Oct 2024",
+ time: "03:15:25 PM"
},
{
- id: 12,
+ type: "SELL",
symbol: "LT",
+ category: "EQUITY",
+ tradeType: "SWING",
+ date: "24 Oct 2024",
+ time: "02:45:50 PM"
+ },
+ {
+ type: "BUY",
+ symbol: "MARUTI",
+ category: "EQUITY",
+ tradeType: "INTRADAY",
+ date: "24 Oct 2024",
+ time: "03:15:25 PM"
+ },
+ {
type: "SELL",
+ symbol: "LT",
category: "EQUITY",
tradeType: "SWING",
- timestamp: "24 Oct 2024 02:45:50 PM"
+ date: "24 Oct 2024",
+ time: "02:45:50 PM"
},
{
- id: 13,
+ type: "BUY",
symbol: "MARUTI",
+ category: "EQUITY",
+ tradeType: "INTRADAY",
+ date: "24 Oct 2024",
+ time: "03:15:25 PM"
+ },
+ {
+ type: "SELL",
+ symbol: "LT",
+ category: "EQUITY",
+ tradeType: "SWING",
+ date: "24 Oct 2024",
+ time: "02:45:50 PM"
+ },
+ {
type: "BUY",
+ symbol: "MARUTI",
category: "EQUITY",
tradeType: "INTRADAY",
- timestamp: "24 Oct 2024 03:15:25 PM"
+ date: "24 Oct 2024",
+ time: "03:15:25 PM"
}
-]
\ No newline at end of file
+]
+
+
+export { trades }
\ No newline at end of file
diff --git a/src/components/atoms/Badge/Badge.js b/src/components/atoms/Badge/Badge.js
deleted file mode 100644
index bb9d529..0000000
--- a/src/components/atoms/Badge/Badge.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { cva } from "class-variance-authority"
-import { h } from 'preact'
-import { clsx} from "clsx"
-import { twMerge } from "tailwind-merge"
-function cn(...inputs) {
- return twMerge(clsx(inputs))
-}
-
-
-const badgeVariants = cva(
- "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
- {
- variants: {
- variant: {
- default:
- "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
- secondary:
- "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
- destructive:
- "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
- outline: "text-foreground",
- },
- },
- defaultVariants: {
- variant: "default",
- },
- }
-)
-
-
-function Badge({ className, variant, ...props }) {
- return (
-
- )
-}
-
-export { Badge, badgeVariants }
diff --git a/src/components/atoms/BasicButton/BasicButton.js b/src/components/atoms/BasicButton/BasicButton.js
deleted file mode 100644
index 4d51a8f..0000000
--- a/src/components/atoms/BasicButton/BasicButton.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { h } from 'preact'
-import { forwardRef } from 'preact/compat'
-import { cva } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
- {
- variants: {
- variant: {
- default:
- "bg-primary text-primary-foreground shadow hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
- outline:
- "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- link: "text-primary underline-offset-4 hover:underline",
- },
- size: {
- default: "h-9 px-4 py-2",
- sm: "h-8 rounded-md px-3 text-xs",
- lg: "h-10 rounded-md px-8",
- icon: "h-9 w-9",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
-
-const Button = forwardRef(
- ({ className, variant, size, ...props }, ref) => {
- return (
-
- )
- }
-)
-
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
\ No newline at end of file
diff --git a/src/components/atoms/Button/Button.js b/src/components/atoms/Button/Button.js
deleted file mode 100644
index d728b20..0000000
--- a/src/components/atoms/Button/Button.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { h } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
-
-export const Button = ({
- type = 'buy',
- totalFields = 0,
- validFields = 0,
- onClick,
- children
-}) => {
- const progress = totalFields > 0 ? (validFields / totalFields) * 100 : 0;
- const isEnabled = progress === 100;
-
- // Button type styles
- const typeStyles = {
- buy: {
- enabled: "bg-green-600 hover:bg-green-700",
- progress: "bg-green-100",
- text: "text-white"
- },
- sell: {
- enabled: "bg-red-600 hover:bg-red-700",
- progress: "bg-red-100",
- text: "text-white"
- },
- reset: {
- enabled: "bg-gray-600 hover:bg-gray-700",
- progress: "bg-gray-100",
- text: "text-white"
- }
- };
-
- const currentStyle = typeStyles[type] || typeStyles.buy;
-
- return (
-
- {/* Progress bar */}
-
-
- {/* Button */}
-
-
- );
-};
-
-export default Button;
\ No newline at end of file
diff --git a/src/components/atoms/Card/Card.js b/src/components/atoms/Card/Card.js
deleted file mode 100644
index fc90665..0000000
--- a/src/components/atoms/Card/Card.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { h } from 'preact'
-import { forwardRef } from 'preact/compat'
-
-
-
-import { clsx} from "clsx"
-import { twMerge } from "tailwind-merge"
-function cn(...inputs) {
- return twMerge(clsx(inputs))
-}
-
-const Card = forwardRef(({ className, ...props }, ref) => (
-
-))
-Card.displayName = "Card"
-
-const CardHeader = forwardRef(({ className, ...props }, ref) => (
-
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = forwardRef(({ className, ...props }, ref) => (
-
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = forwardRef(({ className, ...props }, ref) => (
-
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = forwardRef(({ className, ...props }, ref) => (
-
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = forwardRef(({ className, ...props }, ref) => (
-
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
\ No newline at end of file
diff --git a/src/components/atoms/Header/Header.js b/src/components/atoms/Header/Header.js
deleted file mode 100644
index bdce6d5..0000000
--- a/src/components/atoms/Header/Header.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { h } from 'preact';
-import { Button } from '../../atoms/Button/Button.js';
-import { ArrowUpRight } from 'lucide-react';
-
-export const Header = () => {
- return (
-
-
Posted Trades
-
-
- );
-};
-
diff --git a/src/components/atoms/Input/Input.js b/src/components/atoms/Input/Input.js
deleted file mode 100644
index d4b9dcb..0000000
--- a/src/components/atoms/Input/Input.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { h } from 'preact';
-import { useState, useRef } from 'preact/hooks';
-import { ArrowLeft, CornerDownLeft } from 'lucide-react';
-
-const cn = (...classes) => classes.filter(Boolean).join(' ');
-
-const TradeInput = ({
- macro,
- onMacroTrigger,
- className,
- type = "text",
- ...props
-}) => {
- const [isFocused, setIsFocused] = useState(false);
- const [value, setValue] = useState("");
- const inputRef = useRef(null);
-
- const handleKeyDown = (e) => {
- if (macro === "enter" && e.key === "Enter") {
- e.preventDefault();
- onMacroTrigger?.(value);
- }
- if (macro === "backspace" && e.key === "Backspace" && !value) {
- e.preventDefault();
- onMacroTrigger?.(value);
- }
- };
-
- const handleChange = (e) => {
- setValue(e.target.value);
- props.onChange?.(e);
- };
-
- const showEnterIcon = macro === "enter" && isFocused;
- const showBackspaceIcon = macro === "backspace" && !value && isFocused;
-
- return (
-
-
{
- setIsFocused(true);
- props.onFocus?.(e);
- }}
- onBlur={(e) => {
- setIsFocused(false);
- props.onBlur?.(e);
- }}
- class={cn(
- "w-full rounded-md border px-3 py-2 text-base",
- "transition-all duration-200",
- "focus:outline-none focus:ring-2 focus:ring-[#4C8C41] focus:ring-offset-0",
- "placeholder:text-muted-foreground",
- showEnterIcon || showBackspaceIcon ? "pr-10" : "",
- className
- )}
- />
- {showEnterIcon && (
-
- )}
- {showBackspaceIcon && (
-
- )}
-
- );
-};
-
-export default TradeInput;
\ No newline at end of file
diff --git a/src/components/atoms/Tabs/Tabs.js b/src/components/atoms/Tabs/Tabs.js
deleted file mode 100644
index 1195c17..0000000
--- a/src/components/atoms/Tabs/Tabs.js
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client"
-import { h } from 'preact'; // Import h from Preact
-import { forwardRef } from 'preact/compat'; // Import forwardRef from Preact compatibility layer
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { twMerge } from "tailwind-merge"
-import { clsx} from "clsx"
-
-
-function cn(...inputs) {
- return twMerge(clsx(inputs))
-}
-
-export const Tabs = TabsPrimitive.Root;
-
-export const TabsList = forwardRef((props, ref) => (
-
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-export const TabsTrigger = forwardRef((props, ref) => (
-
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-export const TabsContent = forwardRef((props, ref) => (
-
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
diff --git a/src/components/molecules/StockSearch/StockSearch.js b/src/components/molecules/StockSearch/StockSearch.js
deleted file mode 100644
index 2df6ee6..0000000
--- a/src/components/molecules/StockSearch/StockSearch.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import { h } from 'preact';
-import { useState, useEffect, useMemo } from 'preact/hooks';
-
-// Utility for class names
-const cn = (...classes) => classes.filter(Boolean).join(' ');
-
-const HintMessage = ({ isNavigating }) => {
- const [isVisible, setIsVisible] = useState(false);
- const [message, setMessage] = useState('');
-
- useEffect(() => {
- setIsVisible(false);
-
- // Short delay before showing new message for smooth exit animation
- const timer = setTimeout(() => {
- setMessage(isNavigating ? 'Press ↵ to select' : 'Press ↑ ↓ on keyboard to highlight');
- setIsVisible(true);
- }, 200);
-
- return () => clearTimeout(timer);
- }, [isNavigating]);
-
- return (
-
-
- {message}
-
-
- );
-};
-
-const StockSearch = ({
- stocks = [],
- searchString = '',
- onSelect,
- className = ''
-}) => {
- const [selectedIndex, setSelectedIndex] = useState(-1);
- const [isNavigating, setIsNavigating] = useState(false);
-
- // Reset selection when search string changes
- useEffect(() => {
- setSelectedIndex(-1);
- setIsNavigating(false);
- }, [searchString]);
-
- // Filter stocks based on search string
- const filteredStocks = useMemo(() => {
- if (!searchString) return stocks;
- const search = searchString.toLowerCase();
- return stocks.filter(stock =>
- stock.stockName.toLowerCase().includes(search) ||
- stock.tickerSymbol.toLowerCase().includes(search)
- );
- }, [stocks, searchString]);
-
- // Keyboard navigation
- useEffect(() => {
- const handleKeyDown = (e) => {
- if (filteredStocks.length === 0) return;
-
- if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
- e.preventDefault();
- setIsNavigating(true);
- setSelectedIndex(current => {
- if (current === -1) return 0;
- return e.key === 'ArrowDown'
- ? (current + 1) % filteredStocks.length
- : (current - 1 + filteredStocks.length) % filteredStocks.length;
- });
- }
-
- if (e.key === 'Enter' && selectedIndex !== -1) {
- e.preventDefault();
- onSelect(filteredStocks[selectedIndex]);
- }
- };
-
- window.addEventListener('keydown', handleKeyDown);
- return () => window.removeEventListener('keydown', handleKeyDown);
- }, [filteredStocks, selectedIndex, onSelect]);
-
- return (
-
- {/* Search header */}
-
- searching for "{searchString}"...
-
-
- {/* Stock list */}
-
- {filteredStocks.map((stock, index) => (
-
onSelect(stock)}
- class={cn(
- 'p-3 cursor-pointer transition-colors duration-150',
- selectedIndex === index ? 'bg-gray-100' : 'hover:bg-gray-50',
- index !== filteredStocks.length - 1 && 'border-b'
- )}
- >
-
{stock.stockName}
-
{stock.tickerSymbol}
-
- ))}
- {filteredStocks.length === 0 && (
-
- No results found
-
- )}
-
-
- {/* Hint message with animation */}
-
-
-
-
- );
-};
-
-export default StockSearch;
\ No newline at end of file
diff --git a/src/components/molecules/StockSearch/stockSearch.css b/src/components/molecules/StockSearch/stockSearch.css
deleted file mode 100644
index 6d8cdc7..0000000
--- a/src/components/molecules/StockSearch/stockSearch.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/* Base styles */
-.stock-search-container {
- position: relative;
- width: 100%;
- }
-
- /* Message animations */
- .hint-message {
- position: relative;
- height: 24px;
- overflow: hidden;
- }
-
- .hint-text {
- position: absolute;
- left: 0;
- width: 100%;
- transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- }
-
- .hint-text-enter {
- transform: translateY(100%);
- opacity: 0;
- }
-
- .hint-text-enter-active {
- transform: translateY(0);
- opacity: 1;
- }
-
- .hint-text-exit {
- transform: translateY(0);
- opacity: 1;
- }
-
- .hint-text-exit-active {
- transform: translateY(-100%);
- opacity: 0;
- }
-
- /* Stock list animations */
- .stock-item {
- transition: background-color 0.15s ease;
- }
-
- .stock-item:hover {
- background-color: rgba(0, 0, 0, 0.05);
- }
-
- .stock-item.selected {
- background-color: rgba(0, 0, 0, 0.075);
- }
-
- /* Smooth scrolling */
- .stock-list {
- scroll-behavior: smooth;
- }
\ No newline at end of file
diff --git a/src/components/molecules/TabBar/TabBar.js b/src/components/molecules/TabBar/TabBar.js
deleted file mode 100644
index e8ba717..0000000
--- a/src/components/molecules/TabBar/TabBar.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { h } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
-
-// Utility function to combine class names
-const cn = (...classes) => classes.filter(Boolean).join(' ');
-
-export const TabsTrigger = ({
- value,
- activeValue,
- onClick,
- buttonRef,
- children,
- autoFocus
-}) => (
-
-);
-
-export const TabBar = ({ onTabChange = () => {} }) => {
- const [activeTab, setActiveTab] = useState("new");
- const tabRefs = useRef([]);
- const isInitialMount = useRef(true);
-
- useEffect(() => {
- // Focus the "New" tab on initial mount
- if (isInitialMount.current) {
- tabRefs.current[0]?.focus();
- isInitialMount.current = false;
- }
- }, []);
-
- const tabs = [
- { id: "new", label: "New" },
- { id: "update", label: "Update" },
- { id: "exit", label: "Exit" }
- ];
-
- const handleKeyNavigation = (e) => {
- const currentIndex = tabs.findIndex(tab => tab.id === activeTab);
- let nextIndex = currentIndex;
-
- switch (e.key) {
- case "ArrowLeft":
- e.preventDefault();
- nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
- break;
- case "ArrowRight":
- e.preventDefault();
- nextIndex = (currentIndex + 1) % tabs.length;
- break;
- default:
- return;
- }
-
- const newTab = tabs[nextIndex].id;
- setActiveTab(newTab);
- onTabChange(newTab);
- tabRefs.current[nextIndex]?.focus();
- };
-
- const handleTabClick = (tabId) => {
- setActiveTab(tabId);
- onTabChange(tabId);
- };
-
- return (
-
-
- {tabs.map((tab, index) => (
- tabRefs.current[index] = el}
- autoFocus={tab.id === "new"}
- >
- {tab.label}
-
- ))}
-
-
- );
-};
-
-export default TabBar;
\ No newline at end of file
diff --git a/src/components/molecules/TabHeader/TabHeader.js b/src/components/molecules/TabHeader/TabHeader.js
deleted file mode 100644
index 6185dbb..0000000
--- a/src/components/molecules/TabHeader/TabHeader.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { h } from 'preact';
-import { TabsList, TabsTrigger } from '../../atoms/Tabs/Tabs.js';
-import { useState } from 'preact/hooks';
-
-const tabStates = ["Active", "Completed"];
-
-export const TabHeader = () => {
- const [activeTab, setActiveTab] = useState("active");
-
- return (
-
- {tabStates.map((state) => (
- setActiveTab(state.toLowerCase())}
- >
- {state} 3
-
- ))}
-
- );
-};
\ No newline at end of file
diff --git a/src/components/molecules/TradeCard/TradeCard.js b/src/components/molecules/TradeCard/TradeCard.js
index 8ffe790..5470282 100644
--- a/src/components/molecules/TradeCard/TradeCard.js
+++ b/src/components/molecules/TradeCard/TradeCard.js
@@ -1,58 +1,71 @@
+import { useState } from 'preact/hooks';
import { h } from 'preact';
-import { Button } from '../../atoms/Button/Button.js';
-import { Badge } from '../../atoms/Badge/Badge.js';
-import { Card } from '../../atoms/Card/Card.js';
-import { ArrowUpRight, Pencil } from 'lucide-react';
+import { Edit2, Share, ChevronRight } from 'lucide-react';
-export const TradeCard = ({ trade }) => (
-
-
-
-
-
-
- {trade.type}
-
- {trade.symbol}
-
-
-
- {trade.category}
-
-
- {trade.tradeType}
-
+
+const TradeCard = ({ type, symbol, category, tradeType, date, time }) => {
+ const [isHovered, setIsHovered] = useState(false);
+
+ return (
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ {/* Main Card Content */}
+
+
+
+
+
+ {type}
+
+
+
+
+
{symbol}
+
+ {category}
+ {tradeType}
+
+
+
+
+
+
+ {/* Right Arrow */}
+
+
+
-
-
-
{trade.timestamp}
-
-
-
+
+ {/* Expandable Action Buttons Section */}
+
-
-
-);
+ );
+ };
+
+export default TradeCard;
\ No newline at end of file
diff --git a/src/components/molecules/TradeList/TradeList.js b/src/components/molecules/TradeList/TradeList.js
deleted file mode 100644
index 4e17508..0000000
--- a/src/components/molecules/TradeList/TradeList.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { h } from 'preact';
-import {TradeCard} from '../TradeCard/TradeCard.js';
-
-export const TradesList = ({ trades }) => (
-
-
- {trades.map((trade) => (
-
- ))}
-
-
-);
\ No newline at end of file
diff --git a/src/components/organisms/ActiveTrades/ActiveTrades.js b/src/components/organisms/ActiveTrades/ActiveTrades.js
deleted file mode 100644
index 5d951d0..0000000
--- a/src/components/organisms/ActiveTrades/ActiveTrades.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// PostedTrades.js
-import { h } from 'preact';
-import { Tabs , TabsContent } from '../../atoms/Tabs/Tabs.js';
-import {Header} from '../../atoms/Header/Header.js';
-import {TabHeader} from '../../molecules/TabHeader/TabHeader.js';
-import {TradesList} from '../../molecules/TradeList/TradeList.js';
-import {CompletedTab} from '../CompletedTrades/CompletedTrades.js';
-import { trades } from '../../../assets/data/data.js';
-
-const ActiveTrades = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default ActiveTrades;
\ No newline at end of file
diff --git a/src/components/organisms/Auth.js b/src/components/organisms/Auth.js
new file mode 100644
index 0000000..dbd42cb
--- /dev/null
+++ b/src/components/organisms/Auth.js
@@ -0,0 +1,57 @@
+import { h } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import { createClient } from '@supabase/supabase-js';
+import { Auth } from '@supabase/auth-ui-react';
+import { ThemeSupa } from '@supabase/auth-ui-shared';
+
+const supabase = createClient(
+ 'YOUR_SUPABASE_URL',
+ 'YOUR_SUPABASE_ANON_KEY'
+);
+
+const AuthPage = () => {
+ const [session, setSession] = useState(null);
+
+ useEffect(() => {
+ // Get initial session
+ supabase.auth.getSession().then(({ data: { session } }) => {
+ setSession(session);
+ });
+
+ // Listen for auth changes
+ const {
+ data: { subscription },
+ } = supabase.auth.onAuthStateChange((_event, session) => {
+ setSession(session);
+ if (session) {
+ // Notify background script of successful auth
+ chrome.runtime.sendMessage({ type: 'AUTH_SUCCESS' });
+ }
+ });
+
+ return () => subscription.unsubscribe();
+ }, []);
+
+ if (session) {
+ return
Authenticated! Closing window...
;
+ }
+
+ return (
+
+
+
Welcome to Trade Tracker
+
Please sign in to continue
+
+
+
+
+ );
+};
+
+export default AuthPage;
\ No newline at end of file
diff --git a/src/components/organisms/CompletedTrades/CompletedTrades.js b/src/components/organisms/CompletedTrades/CompletedTrades.js
deleted file mode 100644
index 36a933b..0000000
--- a/src/components/organisms/CompletedTrades/CompletedTrades.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { h } from 'preact';
-import { Card } from '../../atoms/Card/Card.js';
-
-export const CompletedTab = () => (
-
- Under Maintenance
-
- This section is currently under maintenance. Please check back later.
-
-
-);
\ No newline at end of file
diff --git a/src/components/organisms/TradeForm/TradeForm.js b/src/components/organisms/TradeForm/TradeForm.js
deleted file mode 100644
index bdc8000..0000000
--- a/src/components/organisms/TradeForm/TradeForm.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { h } from 'preact';
-import { useState } from 'preact/hooks';
-import {TabBar} from '../../molecules/TabBar/TabBar';
-import {Button} from '../../atoms/Button/Button';
-
-const TradeFormLayout = () => {
- const [activeTab, setActiveTab] = useState('new');
- const [validFields, setValidFields] = useState(0);
- const totalFields = 3; // Stock, Stoploss, Target fields
-
- const handleCopy = () => {
- console.log('Copying trade details...');
- // Add copy logic here
- };
-
- return (
-
-
- {/* Top: Tab Bar */}
-
-
-
-
- {/* Middle: Content Area */}
-
- Form content will go here
-
-
-
-
- {/* Bottom: Button */}
-
-
-
-
- );
-};
-
-export default TradeFormLayout;
\ No newline at end of file
diff --git a/src/components/pages/PostedTrades.js b/src/components/pages/PostedTrades.js
new file mode 100644
index 0000000..8153665
--- /dev/null
+++ b/src/components/pages/PostedTrades.js
@@ -0,0 +1,79 @@
+import { useState } from 'preact/hooks';
+import { h } from 'preact';
+import { Send } from 'lucide-react';
+import TradeCard from '../molecules/TradeCard/TradeCard.js'
+import {trades} from '../../assets/data/data.js';
+const PostedTrades = () => {
+ const [activeTab, setActiveTab] = useState('active');
+
+ let activeTrades = trades;
+ let countTrades = () => {
+ return activeTrades.length;
+ }
+ console.log(trades)
+ return (
+
+
+ {/* Header */}
+
+
Posted Trades
+
+
+
+ {/* Tabs */}
+
+
+
+
+
+
+
+ {/* Tab Contents */}
+
+ {activeTab === 'active' && (
+
+ {activeTrades.map((trade, index) => (
+
+ ))}
+
+ )}
+ {activeTab === 'completed' && (
+
+ {/* Completed trades would go here */}
+
+ )}
+
+
+
+ {/* Footer */}
+
+
+
+
+ );
+};
+
+export default PostedTrades;
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index dfc01bb..8148cb0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,11 +3,12 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtReloader = require('webpack-ext-reloader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const Dotenv = require('dotenv-webpack');
module.exports = {
mode: process.env.NODE_ENV || 'development',
entry: {
- popup: ['./styles/tailwind.css', './popup/popup.js'],
+ popup: ['./styles/tailwind.css', './public/popup/popup.js'],
background: './background/background.js'
},
output: {
@@ -54,8 +55,9 @@ module.exports = {
}
},
plugins: [
+ new Dotenv(),
new HtmlWebpackPlugin({
- template: './popup/index.html',
+ template: './public/popup/index.html',
filename: 'popup.html',
chunks: ['popup']
}),