# InApp Template

Untuk file asset silahkan download disin, [KLIK DISINI](https://drive.google.com/drive/folders/1qVKJMeCO0hidygtxuaBYBIEF6ZccX184?usp=sharing)

letakkan assetnya di dalam folder <mark style="color:$danger;">`[project-laravel]/public`</mark> lihat pada gambar di bawah ini:

<figure><img src="/files/DEnnG6EnkJkkQEvNa0Qf" alt=""><figcaption></figcaption></figure>

Kemduian di dalam folder views buat folder baru dengan nama <mark style="color:$danger;">`layout`</mark> dan file baru di dalam folder layout dengan nama <mark style="color:$danger;">`master.blade.php`</mark> seperti pada contoh di bawah ini:

<figure><img src="/files/aCobsTsUE4dlp9zEYCcE" alt=""><figcaption></figcaption></figure>

kemudian pastkan kode html ini di dalama file <mark style="color:$danger;">`master.blade.php`</mark>

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>InApp Inventory Dashboard</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('assets/images/favicon_io/apple-touch-icon.png') }}">
        <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('assets/images/favicon_io/favicon-32x32.png') }}">
        <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('assets/images/favicon_io/favicon-16x16.png') }}">
        <link rel="manifest" href="{{ asset('assets/images/favicon_io/site.webmanifest') }}">

        <script type="module" crossorigin src="{{ asset('assets/js/main.js') }}"></script>
        <link rel="stylesheet" crossorigin href="{{ asset('assets/css/main.css') }}">

    </head>
    <body>
        <div id="overlay" class="overlay"></div>
        <!-- TOPBAR -->
        <nav id="topbar" class="navbar bg-white border-bottom fixed-top topbar px-3">
            <button id="toggleBtn" class="d-none d-lg-inline-flex btn btn-light btn-icon btn-sm ">
                <i class="ti ti-layout-sidebar-left-expand"></i>
            </button>
            <!-- MOBILE -->
            <button id="mobileBtn" class="btn btn-light btn-icon btn-sm d-lg-none me-2">
                <i class="ti ti-layout-sidebar-left-expand"></i>
            </button>
            <div>
                <!-- Navbar nav -->
                <ul class="list-unstyled d-flex align-items-center mb-0 gap-1">
                    <!-- Pages link -->
                    <!-- Bell icon -->
                    <li>
                        <a class="position-relative btn-icon btn-sm btn-light btn rounded-circle" data-bs-toggle="dropdown" aria-expanded="false" href="#" role="button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bell">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
                                <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
                            </svg>
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger mt-2 ms-n2"> 2 <span class="visually-hidden">unread messages</span>
                            </span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end dropdown-menu-md p-0">
                            <ul class="list-unstyled p-0 m-0">
                                <li class="p-3 border-bottom ">
                                    <div class="d-flex gap-3">
                                        <img src="{{ asset('assets/images/avatar/avatar-1.jpg') }}" alt="" class="avatar avatar-sm rounded-circle" />
                                        <div class="flex-grow-1 small">
                                            <p class="mb-0">New order received</p>
                                            <p class="mb-1">Order #12345 has been placed</p>
                                            <div class="text-secondary">5 minutes ago</div>
                                        </div>
                                    </div>
                                </li>
                                <li class="p-3 border-bottom ">
                                    <div class="d-flex gap-3">
                                        <img src="{{ asset('assets/images/avatar/avatar-4.jpg') }}" alt="" class="avatar avatar-sm rounded-circle" />
                                        <div class="flex-grow-1 small">
                                            <p class="mb-0">New user registered</p>
                                            <p class="mb-1">User @john_doe has signed up</p>
                                            <div class="text-secondary">30 minutes ago</div>
                                        </div>
                                </li>
                                <li class="p-3 border-bottom">
                                    <div class="d-flex gap-3">
                                        <img src="{{ asset('assets/images/avatar/avatar-2.jpg') }}" alt="" class="avatar avatar-sm rounded-circle" />
                                        <div class="flex-grow-1 small">
                                            <p class="mb-0">Payment confirmed</p>
                                            <p class="mb-1">Payment of $299 has been received</p>
                                            <div class="text-secondary">1 hour ago</div>
                                        </div>
                                    </div>
                                </li>
                                <li class="px-4 py-3 text-center">
                                    <a href="#" class="text-primary ">View all notifications</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!-- Dropdown -->
                    <li class="ms-3 dropdown">
                        <a href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="{{ asset('assets/images/avatar/avatar-1.jpg') }}" alt="" class="avatar avatar-sm rounded-circle" />
                        </a>
                        <div class="dropdown-menu dropdown-menu-end p-0" style="min-width: 200px;">
                            <div>
                                <div class="d-flex gap-3 align-items-center border-dashed border-bottom px-3 py-3">
                                    <img src="{{ asset('assets/images/avatar/avatar-1.jpg') }}" alt="" class="avatar avatar-md rounded-circle" />
                                    <div>
                                        <h4 class="mb-0 small">Shrina Tesla</h4>
                                        <p class="mb-0  small">@imshrina</p>
                                    </div>
                                </div>
                                <div class="p-3 d-flex flex-column gap-1 small lh-lg">
                                    <a href="#!" class="">
                                        <span>Home</span>
                                    </a>
                                    <a href="#!" class="">
                                        <span> Inbox</span>
                                    </a>
                                    <a href="#!" class="">
                                        <span> Chat</span>
                                    </a>
                                    <a href="#!" class="">
                                        <span> Activity</span>
                                    </a>
                                    <a href="#!" class="">
                                        <span> Account Settings</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- SIDEBAR -->
        <aside id="sidebar" class="sidebar">
            <div class="logo-area">
                <a href="index.html" class="d-inline-flex">
                    <img src="{{ asset('assets/images/logo-icon.svg') }}" alt="" width="24">
                    <span class="logo-text ms-2">
                        <img src="{{ asset('assets/images/logo.svg') }} " alt="">
                    </span>
                </a>
            </div>
            <ul class="nav flex-column">
                <li class="px-4 py-2">
                    <small class="nav-text">Main</small>
                </li>
                <li>
                    <a class="nav-link active" href="index.html">
                        <i class="ti ti-home"></i>
                        <span class="nav-text">Dashboard</span>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="inventory.html">
                        <i class="ti ti-box-seam"></i>
                        <span class="nav-text">Inventory</span>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="create-product.html">
                        <i class="ti ti-plus"></i>
                        <span class="nav-text">Add Product</span>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="reports.html">
                        <i class="ti ti-receipt"></i>
                        <span class="nav-text">Reports</span>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="404-error.html">
                        <i class="ti ti-alert-circle"></i>
                        <span class="nav-text">404 Error</span>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="docs.html">
                        <i class="ti ti-file-text"></i>
                        <span class="nav-text">Docs</span>
                    </a>
                </li>
                <li class="px-4 pt-4 pb-2">
                    <small class="nav-text">Account</small>
                </li>
                <li>
                    <a class="nav-link" href="signin.html">
                        <i class="ti ti-logout"></i>
                        <span class="nav-text">Log in</span>
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="signup.html">
                        <i class="ti ti-user-plus"></i>
                        <span class="nav-text">Sign up</span>
                    </a>
                </li>
            </ul>
        </aside>
        <!-- MAIN CONTENT -->
        <main id="content" class="content py-10">
            <div class="container-fluid">
                <div class="row ">
                    <div class="col-12">
                        <div class="mb-6">
                            <h1 class="fs-3 mb-1">Dashboard</h1>
                            <p>Your main content goes here…</p>
                        </div>
                    </div>
                </div>
                <div class="row g-3 mb-3">
                    <div class="col-lg-3 col-12">
                        <div class="card p-4  bg-primary bg-opacity-10 border border-primary border-opacity-25 rounded-2">
                            <div class="d-flex gap-3 ">
                                <div class="icon-shape icon-md bg-primary text-white rounded-2">
                                    <i class="ti ti-report-analytics fs-4"></i>
                                </div>
                                <div>
                                    <h2 class="mb-3 fs-6">Total Sales</h2>
                                    <h3 class="fw-bold mb-0">$25,000</h3>
                                    <p class="text-primary mb-0 small">+5% since last month</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-12">
                        <div class="card p-4  bg-success bg-opacity-10 border border-success border-opacity-25 rounded-2">
                            <div class="d-flex gap-3 ">
                                <div class="icon-shape icon-md bg-success text-white rounded-2">
                                    <i class="ti ti-repeat fs-4"></i>
                                </div>
                                <div>
                                    <h2 class="mb-3 fs-6">Total Purchase</h2>
                                    <h3 class="fw-bold mb-0">$18,000</h3>
                                    <p class="text-success mb-0 small">+22% since last month</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-12">
                        <div class="card p-4  bg-info bg-opacity-10 border border-info border-opacity-25 rounded-2">
                            <div class="d-flex gap-3 ">
                                <div class="icon-shape icon-md bg-info text-white rounded-2">
                                    <i class="ti ti-currency-dollar fs-4"></i>
                                </div>
                                <div>
                                    <h2 class="mb-3 fs-6">Total Expenses</h2>
                                    <h3 class="fw-bold mb-0">$9,000</h3>
                                    <p class="text-info mb-0 small">+10% since last month</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-12">
                        <div class="card p-4  bg-warning bg-opacity-10 border border-warning border-opacity-25 rounded-2">
                            <div class="d-flex gap-3 ">
                                <div class="icon-shape icon-md bg-warning text-white rounded-2">
                                    <i class="ti ti-notes fs-4"></i>
                                </div>
                                <div>
                                    <h2 class="mb-3 fs-6">Invoice Due</h2>
                                    <h3 class="fw-bold mb-0">$25,000</h3>
                                    <p class="text-warning mb-0 small">+35% since last month</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-3 mb-3">
                    <div class="col-lg-4 col-12">
                        <div class="card">
                            <div class="card-body p-4">
                                <div class="d-flex justify-content-between border-bottom pb-5 mb-3">
                                    <div>
                                        <h3 class="fw-bold h4">$25,458</h3>
                                        <span>Total Profit</span>
                                    </div>
                                    <div>
                                        <i class="ti ti-layers-subtract fs-1 text-primary"></i>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center small">
                                    <div class="text-muted">
                                        <span class="text-success">+35%</span> vs Last Month
                                    </div>
                                    <div>
                                        <a href="#" class="link-primary text-decoration-underline">View</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-12">
                        <div class="card">
                            <div class="card-body p-4">
                                <div class="d-flex justify-content-between border-bottom pb-5 mb-3">
                                    <div>
                                        <h3 class="fw-bold h4">$45,458</h3>
                                        <span>Total Payment Returns</span>
                                    </div>
                                    <div>
                                        <i class="ti ti-credit-card fs-1 text-danger"></i>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center small">
                                    <div class="text-muted">
                                        <span class="text-danger">-20%</span> vs Last Month
                                    </div>
                                    <div>
                                        <a href="#" class="link-primary text-decoration-underline">View</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-12">
                        <div class="card">
                            <div class="card-body p-4">
                                <div class="d-flex justify-content-between border-bottom pb-5 mb-3">
                                    <div>
                                        <h3 class="fw-bold h4">$34,458</h3>
                                        <span>Total Expenses</span>
                                    </div>
                                    <div>
                                        <i class="ti ti-cash-banknote fs-1 text-warning"></i>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center small">
                                    <div class="text-muted">
                                        <span class="text-warning">-20%</span> vs Last Month
                                    </div>
                                    <div>
                                        <a href="#" class="link-primary text-decoration-underline">View</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-3 mb-3">
                    <div class="col-12 col-lg-6">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center bg-transparent px-4 py-3">
                                <h3 class="h5 mb-0">Sales vs Purchase</h3>
                                <div>
                                    <select class="form-select form-select-sm">
                                        <option selected>This Year</option>
                                        <option>This Month</option>
                                        <option>This Week</option>
                                    </select>
                                </div>
                            </div>
                            <div class="card-body p-4">
                                <div id="salesPurchaseChart"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center bg-transparent px-4 py-3">
                                <h3 class="h5 mb-0">Overall Information</h3>
                                <div>
                                    <select class="form-select form-select-sm">
                                        <option selected>Last 6 Months</option>
                                        <option>This Month</option>
                                        <option>This Week</option>
                                    </select>
                                </div>
                            </div>
                            <div class="card-body p-4">
                                <h3 class="h6">Customers Overview</h3>
                                <div class="row align-items-center">
                                    <div class="col-sm-6">
                                        <div id="customerChart"></div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="row">
                                            <div class="col-6 border-end">
                                                <div class="text-center ">
                                                    <h2 class="mb-1">5.5K</h2>
                                                    <p class="text-success mb-2">First Time</p>
                                                    <span class="badge bg-success">
                                                        <i class="ti ti-arrow-up-left me-1"></i>25% </span>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-center">
                                                    <h2 class="mb-1">3.5K</h2>
                                                    <p class="text-warning mb-2">Return</p>
                                                    <span class="badge bg-success badge-xs d-inline-flex align-items-center">
                                                        <i class="ti ti-arrow-up-left me-1"></i>21% </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row text-center border-top mt-4 pt-4">
                                    <div class="col-4 border-end">
                                        <h3 class="fw-bold mb-2">6987</h3>
                                        <small class="text-secondary">Suppliers</small>
                                    </div>
                                    <div class="col-4 border-end">
                                        <h3 class="fw-bold mb-2">4896</h3>
                                        <small class="text-secondary">Customers</small>
                                    </div>
                                    <div class="col-4">
                                        <h3 class="fw-bold mb-2">487</h3>
                                        <small class="text-secondary">Orders</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-3">
                    <!-- CARD 1 — Top Selling Products -->
                    <div class="col-lg-4">
                        <div class="card  h-100">
                            <div class="card-header bg-white d-flex justify-content-between align-items-center px-4 py-3">
                                <h4 class="mb-0 h5">Top Selling Products</h4>
                                <button class="btn btn-sm btn-outline-secondary">
                                    <i class="ti ti-calendar"></i> Today </button>
                            </div>
                            <ul class="list-group list-group-flush">
                                <!-- item -->
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-2.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Wireless Earphones</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">$89 </small>
                                            <small>•</small>
                                            <small>1,250 Units</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-danger-subtle text-danger border border-danger">18%</span>
                                </li>
                                <!-- repeat -->
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-1.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Gaming Joy Stick</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">$49 </small>
                                            <small>•</small>
                                            <small>5,420 Units</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-primary-subtle text-primary border border-primary">32%</span>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-3.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Smart Watch Pro</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">$98 </small>
                                            <small>•</small>
                                            <small>862 Units</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-info-subtle text-info border border-info">22%</span>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-4.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">USB-C Fast Charger</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">$35 </small>
                                            <small>•</small>
                                            <small>3,200 Units</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-success-subtle text-success border border-success">28%</span>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-5.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Portable Bluetooth Speaker</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">$65 </small>
                                            <small>•</small>
                                            <small>2,890 Units</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-warning-subtle text-warning border border-warning">25%</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- CARD 2 — Low Stock Products -->
                    <div class="col-lg-4">
                        <div class="card  h-100">
                            <div class="card-header bg-white d-flex justify-content-between align-items-center px-4 py-3">
                                <div class="d-flex align-items-center">
                                    <h4 class="mb-0 h5">Low Stock Products</h4>
                                </div>
                                <a href="#" class="small text-primary text-decoration-underline">View All</a>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-8.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Wireless Headphones</p>
                                        <small>ID: #554433</small>
                                    </div>
                                    <div class="d-flex flex-column gap-0 align-items-center">
                                        <span class="fw-semibold text-primary">06</span>
                                        <small class="text-muted">In Stock</small>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-4.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">USB-C Cable Pack</p>
                                        <small>ID: #887766</small>
                                    </div>
                                    <div class="d-flex flex-column gap-0 align-items-center">
                                        <span class="fw-semibold text-primary">09</span>
                                        <small class="text-muted">In Stock</small>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-10.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Phone Screen Protector</p>
                                        <small>ID: #332211</small>
                                    </div>
                                    <div class="d-flex flex-column gap-0 align-items-center">
                                        <span class="fw-semibold text-primary">03</span>
                                        <small class="text-muted">In Stock</small>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-4.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Portable Charger 20000mAh</p>
                                        <small>ID: #998877</small>
                                    </div>
                                    <div class="d-flex flex-column gap-0 align-items-center">
                                        <span class="fw-semibold text-primary">07</span>
                                        <small class="text-muted">In Stock</small>
                                    </div>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-6.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Mechanical Keyboard RGB</p>
                                        <small>ID: #665544</small>
                                    </div>
                                    <div class="d-flex flex-column gap-0 align-items-center">
                                        <span class="fw-semibold text-primary">02</span>
                                        <small class="text-muted">In Stock</small>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- CARD 3 — Recent Sales -->
                    <div class="col-lg-4">
                        <div class="card  h-100">
                            <div class="card-header bg-white d-flex justify-content-between align-items-center px-4 py-3">
                                <h4 class="mb-0 h5">Recent Sales</h4>
                                <button class="btn btn-sm btn-outline-secondary">
                                    <i class="ti ti-calendar-event"></i> Weekly </button>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-7.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">MacBook Pro 16"</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">Computers </small>
                                            <small>•</small>
                                            <small>2,$2,499</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-success-subtle text-success">Completed</span>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-9.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">AirPods Pro Max</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">Audio </small>
                                            <small>•</small>
                                            <small>$549</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-primary-subtle text-primary">Processing</span>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-8.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">iPad Air 11"</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">Tablets </small>
                                            <small>•</small>
                                            <small>$799</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-success-subtle text-success">Completed</span>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-3.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Apple Watch Ultra</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">Wearables </small>
                                            <small>•</small>
                                            <small>$799</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-warning-subtle text-warning">Pending</span>
                                </li>
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ assassets/images/product-6.png" class="rounded" width="48">
                                    <div class="flex-grow-1">
                                        <p class="mb-1">Magic Keyboard</p>
                                        <div class="d-flex align-items-center gap-2 text-muted">
                                            <small class="fw-semibold">Accessories </small>
                                            <small>•</small>
                                            <small>$299</small>
                                        </div>
                                    </div>
                                    <span class="badge bg-danger-subtle text-danger">Cancelled</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <footer class="text-center py-2 mt-6 text-secondary ">
                            <p class="mb-0">Copyright © 2026 InApp Inventory Dashboard. Developed by <a href="https://codescandy.com/" target="_blank" class="text-primary">CodesCandy</a> • Distributed by <a href="https://themewagon.com/" target="_blank" class="text-primary">ThemeWagon</a>
                            </p>
                        </footer>
                    </div>
                </div>
            </div>
        </main>
        <!-- Bootstrap JS -->
        <script src="{{ assassets/js/main.js" type="module"></script>
    </body>
</html>
```

### Hasil

Untuk melihat hasilnya kita melakukan sedikit perubahan pada halaman <mark style="color:$danger;">`rotues/web.php`</mark>, lihat dari code di bawah ini:

<figure><img src="/files/JseBoWT1VxhWcAmKB7fm" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://code.kitakale.id/inapp-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
