From 63d8c23785e76b6f96999cdd7c6ea65f2bbed433 Mon Sep 17 00:00:00 2001
From: afrina <afrina@koppkb.com>
Date: Tue, 13 Oct 2026 14:20:52 +0800
Subject: [PATCH] improve shoraka UI

---
 .../views/homepage/teller/home.blade.php      |  57 +++++++-
 resources/views/shoraka/index.blade.php       |  86 +++++++++---
 resources/views/shoraka/navigation.blade.php  |   7 -
 resources/views/shoraka/show.blade.php        | 128 ++++++++++++------
 4 files changed, 206 insertions(+), 72 deletions(-)

diff --git a/resources/views/homepage/teller/home.blade.php b/resources/views/homepage/teller/home.blade.php
index 48aa43d3..96118da7 100644
--- a/resources/views/homepage/teller/home.blade.php
+++ b/resources/views/homepage/teller/home.blade.php
@@ -1,16 +1,67 @@
 @extends('layouts.app')
 
 @section('content')
+<style>
+    .teller-home-card {
+        border: 0;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 8px 24px rgba(31, 45, 61, .12);
+    }
+    .teller-home-card .card-header {
+        padding: 20px;
+        border: 0;
+        font-size: 20px;
+        font-weight: 600;
+    }
+    .teller-home-menu {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 16px;
+        padding: 28px;
+    }
+    .teller-home-menu .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 88px;
+        padding: 18px 16px;
+        border-radius: 8px;
+        white-space: normal;
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: .3px;
+        transition: background-color .15s ease, box-shadow .15s ease;
+    }
+    .teller-home-menu .btn:hover,
+    .teller-home-menu .btn:focus-visible {
+        box-shadow: 0 4px 12px rgba(23, 162, 184, .25);
+    }
+    @media (max-width: 575.98px) {
+        .teller-home-menu {
+            grid-template-columns: minmax(0, 1fr);
+            gap: 12px;
+            padding: 20px;
+        }
+        .teller-home-menu .btn {
+            min-height: 68px;
+            font-size: 16px;
+        }
+    }
+</style>
 <div class="container">
     <div class="row justify-content-center" style="margin-top:60px;">
         <div class="col-md-8">
-            <div class="card">
-                <div class="card-header bg-secondary text-center"><span style="font-weight:500;">{{ __('Paparan Utama') }}</span></div>
+            <div class="card teller-home-card">
+                <div class="card-header bg-secondary text-center">{{ __('Paparan Utama') }}</div>
 
-                <div class="card-body text-center">
+                <div class="card-body teller-home-menu text-center">
                     <a class="btn btn-info btn-lg" href="#" onclick="pelangganclick()">PELANGGAN</a>
                     <a class="btn btn-info btn-lg" href="{{ url('/harga_emas') }}">HARGA EMAS</a>
                     <a class="btn btn-info btn-lg" href="{{ url('/aliran_tunai') }}">ALIRAN TUNAI</a>
+                    @if(in_array(Auth::user()->roles, ['teller', 'penilai', 'pc', 'ppc', 'admin', 'masteradmin', 'operasi']) || Auth::user()->role_harian === 'teller')
+                        <a class="btn btn-info btn-lg" href="{{ route('shoraka.index') }}">PEMBIAYAAN SHORAKA</a>
+                    @endif
                     {{-- <a class="btn btn-info btn-lg" href="#">TETAPAN</a> --}}
                 </div>
             </div>
diff --git a/resources/views/shoraka/index.blade.php b/resources/views/shoraka/index.blade.php
index f5a60e66..fdb7559f 100644
--- a/resources/views/shoraka/index.blade.php
+++ b/resources/views/shoraka/index.blade.php
@@ -1,21 +1,73 @@
 @extends('layouts.app')
+
 @section('content')
