Chart.js Dashboard

use leptos::prelude::*;

#[component]
pub fn DemoChartJsDashboard() -> impl IntoView {
    view! {
        <div class="mx-auto flex min-h-screen w-full bg-[#131217] text-white">
            <section class="flex flex-col w-full gap-4 px-12 py-24">
                <div class="flex items-center justify-between gap-4 py-9">
                    <div class="text-3xl font-bold text-white">Dashboard</div>

                    // <!-- Image of the product + name of product + Account ID -->
                    <button
                        type="button"
                        class="relative cursor-default rounded-md bg-[#131217] py-1.5 pl-3 pr-10 text-left shadow-xs ring-1 ring-inset ring-gray-700 focus:outline-hidden focus:ring-2 focus:ring-teal-400 sm:text-sm sm:leading-6"
                        aria-haspopup="listbox"
                        aria-expanded="true"
                        aria-labelledby="listbox-label"
                    >
                        <span class="flex items-center">
                            <img
                                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                                alt=""
                                class="w-5 h-5 rounded-full shrink-0"
                            />
                            <span class="block ml-3 truncate">OmniTrade #131217</span>
                        </span>
                        <span class="absolute inset-y-0 right-0 flex items-center pr-2 ml-3 pointer-events-none">
                            <svg
                                class="w-5 h-5 text-gray-400"
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                aria-hidden="true"
                            >
                                <path
                                    fill-rule="evenodd"
                                    d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                                    clip-rule="evenodd"
                                />
                            </svg>
                        </span>
                    </button>
                </div>

                // <!-- menu -->
                <div class="w-fit">
                    <div class="flex gap-2 rounded-lg bg-[#211f27] p-1">
                        // <!-- Tab 1: Active -->
                        <button class="px-4 py-2 text-sm font-medium text-gray-200 rounded-md bg-zinc-950 focus:outline-hidden">
                            Overview
                        </button>
                        // <!-- Tab 2: Inactive -->
                        <button class="px-4 py-2 text-sm font-medium bg-transparent rounded-md text-white/50 hover:text-gray-200">
                            Refer & Earn
                        </button>
                    </div>
                </div>

                // <!-- Borad -->
                <div class="grid gap-4 lg:grid-cols-5">
                    // <!-- Caculated from closed trades -->
                    <div class="min-h-32 rounded-lg border border-white/10 bg-[#151419] px-6 py-4">
                        <div class="inline-flex flex-col items-start justify-start gap-2">
                            <div class="text-xs font-bold text-white">Total Revenue</div>
                            <div class="text-2xl font-bold text-white">$1,231</div>
                            <div class="text-xs font-normal text-white/80">+20.1% gross growth</div>
                            // <!-- skeleton -->
                            // <!-- <div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div>
                            <div class="w-24 h-8 bg-gray-800 rounded animate-pulse"></div>
                            <div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div>
                            -->
                        </div>
                    </div>

                    // <!-- Caltulated from closed trades -->
                    <div class="min-h-32 rounded-lg border border-white/10 bg-[#151419] px-6 py-4">
                        <div class="inline-flex flex-col items-start justify-start gap-2">
                            <div class="text-xs font-bold text-white">Monthly Profit</div>
                            <div class="text-2xl font-bold text-white">$115</div>
                            <div class="text-xs font-normal text-white/80">
                                Total profit made this month.
                            </div>
                        </div>
                    </div>

                    <div class="min-h-32 rounded-lg border border-white/10 bg-[#151419] px-6 py-4">
                        <div class="inline-flex flex-col items-start justify-start gap-2">
                            <div class="text-xs font-bold text-white">Drawdown</div>
                            <div class="text-2xl font-bold text-white">0%</div>
                            <div class="text-xs font-normal text-white/80">Drawdown</div>
                        </div>
                    </div>

                    <div class="min-h-32 rounded-lg border border-white/10 bg-[#151419] px-6 py-4">
                        <div class="inline-flex flex-col items-start justify-start gap-2">
                            <div class="text-xs font-bold text-white">Win Rate</div>
                            <div class="text-2xl font-bold text-white">70%</div>
                            <div class="text-xs font-normal text-white/80">
                                Percentage of profitable trades
                            </div>
                        </div>
                    </div>

                    <div class="min-h-32 rounded-lg border border-white/10 bg-[#151419] px-6 py-4">
                        <div class="inline-flex flex-col items-start justify-start gap-2">
                            <div class="text-xs font-bold text-white">Monthly Trades</div>
                            <div class="text-2xl font-bold text-white">32</div>
                            <div class="text-xs font-normal text-white/80">124 Total Trades</div>
                        </div>
                    </div>
                </div>

                // <!-- Chart -->
                <div class="grid gap-4 lg:grid-cols-6">
                    <div class="min-h-fill rounded-lg border border-white/10 bg-[#151419] px-6 py-4 lg:col-span-4">
                        <div class="inline-flex flex-col items-start justify-start w-full h-full gap-9">
                            <div class="text-xs font-bold text-white">Overview</div>
                            <div class="relative w-full h-auto overflow-x-auto">
                                <canvas id="myChart" class="w-full h-auto"></canvas>
                            </div>
                        </div>
                    </div>

                    // <!-- calcualted from closed possition -->
                    <div class="min-h-32 rounded-lg border border-white/10 bg-[#151419] px-6 py-4 lg:col-span-2">
                        <div class="inline-flex flex-col items-start justify-start gap-2">
                            <div class="text-xs font-bold text-white">Trade</div>
                            <div class="text-xs font-normal text-white/80">
                                You made $531 this month.
                            </div>
                        </div>
                        // <!-- List -->
                        <div class="pt-4">
                            <ul class="">
                                <li class="w-full">
                                    <div class="flex justify-between w-full gap-2 py-2 border-t border-white/10">
                                        <div>EURUSD</div>
                                        <div>Sell</div>
                                        <div class="text-teal-300">$8.30</div>
                                        // <!-- skeleton -->
                                        // <!-- <div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div>
                                        <div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div>
                                        <div class="w-full h-2 bg-gray-800 rounded animate-pulse"></div>
                                        -->
                                    </div>

                                    <div class="flex justify-between w-full gap-2 py-2 border-t border-white/10">
                                        <div>EURUSD</div>
                                        <div>Buy</div>
                                        <div class="text-red-300">-$8.30</div>
                                    </div>

                                    <div class="flex justify-between w-full gap-2 py-2 border-t border-white/10">
                                        <div>EURUSD</div>
                                        <div>Sell</div>
                                        <div class="text-teal-300">$8.30</div>
                                    </div>

                                    <div class="flex justify-between w-full gap-2 py-2 border-t border-white/10">
                                        <div>EURUSD</div>
                                        <div>Sell</div>
                                        <div class="text-teal-300">$8.30</div>
                                    </div>

                                    <div class="flex justify-between w-full gap-2 py-2 border-t border-white/10">
                                        <div>EURUSD</div>
                                        <div>Sell</div>
                                        <div class="text-teal-300">$8.30</div>
                                    </div>

                                    <div class="flex justify-between w-full gap-2 py-2 border-t border-white/10">
                                        <div>EURUSD</div>
                                        <div>Sell</div>
                                        <div class="text-teal-300">$8.30</div>
                                    </div>

                                    <div class="flex justify-between w-full gap-2 py-2 border-t border-white/10">
                                        <div>EURUSD</div>
                                        <div>Sell</div>
                                        <div class="text-teal-300">$8.30</div>
                                    </div>

                                    <div class="flex justify-between w-full gap-2 py-2 border-t border-white/10">
                                        <div>EURUSD</div>
                                        <div>Sell</div>
                                        <div class="text-teal-300">$8.30</div>
                                    </div>

                                </li>
                            </ul>

                        </div>

                    </div>
                </div>
            </section>
        </div>

        <script src="/components/chart_js_dashboard.js" />
    }
}