COLSYS/kniha_jizd_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Clean minimal design matching shadcn.com aesthetic

Browse Source 
- Remove all gradient backgrounds for clean white interface
- Update color scheme to neutral shadcn.com palette
- Simplify card headers (remove icons and colored backgrounds)
- Clean up spacing and reduce visual noise
- Update buttons to use outline variants
- Simplify table and stats styling with muted colors
- Improve typography with better font smoothing
- Match shadcn.com's minimal, professional aesthetic

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Docker Config Backup
2025-10-10 20:49:14 +02:00
parent 410d5092ff
commit 24bd736b9a
4 changed files with 75 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
frontend/app/components/DataPreview.tsx
View File

@@ -56,10 +56,10 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
}
if (loading) {
return (
<Card className="bg-white/98 backdrop-blur-lg border-white/30">
<CardContent className="flex flex-col items-center justify-center h-96 p-8">
<Loader2 className="h-20 w-20 text-blue-600 animate-spin" />
<p className="mt-6 text-gray-700 font-semibold text-lg">Načítání dat...</p>
<Card>
<CardContent className="flex flex-col items-center justify-center h-96">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
<p className="mt-4 text-sm text-muted-foreground">Načítání dat...</p>
</CardContent>
</Card>
)
@@ -67,26 +67,16 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
if (!data) {
return (
<Card className="bg-white/98 backdrop-blur-lg border-white/30">
<CardHeader className="bg-gradient-to-r from-purple-50 to-purple-100 border-b border-purple-200">
<CardTitle className="text-3xl font-bold text-gray-800 flex items-center gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
<BarChart3 className="w-7 h-7 text-white" />
</div>
<span>Náhled dat</span>
</CardTitle>
<Card>
<CardHeader>
<CardTitle>Náhled dat</CardTitle>
</CardHeader>
<CardContent className="p-8">
<CardContent>
<div className="flex flex-col items-center justify-center py-16 text-center">
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-4">
<FileText className="w-10 h-10 text-gray-400" />
</div>
<p className="text-gray-500 font-medium">
<FileText className="h-12 w-12 text-muted-foreground mb-4" />
<p className="text-sm text-muted-foreground">
Vyplňte formulář a klikněte na "Vypočítat"
</p>
<p className="text-gray-400 text-sm mt-1">
Data se zobrazí zde
</p>
</div>
</CardContent>
</Card>
@@ -94,60 +84,55 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
}
return (
<Card className="bg-white/98 backdrop-blur-lg border-white/30">
<CardHeader className="bg-gradient-to-r from-purple-50 to-purple-100 border-b border-purple-200">
<CardTitle className="text-3xl font-bold text-gray-800 flex items-center gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
<BarChart3 className="w-7 h-7 text-white" />
</div>
<span>Náhled dat</span>
</CardTitle>
<Card>
<CardHeader>
<CardTitle>Náhled dat</CardTitle>
</CardHeader>
<CardContent className="p-8">
<CardContent>
<div className="mb-6 grid grid-cols-2 gap-3 bg-gradient-to-br from-blue-50 to-indigo-50 p-5 rounded-xl border border-blue-100">
<div className="mb-4 grid grid-cols-2 md:grid-cols-3 gap-4 p-4 rounded-lg border bg-muted/50">
<div>
<p className="text-sm text-gray-600">Měsíc</p>
<p className="font-semibold text-lg">{data.month}</p>
<p className="text-xs text-muted-foreground">Měsíc</p>
<p className="font-medium">{data.month}</p>
</div>
<div>
<p className="text-sm text-gray-600">Celkem záznamů</p>
<p className="font-semibold text-lg">{data.total_entries}</p>
<p className="text-xs text-muted-foreground">Celkem záznamů</p>
<p className="font-medium">{data.total_entries}</p>
</div>
<div>
<p className="text-sm text-gray-600">Počáteční km</p>
<p className="font-semibold text-lg">{data.start_km.toLocaleString()}</p>
<p className="text-xs text-muted-foreground">Počáteční km</p>
<p className="font-medium">{data.start_km.toLocaleString()}</p>
</div>
<div>
<p className="text-sm text-gray-600">Koncový km</p>
<p className="font-semibold text-lg">{data.end_km.toLocaleString()}</p>
<p className="text-xs text-muted-foreground">Koncový km</p>
<p className="font-medium">{data.end_km.toLocaleString()}</p>
</div>
<div>
<p className="text-sm text-gray-600">Celkem ujeto</p>
<p className="font-semibold text-lg">{(data.end_km - data.start_km).toLocaleString()} km</p>
<p className="text-xs text-muted-foreground">Celkem ujeto</p>
<p className="font-medium">{(data.end_km - data.start_km).toLocaleString()} km</p>
</div>
<div>
<p className="text-sm text-gray-600">Filtrováno dnů</p>
<p className="font-semibold text-lg">{data.filtered_days}</p>
<p className="text-xs text-muted-foreground">Filtrováno dnů</p>
<p className="font-medium">{data.filtered_days}</p>
</div>
</div>
<div className="overflow-auto max-h-96 rounded-xl border border-gray-200">
<div className="overflow-auto max-h-96 rounded-md border">
<table className="w-full text-sm">
<thead className="bg-gradient-to-r from-gray-50 to-gray-100 sticky top-0">
<thead className="bg-muted/50 sticky top-0">
<tr>
{data.entries.length > 0 && Object.keys(data.entries[0]).map((key: string) => (
<th key={key} className="px-4 py-3 text-left font-bold text-gray-700 border-b-2 border-gray-300 whitespace-nowrap">
<th key={key} className="px-4 py-2 text-left font-medium border-b whitespace-nowrap">
{key}
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-100 bg-white">
<tbody className="divide-y">
{data.entries.map((entry: any, index: number) => (
<tr key={index} className="hover:bg-blue-50 transition-colors">
<tr key={index} className="hover:bg-muted/50">
{Object.keys(entry).map((key: string) => (
<td key={key} className="px-4 py-3 text-right text-gray-600">
<td key={key} className="px-4 py-2 text-right">
{entry[key] !== null && entry[key] !== undefined ? entry[key] : '-'}
</td>
))}
@@ -158,29 +143,29 @@ export default function DataPreview({ data, loading, formData }: DataPreviewProp
</div>
{formData && formData.startDate === '2025-01-01' && (
<div className="mt-6">
<div className="mt-4">
<Button
onClick={handleFillToWebsite}
disabled={filling}
size="lg"
className="w-full bg-gradient-to-r from-orange-600 to-orange-700 hover:from-orange-700 hover:to-orange-800 text-lg h-12"
variant="secondary"
className="w-full"
>
{filling ? (
<>
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Vyplňování...
</>
) : (
<>
<Upload className="mr-2 h-5 w-5" />
<Upload className="mr-2 h-4 w-4" />
Vyplnit na web
</>
)}
</Button>
{fillResult && (
<div className={`mt-4 ${fillResult.dry_run ? 'bg-blue-50 border-blue-200' : 'bg-green-50 border-green-200'} border rounded-xl p-4`}>
<h3 className={`font-bold ${fillResult.dry_run ? 'text-blue-900' : 'text-green-900'} mb-2 flex items-center gap-2`}>
<div className={`mt-4 rounded-md border p-4 ${fillResult.dry_run ? 'bg-blue-50 border-blue-200' : 'bg-green-50 border-green-200'}`}>
<h3 className={`text-sm font-semibold mb-2 flex items-center gap-2 ${fillResult.dry_run ? 'text-blue-900' : 'text-green-900'}`}>
{fillResult.dry_run ? (
<>
<AlertCircle className="h-5 w-5" />