From 91397602ecdec2be8b1408d72e085f38710e5874 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 12 Nov 2025 20:41:33 +0700
Subject: [PATCH] feat(membership): membuat halaman membership untuk member

---
 app/Livewire/Member/Membership.php            | 107 ++++++++++++++++++
 .../partials/member/_sidebar.blade.php        |   3 +
 .../livewire/member/memberships.blade.php     |  91 +++++++++++++++
 routes/pages/member.php                       |   2 +
 4 files changed, 203 insertions(+)
 create mode 100644 app/Livewire/Member/Membership.php
 create mode 100644 resources/views/livewire/member/memberships.blade.php

diff --git a/app/Livewire/Member/Membership.php b/app/Livewire/Member/Membership.php
new file mode 100644
index 0000000..034e9fb
--- /dev/null
+++ b/app/Livewire/Member/Membership.php
@@ -0,0 +1,107 @@
+<?php
+
+namespace App\Livewire\Member;
+
+use App\Enums\PointRecordType;
+use App\Models\Membership as MembershipModel;
+use App\Models\PointRecord;
+use App\Models\Tier;
+use App\Models\TierReward;
+use Livewire\Attributes\Layout;
+use Livewire\Attributes\Title;
+use Livewire\Component;
+
+#[Title('Membership')]
+#[Layout('components.layouts.member')]
+class Membership extends Component
+{
+    public array $stats = [];
+
+    public string $nextTierName = '';
+
+    public string $currentPoints = '';
+
+    public string $nextTierPoints = '';
+
+    public string $progress = '';
+
+    public array $rewards = [];
+
+    public array $pointRecords = [];
+
+    public function mount()
+    {
+        $membership = MembershipModel::with(['tier', 'tier.rewards'])->where('user_id', auth()->id())->first();
+
+        $monthlyTierAddition = PointRecord::where('user_id', auth()->id())
+            ->where('type', PointRecordType::TIER)
+            ->where('is_addition', true)
+            ->whereYear('created_at', now()->year)
+            ->whereMonth('created_at', now()->month)
+            ->sum('change');
+
+        $nextTier = Tier::where('min_points', '>', $membership->tier_points)
+            ->orderBy('min_points', 'asc')
+            ->first();
+
+        $this->nextTierName = $nextTier ? $nextTier->name : 'Maksimal';
+
+        $this->currentPoints = $membership->tier_points;
+
+        $this->nextTierPoints = $nextTier ? $nextTier->min_points : 'Maksimal';
+
+        $this->progress = ($membership->tier_points / $nextTier->min_points) * 100;
+
+        $this->stats = [
+            [
+                'title' => 'Poin Tier',
+                'value' => currency($membership->tier_points),
+                'description' => '+'.currency($monthlyTierAddition).' bulan ini',
+            ],
+            [
+                'title' => 'Tier Sekarang',
+                'value' => $membership->tier->name,
+                'description' => 'Terdaftar sejak '.formatDate($membership->created_at),
+            ],
+            [
+                'title' => 'Tier Selanjutnya',
+                'value' => $nextTier ? $nextTier->name : 'Maksimal',
+                'description' => $nextTier ? ($nextTier->min_points - $membership->tier_points).' poin lagi' : 'Anda sudah berada di tier tertinggi',
+            ],
+            [
+                'title' => 'Poin Hadiah',
+                'value' => currency($membership->reward_points),
+                'description' => 'Nikmati hadiah sekarang',
+            ],
+        ];
+
+        $this->rewards = TierReward::where('tier_id', $membership->tier_id)
+            ->latest()
+            ->get()
+            ->map(fn ($reward) => [
+                'name' => $reward->name,
+                'value' => currency($reward->value, 'Rp'),
+            ])
+            ->toArray();
+
+        $this->pointRecords = PointRecord::where('user_id', auth()->id())
+            ->latest()
+            ->limit(10)
+            ->get()
+            ->map(fn ($record) => [
+                'date' => formatDate($record->created_at),
+                'description' => $record->description,
+                'change' => currency($record->change),
+                'type' => $record->type->label(),
+                'is_addition' => $record->is_addition,
+            ])
+            ->toArray();
+    }
+
+    public function render()
+    {
+        return view('livewire.member.memberships', [
+            'pageTitle' => 'Membership',
+        ]);
+    }
+}
diff --git a/resources/views/components/partials/member/_sidebar.blade.php b/resources/views/components/partials/member/_sidebar.blade.php
index 63e5c4f..4e5a9f3 100644
--- a/resources/views/components/partials/member/_sidebar.blade.php
+++ b/resources/views/components/partials/member/_sidebar.blade.php
@@ -12,6 +12,9 @@ class="bg-zinc-50 dark:bg-zinc-900 border-r rtl:border-r-0 rtl:border-l border-z
                 <flux:navlist.item icon="ticket" href="{{ route('member.voucher') }}"
                     :current="request()->routeIs('member.voucher')" wire:navigate.hover>
                     Voucher</flux:navlist.item>
