File: /home/workzeni/stream-flix.workzenix.com/resources/views/admin/pages/dashboard/index.blade.php
@extends('admin.index')
@section('title', 'Deshboard')
@section('dashboard-nav', 'active')
@section('style')
<!-- Dashboard Specific Styles -->
<style>
.activity-list {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.activity-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
transition: var(--transition-fast);
}
.activity-item:hover {
background: var(--glass-bg);
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.9rem;
flex-shrink: 0;
}
.activity-content {
flex: 1;
}
.activity-title {
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.activity-description {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: var(--spacing-xs);
}
.activity-time {
font-size: 0.8rem;
color: var(--text-muted);
}
.top-movies-list {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.top-movie-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
transition: var(--transition-fast);
}
.top-movie-item:hover {
background: var(--glass-bg);
}
.movie-rank {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--gradient-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.8rem;
flex-shrink: 0;
}
.movie-thumbnail {
width: 40px;
height: 60px;
border-radius: var(--border-radius-sm);
object-fit: cover;
flex-shrink: 0;
}
.movie-info {
flex: 1;
}
.movie-title {
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.movie-views {
font-size: 0.8rem;
color: var(--text-muted);
}
.movie-rating {
display: flex;
align-items: center;
gap: var(--spacing-xs);
color: #f59e0b;
font-weight: 500;
font-size: 0.9rem;
}
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.content-area>div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: 1fr;
}
}
</style>
@endsection
@section('content')
<!-- Content Area -->
<div class="content-area">
<!-- Stats Grid -->
<div class="stats-grid">
<div class="stat-card animate-on-scroll">
<div class="stat-header">
<div class="stat-icon users">
<i class="fas fa-users"></i>
</div>
<div class="stat-trend up">
<i class="fas fa-arrow-up"></i>
12.5%
</div>
</div>
<div class="stat-value">24,567</div>
<div class="stat-label">Total Users</div>
<div class="stat-description">+2,145 new users this month</div>
</div>
<div class="stat-card animate-on-scroll">
<div class="stat-header">
<div class="stat-icon movies">
<i class="fas fa-film"></i>
</div>
<div class="stat-trend up">
<i class="fas fa-arrow-up"></i>
8.2%
</div>
</div>
<div class="stat-value">1,245</div>
<div class="stat-label">Total Movies</div>
<div class="stat-description">+45 movies added this week</div>
</div>
<div class="stat-card animate-on-scroll">
<div class="stat-header">
<div class="stat-icon revenue">
<i class="fas fa-dollar-sign"></i>
</div>
<div class="stat-trend up">
<i class="fas fa-arrow-up"></i>
15.3%
</div>
</div>
<div class="stat-value">$89,432</div>
<div class="stat-label">Monthly Revenue</div>
<div class="stat-description">+$12,345 from last month</div>
</div>
<div class="stat-card animate-on-scroll">
<div class="stat-header">
<div class="stat-icon views">
<i class="fas fa-eye"></i>
</div>
<div class="stat-trend down">
<i class="fas fa-arrow-down"></i>
3.1%
</div>
</div>
<div class="stat-value">2.4M</div>
<div class="stat-label">Total Views</div>
<div class="stat-description">Views in the last 30 days</div>
</div>
</div>
<!-- Charts Row -->
<div
style="display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl);">
<!-- Views Chart -->
<div class="card animate-on-scroll">
<div class="card-header">
<h3 class="card-title">Views Analytics</h3>
<div class="d-flex gap-sm">
<button class="btn btn-sm btn-outline">
<i class="fas fa-download"></i>
Export
</button>
<button class="btn btn-sm btn-ghost">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="card-body">
<canvas id="viewsChart" height="100"></canvas>
</div>
</div>
<!-- Revenue Distribution -->
<div class="card animate-on-scroll">
<div class="card-header">
<h3 class="card-title">Revenue Sources</h3>
</div>
<div class="card-body">
<canvas id="revenueChart"></canvas>
</div>
</div>
</div>
<!-- Recent Activity & Top Movies -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl);">
<!-- Recent Activity -->
<div class="card animate-on-scroll">
<div class="card-header">
<h3 class="card-title">Recent Activity</h3>
<button class="btn btn-sm btn-ghost">View All</button>
</div>
<div class="card-body">
<div class="activity-list">
<div class="activity-item">
<div class="activity-icon">
<i class="fas fa-user-plus"></i>
</div>
<div class="activity-content">
<div class="activity-title">New user registered</div>
<div class="activity-description">Sarah Johnson joined the platform</div>
<div class="activity-time">2 minutes ago</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon">
<i class="fas fa-film"></i>
</div>
<div class="activity-content">
<div class="activity-title">Movie uploaded</div>
<div class="activity-description">"The Matrix Resurrections" added to library</div>
<div class="activity-time">15 minutes ago</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon">
<i class="fas fa-dollar-sign"></i>
</div>
<div class="activity-content">
<div class="activity-title">Payment received</div>
<div class="activity-description">Premium subscription from Mike Chen</div>
<div class="activity-time">1 hour ago</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon">
<i class="fas fa-star"></i>
</div>
<div class="activity-content">
<div class="activity-title">New review</div>
<div class="activity-description">5-star review for "Dune"</div>
<div class="activity-time">2 hours ago</div>
</div>
</div>
</div>
</div>
</div>
<!-- Top Movies -->
<div class="card animate-on-scroll">
<div class="card-header">
<h3 class="card-title">Top Movies This Week</h3>
<button class="btn btn-sm btn-ghost">View All</button>
</div>
<div class="card-body">
<div class="top-movies-list">
<div class="top-movie-item">
<div class="movie-rank">1</div>
<img src="https://images.unsplash.com/photo-1489599735734-79b4169c4388?w=50&h=75&fit=crop"
alt="Movie" class="movie-thumbnail">
<div class="movie-info">
<div class="movie-title">Spider-Man: No Way Home</div>
<div class="movie-views">2.4M views</div>
</div>
<div class="movie-rating">
<i class="fas fa-star"></i>
9.2
</div>
</div>
<div class="top-movie-item">
<div class="movie-rank">2</div>
<img src="https://images.unsplash.com/photo-1440404653325-ab127d49abc1?w=50&h=75&fit=crop"
alt="Movie" class="movie-thumbnail">
<div class="movie-info">
<div class="movie-title">The Batman</div>
<div class="movie-views">1.8M views</div>
</div>
<div class="movie-rating">
<i class="fas fa-star"></i>
8.7
</div>
</div>
<div class="top-movie-item">
<div class="movie-rank">3</div>
<img src="https://images.unsplash.com/photo-1478720568477-b0ac8ace7b33?w=50&h=75&fit=crop"
alt="Movie" class="movie-thumbnail">
<div class="movie-info">
<div class="movie-title">Dune</div>
<div class="movie-views">1.5M views</div>
</div>
<div class="movie-rating">
<i class="fas fa-star"></i>
8.5
</div>
</div>
<div class="top-movie-item">
<div class="movie-rank">4</div>
<img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?w=50&h=75&fit=crop"
alt="Movie" class="movie-thumbnail">
<div class="movie-info">
<div class="movie-title">Top Gun: Maverick</div>
<div class="movie-views">1.2M views</div>
</div>
<div class="movie-rating">
<i class="fas fa-star"></i>
8.9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection