9cef9b8d57
Merge _configs/ into config/ for single configuration directory. Update all path references. Changes: - Move _configs/* to config/ - Update .gitignore for new patterns - No code references to _configs/ found Impact: -1 root directory (layout_conventions.md compliance)
112 lines
3.9 KiB
Rust
112 lines
3.9 KiB
Rust
//! Home page component
|
|
|
|
use crate::components::loading::Loading;
|
|
use leptos::prelude::*;
|
|
|
|
/// Home page component
|
|
///
|
|
/// The main dashboard view showing project overview and recent activity.
|
|
/// This is the landing page of the application.
|
|
#[component]
|
|
pub fn HomePage() -> impl IntoView {
|
|
// Signal to track loading state (for future API integration)
|
|
let (loading, _set_loading) = signal(false);
|
|
|
|
view! {
|
|
<div class="space-y-6">
|
|
<div class="dash-card">
|
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
"Welcome to Syntaxis Dashboard"
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400">
|
|
"Monitor and manage your projects in real-time"
|
|
</p>
|
|
</div>
|
|
|
|
<Show
|
|
when=move || loading.get()
|
|
fallback=|| view! {
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<StatCard
|
|
title="Active Projects"
|
|
value="0"
|
|
icon="📊"
|
|
color="blue"
|
|
/>
|
|
<StatCard
|
|
title="Completed"
|
|
value="0"
|
|
icon="✅"
|
|
color="green"
|
|
/>
|
|
<StatCard
|
|
title="In Progress"
|
|
value="0"
|
|
icon="🔄"
|
|
color="yellow"
|
|
/>
|
|
</div>
|
|
}
|
|
>
|
|
<Loading message="Loading dashboard..."/>
|
|
</Show>
|
|
|
|
<div class="dash-card">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
|
|
"Recent Activity"
|
|
</h3>
|
|
<p class="text-gray-600 dark:text-gray-400 text-center py-8">
|
|
"No recent activity to display"
|
|
</p>
|
|
</div>
|
|
|
|
<div class="dash-card bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500">
|
|
<h3 class="text-lg font-semibold text-blue-900 dark:text-blue-300 mb-2">
|
|
"Getting Started"
|
|
</h3>
|
|
<ul class="space-y-2 text-gray-700 dark:text-gray-300">
|
|
<li>"• Dashboard foundation is ready (Phase 1 complete)"</li>
|
|
<li>"• API integration coming in Phase 2"</li>
|
|
<li>"• Real-time updates via WebSocket in Phase 3"</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
/// Statistics card component
|
|
///
|
|
/// Displays a single statistic with an icon and colored accent.
|
|
#[component]
|
|
fn StatCard(
|
|
/// Card title
|
|
title: &'static str,
|
|
/// Main value to display
|
|
value: &'static str,
|
|
/// Emoji icon
|
|
icon: &'static str,
|
|
/// Color theme (blue, green, yellow, etc.)
|
|
color: &'static str,
|
|
) -> impl IntoView {
|
|
let border_class = format!("border-l-4 border-{}-500", color);
|
|
let icon_bg_class = format!("bg-{}-100 dark:bg-{}-900/50", color, color);
|
|
|
|
view! {
|
|
<div class=format!("dash-card {}", border_class)>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
{title}
|
|
</p>
|
|
<p class="text-3xl font-bold text-gray-900 dark:text-white mt-2">
|
|
{value}
|
|
</p>
|
|
</div>
|
|
<div class=format!("text-4xl p-3 rounded-lg {}", icon_bg_class)>
|
|
{icon}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|