-<div class="container py-3">
-    <h3>Pembiayaan Shoraka</h3>
-    <p>Semak transaksi komoditi dan selesaikan pembiayaan selepas status Completed.</p>
-    <table class="table table-bordered">
-        <thead><tr><th>No. rujukan</th><th>Teller</th><th>Penyelesaian pembiayaan</th><th></th></tr></thead>
-        <tbody>
-        @forelse($records as $record)
-            <tr>
-                <td>{{ $record->norujukan }}</td><td>{{ $record->teller }}</td>
-                <td>{{ ['WAITING' => 'Menunggu Shoraka / penyelesaian', 'PROCESSING' => 'Sedang diproses', 'REVIEW' => 'Perlu semakan operasi', 'DONE' => 'Selesai'][$record->state] ?? $record->state }}</td>
-                <td><a class="btn btn-primary" href="{{ route('shoraka.show', $record->norujukan) }}">Buka</a></td>
-            </tr>
-        @empty
-            <tr><td colspan="4">Tiada transaksi.</td></tr>
-        @endforelse
-        </tbody>
-    </table>
+<style>
+    .shoraka-list-card .table th,
+    .shoraka-list-card .table td {
+        vertical-align: middle;
+    }
+    .shoraka-list-card .status-badge {
+        padding: 8px 12px;
+        font-size: 13px;
+        font-weight: 500;
+        white-space: normal;
+        line-height: 1.5;
+    }
+</style>
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-12">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb pb-3">
+                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">Pembiayaan Shoraka</li>
+                </ol>
+            </nav>
+
+            <div class="card shoraka-list-card">
+                <div class="card-header bg-secondary d-flex flex-wrap align-items-center justify-content-between">
+                    <h5 class="mb-0 py-2">Pembiayaan Shoraka</h5>
+                    <a class="btn btn-info btn-sm my-1" href="{{ route('home') }}">
+                        <i class="fas fa-arrow-left mr-1" aria-hidden="true"></i> Kembali ke Paparan Utama
+                    </a>
+                </div>
+                <div class="card-body">
+                    <p class="text-muted mb-4">Semak transaksi komoditi dan selesaikan pembiayaan selepas status Completed.</p>
+                    <div class="table-responsive">
+                        <table class="table table-striped table-bordered table-hover mb-0">
+                            <thead class="thead-dark">
+                                <tr>
+                                    <th scope="col">No. rujukan</th>
+                                    <th scope="col">Teller</th>
+                                    <th scope="col">Penyelesaian pembiayaan</th>
+                                    <th scope="col" class="text-center">Tindakan</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                @forelse($records as $record)
+                                    @php
+                                        $statusLabels = ['WAITING' => 'Menunggu Shoraka / penyelesaian', 'PROCESSING' => 'Sedang diproses', 'REVIEW' => 'Perlu semakan operasi', 'DONE' => 'Selesai'];
+                                        $statusColors = ['WAITING' => 'warning', 'PROCESSING' => 'info', 'REVIEW' => 'danger', 'DONE' => 'success'];
+                                    @endphp
+                                    <tr>
+                                        <td class="text-nowrap">{{ $record->norujukan }}</td>
+                                        <td>{{ $record->teller }}</td>
+                                        <td>
+                                            <span class="badge badge-{{ $statusColors[$record->state] ?? 'secondary' }} status-badge">{{ $statusLabels[$record->state] ?? $record->state }}</span>
+                                        </td>
+                                        <td class="text-center">
+                                            <a class="btn btn-info btn-sm" href="{{ route('shoraka.show', $record->norujukan) }}" aria-label="Buka pembiayaan {{ $record->norujukan }}">Buka</a>
+                                        </td>
+                                    </tr>
+                                @empty
+                                    <tr><td colspan="4" class="text-center text-muted py-5">Tiada transaksi.</td></tr>
+                                @endforelse
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 @endsection
diff --git a/resources/views/shoraka/navigation.blade.php b/resources/views/shoraka/navigation.blade.php
index 4953cb22..6a6ac58e 100644
--- a/resources/views/shoraka/navigation.blade.php
+++ b/resources/views/shoraka/navigation.blade.php
@@ -1,10 +1,3 @@
-@auth
-@if(in_array(Auth::user()->roles, ['teller', 'penilai', 'pc', 'ppc', 'admin', 'masteradmin', 'operasi']) || Auth::user()->role_harian === 'teller')
-<div class="container-fluid text-right py-1">
-    <a class="btn btn-sm btn-outline-primary" href="{{ route('shoraka.index') }}">Pembiayaan Shoraka</a>
-</div>
-@endif
-@endauth
 <script>
 // Existing refinancing AJAX handlers must not print receipts or announce payment
 // success when the server has deferred the financial completion.
