Initial commit

apps/web/src/views/DashboardView/DashboardView.module.css

@@ -0,0 +1,26 @@
+.main {
+    min-height: 100dvh;
+    background-color: var(--color-bg-page);
+}
+
+.container {
+    max-width: 1200px;
+    margin-inline: auto;
+    padding: var(--space-8) var(--space-6);
+}
+
+.activity {
+    margin-block-start: var(--space-8);
+}
+
+.sectionTitle {
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    margin-block-end: var(--space-4);
+}
+
+.empty {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+}

apps/web/src/views/DashboardView/DashboardView.tsx

@@ -0,0 +1,45 @@
+import { getTranslations } from 'next-intl/server';
+import type { Locale } from '@dwellops/i18n';
+import { PageHeader } from '@/components/PageHeader/PageHeader';
+import { DashboardStats } from '@/widgets/DashboardStats/DashboardStats';
+import styles from './DashboardView.module.css';
+
+interface DashboardViewProps {
+    locale: Locale;
+}
+
+/**
+ * Dashboard page-level view.
+ *
+ * Views are server components by default. They orchestrate data loading
+ * and compose components and widgets into the full page layout.
+ * Views do not contain reusable primitive logic.
+ */
+export async function DashboardView({ locale }: DashboardViewProps) {
+    const t = await getTranslations({ locale, namespace: 'dashboard' });
+
+    // In a real app this data would come from the API layer.
+    const stats = [
+        { labelKey: 'totalUnits' as const, value: 24 },
+        { labelKey: 'activeResidents' as const, value: 87 },
+        { labelKey: 'pendingRequests' as const, value: 3 },
+        { labelKey: 'openIssues' as const, value: 7 },
+    ];
+
+    return (
+        <main className={styles.main}>
+            <div className={styles.container}>
+                <PageHeader title={t('title')} />
+                <DashboardStats stats={stats} />
+                <section className={styles.activity} aria-labelledby="activity-heading">
+                    <h2 id="activity-heading" className={styles.sectionTitle}>
+                        {t('recentActivity')}
+                    </h2>
+                    <p className={styles.empty}>{t('noActivity')}</p>
+                </section>
+            </div>
+        </main>
+    );
+}
+
+export default DashboardView;