@extends('layouts.master')
@section('content')
<!-- Page-content -->
    <div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
        <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">
            <div class="mt-1 -ml-3 -mr-3 rounded-none card">
               
                <div class="card-body !px-2.5 !py-0">
                    <ul class="flex flex-wrap w-full text-sm font-medium text-center nav-tabs">
                        <li class="group active">
                            <a href="javascript:void(0);" data-tab-toggle="" data-target="overviewTabs" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 dark:group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 dark:group-[.active]:border-b-custom-500 hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]">Penjualan</a>
                        </li>
                        <li class="group">
                            <a href="javascript:void(0);" data-tab-toggle="" data-target="documentsTabs" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 dark:group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 dark:group-[.active]:border-b-custom-500 hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]">Pembelian</a>
                        </li>
                        <li class="group">
                            <a href="javascript:void(0);" data-tab-toggle="" data-target="projectsTabs" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 dark:group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 dark:group-[.active]:border-b-custom-500 hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]">produk</a>
                        </li>
                        <!-- <li class="group">
                            <a href="javascript:void(0);" data-tab-toggle="" data-target="followersTabs" class="inline-block px-4 py-2 text-base transition-all duration-300 ease-linear rounded-t-md text-slate-500 dark:text-zink-200 border-b border-transparent group-[.active]:text-custom-500 dark:group-[.active]:text-custom-500 group-[.active]:border-b-custom-500 dark:group-[.active]:border-b-custom-500 hover:text-custom-500 dark:hover:text-custom-500 active:text-custom-500 dark:active:text-custom-500 -mb-[1px]">Followers</a>
                        </li> -->
                    </ul>
                </div>
            </div>
            <!--end card-->

            <div class="tab-content">
                <div class="block tab-pane" id="overviewTabs">
                    <div class="grid grid-cols-1 gap-x-5 2xl:grid-cols-12">
                        <div class="2xl:col-span-12">
                            <div class="grid grid-cols-1 gap-x-5 xl:grid-cols-12">
                             
                            </div>
                            <!--end grid-->
                            <div class="card">
                                <div class="card-body">
                                    
                                        <h6 class="mb-1 text-15">Daftar Penjualan</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan transaksi penjualan secara kronologis berdasarkan tipenya dalam priode tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        <h6 class="mb-1 text-15">Piutang Pelanggan</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan semua faktur yang belum dibayar dan saldo memo kredit pelanggan pada tanggal tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        <h6 class="mb-1 text-15">Pengiriman Penjualan</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan semua produk yang dikirim untuk transaksi penjualan dalam priode tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>
                                    
                                        <h6 class="mb-1 text-15">Penyelesaian pesanan penjualan</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan ringkasan proses bisnis perusahaan ini. anda dapat mengidentifikasi setiap penyelesaian penawaran dan pesanan penjualan hingga penagihan dan pembayarannya dilakukan</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        <h6 class="mb-1 text-15">Daftar tukar faktur</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan semua tukar faktur dalam priode tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>
                                        
                                        <h6 class="mb-1 text-15">Penjualan per pelanggan</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan semua semua transaksi penjualan dari setiap pelanggan dalam priode tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        <h6 class="mb-1 text-15">Usia piutang</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan total piutang dari setiap pelanggan berdasarkan usianya (30,60,90 dan setelah 90 hari).</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        <h6 class="mb-1 text-15">Penjualan per produk </h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan semua faktur yang belum dibayar dan saldo memo kredit pelanggan pada tanggal tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        <h6 class="mb-1 text-15">Daftar faktur proforma </h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan semua faktur proforma yang dibuat dalam priode tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>
                                </div>
                            </div>
                        </div>
                        <!--end col-->
                        <!-- <div class="2xl:col-span-3">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="mb-4 text-15">Personal Information</h6>
                                    <div class="overflow-x-auto">
                                        <table class="w-full ltr:text-left rtl:ext-right">
                                            <tbody>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Designation</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">Web Developer</td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Phone No</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">617 219 6245</td>
                                                </tr>p
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Birth of Date</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">15 Dec, 1998</td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Website</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200"><a href="http://StarCode Kh.in/" target="_blank" class="text-custom-500">www.starcodekh.com</a></td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Email</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">paula@StarCode Kh.com</td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Location</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">Phnom Penh, Cambodia</td>
                                                </tr>
                                                <tr>
                                                    <th class="pt-2 font-semibold ps-0" scope="row">Joining Date</th>
                                                    <td class="pt-2 text-right text-slate-500 dark:text-zink-200">01 July 2023</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!--end col-->
                    </div>
                    <!--end grid-->
                </div>
                <!--end tab pane-->
                <div class="block tab-pane" id="documentsTabs">
                    <div class="grid grid-cols-1 gap-x-5 2xl:grid-cols-12">
                        <div class="2xl:col-span-12">
                            <div class="grid grid-cols-1 gap-x-5 xl:grid-cols-12">
                             
                            </div>
                            <!--end grid-->
                            <div class="card">
                                <div class="card-body">
                                    
                                        <h6 class="mb-1 text-15">Pengiriman Pembelian</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan semua produk yang dikirim untuk transaksi pembelian dalam priode tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        
                                </div>
                            </div>
                        </div>
                        <!--end col-->
                        <!-- <div class="2xl:col-span-3">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="mb-4 text-15">Personal Information</h6>
                                    <div class="overflow-x-auto">
                                        <table class="w-full ltr:text-left rtl:ext-right">
                                            <tbody>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Designation</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">Web Developer</td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Phone No</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">617 219 6245</td>
                                                </tr>p
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Birth of Date</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">15 Dec, 1998</td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Website</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200"><a href="http://StarCode Kh.in/" target="_blank" class="text-custom-500">www.starcodekh.com</a></td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Email</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">paula@StarCode Kh.com</td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Location</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">Phnom Penh, Cambodia</td>
                                                </tr>
                                                <tr>
                                                    <th class="pt-2 font-semibold ps-0" scope="row">Joining Date</th>
                                                    <td class="pt-2 text-right text-slate-500 dark:text-zink-200">01 July 2023</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!--end col-->
                    </div>
                    <!--end grid-->
                </div>
                <!--end tab pane-->
                <div class="block tab-pane" id="projectsTabs">
                    <div class="grid grid-cols-1 gap-x-5 2xl:grid-cols-12">
                        <div class="2xl:col-span-12">
                            <div class="grid grid-cols-1 gap-x-5 xl:grid-cols-12">
                             
                            </div>
                            <!--end grid-->
                            <div class="card">
                                <div class="card-body">
                                    
                                        <h6 class="mb-1 text-15">Konversi produk</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Memberikan laporan yang berisi daftar transaksi konversi produk, bahan baku yang digunakan, dan harga pokok penjualan(HPP) dalam format XSLX atau CSV.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Expor laporan</button></a>


                                        <h6 class="mb-1 text-15">Kuantitas stok gudang</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan setiap kuantitas produk berdasarkan gudang yang dipilih pada tanggal tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        <h6 class="mb-1 text-15">Pergerakan barang gudang</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan pergerakan stok per gudang dalam priode tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        <h6 class="mb-1 text-15">Ringkasan persediaan barang FIFO</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan kuantitas stok yang tersedia berdasarkan perhitungan nilai fisrt in, first out (FIFO) pada tanggal tertentu.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>

                                        <h6 class="mb-1 text-15">Detail persediaan barang</h6>
                                        <p class="mb-2 text-slate-500 dark:text-zink-200">Menampilkan daftar produk dengan mutasi dan kuantitas akhirnya.</p>
                                        <a href="#"><button class="mb-3 text-blue-500 btn bg-white-500 border-slate-300 hover:text-white hover:bg-custom-600 hover:border-custom-600 focus:text-white focus:bg-custom-600 focus:border-custom-600 focus:ring focus:ring-custom-100 active:text-white active:bg-custom-600 active:border-custom-600 active:ring active:ring-custom-100 dark:ring-custom-400/20">Lihat laporan</button></a>


                                </div>
                            </div>
                        </div>
                        <!--end col-->
                        <!-- <div class="2xl:col-span-3">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="mb-4 text-15">Personal Information</h6>
                                    <div class="overflow-x-auto">
                                        <table class="w-full ltr:text-left rtl:ext-right">
                                            <tbody>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Designation</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">Web Developer</td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Phone No</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">617 219 6245</td>
                                                </tr>p
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Birth of Date</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">15 Dec, 1998</td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Website</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200"><a href="http://StarCode Kh.in/" target="_blank" class="text-custom-500">www.starcodekh.com</a></td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Email</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">paula@StarCode Kh.com</td>
                                                </tr>
                                                <tr>
                                                    <th class="py-2 font-semibold ps-0" scope="row">Location</th>
                                                    <td class="py-2 text-right text-slate-500 dark:text-zink-200">Phnom Penh, Cambodia</td>
                                                </tr>
                                                <tr>
                                                    <th class="pt-2 font-semibold ps-0" scope="row">Joining Date</th>
                                                    <td class="pt-2 text-right text-slate-500 dark:text-zink-200">01 July 2023</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!--end col-->
                    </div>
                    <!--end grid-->
                </div>
                <!--end tab pane-->
                <div class="hidden tab-pane" id="followersTabs">
                    <h5 class="mb-4 underline">Followers</h5>
                    <div class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-x-5">
                        <div class="relative card">
                            <div class="card-body">
                                <p class="absolute inline-block px-5 py-1 text-xs ltr:left-0 rtl:right-0 text-custom-600 bg-custom-100 dark:bg-custom-500/20 top-5 ltr:rounded-e rtl:rounded-l">Executive Operations</p>
                                <div class="flex items-center justify-end">
                                    <p class="text-slate-500 dark:text-zink-200">Doj : 15 Jan, 2023</p>
                                </div>
                                <div class="mt-4 text-center">
                                    <div class="flex justify-center">
                                        <div class="overflow-hidden rounded-full size-20 bg-slate-100">
                                            <img src="{{ URL::to('assets/images/avatar-3.png') }}" alt="" class="">
                                        </div>
                                    </div>
                                    <a href="#!"><h4 class="mt-4 mb-2 font-semibold text-16">Ralaphe Flores </h4></a>
                                    <div class="text-slate-500 dark:text-zink-200">
                                        <p class="mb-1">floral12@starcode.com</p>
                                        <p>+213 617 219 6245</p>
                                        <p class="inline-block px-3 py-1 my-4 font-semibold rounded-md text-slate-600 bg-slate-100 dark:bg-zink-600 dark:text-zink-200">Exp. : 1.5 years</p>
                                        <h4 class="text-15 text-custom-500">Salary : $463.42 <span class="text-xs font-normal text-slate-500 dark:text-zink-200">/ Month<span></span></span></h4>
                                    </div>
                                </div>
                            </div>
                        </div><!--end card-->
                        <div class="relative card">
                            <div class="card-body">
                                <p class="absolute inline-block px-5 py-1 text-xs text-green-600 bg-green-100 ltr:left-0 rtl:right-0 dark:bg-green-500/20 top-5 ltr:rounded-e rtl:rounded-l">Project Manager</p>
                                <div class="flex items-center justify-end">
                                    <p class="text-slate-500 dark:text-zink-200">Doj : 29 Feb, 2023</p>
                                </div>
                                <div class="mt-4 text-center">
                                    <div class="flex justify-center">
                                        <div class="overflow-hidden rounded-full size-20 bg-slate-100">
                                            <img src="{{ URL::to('assets/images/avatar-2.png') }}" alt="" class="">
                                        </div>
                                    </div>
                                    <a href="#!">
                                        <h4 class="mt-4 mb-2 font-semibold text-16">James Lash </h4>
                                    </a>
                                    <div class="text-slate-500 dark:text-zink-200">
                                        <p class="mb-1">jameslash@starcode.com</p>
                                        <p>+210 85 383 2388</p>
                                        <p class="inline-block px-3 py-1 my-4 font-semibold rounded-md text-slate-600 bg-slate-100 dark:bg-zink-600 dark:text-zink-200">Exp. : 0.5 years</p>
                                        <h4 class="text-15 text-custom-500">Salary : $701.77 <span class="text-xs font-normal text-slate-500 dark:text-zink-200">/ Month<span></span></span></h4>
                                    </div>
                                </div>
                            </div>
                        </div><!--end card-->
                        <div class="relative card">
                            <div class="card-body">
                                <p class="absolute inline-block px-5 py-1 text-xs ltr:left-0 rtl:right-0 text-sky-600 bg-sky-100 dark:bg-sky-500/20 top-5 ltr:rounded-e rtl:rounded-l">React Developer</p>
                                <div class="flex items-center justify-end">
                                    <p class="text-slate-500 dark:text-zink-200">Doj : 04 March, 2023</p>
                                </div>
                                <div class="mt-4 text-center">
                                    <div class="flex justify-center">
                                        <div class="overflow-hidden rounded-full size-20 bg-slate-100">
                                            <img src="{{ URL::to('assets/images/avatar-4.png') }}" alt="" class="">
                                        </div>
                                    </div>
                                    <a href="#!">
                                        <h4 class="mt-4 mb-2 font-semibold text-16">Angus Garnsey</h4>
                                    </a>
                                    <div class="text-slate-500 dark:text-zink-200">
                                        <p class="mb-1">angusgarnsey@starcode.com</p>
                                        <p>+210 41521 1325</p>
                                        <p class="inline-block px-3 py-1 my-4 font-semibold rounded-md text-slate-600 bg-slate-100 dark:bg-zink-600 dark:text-zink-200">Exp. : 0.7 years</p>
                                        <h4 class="text-15 text-custom-500">Salary : $478.32 <span class="text-xs font-normal text-slate-500 dark:text-zink-200">/ Month<span></span></span></h4>
                                    </div>
                                </div>
                            </div>
                        </div><!--end card-->
                        <div class="relative card">
                            <div class="card-body">
                                <p class="absolute inline-block px-5 py-1 text-xs text-yellow-600 bg-yellow-100 ltr:left-0 rtl:right-0 dark:bg-yellow-500/20 top-5 ltr:rounded-e rtl:rounded-l">Shopify Developer</p>
                                <div class="flex items-center justify-end">
                                    <p class="text-slate-500 dark:text-zink-200">Doj : 11 March, 2023</p>
                                </div>
                                <div class="mt-4 text-center">
                                    <div class="flex justify-center">
                                        <div class="overflow-hidden rounded-full size-20 bg-slate-100">
                                            <img src="{{ URL::to('assets/images/avatar-5.png') }}" alt="" class="">
                                        </div>
                                    </div>
                                    <a href="#!">
                                        <h4 class="mt-4 mb-2 font-semibold text-16">Matilda Marston</h4>
                                    </a>
                                    <div class="text-slate-500 dark:text-zink-200">
                                        <p class="mb-1">matildamarston@starcode.com</p>
                                        <p>+210 082 288 1065</p>
                                        <p class="inline-block px-3 py-1 my-4 font-semibold rounded-md text-slate-600 bg-slate-100 dark:bg-zink-600 dark:text-zink-200">Exp. : 1 years</p>
                                        <h4 class="text-15 text-custom-500">Salary : $120.37 <span class="text-xs font-normal text-slate-500 dark:text-zink-200">/ Month<span></span></span></h4>
                                    </div>
                                </div>
                            </div>
                        </div><!--end card-->
                        <div class="relative card">
                            <div class="card-body">
                                <p class="absolute inline-block px-5 py-1 text-xs text-red-600 bg-red-100 ltr:left-0 rtl:right-0 dark:bg-red-500/20 top-5 ltr:rounded-e rtl:rounded-l">Angular Developer</p>
                                <div class="flex items-center justify-end">
                                    <p class="text-slate-500 dark:text-zink-200">Doj : 22 March, 2023</p>
                                </div>
                                <div class="mt-4 text-center">
                                    <div class="flex justify-center">
                                        <div class="overflow-hidden rounded-full size-20 bg-slate-100">
                                            <img src="{{ URL::to('assets/images/avatar-6.png') }}" alt="" class="">
                                        </div>
                                    </div>
                                    <a href="#!">
                                        <h4 class="mt-4 mb-2 font-semibold text-16">Zachary Benjamin</h4>
                                    </a>
                                    <div class="text-slate-500 dark:text-zink-200">
                                        <p class="mb-1">zacharybenjamin@starcode.com</p>
                                        <p>+120 348 9730 237</p>
                                        <p class="inline-block px-3 py-1 my-4 font-semibold rounded-md text-slate-600 bg-slate-100 dark:bg-zink-600 dark:text-zink-200">Exp. : 0 years</p>
                                        <h4 class="text-15 text-custom-500">Salary : $89.99 <span class="text-xs font-normal text-slate-500 dark:text-zink-200">/ Month<span></span></span></h4>
                                    </div>
                                </div>
                            </div>
                        </div><!--end card-->
                        <div class="relative card">
                            <div class="card-body">
                                <p class="absolute inline-block px-5 py-1 text-xs text-purple-600 bg-purple-100 ltr:left-0 rtl:right-0 dark:bg-purple-500/20 top-5 ltr:rounded-e rtl:rounded-l">Graphic Designer</p>
                                <div class="flex items-center justify-end">
                                    <p class="text-slate-500 dark:text-zink-200">Doj : 09 June, 2023</p>
                                </div>
                                <div class="mt-4 text-center">
                                    <div class="flex justify-center">
                                        <div class="overflow-hidden rounded-full size-20 bg-slate-100">
                                            <img src="{{ URL::to('assets/images/avatar-7.png') }}" alt="" class="">
                                        </div>
                                    </div>
                                    <a href="#!">
                                        <h4 class="mt-4 mb-2 font-semibold text-16">Ruby Chomley</h4>
                                    </a>
                                    <div class="text-slate-500 dark:text-zink-200">
                                        <p class="mb-1">rubychomley@starcode.com</p>
                                        <p>+120 1234 56789</p>
                                        <p class="inline-block px-3 py-1 my-4 font-semibold rounded-md text-slate-600 bg-slate-100 dark:bg-zink-600 dark:text-zink-200">Exp. : 0.2 years</p>
                                        <h4 class="text-15 text-custom-500">Salary : $214.82 <span class="text-xs font-normal text-slate-500 dark:text-zink-200">/ Month<span></span></span></h4>
                                    </div>
                                </div>
                            </div>
                        </div><!--end card-->
                        <div class="relative card">
                            <div class="card-body">
                                <p class="absolute inline-block px-5 py-1 text-xs text-yellow-600 bg-yellow-100 ltr:left-0 rtl:right-0 dark:bg-yellow-500/20 top-5 ltr:rounded-e rtl:rounded-l">Shopify Developer</p>
                                <div class="flex items-center justify-end">
                                    <p class="text-slate-500 dark:text-zink-200">Doj : 27 June, 2023</p>
                                </div>
                                <div class="mt-4 text-center">
                                    <div class="flex justify-center">
                                        <div class="overflow-hidden rounded-full size-20 bg-slate-100">
                                            <img src="{{ URL::to('assets/images/avatar-8.png') }}" alt="" class="">
                                        </div>
                                    </div>
                                    <a href="#!">
                                        <h4 class="mt-4 mb-2 font-semibold text-16">Jesse Edouardy</h4>
                                    </a>
                                    <div class="text-slate-500 dark:text-zink-200">
                                        <p class="mb-1">jessedouard@starcode.com</p>
                                        <p>+87 044 017 3869</p>
                                        <p class="inline-block px-3 py-1 my-4 font-semibold rounded-md text-slate-600 bg-slate-100 dark:bg-zink-600 dark:text-zink-200">Exp. : 1.7 years</p>
                                        <h4 class="text-15 text-custom-500">Salary : $278.96 <span class="text-xs font-normal text-slate-500 dark:text-zink-200">/ Month<span></span></span></h4>
                                    </div>
                                </div>
                            </div>
                        </div><!--end card-->
                        <div class="relative card">
                            <div class="card-body">
                                <p class="absolute inline-block px-5 py-1 text-xs text-orange-600 bg-orange-100 ltr:left-0 rtl:right-0 dark:bg-orange-500/20 top-5 ltr:rounded-e rtl:rounded-l">Team Leader</p>
                                <div class="flex items-center justify-end">
                                    <p class="text-slate-500 dark:text-zink-200">Doj : 15 July, 2023</p>
                                </div>
                                <div class="mt-4 text-center">
                                    <div class="flex justify-center">
                                        <div class="overflow-hidden rounded-full size-20 bg-slate-100">
                                            <img src="{{ URL::to('assets/images/avatar-9.png') }}" alt="" class="">
                                        </div>
                                    </div>
                                    <a href="#!">
                                        <h4 class="mt-4 mb-2 font-semibold text-16">Xavier Bower</h4>
                                    </a>
                                    <div class="text-slate-500 dark:text-zink-200">
                                        <p class="mb-1">xavierbower@starcode.com</p>
                                        <p>+159 98765 32451</p>
                                        <p class="inline-block px-3 py-1 my-4 font-semibold rounded-md text-slate-600 bg-slate-100 dark:bg-zink-600 dark:text-zink-200">Exp. : 6.7 years</p>
                                        <h4 class="text-15 text-custom-500">Salary : $901.94 <span class="text-xs font-normal text-slate-500 dark:text-zink-200">/ Month<span></span></span></h4>
                                    </div>
                                </div>
                            </div>
                        </div><!--end card-->
                    </div><!--end grid-->
                    <div class="flex flex-col items-center gap-4 mb-4 md:flex-row">
                        <div class="grow">
                            <p class="text-slate-500 dark:text-zink-200">Showing <b>8</b> of <b>18</b> Results</p>
                        </div>
                        <ul class="flex flex-wrap items-center gap-2">
                            <li>
                                <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto"><i class="size-4 rtl:rotate-180" data-lucide="chevron-left"></i></a>
                            </li>
                            <li>
                                <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">1</a>
                            </li>
                            <li>
                                <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">2</a>
                            </li>
                            <li>
                                <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto active">3</a>
                            </li>
                            <li>
                                <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">4</a>
                            </li>
                            <li>
                                <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">5</a>
                            </li>
                            <li>
                                <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto">6</a>
                            </li>
                            <li>
                                <a href="#!" class="inline-flex items-center justify-center bg-white dark:bg-zink-700 size-8 transition-all duration-150 ease-linear border border-slate-200 dark:border-zink-500 rounded text-slate-500 dark:text-zink-200 hover:text-custom-500 dark:hover:text-custom-500 hover:bg-custom-50 dark:hover:bg-custom-500/10 focus:bg-custom-50 dark:focus:bg-custom-500/10 focus:text-custom-500 dark:focus:text-custom-500 [&.active]:text-custom-50 dark:[&.active]:text-custom-50 [&.active]:bg-custom-500 dark:[&.active]:bg-custom-500 [&.active]:border-custom-500 dark:[&.active]:border-custom-500 [&.disabled]:text-slate-400 dark:[&.disabled]:text-zink-300 [&.disabled]:cursor-auto"><i class="size-4 rtl:rotate-180" data-lucide="chevron-right"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--end tab pane-->
            </div>
            <!--end tab content-->
        </div>
        <!-- container-fluid -->
    </div>
<!-- End Page-content -->

@section('script')
    <!-- pages-account init js-->
    <script src="{{ URL::to('assets/js/pages/pages-account.init.js') }}"></script>
@endsection
@endsection
