feat: implement pagination and enhance UI with modern design

README.md

@@ -8,15 +8,20 @@ to be added
 ## Plan
 - [x] Add html view to show the currency data
 - [x] Save command data to database
-- [ ] email when failing fetching currency using resen
+- [x] make proper pagination
-- [ ] caching for fetching command (6 hours), and for the controller (1 hour)
+- [x] make a complete test for the project
-- [ ] make proper pagination
+- [x] save tabs state as local storage
-- [ ] save tabs state as query param
+- [ ] email when failing fetching currency using resend
-- [ ] make a complete test for the project
+- [ ] caching for the controller (1 hour)
 - [ ] make the app A PWA
 - [ ] put a place for ads
 - [ ] add some useful information like what is buy price and sell price, the resource of the data, etc
-
+- [ ] improve the SEO
+- [ ] add place for  ads
+- [ ] add place for some useful information like 
+  - [ ] 1. what is sell price & buy price
+  - [ ] 2. why our data is different from online apis
+  - [ ] 3. where is the data from
   
 ## Future Plans
 - add react native app to show the currency data

app/Providers/AppServiceProvider.php

@@ -3,11 +3,13 @@
 namespace App\Providers;
 
 use Carbon\CarbonImmutable;
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Date;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\URL;
 use Illuminate\Support\ServiceProvider;
+use Illuminate\Pagination\Paginator;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -31,5 +33,7 @@ class AppServiceProvider extends ServiceProvider
         Model::shouldBeStrict(! app()->isProduction());
 
         Date::use(CarbonImmutable::class);
+
+        Paginator::defaultSimpleView('vendor/pagination/simple-default');
     }
 }

app/Services/RateService.php

@@ -7,7 +7,7 @@ use App\Models\Rate;
 
 class RateService
 {
-    public function getFormattedRates(): array
+    public function getFormattedRates()
     {
         $supportedCities = City::query()
             ->whereIn('name', City::supportedCities()) // Filter only supported cities
@@ -15,37 +15,48 @@ class RateService
             ->sortByDesc(fn($city) => $city->name === 'sanaa') // Sort to put 'sanaa' first
             ->values();  // Reset array keys to be sequential
         
-        // Get the latest exchange rates for each currency in each city
         $latestRates = Rate::query()
+            ->whereIn('city_id', $supportedCities->pluck('id'))
             ->with('currency', 'city')
-            ->orderBy('city_id', 'asc')
+            ->orderBy('date', 'desc') // first sort by latest date
-            ->orderBy('currency_id', 'asc')
+            ->orderBy('city_id', 'asc') // then sort by city_id
-            ->orderBy('date', 'desc')
+            ->orderBy('currency_id', 'asc') // then sort by currency_id
-            ->get()
+            ->simplePaginate(4);
-            ->groupBy(fn($rate) => $rate->city_id . '-' . $rate->currency_id)
-            ->map(fn($group) => $group->first())
-            ->groupBy('city_id');
 
-
+            $transformedRates = $latestRates->getCollection()
-        // Format the rates
+                ->map(function($rate) {
-        $rates = $supportedCities->map(function ($city) use ($latestRates) {
-            $cityRates = $latestRates->get($city->id, collect())->map(function ($rate) {
                     return [
-                    'currency'    => $rate->currency->name,
+                        'city_name' => $rate->city->label,
+                        'currency_name' => $rate->currency->name,
                         'buy_price' => $rate->buy_price,
                         'sell_price' => $rate->sell_price,
                         'date' => $rate->date->toDateString(),
                         'day' => $rate->date->locale('ar')->isoFormat('dddd'),
+                        'is_today' => $rate->date->isToday(),
                         'last_update' => $rate->updated_at->diffForHumans(),
                     ];
-            })->values()->toArray();
+                })
-
+            ->groupBy('city_name')
+            ->map(function($cityRates, $cityName) {
                 return [
-                'city'  => $city->label ,
+                    'city' => $cityName,
-                'rates' => $cityRates,
+                    'rates' => $cityRates->map(function($rate) {
+                        return [
+                            'currency' => $rate['currency_name'],
+                            'buy_price' => $rate['buy_price'],
+                            'sell_price' => $rate['sell_price'],
+                            'date' => $rate['date'],
+                            'day' => $rate['day'],
+                            'is_today' => $rate['is_today'],
+                            'last_update' => $rate['last_update'],
                         ];
-        })->toArray();
+                    })->values()->toArray()
+                ];
+            })
+            ->values(); // Reset keys to be sequential
 
-        return $rates;
+            $latestRates->setCollection($transformedRates);
+
+        return $latestRates;
     }
 }

