Chart.js Dashboard

use leptos::prelude::*;

#[component]
pub fn DemoChartJsDashboard() -> impl IntoView {
    view! {
        <div class="flex mx-auto w-full min-h-screen text-white bg-[#131217]">
            <section class="flex flex-col gap-4 py-24 px-12 w-full">
                <div class="flex gap-4 justify-between items-center 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 py-1.5 pr-10 pl-3 text-left rounded-md ring-1 ring-inset ring-gray-700 cursor-default sm:text-sm sm:leading-6 focus:ring-2 focus:ring-teal-400 bg-[#131217] shadow-xs focus:outline-hidden"
                        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="flex absolute inset-y-0 right-0 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 p-1 rounded-lg bg-[#211f27]">
                        // <!-- Tab 1: Active -->
                        <button class="py-2 px-4 text-sm font-medium text-gray-200 rounded-md bg-zinc-950 focus:outline-hidden">
                            Overview
                        </button>
                        // <!-- Tab 2: Inactive -->
                        <button class="py-2 px-4 text-sm font-medium bg-transparent rounded-md hover:text-gray-200 text-white/50">
                            Refer & Earn
                        </button>
                    </div>
                </div>

                // <!-- Board -->
                <div class="grid gap-4 lg:grid-cols-5">
                    // <!-- Calculated from closed trades -->
                    <div class="py-4 px-6 rounded-lg border min-h-32 border-white/10 bg-[#151419]">
                        <div class="inline-flex flex-col gap-2 justify-start items-start">
                            <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="py-4 px-6 rounded-lg border min-h-32 border-white/10 bg-[#151419]">
                        <div class="inline-flex flex-col gap-2 justify-start items-start">
                            <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="py-4 px-6 rounded-lg border min-h-32 border-white/10 bg-[#151419]">
                        <div class="inline-flex flex-col gap-2 justify-start items-start">
                            <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="py-4 px-6 rounded-lg border min-h-32 border-white/10 bg-[#151419]">
                        <div class="inline-flex flex-col gap-2 justify-start items-start">
                            <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="py-4 px-6 rounded-lg border min-h-32 border-white/10 bg-[#151419]">
                        <div class="inline-flex flex-col gap-2 justify-start items-start">
                            <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="py-4 px-6 rounded-lg border lg:col-span-4 min-h-fill border-white/10 bg-[#151419]">
                        <div class="inline-flex flex-col gap-9 justify-start items-start w-full h-full">
                            <div class="text-xs font-bold text-white">Overview</div>
                            <div class="overflow-x-auto relative w-full h-auto">
                                <canvas id="myChart" class="w-full h-auto"></canvas>
                            </div>
                        </div>
                    </div>

                    // <!-- calculated from closed position -->
                    <div class="py-4 px-6 rounded-lg border lg:col-span-2 min-h-32 border-white/10 bg-[#151419]">
                        <div class="inline-flex flex-col gap-2 justify-start items-start">
                            <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 gap-2 justify-between py-2 w-full 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 gap-2 justify-between py-2 w-full border-t border-white/10">
                                        <div>EURUSD</div>
                                        <div>Buy</div>
                                        <div class="text-red-300">-$8.30</div>
                                    </div>

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

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

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

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

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

                                    <div class="flex gap-2 justify-between py-2 w-full 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" />
    }
}