diff --git a/resources/views/shoraka/show.blade.php b/resources/views/shoraka/show.blade.php
index ad6e7f97..7cbcfb43 100644
--- a/resources/views/shoraka/show.blade.php
+++ b/resources/views/shoraka/show.blade.php
@@ -1,50 +1,88 @@
 @extends('layouts.app')
+
 @section('content')
-<div class="container py-3">
-    <a href="{{ route('shoraka.index') }}">Kembali ke senarai</a>
-    <h3 class="mt-3">Komoditi Shoraka — {{ $norujukan }}</h3>
-    @if($error)<div class="alert alert-danger">{{ $error }}</div>@endif
-    @if(session('shoraka_message'))<div class="alert alert-info">{{ session('shoraka_message') }}</div>@endif
-    @php
-        $order = $data['order'] ?? null;
-        $status = $order['status'] ?? 'Belum dihantar';
-        $ready = !empty($data['can_complete']);
-    @endphp
-    <dl class="row">
-        <dt class="col-sm-4">Status komoditi</dt><dd class="col-sm-8">{{ $status }}</dd>
-        <dt class="col-sm-4">Order ID</dt><dd class="col-sm-8">{{ $order['order_id'] ?? '—' }}</dd>
-        <dt class="col-sm-4">Pembiayaan</dt><dd class="col-sm-8">RM {{ number_format($data['order_amount'] ?? 0, 2) }}</dd>
-        <dt class="col-sm-4">Harga jualan</dt><dd class="col-sm-8">RM {{ number_format($data['murabaha_amount'] ?? 0, 2) }}</dd>
-    </dl>
-    @if(!$ready)
-        <div class="alert alert-warning">Bayaran pembiayaan dan SAG ditahan sehingga transaksi komoditi Completed.</div>
-    @endif
-    @if(in_array($status, ['UNKNOWN', 'FAILED', 'PENDING']))
-        <p>Jangan hantar order sekali lagi. Hubungi operasi untuk semakan dengan Shoraka.</p>
-    @endif
-    @if($record && in_array($record->state, ['REVIEW', 'PROCESSING']))
-        <div class="alert alert-warning">Penyelesaian sedang diproses atau memerlukan semakan operasi. Jangan ulang bayaran.</div>
-    @elseif($record && $record->state === 'DONE')
-        <div class="alert alert-success">Pembiayaan telah diselesaikan.</div>
-    @endif
-    <div class="d-flex flex-wrap">
-        @if($order && !empty($order['order_id']))
-        <form class="mr-2 mb-2" method="post" action="{{ route('shoraka.refresh', $norujukan) }}">@csrf
-            <button class="btn btn-info" type="submit">Semak Status</button>
-        </form>
-        @elseif($data && !$order && $record && $record->teller === Auth::user()->name)
-        <form class="mr-2 mb-2" method="post" action="{{ route('shoraka.submit', $norujukan) }}">@csrf
-            <button class="btn btn-primary" type="submit">Hantar Order</button>
-        </form>
-        @endif
-        @if($ready && $record && $record->state === 'WAITING' && $record->teller === Auth::user()->name)
-        <form class="mr-2 mb-2" method="post" action="{{ route('shoraka.finish', $norujukan) }}">@csrf
-            <button class="btn btn-success" type="submit">Selesaikan Pembiayaan</button>
-        </form>
-        @endif
-        @if($ready)
-        <a class="btn btn-secondary mb-2" href="{{ route('shoraka.certificate', $norujukan) }}">Muat Turun Sijil</a>
-        @endif
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-12">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb pb-3">
+                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
+                    <li class="breadcrumb-item"><a href="{{ route('shoraka.index') }}">Pembiayaan Shoraka</a></li>
+                    <li class="breadcrumb-item active" aria-current="page">{{ $norujukan }}</li>
+                </ol>
+            </nav>
+
+            <div class="card">
+                <div class="card-header bg-secondary d-flex flex-wrap align-items-center justify-content-between">
+                    <h5 class="mb-0 py-2">Komoditi Shoraka</h5>
+                    <a class="btn btn-info btn-sm my-1" href="{{ route('shoraka.index') }}">
+                        <i class="fas fa-arrow-left mr-1" aria-hidden="true"></i> Kembali ke senarai
+                    </a>
+                </div>
+                <div class="card-body">
+                    @if($error)<div class="alert alert-danger">{{ $error }}</div>@endif
+                    @if(session('shoraka_message'))<div class="alert alert-info">{{ session('shoraka_message') }}</div>@endif
+                    @php
+                        $order = $data['order'] ?? null;
+                        $status = $order['status'] ?? 'Belum dihantar';
+                        $ready = !empty($data['can_complete']);
+                    @endphp
+                    <p class="text-muted mb-3">No. rujukan: <strong class="text-dark">{{ $norujukan }}</strong></p>
+                    <div class="table-responsive mb-4">
+                        <table class="table table-striped table-bordered mb-0">
+                            <tbody>
+                                <tr>
+                                    <th scope="row" class="align-middle">Status komoditi</th>
+                                    <td><span class="badge badge-info px-3 py-2">{{ $status }}</span></td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">Order ID</th>
+                                    <td>{{ $order['order_id'] ?? '—' }}</td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">Pembiayaan</th>
+                                    <td class="text-nowrap font-weight-bold">RM {{ number_format($data['order_amount'] ?? 0, 2) }}</td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">Harga jualan</th>
+                                    <td class="text-nowrap font-weight-bold">RM {{ number_format($data['murabaha_amount'] ?? 0, 2) }}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    @if(!$ready)
+                        <div class="alert alert-warning">Bayaran pembiayaan dan SAG ditahan sehingga transaksi komoditi Completed.</div>
+                    @endif
+                    @if(in_array($status, ['UNKNOWN', 'FAILED', 'PENDING']))
+                        <p>Jangan hantar order sekali lagi. Hubungi operasi untuk semakan dengan Shoraka.</p>
+                    @endif
+                    @if($record && in_array($record->state, ['REVIEW', 'PROCESSING']))
+                        <div class="alert alert-warning">Penyelesaian sedang diproses atau memerlukan semakan operasi. Jangan ulang bayaran.</div>
+                    @elseif($record && $record->state === 'DONE')
+                        <div class="alert alert-success">Pembiayaan telah diselesaikan.</div>
+                    @endif
+                    <div class="d-flex flex-wrap pt-3 mt-4 border-top">
+                        @if($order && !empty($order['order_id']))
+                        <form class="mr-2 mb-2" method="post" action="{{ route('shoraka.refresh', $norujukan) }}">@csrf
+                            <button class="btn btn-info" type="submit">Semak Status</button>
+                        </form>
+                        @elseif($data && !$order && $record && $record->teller === Auth::user()->name)
+                        <form class="mr-2 mb-2" method="post" action="{{ route('shoraka.submit', $norujukan) }}">@csrf
+                            <button class="btn btn-primary" type="submit">Hantar Order</button>
+                        </form>
+                        @endif
+                        @if($ready && $record && $record->state === 'WAITING' && $record->teller === Auth::user()->name)
+                        <form class="mr-2 mb-2" method="post" action="{{ route('shoraka.finish', $norujukan) }}">@csrf
+                            <button class="btn btn-success" type="submit">Selesaikan Pembiayaan</button>
+                        </form>
+                        @endif
+                        @if($ready)
+                        <a class="btn btn-secondary mb-2" href="{{ route('shoraka.certificate', $norujukan) }}">Muat Turun Sijil</a>
+                        @endif
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 <script>