resources/views/rates.blade.php

@@ -5,154 +5,522 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>أسعار العملات في اليمن</title>
     <style>
-        /* Mobile-first styles */
+        :root {
+            --primary-color: #2c3e50;
+            --secondary-color: #3498db;
+            --success-color: #27ae60;
+            --warning-color: #f39c12;
+            --danger-color: #e74c3c;
+            --light-gray: #f8f9fa;
+            --medium-gray: #6c757d;
+            --dark-gray: #343a40;
+            --border-color: #dee2e6;
+            --shadow: 0 2px 8px rgba(0,0,0,0.1);
+            --border-radius: 8px;
+            --transition: all 0.3s ease;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             line-height: 1.6;
             margin: 0;
             padding: 15px;
-            color: #333;
+            color: var(--dark-gray);
+            background-color: #f5f6fa;
+            min-height: 100vh;
         }
 
         .container {
-            max-width: 400px;
+            max-width: 500px;
             margin: 0 auto;
+            background: white;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            padding: 20px;
         }
 
-        h1 {
+        .header {
-            color: #2c3e50;
-            font-size: 24px;
-            margin-bottom: 10px;
             text-align: center;
+            margin-bottom: 25px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid var(--light-gray);
+        }
+
+        .header h1 {
+            color: var(--primary-color);
+            font-size: 26px;
+            margin: 0 0 10px 0;
+            font-weight: 700;
+        }
+
+        .header .subtitle {
+            color: var(--medium-gray);
+            font-size: 14px;
+            margin: 0;
         }
 
         .tabs {
             display: flex;
-            margin-bottom: 10px;
+            flex-wrap: wrap;
-            border-bottom: 1px solid #ddd;
+            gap: 5px;
+            margin-bottom: 20px;
+            padding: 0;
+            border-bottom: 2px solid var(--light-gray);
         }
 
         .tab {
-            padding: 10px 20px;
+            flex: 1;
+            min-width: 80px;
+            padding: 12px 16px;
             cursor: pointer;
-            background: #f1f1f1;
+            background: var(--light-gray);
-            border: 1px solid #ddd;
+            border: 1px solid var(--border-color);
             border-bottom: none;
-            border-radius: 5px 5px 0 0;
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
-            margin-left: 5px;
+            font-weight: 500;
-            font-weight: light;
+            text-align: center;
+            transition: var(--transition);
+            user-select: none;
+            position: relative;
+        }
+
+        .tab:hover {
+            background: #e9ecef;
+            transform: translateY(-2px);
         }
 
         .tab.active {
-            background: #fff;
+            background: white;
-            border-bottom: 1px solid #fff;
+            border-color: var(--secondary-color);
-            margin-bottom: -1px;
+            border-bottom: 2px solid white;
-            font-weight: bold;
+            margin-bottom: -2px;
-            text-decoration: underline;
+            font-weight: 700;
-            text-decoration-style: wavy;
+            color: var(--secondary-color);
-            text-underline-offset: 5px;
+            z-index: 1;
+        }
+
+        .tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: white;
         }
 
         .currency-card {
-            background: #f9f9f9;
+            background: white;
-            border-radius: 8px;
+            border-radius: var(--border-radius);
-            padding: 15px;
+            padding: 0;
-            margin-bottom: 5px;
+            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             display: none;
+            animation: fadeIn 0.3s ease;
         }
 
         .currency-card.active {
             display: block;
         }
 
-        .currency-info {
+        @keyframes fadeIn {
-            margin-bottom: 5px;
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .rate-item {
+            padding: 15px;
+            border-bottom: 1px solid #f0f0f0;
+            transition: var(--transition);
+        }
+
+        .rate-item:hover {
+            background: var(--light-gray);
+        }
+
+        .rate-item:last-child {
+            border-bottom: none;
+            border-radius: 0 0 var(--border-radius) var(--border-radius);
+        }
+
+        .rate-item:first-child {
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+        }
+
+        .currency-header {
             display: flex;
             justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
         }
 
-        .currency-info strong {
+        .currency-name {
-            font-weight: bold;
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--primary-color);
         }
 
-        .date-info {
+        .currency-flag {
+            width: 24px;
+            height: 16px;
+            background: var(--medium-gray);
+            border-radius: 2px;
+            display: inline-block;
+        }
+
+        .price-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+            margin-bottom: 10px;
+        }
+
+        .price-box {
             text-align: center;
-            margin-top: 15px;
+            padding: 10px;
-            font-style: italic;
+            border-radius: 6px;
-            color: #666;
+            border: 1px solid var(--border-color);
+        }
+
+        .price-box.buy {
+            background: rgba(39, 174, 96, 0.1);
+            border-color: var(--success-color);
+        }
+
+        .price-box.sell {
+            background: rgba(231, 76, 60, 0.1);
+            border-color: var(--danger-color);
+        }
+
+        .price-label {
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 5px;
+            text-transform: uppercase;
+        }
+
+        .buy .price-label {
+            color: var(--success-color);
+        }
+
+        .sell .price-label {
+            color: var(--danger-color);
+        }
+
+        .price-value {
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--dark-gray);
+        }
+
+        .rate-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 12px;
+            color: var(--medium-gray);
+            margin-top: 10px;
+        }
+
+        .date-badge {
+            background: var(--secondary-color);
+            color: white;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: 500;
+        }
+
+        .today-badge {
+            background: var(--success-color);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+
+        /* Pagination Styles */
+        .pagination-container {
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 1px solid var(--border-color);
+        }
+
+        .pagination-nav {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: space-between;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .pagination-link, .pagination-disabled {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 10px 16px;
+            font-size: 14px;
+            font-weight: 500;
+            text-decoration: none;
+            border: 2px solid var(--border-color);
+            border-radius: var(--border-radius);
+            transition: var(--transition);
+            min-width: 140px;
+            text-align: center;
+        }
+
+        .pagination-link {
+            background: white;
+            color: var(--primary-color);
+            cursor: pointer;
+        }
+
+        .pagination-link:hover {
+            background: var(--secondary-color);
+            color: white;
+            border-color: var(--secondary-color);
+            transform: translateY(-2px);
+            box-shadow: var(--shadow);
+        }
+
+        .pagination-disabled {
+            background: var(--light-gray);
+            color: var(--medium-gray);
+            cursor: not-allowed;
+            border-color: var(--border-color);
+        }
+
+        .arrow::before {
+            margin-left: 8px;
+        }
+
+        .arrow-left::before {
+            content: "▶";
+            margin-left: 8px;
+        }
+
+        .arrow-right::after {
+            content: "◀";
+            margin-right: 8px;
+        }
+
+        /* Loading State */
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: var(--medium-gray);
+        }
+
+        .spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--border-color);
+            border-radius: 50%;
+            border-top-color: var(--secondary-color);
+            animation: spin 1s ease-in-out infinite;
+            margin-left: 10px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Responsive Design */
+        @media (max-width: 480px) {
+            .container {
+                margin: 0;
+                border-radius: 0;
+                min-height: 100vh;
+            }
+
+            .tabs {
+                flex-direction: column;
+            }
+
+            .tab {
+                border-radius: var(--border-radius);
+                border-bottom: 1px solid var(--border-color);
+                margin-bottom: 5px;
+            }
+
+            .tab.active {
+                border-bottom: 1px solid var(--secondary-color);
+                margin-bottom: 5px;
+            }
+
+            .pagination-nav {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .pagination-link, .pagination-disabled {
+                width: 100%;
+            }
         }
 
-        /* Tablet and larger screens */
         @media (min-width: 600px) {
-            h1 {
+            .container {
-                font-size: 28px;
+                max-width: 600px;
+                padding: 30px;
             }
 
-            .currency-card {
+            .header h1 {
-                padding: 20px;
+                font-size: 32px;
+            }
+
+            .price-row {
+                gap: 20px;
+            }
+
+            .price-value {
+                font-size: 18px;
+            }
+        }
+
+        /* Accessibility */
+        .tab:focus,
+        .pagination-link:focus {
+            outline: 2px solid var(--secondary-color);
+            outline-offset: 2px;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <header class="header">
             <h1>أسعار العملات في اليمن</h1>
+            <p class="subtitle">أحدث أسعار الصرف لليوم</p>
+        </header>
 
-        <div class="tabs">
+        <div class="tabs" role="tablist">
             @foreach ($rates as $index => $rate)
-                <div class="tab {{ $loop->first ? 'active' : '' }}" onclick="showTab(event, 'city-{{ $index }}')">
+                <button class="tab {{ $loop->first ? 'active' : '' }}" 
+                        role="tab"
+                        aria-selected="{{ $loop->first ? 'true' : 'false' }}"
+                        aria-controls="city-{{ $index }}"
+                        onclick="showTab(event, 'city-{{ $index }}', {{ $index }})">
                     {{ $rate['city'] }}
-                </div>
+                </button>
             @endforeach
         </div>
 
         @foreach ($rates as $index => $cityRates)
+            <div id="city-{{ $index }}" 
+                 class="currency-card {{ $loop->first ? 'active' : '' }}"
+                 role="tabpanel"
+                 aria-labelledby="tab-{{ $index }}">
                 
-        <div id="city-{{ $index }}" class="currency-card {{ $loop->first ? 'active' : '' }}">
+                @forelse ($cityRates['rates'] as $rate)
-                @foreach ($cityRates['rates'] as $rate)
+                    <div class="rate-item">
-                    <div style="margin-bottom: {{ $loop->last ? '0' : '10px' }}; border-bottom: {{ $loop->last ? 'none' : '1px dashed #ccc' }}; padding-bottom: 10px;">
+                        <div class="currency-header">
-                        <div class="currency-info">
+                            <span class="currency-name">{{ $rate['currency'] }}</span>
-                            <strong>العملة:</strong>
-                            <span>{{ $rate['currency'] }}</span>
                         </div>
-                        <div class="currency-info">
+                        
-                            <strong>سعر الشراء:</strong>
+                        <div class="price-row">
-                            <span>{{ $rate['buy_price'] }} ريال يمني</span>
+                            <div class="price-box buy">
+                                <div class="price-label">شراء</div>
+                                <div class="price-value">{{ number_format($rate['buy_price']) }}</div>
                             </div>
-                        <div class="currency-info">
+                            <div class="price-box sell">
-                            <strong>سعر البيع:</strong>
+                                <div class="price-label">بيع</div>
-                            <span>{{ $rate['sell_price'] }} ريال يمني</span>
+                                <div class="price-value">{{ number_format($rate['sell_price']) }}</div>
                             </div>
-                        <div class="currency-info">
-                            <strong>التاريخ:</strong>
-                            <span>{{ $rate['date'] }} ({{ $rate['day'] }})</span>
                         </div>
-                        <div class="date-info">
+                        
-                            آخر تحديث: {{ $rate['last_update'] }}
+                        <div class="rate-meta">
+                            <span>{{ $rate['day'] }}</span>
+                            <span class="date-badge {{ isset($rate['is_today']) && $rate['is_today'] ? 'today-badge' : '' }}">
+                                {{ $rate['date'] }}
+                                @if(isset($rate['is_today']) && $rate['is_today'])
+                                    - اليوم
+                                @endif
+                            </span>
+                            <small>{{ $rate['last_update'] }}</small>
                         </div>
                     </div>
+                @empty
+                    <div class="loading">
+                        لا توجد بيانات متاحة
+                    </div>
+                @endforelse
+            </div>
         @endforeach
-            </div>
+
-        @endforeach
+       {{ $rates->links() }}
     </div>
 
     <script>
-        function showTab(event, tabId) {
+        function showTab(event, tabId, index) {
-            // Hide all cards
+            // Remove active class from all cards and tabs
             document.querySelectorAll('.currency-card').forEach(card => {
                 card.classList.remove('active');
             });
             
-            // Show selected
-            document.getElementById(tabId).classList.add('active');
-    
-            // Update tabs
             document.querySelectorAll('.tab').forEach(tab => {
                 tab.classList.remove('active');
+                tab.setAttribute('aria-selected', 'false');
             });
-            event.currentTarget.classList.add('active');
+
+            // Show selected card and activate tab
+            const selectedCard = document.getElementById(tabId);
+            const selectedTab = event.currentTarget;
+            
+            if (selectedCard) {
+                selectedCard.classList.add('active');
             }
+            
+            selectedTab.classList.add('active');
+            selectedTab.setAttribute('aria-selected', 'true');
+
+            // Optional: Save active tab to localStorage
+            localStorage.setItem('activeTab', index);
+        }
+
+        // Restore active tab on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            const savedTab = localStorage.getItem('activeTab');
+            if (savedTab) {
+                const tabButton = document.querySelector(`.tab:nth-child(${parseInt(savedTab) + 1})`);
+                if (tabButton) {
+                    tabButton.click();
+                }
+            }
+        });
+
+        // Add keyboard navigation
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+                const activeTab = document.querySelector('.tab.active');
+                if (!activeTab) return;
+
+                const tabs = Array.from(document.querySelectorAll('.tab'));
+                const currentIndex = tabs.indexOf(activeTab);
+                let nextIndex;
+
+                if (e.key === 'ArrowRight') {
+                    nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                } else {
+                    nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                }
+
+                tabs[nextIndex].click();
+                tabs[nextIndex].focus();
+            }
+        });
     </script>
 </body>
 </html>

resources/views/vendor/pagination/simple-default.blade.php

@@ -0,0 +1,29 @@
+<div class="pagination-container">
+    @if ($paginator->hasPages())
+        <nav class="pagination-nav" role="navigation" aria-label="صفحات أسعار الصرف">
+            @if ($paginator->onFirstPage())
+                <span class="pagination-disabled">
+                    🚫 
+                </span>
+            @else
+                <a href="{{ $paginator->previousPageUrl() }}" 
+                   class="pagination-link arrow-right" 
+                   rel="prev">
+                    الأسعار التالية
+                </a>
+            @endif
+
+            @if ($paginator->hasMorePages())
+                <a href="{{ $paginator->nextPageUrl() }}" 
+                   class="pagination-link arrow-left" 
+                   rel="next">
+                    الأسعار السابقة
+                </a>
+            @else
+                <span class="pagination-disabled arrow-left">
+                    الأسعار السابقة
+                </span>
+            @endif
+        </nav>
+    @endif
+</div>

tests/Feature/RateControllerTest.php

@@ -102,11 +102,11 @@ class RateControllerTest extends TestCase
         // Assert
         $response->assertStatus(200)
             ->assertViewIs('rates')
-            ->assertViewHasAll(['rates']);
+            ->assertViewHas('rates');
 
         $viewData = $response->original->getData();
 
-        $ratesCities = array_column($viewData['rates'], 'city');
+        $ratesCities = $viewData['rates']->pluck('city')->toArray(); 
 
         $this->assertContains($sanaa->label, $ratesCities);
         $this->assertContains($aden->label, $ratesCities);