+                <flux:navlist.item icon="user-circle" href="{{ route('member.membership') }}"
+                    :current="request()->routeIs('member.membership')" wire:navigate.hover>
+                    Membership</flux:navlist.item>
             </div>
         </div>
     </flux:navlist>
diff --git a/resources/views/livewire/member/memberships.blade.php b/resources/views/livewire/member/memberships.blade.php
new file mode 100644
index 0000000..7cad2cc
--- /dev/null
+++ b/resources/views/livewire/member/memberships.blade.php
@@ -0,0 +1,91 @@
+<flux:main>
+    <flux:heading size="xl" level="1">{{ $pageTitle }}</flux:heading>
+
+    <div class="mt-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            @foreach ($stats as $stat)
+                <div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
+                    <div class="flex items-center justify-between">
+                        <flux:heading size="lg">{{ $stat['title'] }}</flux:heading>
+                    </div>
+                    <flux:heading class="text-4xl! font-bold py-3 ">{{ $stat['value'] }}</flux:heading>
+                    <flux:text size="lg">{{ $stat['description'] }}</flux:text>
+                </div>
+            @endforeach
+        </div>
+
+        <div class="bg-zinc-200 dark:bg-zinc-700 rounded-xl p-6 shadow-md mb-8">
+            <h2 class="text-xl font-semibold mb-4">Proses ke Tier {{ $nextTierName }}</h2>
+            <div class="relative">
+                <div class="flex justify-between mb-2 text-sm text-gray-600">
+                    <flux:text>Sekarang: {{ $currentPoints }} poin</flux:text>
+                    <flux:text>Target: {{ $nextTierPoints }}</flux:text>
+                </div>
+                <div class="h-4 bg-white rounded-full overflow-hidden">
+                    <div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500"
+                        style="width: {{ $progress }}%"></div>
+                </div>
+                <flux:heading class="mt-2">{{ $progress }} %</flux:heading>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div class="lg:col-span-2">
+                <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
+                    <flux:heading size="xl" class="text-2xl font-semibold mb-4">Redeem Hadiah
+                    </flux:heading>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        @foreach ($rewards as $reward)
+                            <div class="bg-zinc-50 rounded-xl p-4">
+                                <div class="flex items-start gap-4">
+                                    <div class="flex-1">
+                                        <h3 class="font-semibold text-gray-900 mb-1">{{ $reward['name'] }}</h3>
+                                        <p class="text-sm text-gray-500 mb-3">Seharga {{ $reward['value'] }}</p>
+                                        <button
+                                            class="px-4 py-1.5 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">
+                                            Redeem
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                </flux:card>
+            </div>
+
+            <div class="lg:col-span-1">
+                <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
+                    <flux:heading size="xl" class="text-2xl font-semibold mb-4">Riwayat Poin
+                    </flux:heading>
+
+                    <flux:table>
+                        <flux:table.columns>
+                            <flux:table.column>Tanggal</flux:table.column>
+                            <flux:table.column>Keterangan</flux:table.column>
+                            <flux:table.column>Poin</flux:table.column>
+                            <flux:table.column>Tipe</flux:table.column>
+                        </flux:table.columns>
+
+                        <flux:table.rows>
+                            @foreach ($pointRecords as $pointRecords)
+                                <flux:table.row>
+                                    <flux:table.cell>{{ $pointRecords['date'] }}</flux:table.cell>
+                                    <flux:table.cell>{{ $pointRecords['description'] }}</flux:table.cell>
+                                    <flux:table.cell variant="strong">
+                                        <flux:text
+                                            class="{{ $pointRecords['is_addition'] ? 'text-emerald-500' : 'text-red-500' }}">
+                                            {{ $pointRecords['is_addition'] ? '+' : '-' }}
+                                            {{ $pointRecords['change'] }}
+                                        </flux:text>
+                                    </flux:table.cell>
+                                    <flux:table.cell>{{ $pointRecords['type'] }}</flux:table.cell>
+                                </flux:table.row>
+                            @endforeach
+                        </flux:table.rows>
+                    </flux:table>
+                </flux:card>
+            </div>
+        </div>
+    </div>
+</flux:main>
diff --git a/routes/pages/member.php b/routes/pages/member.php
index 4006222..d71cc32 100644
--- a/routes/pages/member.php
+++ b/routes/pages/member.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Livewire\Member\Membership;
 use App\Livewire\Member\Overview;
 use App\Livewire\Member\Voucher;
 use Illuminate\Support\Facades\Route;
@@ -10,4 +11,5 @@
     ->group(function () {
         Route::get('overview', Overview::class)->name('overview');
         Route::get('vouchers', Voucher::class)->name('voucher');
+        Route::get('memberships', Membership::class)->name('membership');
     });