Features - 4

[ 1 ] - Server-side rendering of Inertia.js architecture

// routes / web.php
// GET
Route::get('merchant', [MerchantController::class, 'index'])->name('merchantProfile');

// MerchantResource
// Transform the merchant model into an array for web responses
public function toArray(Request $request): array
{
    return [
        'id'          => $this->id,
        'uid'         => $this->uid,
        'name'        => $this->name,
        'phone'       => $this->phone,
        'email'       => $this->email,
        'category'    => $this->category,
        'has_notes'   => $this->notes->count(), // Number of associated notes
        'created_at'  => $this->created_at,
    ];
}

// MerchantController
class MerchantController extends Controller
{
		// GET paginated merchants and return to Inertia view
    public function index(){
        $merchants = MerchantResource::collection(Merchant::paginate(10));
        return inertia("Merchants/Index", ['merchants' => $merchants]);
    }
}

[2] - Number of notes

// Return the total number of notes associated with the merchant.
// With notes (e.g., using color badges) from those without.
'has_notes'   => $this->notes->count(), 

[3] - View merchant notes

// Register the ViewMerchantNotes component and assign a ref 
// to control it programmatically
<ViewMerchantNotes ref="noteViewRef" />

// Define the ref to access the ViewMerchantNotes component instance
const noteViewRef = ref<InstanceType<typeof ViewMerchantNotes> | null>(null);

// Trigger the `show` method on the ViewMerchantNotes component 
// to display notes for the selected merchant
const viewNote = (merchantId: number) => {
    noteViewRef.value?.show(merchantId);
};

[4] -Server side pagination

// In Merchant Controller - Using laravel pagenation
$merchants = MerchantResource::collection(Merchant::paginate(10));

Using Server-side pagination response metadata for frontend pagination