mirror of
https://github.com/clucraft/PriceGhost.git
synced 2026-05-04 13:22:58 +02:00
Redesign dashboard with list layout, sparklines, and search
- Add sparkline component for 7-day price history visualization - Convert product cards to horizontal list items - Add search functionality to filter products by name/URL - Backend returns sparkline data and 7-day price change with products - Show price trend indicator (green for drops, red for increases) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
clucraft
parent
93dbb5cc7c
commit
ba9e52b90f
6 changed files with 519 additions and 80 deletions
|
|
@ -41,6 +41,11 @@ export const authApi = {
|
|||
};
|
||||
|
||||
// Products API
|
||||
export interface SparklinePoint {
|
||||
price: number;
|
||||
recorded_at: string;
|
||||
}
|
||||
|
||||
export interface Product {
|
||||
id: number;
|
||||
user_id: number;
|
||||
|
|
@ -52,6 +57,8 @@ export interface Product {
|
|||
created_at: string;
|
||||
current_price: number | null;
|
||||
currency: string | null;
|
||||
sparkline?: SparklinePoint[];
|
||||
price_change_7d?: number | null;
|
||||
}
|
||||
|
||||
export interface ProductWithStats extends Product {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import { Product } from '../api/client';
|
||||
import Sparkline from './Sparkline';
|
||||
|
||||
interface ProductCardProps {
|
||||
product: Product;
|
||||
|
|
@ -16,107 +17,179 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
|
|||
return `${currencySymbol}${numPrice.toFixed(2)}`;
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string | null) => {
|
||||
if (!dateStr) return 'Never';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
|
||||
const formatPriceChange = (change: number | null | undefined) => {
|
||||
if (change === null || change === undefined) return null;
|
||||
const sign = change > 0 ? '+' : '';
|
||||
return `${sign}${change.toFixed(1)}%`;
|
||||
};
|
||||
|
||||
const truncateUrl = (url: string, maxLength: number = 50) => {
|
||||
const truncateUrl = (url: string) => {
|
||||
try {
|
||||
const parsed = new URL(url);
|
||||
const display = parsed.hostname + parsed.pathname;
|
||||
return display.length > maxLength
|
||||
? display.slice(0, maxLength) + '...'
|
||||
: display;
|
||||
return parsed.hostname.replace('www.', '');
|
||||
} catch {
|
||||
return url.length > maxLength ? url.slice(0, maxLength) + '...' : url;
|
||||
return url;
|
||||
}
|
||||
};
|
||||
|
||||
const priceChangeClass = product.price_change_7d
|
||||
? product.price_change_7d < 0
|
||||
? 'price-down'
|
||||
: product.price_change_7d > 0
|
||||
? 'price-up'
|
||||
: ''
|
||||
: '';
|
||||
|
||||
return (
|
||||
<div className="product-card">
|
||||
<div className="product-list-item">
|
||||
<style>{`
|
||||
.product-card {
|
||||
.product-list-item {
|
||||
background: var(--surface);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: box-shadow 0.2s;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
.product-list-item:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
.product-thumbnail {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 0.5rem;
|
||||
object-fit: contain;
|
||||
background: #f8fafc;
|
||||
padding: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-image-placeholder {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
[data-theme="dark"] .product-thumbnail {
|
||||
background: #334155;
|
||||
}
|
||||
|
||||
.product-thumbnail-placeholder {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 2rem;
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 1rem;
|
||||
[data-theme="dark"] .product-thumbnail-placeholder {
|
||||
background: linear-gradient(135deg, #334155 0%, #475569 100%);
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.product-url {
|
||||
.product-source {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 1.5rem;
|
||||
.product-price-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.25rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.product-current-price {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.product-meta {
|
||||
.product-price-change {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-price-change.price-up {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.product-price-change.price-down {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.product-sparkline {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-actions .btn {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.product-list-item {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
order: 1;
|
||||
flex-basis: calc(100% - 80px);
|
||||
}
|
||||
|
||||
.product-thumbnail,
|
||||
.product-thumbnail-placeholder {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.product-price-section {
|
||||
order: 2;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.product-sparkline {
|
||||
order: 3;
|
||||
flex-basis: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
order: 4;
|
||||
flex-basis: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.product-actions .btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
|
|
@ -124,33 +197,48 @@ export default function ProductCard({ product, onDelete }: ProductCardProps) {
|
|||
<img
|
||||
src={product.image_url}
|
||||
alt={product.name || 'Product'}
|
||||
className="product-image"
|
||||
className="product-thumbnail"
|
||||
/>
|
||||
) : (
|
||||
<div className="product-image-placeholder">📦</div>
|
||||
<div className="product-thumbnail-placeholder">📦</div>
|
||||
)}
|
||||
|
||||
<div className="product-content">
|
||||
<div className="product-info">
|
||||
<h3 className="product-name">{product.name || 'Unknown Product'}</h3>
|
||||
<p className="product-url">{truncateUrl(product.url)}</p>
|
||||
<div className="product-price">
|
||||
{formatPrice(product.current_price, product.currency)}
|
||||
</div>
|
||||
<p className="product-meta">
|
||||
Last checked: {formatDate(product.last_checked)}
|
||||
</p>
|
||||
<p className="product-source">{truncateUrl(product.url)}</p>
|
||||
</div>
|
||||
|
||||
<div className="product-actions">
|
||||
<Link to={`/product/${product.id}`} className="btn btn-primary">
|
||||
View Details
|
||||
</Link>
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => onDelete(product.id)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<div className="product-price-section">
|
||||
<span className="product-current-price">
|
||||
{formatPrice(product.current_price, product.currency)}
|
||||
</span>
|
||||
{product.price_change_7d !== null && product.price_change_7d !== undefined && (
|
||||
<span className={`product-price-change ${priceChangeClass}`}>
|
||||
{formatPriceChange(product.price_change_7d)} (7d)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="product-sparkline">
|
||||
<Sparkline
|
||||
data={product.sparkline || []}
|
||||
width={100}
|
||||
height={36}
|
||||
showTrend={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="product-actions">
|
||||
<Link to={`/product/${product.id}`} className="btn btn-primary">
|
||||
View
|
||||
</Link>
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => onDelete(product.id)}
|
||||
title="Delete"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
145
frontend/src/components/Sparkline.tsx
Normal file
145
frontend/src/components/Sparkline.tsx
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
import { SparklinePoint } from '../api/client';
|
||||
|
||||
interface SparklineProps {
|
||||
data: SparklinePoint[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
color?: string;
|
||||
showTrend?: boolean;
|
||||
}
|
||||
|
||||
export default function Sparkline({
|
||||
data,
|
||||
width = 120,
|
||||
height = 40,
|
||||
color,
|
||||
showTrend = true,
|
||||
}: SparklineProps) {
|
||||
if (!data || data.length < 2) {
|
||||
return (
|
||||
<div
|
||||
className="sparkline-empty"
|
||||
style={{ width, height }}
|
||||
>
|
||||
<style>{`
|
||||
.sparkline-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
background: var(--surface-alt, #f1f5f9);
|
||||
border-radius: 4px;
|
||||
}
|
||||
[data-theme="dark"] .sparkline-empty {
|
||||
background: #334155;
|
||||
}
|
||||
`}</style>
|
||||
<span>No data</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const prices = data.map((d) =>
|
||||
typeof d.price === 'string' ? parseFloat(d.price) : d.price
|
||||
);
|
||||
const minPrice = Math.min(...prices);
|
||||
const maxPrice = Math.max(...prices);
|
||||
const priceRange = maxPrice - minPrice || 1;
|
||||
|
||||
// Calculate trend
|
||||
const firstPrice = prices[0];
|
||||
const lastPrice = prices[prices.length - 1];
|
||||
const trend = lastPrice < firstPrice ? 'down' : lastPrice > firstPrice ? 'up' : 'flat';
|
||||
|
||||
// Determine color based on trend (green for down = good, red for up = bad for prices)
|
||||
const lineColor = color || (trend === 'down' ? '#10b981' : trend === 'up' ? '#ef4444' : '#6366f1');
|
||||
|
||||
// Create SVG path
|
||||
const padding = 4;
|
||||
const chartWidth = width - padding * 2;
|
||||
const chartHeight = height - padding * 2;
|
||||
|
||||
const points = prices.map((price, index) => {
|
||||
const x = padding + (index / (prices.length - 1)) * chartWidth;
|
||||
const y = padding + chartHeight - ((price - minPrice) / priceRange) * chartHeight;
|
||||
return `${x},${y}`;
|
||||
});
|
||||
|
||||
const pathD = `M ${points.join(' L ')}`;
|
||||
|
||||
// Create gradient fill path
|
||||
const fillPoints = [...points];
|
||||
fillPoints.push(`${padding + chartWidth},${padding + chartHeight}`);
|
||||
fillPoints.push(`${padding},${padding + chartHeight}`);
|
||||
const fillD = `M ${points.join(' L ')} L ${padding + chartWidth},${padding + chartHeight} L ${padding},${padding + chartHeight} Z`;
|
||||
|
||||
return (
|
||||
<div className="sparkline-container">
|
||||
<style>{`
|
||||
.sparkline-container {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.sparkline-svg {
|
||||
display: block;
|
||||
}
|
||||
.sparkline-trend {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
.sparkline-trend.up {
|
||||
color: #ef4444;
|
||||
}
|
||||
.sparkline-trend.down {
|
||||
color: #10b981;
|
||||
}
|
||||
.sparkline-trend.flat {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
`}</style>
|
||||
<svg
|
||||
className="sparkline-svg"
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id={`sparkline-gradient-${lineColor.replace('#', '')}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={lineColor} stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor={lineColor} stopOpacity="0.05" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d={fillD}
|
||||
fill={`url(#sparkline-gradient-${lineColor.replace('#', '')})`}
|
||||
/>
|
||||
<path
|
||||
d={pathD}
|
||||
fill="none"
|
||||
stroke={lineColor}
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<circle
|
||||
cx={padding + chartWidth}
|
||||
cy={padding + chartHeight - ((lastPrice - minPrice) / priceRange) * chartHeight}
|
||||
r="3"
|
||||
fill={lineColor}
|
||||
/>
|
||||
</svg>
|
||||
{showTrend && (
|
||||
<span className={`sparkline-trend ${trend}`}>
|
||||
{trend === 'down' && '↓'}
|
||||
{trend === 'up' && '↑'}
|
||||
{trend === 'flat' && '→'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import Layout from '../components/Layout';
|
||||
import ProductCard from '../components/ProductCard';
|
||||
import ProductForm from '../components/ProductForm';
|
||||
|
|
@ -8,6 +8,7 @@ export default function Dashboard() {
|
|||
const [products, setProducts] = useState<Product[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
const fetchProducts = async () => {
|
||||
try {
|
||||
|
|
@ -42,11 +43,21 @@ export default function Dashboard() {
|
|||
}
|
||||
};
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
if (!searchQuery.trim()) return products;
|
||||
const query = searchQuery.toLowerCase();
|
||||
return products.filter(
|
||||
(p) =>
|
||||
p.name?.toLowerCase().includes(query) ||
|
||||
p.url.toLowerCase().includes(query)
|
||||
);
|
||||
}, [products, searchQuery]);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<style>{`
|
||||
.dashboard-header {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
|
|
@ -60,10 +71,60 @@ export default function Dashboard() {
|
|||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
.dashboard-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 0.875rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 0.875rem 0.75rem 2.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-size: 0.9375rem;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.products-count {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.products-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
|
|
@ -90,6 +151,31 @@ export default function Dashboard() {
|
|||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
background: var(--surface);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.no-results-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.no-results-text {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -108,6 +194,35 @@ export default function Dashboard() {
|
|||
|
||||
{error && <div className="alert alert-error">{error}</div>}
|
||||
|
||||
{!isLoading && products.length > 0 && (
|
||||
<div className="dashboard-controls">
|
||||
<div className="search-container">
|
||||
<span className="search-icon">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="7" cy="7" r="5" />
|
||||
<path d="M13 13L11 11" />
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="search-input"
|
||||
placeholder="Search products..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="loading-state">
|
||||
<span className="spinner" style={{ width: '3rem', height: '3rem' }} />
|
||||
|
|
@ -120,16 +235,31 @@ export default function Dashboard() {
|
|||
Add your first product URL above to start tracking prices!
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="products-grid">
|
||||
{products.map((product) => (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
product={product}
|
||||
onDelete={handleDeleteProduct}
|
||||
/>
|
||||
))}
|
||||
) : filteredProducts.length === 0 ? (
|
||||
<div className="no-results">
|
||||
<div className="no-results-icon">🔍</div>
|
||||
<h3 className="no-results-title">No matching products</h3>
|
||||
<p className="no-results-text">
|
||||
Try adjusting your search query
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<p className="products-count">
|
||||
{filteredProducts.length === products.length
|
||||
? `${products.length} product${products.length !== 1 ? 's' : ''}`
|
||||
: `${filteredProducts.length} of ${products.length} products`}
|
||||
</p>
|
||||
<div className="products-list">
|
||||
{filteredProducts.map((product) => (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
product={product}
|
||||
onDelete={handleDeleteProduct}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue