Karena data transaction nanti akan berisi banyak data, seperti data customer, pengiriman, item yang dibeli dan lain sebagainya. Maka dari itu kita harus membuatkan sebuah halaman kusus untuk menampilkan detail data tersebut.

Langkah 1 - Menambahkan View Transaction

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.

        
go
        

            
        
     
php artisan make:filament-page ViewTransaction --resource=TransactionResource --type=ViewRecord

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan file baru di dalam folder app/Filament/Resources/TransactionResource/ViewTransaction.php.

Langkah 2 - Register Page

Setelah page berhasil digenerate, maka kita wajib mendaftarkan page tersebut di dalam method getPages, sehingga nanti page tersebut bisa diakses ketika data transaction diklik.

Silahkan teman-teman buka file berikut ini app/Filament/Resources/TransactionResource.php, kemudian cari kode berikut ini.

        
php
        

            
        
     
public static function getPages(): array
{
    return [
        'index' => Pages\ListTransactions::route('/'),
    ];
}

Kemudian ubah menjadi seperti berikut ini.

        
php
        

            
        
     
public static function getPages(): array
{
    return [
        'index' => Pages\ListTransactions::route('/'),
        'view'  => Pages\ViewTransaction::route('/{record}'),
    ];
}

Di atas, kita menambahkan view yang mengarah ke dalam route detail data transaction.

Langkah 3 - Menampilkan Detail Data Transaction

Sekarang kita akan melakukan modifikasi di dalam file View Transaction, sehingga nanti akan sesuai dengan yang kita inginkan. Silahkan teman-teman buka file app/Filament/Resources/TransactionResource/ViewTransaction.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.

        
php
        

            
        
     
<?php

namespace App\Filament\Resources\TransactionResource\Pages;

use App\Filament\Resources\TransactionResource;
use Filament\Resources\Pages\ViewRecord;
use Filament\Infolists\Components\Card;
use Filament\Infolists\Components\ImageEntry;
use Filament\Infolists\Components\RepeatableEntry;
use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Infolist;
use Filament\Infolists\Components\Grid;

class ViewTransaction extends ViewRecord
{
    protected static string $resource = TransactionResource::class;

    public function infolist(Infolist $infolist): Infolist
    {
        return $infolist
            ->schema([                

                // General Information
                Card::make([
                    TextEntry::make('invoice')->label('Invoice'),
                    TextEntry::make('status')
                        ->badge()
                        ->color(fn (string $state): string => match ($state) {
                            'pending' => 'warning',
                            'success' => 'success',
                            'expired' => 'gray',
                            'failed' => 'danger',
                        }),
                    TextEntry::make('created_at')->label('Created At'),
                ])->columns(3),

                // Customer Information
                Card::make([
                    TextEntry::make('customer.name')->label('Customer Name'),
                    TextEntry::make('customer.email')->label('Email Address'),
                    TextEntry::make('address')->label('Address'),
                ])->columns(3),

                // Ongkos Kirim
                Card::make([
                    TextEntry::make('shipping.shipping_courier')->label('Jasa Kirim'),
                    TextEntry::make('shipping.shipping_service')->label('Layanan Kirim'),
                    TextEntry::make('shipping.shipping_cost')->label('Ongkos Kirim')->numeric(decimalPlaces: 0)->money('IDR', locale: 'id'),
                ])->columns(3),

                // Transaction Details
                Card::make([
                    RepeatableEntry::make('TransactionDetails')
                        ->label('Items Details')
                        ->schema([
                            ImageEntry::make('product.image')->label('Product Image')->circular()->width(100)->height(100),
                            TextEntry::make('product.title')->label('Product Name'),
                            TextEntry::make('qty')->label('Quantity'),
                            TextEntry::make('price')->label('Price')->numeric(decimalPlaces: 0)->money('IDR', locale: 'id'),
                        ])
                        ->columns(4),
                ]),

                Card::make([
                    // Buat container grid untuk alignment
                    Grid::make(1)
                        ->schema([
                            TextEntry::make('total')
                                ->label('Grand Total')
                                ->numeric(decimalPlaces: 0)
                                ->money('IDR', locale: 'id')
                                ->size(TextEntry\TextEntrySize::Large)
                                ->color('primary')
                                ->alignEnd() // Align konten ke kanan
                        ])
                ])
            ]);
    }
}

Dari perubahan kode di atas, kita import beberapa component dari Filament.

        
perl
        

            
        
     
use Filament\Infolists\Components\Card;
use Filament\Infolists\Components\ImageEntry;
use Filament\Infolists\Components\RepeatableEntry;
use Filament\Infolists\Components\TextEntry;
use Filament\Infolists\Components\Grid;

Kemudian di dalam $infolist pada bagian schema, kita menampilkan beberapa data menggunakan sebuah Card component.

Yang pertama, kita menampilkan detail transaction, yang meliputi invoice, status dan tanggal dibuatnya.

        
php
        

            
        
     
// General Information
Card::make([
    TextEntry::make('invoice')->label('Invoice'),
    TextEntry::make('status')
        ->badge()
        ->color(fn (string $state): string => match ($state) {
            'pending' => 'warning',
            'success' => 'success',
            'expired' => 'gray',
            'failed' => 'danger',
        }),
    TextEntry::make('created_at')->label('Created At'),
])->columns(3),

Kemudian yang kedua adalah menampilkan data customer.

        
php
        

            
        
     
// Customer Information
Card::make([
    TextEntry::make('customer.name')->label('Customer Name'),
    TextEntry::make('customer.email')->label('Email Address'),
    TextEntry::make('address')->label('Address'),
])->columns(3),

Yang ketiga adalah data pengiriman / kurir.

        
php
        

            
        
     
// Ongkos Kirim
Card::make([
    TextEntry::make('shipping.shipping_courier')->label('Jasa Kirim'),
    TextEntry::make('shipping.shipping_service')->label('Layanan Kirim'),
    TextEntry::make('shipping.shipping_cost')->label('Ongkos Kirim')->numeric(decimalPlaces: 0)->money('IDR', locale: 'id'),
])->columns(3),

Kemudian yang ke-empat adalah items / product-product yang ada pada transaction tersebut, karena data-nya akan lebih dari 1, maka kita gunakan component RepeatableEntry dan di dalamnya kita panggil relasi / method yang sudah kita buat di dalam Model Transaction yaitu TransactionDetails.

        
css
        

            
        
     
RepeatableEntry::make('TransactionDetails')

Fungsi dari component RepeatableEntry di atas adalah untuk melakukan perulangan data yang ada pada relasi TransactionDetails dan hasil dari perulangan tersebut akan kita format menjadi seperti berikut ini.

        
php
        

            
        
     
->schema([
    ImageEntry::make('product.image')->label('Product Image')->circular()->width(100)->height(100),
    TextEntry::make('product.title')->label('Product Name'),
    TextEntry::make('qty')->label('Quantity'),
    TextEntry::make('price')->label('Price')->numeric(decimalPlaces: 0)->money('IDR', locale: 'id'),
])

Dan yang terakhir kita tampilkan grand total dari transaction, yaitu meliputi total data yang ada di dalam transaction details + biaya ongkos kirim.

        
php
        

            
        
     
Card::make([
    // Buat container grid untuk alignment
    Grid::make(1)
        ->schema([
            TextEntry::make('total')
                ->label('Grand Total')
                ->numeric(decimalPlaces: 0)
                ->money('IDR', locale: 'id')
                ->size(TextEntry\TextEntrySize::Large)
                ->color('primary')
                ->alignEnd() // Align konten ke kanan
        ])
])

INFORMASI : Untuk sekarang kamu belum bisa melihat hasilnya, karena belum memiliki data order apapun di dalam database.