<div class="flex items-center justify-between">
    <div>
        <h1 class="text-2xl font-bold">Dashboard</h1>
        <p class="text-base-content/60 mt-1">Welcome back, here's what's happening today</p>
    </div>
    <div class="flex items-center space-x-3">
        <c-button variant="outline" size="sm">
            <c-icon name="download" size="16" class="mr-2" />
            Export
        </c-button>
        <c-button variant="primary" size="sm">
            <c-icon name="plus" size="16" class="mr-2" />
            Add New
        </c-button>
    </div>
</div>

<div class="space-y-4">
    <c-breadcrumbs>
        <c-breadcrumb>Home</c-breadcrumb>
        <c-breadcrumb>Projects</c-breadcrumb>
        <c-breadcrumb>Website Redesign</c-breadcrumb>
    </c-breadcrumbs>
    
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold">Website Redesign</h1>
            <div class="flex items-center space-x-4 mt-2">
                <c-badge variant="success">Active</c-badge>
                <span class="text-sm text-base-content/60">Last updated 2 hours ago</span>
            </div>
        </div>
        <c-button variant="primary" size="sm">
            Edit Project
        </c-button>
    </div>
</div>

<div class="p-6 border-b border-base-300">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h1 class="text-2xl font-bold">User Management</h1>
            <p class="text-base-content/60 mt-1">Manage user accounts and permissions</p>
        </div>
        <div class="flex items-center space-x-3">
            <c-form.input 
                placeholder="Search users..." 
                size="sm"
                class="w-64"
            />
            <c-button variant="primary" size="sm">
                <c-icon name="user-plus" size="16" class="mr-2" />
                Add User
            </c-button>
        </div>
    </div>
    
    <c-tabs>
        <c-tab title="All Users" active="true" />
        <c-tab title="Active" />
        <c-tab title="Pending" />
        <c-tab title="Suspended" />
    </c-tabs>
</div>

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold">Analytics Overview</h1>
        <p class="text-base-content/60 mt-1">Track your performance metrics</p>
    </div>
    <div class="flex items-center space-x-2">
        <c-dropdown>
            <c-button variant="outline" size="sm">
                Last 30 days
                <c-icon name="chevron-down" size="16" class="ml-2" />
            </c-button>
        </c-dropdown>
        <c-button variant="primary" size="sm">
            Generate Report
        </c-button>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
    <c-card class="text-center">
        <div class="text-3xl font-bold text-primary">12.5K</div>
        <div class="text-sm text-base-content/60 mt-1">Total Users</div>
        <div class="flex items-center justify-center mt-2">
            <c-icon name="trending-up" size="16" class="text-success mr-1" />
            <span class="text-sm text-success">+12%</span>
        </div>
    </c-card>
</div>