Aiblux - Admin & Dashboard Template

UI - Widgets

Light Color - Widgets

Earnings

$13,560K

+5%

Total Income

$13,600.00

+5%

Earnings

$13,560K

                            
                                <div class="flex xl:flex-row lg:flex-col md:flex-row flex-col items-start gap-4">
                                    <div class="w-full space-y-4">
                                        <div class="flex-center-between bg-[#F6F4FE] dark:bg-dark-card-two px-4 md:px-6 py-[30px] rounded-15">
                                            <div class="flex items-center gap-2 md:gap-5">
                                                <div class="flex-center size-10 rounded-full bg-primary-500 dark:bg-dark-icon">
                                                    <img class="size-6 brightness-[50]" src="assets/images/icons/bitcoin.svg" alt="bitcoin">
                                                </div>
                                                <div>
                                                    <h6 class="text-sm font-medium text-gray-500 dark:text-dark-text">Earnings</h6>
                                                    <div class="card-title text-2xl mt-1">
                                                        $<span class="counter-value" data-value="13560">13,560</span>K
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center gap-2 px-2 py-1.5 rounded-full bg-primary-500 dark:bg-dark-icon text-white leading-none">
                                                <img class="size-4 brightness-[50]" src="assets/images/icons/trend-up.svg" alt="trend-up">
                                                <span class="text-xs font-bold">+5%</span>
                                            </div>
                                        </div>
                                        <div class="flex-center-between bg-[#F6F4FE] dark:bg-dark-card-two px-4 md:px-6 py-[30px] rounded-15">
                                            <div class="flex items-center gap-2 md:gap-5">
                                                <div class="flex-center size-10 rounded-full bg-[#E1DAFC] dark:bg-dark-icon">
                                                    <img class="size-6" src="assets/images/icons/bitcoin.svg" alt="bitcoin">
                                                </div>
                                                <div>
                                                    <h6 class="text-sm font-medium text-gray-500 dark:text-dark-text">Total Income</h6>
                                                    <div class="card-title text-2xl mt-1">
                                                        $<span class="counter-value" data-value="13600.00">13,600.00</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center gap-2 px-2 py-1.5 rounded-full bg-primary-500 dark:bg-dark-icon text-white leading-none">
                                                <img class="size-4 brightness-[50]" src="assets/images/icons/trend-up.svg" alt="trend-up">
                                                <span class="text-xs font-bold">+5%</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="md:w-auto w-full flex flex-col justify-center items-center text-center bg-[#F6F4FE] dark:bg-dark-card-two px-6 py-[30px] rounded-15">
                                        <div class="flex-center size-10 rounded-full bg-primary-500 dark:bg-dark-icon">
                                            <img class="size-6 brightness-[50]" src="assets/images/icons/bitcoin.svg" alt="bitcoin">
                                        </div>
                                        <div>
                                            <h6 class="text-sm font-medium text-gray-500 dark:text-dark-text my-2.5 leading-none">Earnings</h6>
                                            <div class="card-title text-2xl mt-1 leading-none">
                                                $<span class="counter-value" data-value="13560">13,560</span>K
                                            </div>
                                        </div>
                                    </div>
                                </div>

Different Color - Widgets

Earnings

$13,560K

+5%

Total Income

$13,600.00

+5%

Earnings

$13,560K

                            
                                <div class="flex xl:flex-row lg:flex-col md:flex-row flex-col items-start gap-4">
                                    <div class="w-full space-y-4">
                                        <div class="flex-center-between bg-[#F6F4FE] dark:bg-dark-card-two px-4 md:px-6 py-[30px] rounded-15">
                                            <div class="flex items-center gap-2 md:gap-5">
                                                <div class="flex-center size-10 rounded-full bg-primary-500 dark:bg-dark-icon">
                                                    <img class="size-6 brightness-[50]" src="assets/images/icons/bitcoin.svg" alt="bitcoin">
                                                </div>
                                                <div>
                                                    <h6 class="text-sm font-medium text-gray-500 dark:text-dark-text">Earnings</h6>
                                                    <div class="card-title text-2xl mt-1">
                                                        $<span class="counter-value" data-value="13560">13,560</span>K
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center gap-2 px-2 py-1.5 rounded-full bg-primary-500 dark:bg-dark-icon text-white leading-none">
                                                <img class="size-4 brightness-[50]" src="assets/images/icons/trend-up.svg" alt="trend-up">
                                                <span class="text-xs font-bold">+5%</span>
                                            </div>
                                        </div>
                                        <div class="flex-center-between bg-[#F6F4FE] dark:bg-dark-card-two px-4 md:px-6 py-[30px] rounded-15">
                                            <div class="flex items-center gap-2 md:gap-5">
                                                <div class="flex-center size-10 rounded-full bg-[#E1DAFC] dark:bg-dark-icon">
                                                    <img class="size-6" src="assets/images/icons/bitcoin.svg" alt="bitcoin">
                                                </div>
                                                <div>
                                                    <h6 class="text-sm font-medium text-gray-500 dark:text-dark-text">Total Income</h6>
                                                    <div class="card-title text-2xl mt-1">
                                                        $<span class="counter-value" data-value="13600.00">13,600.00</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center gap-2 px-2 py-1.5 rounded-full bg-[#E1DAFC] text-primary-500 leading-none">
                                                <img class="size-4" src="assets/images/icons/trend-up.svg" alt="trend-up">
                                                <span class="text-xs font-bold">+5%</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="md:w-auto w-full flex flex-col justify-center items-center text-center bg-[#F6F4FE] dark:bg-dark-card-two px-6 py-[30px] rounded-15">
                                        <div class="flex-center size-10 rounded-full bg-primary-500 dark:bg-dark-icon">
                                            <img class="size-6 brightness-[50]" src="assets/images/icons/bitcoin.svg" alt="bitcoin">
                                        </div>
                                        <div>
                                            <h6 class="text-sm font-medium text-gray-500 dark:text-dark-text my-2.5 leading-none">Earnings</h6>
                                            <div class="card-title text-2xl mt-1 leading-none">
                                                $<span class="counter-value" data-value="13560">13,560</span>K
                                            </div>
                                        </div>
                                    </div>
                                </div>

Social Media

Total User

Social Channels

13,499

+4.6%

Tik Tok Earnings

Social Channels

13,499

+4.6%

Tik Tok Earnings

Social Channels

13,499

+4.6%

                            
                                <div class="divide-y divide-dashed dark:divide-dark-border-two *:py-6 first:*:pt-0">
                                    <!-- Single Item -->
                                    <div class="flex-center-between">
                                        <div class="flex items-center gap-2 md:gap-5">
                                            <div class="size-12 shrink-0 rounded-lg bg-[#D9FAF2] dark:bg-dark-icon relative before:font-remix before:content-['\ede2'] before:text-2xl before:text-[#01DDA5] before:position-center"></div>
                                            <div class="truncate">
                                                <h6 class="text-sm md:text-xl font-semibold text-gray-500 dark:text-dark-text">Total User</h6>
                                                <span class="text-xs md:text-sm font-medium text-gray-900 dark:text-dark-text">Social Channels</span>
                                            </div>
                                        </div>
                                        <div class="flex items-center gap-2 md:gap-4">
                                            <span class="text-sm md:text-xl font-semibold text-gray-500 dark:text-dark-text counter-value" data-value="13499">13,499</span>
                                            <div class="flex items-center gap-2 px-2 py-2 rounded-lg bg-[#E7F1FF] dark:bg-dark-icon text-primary-500 leading-none">
                                                <img class="size-4" src="assets/images/icons/trend-up.svg" alt="trend-up">
                                                <span class="text-xs font-bold">+4.6%</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- If Need Add More Item -->
                                </div>

Different Color Chart - Widgets

                            
                                 <div id="widgetStackedColumn" class="min-h-[430px]"></div>

My Inbox Chat

3 New

Total Friends

1,486

In Progressing

3 New

Total Students

K

WhatsApp User

3 New

Total User

1,699

Light Color Video - Widgets

Course Video

73%

                            
                                <div>
                                    <div class="size-12 flex-center rounded-15 bg-[#EDE9FF] dark:bg-dark-icon">
                                        <img src="assets/images/icons/Video.svg" alt="">
                                    </div>
                                    <h6 class="text-heading card-title leading-none mt-6 mb-12">Course Video</h6>
                                    <!-- First Slider -->
                                    <div class="flex-center leading-none gap-x-3 range-wrapper">
                                        <div class="relative w-full max-w-full flex-center">
                                            <div class="w-full h-2.5 bg-[#ECEBF0] rounded-full overflow-hidden">
                                                <div class="h-full bg-primary-500 range-line"></div>
                                            </div>
                                            <div class="size-[18px] bg-white border border-primary-500 rounded-full absolute range-handler">
                                                <div class="tooltip bg-primary-500 text-white">
                                                    <div><span class="range-number">0</span>%</div>
                                                </div>
                                            </div>
                                            <input type="range" class="range-input" min="0" max="100" value="73" step="1">
                                        </div>
                                        <div class="w-8 leading-none inline-flex justify-end text-gray-500 dark:text-dark-text"><span class="range-number">73</span>%</div>
                                    </div>
                                </div>

Light Color - Widgets

Completed Course

+4.6% last Month

Completed Course

+4.6% last Month

                            
                                <div class="flex flex-col md:flex-row gap-4">
                                    <div class="w-full p-6 lg:p-5 xl:p-6 rounded-15 bg-[#F2ECFF] dark:bg-dark-card-two">
                                        <div class="flex items-center gap-3">
                                            <div class="before:font-remix before:text-3xl before:text-primary-500 before:content-['\f3e9']"></div>
                                            <h6 class="text-base lg:text-sm xl:text-base font-semibold text-heading">Completed Course</h6>
                                        </div>
                                        <div class="flex-center-between mt-10">
                                            <span class="text-3xl lg:text-2xl xl:text-3xl font-bold text-[#323232] dark:text-dark-text">28</span>
                                            <div class="flex items-center gap-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 256 256"><path fill="#795DED" d="M244 56v64a12 12 0 0 1-24 0V85l-75.51 75.52a12 12 0 0 1-17 0L96 129l-63.51 63.49a12 12 0 0 1-17-17l72-72a12 12 0 0 1 17 0L136 135l67-67h-35a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12"/></svg>
                                                <span class="text-xs font-bold text-primary-500">+4.6%</span>
                                                <span class="text-sm font-semibold text-gray-500 dark:text-dark-text">last Month</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-full p-6 lg:p-5 xl:p-6 rounded-15 bg-[#F2ECFF] dark:bg-dark-card-two">
                                        <div class="flex items-center gap-3">
                                            <div class="before:font-remix before:text-3xl before:text-[#1FBF98] before:content-['\f3e9']"></div>
                                            <h6 class="text-base lg:text-sm xl:text-base font-semibold text-heading">Completed Course</h6>
                                        </div>
                                        <div class="flex-center-between mt-10">
                                            <span class="text-3xl lg:text-2xl xl:text-3xl font-bold text-[#323232] dark:text-dark-text">28</span>
                                            <div class="flex items-center gap-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 256 256"><path fill="#1FBF98" d="M244 56v64a12 12 0 0 1-24 0V85l-75.51 75.52a12 12 0 0 1-17 0L96 129l-63.51 63.49a12 12 0 0 1-17-17l72-72a12 12 0 0 1 17 0L136 135l67-67h-35a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12"/></svg>
                                                <span class="text-xs font-bold text-[#1FBF98]">+4.6%</span>
                                                <span class="text-sm font-semibold text-gray-500 dark:text-dark-text">last Month</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Different Color Pie Chart - Widgets

Increase

$35,199.00

Completed

734

Pending

Canceled

Increase

$35,199.00

Completed

734

Pending

Canceled

Increase

$35,199.00

Completed

734

Pending

Canceled

                            
                                <div class="grid grid-cols-12 gap-4">
                                    <!-- single item -->
                                    <div class="col-span-full md:col-span-6 lg:col-span-4 bg-[#F6F4FE] dark:bg-dark-card-two p-6 rounded-15">
                                        <div class="flex justify-between">
                                            <div class="w-full">
                                                <h6 class="font-medium text-gray-500 dark:text-dark-text">Increase</h6>
                                                <div class="text-xl xl:text-[32px] font-bold text-heading dark:text-white mt-6 md:mt-11 md:mb-1">$<span class="counter-value" data-value="35199.00">35,199.00</span></div>
                                                <div class="text-sm font-medium text-gray-500 dark:text-dark-text">$<span>35,199.00</span></div>
                                            </div>
                                            <div id="pieDonutchart1" class="h-full"></div>
                                        </div>
                                        <div class="inline-flex items-center divide-x *:px-3 xl:*:px-6 first:*:pl-0 divide-[#E8E4FC] dark:divide-dark-border">
                                            <div>
                                                <div class="relative pl-2.5 before:position-center before:left-0 before:size-2 before:rounded-full before:bg-[#88A4FF] text-sm font-medium text-gray-500 dark:text-dark-text">Completed</div>
                                                <div class="text-xl font-bold text-[#323232] dark:text-dark-text"><span class="counter-value " data-value="734">734</span></div>
                                            </div>
                                            <div>
                                                <div class="relative pl-2.5 before:position-center before:left-0 before:size-2 before:rounded-full before:bg-[#88A4FF] text-sm font-medium text-gray-500 dark:text-dark-text">Pending</div>
                                                <div class="text-xl font-bold text-[#323232] dark:text-dark-text"><span class="counter-value " data-value="19">19</span></div>
                                            </div>
                                            <div>
                                                <div class="relative pl-2.5 before:position-center before:left-0 before:size-2 before:rounded-full before:bg-[#88A4FF] text-sm font-medium text-gray-500 dark:text-dark-text">Canceled</div>
                                                <div class="text-xl font-bold text-[#323232] dark:text-dark-text"><span class="counter-value " data-value="24">24</span></div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- If Need Add More Item -->
                                </div>

Growth Chart

Course Sales Status

Net course were Up 70% compared to the previous 14 days.

                            
                                <div class="p-6">
                                    <div>
                                        <h6 class="text-3xl  font-semibold text-heading">Course Sales Status</h6>
                                        <p class="text-sm text-[#686E81]">Net course were <span class="text-base font-semibold text-primary-500">Up 70%</span> compared to the previous 14 days.</p>
                                    </div>
                                    <div id="doubleSplineArea" class="min-h-[430px]"></div>
                                </div>

Growth Chart Single

Course Sales Status

Net course were Up 70% compared to the previous 14 days.

                            
                                <div class="p-6">
                                    <div>
                                        <h6 class="text-3xl  font-semibold text-heading">Course Sales Status</h6>
                                        <p class="text-sm text-[#686E81]">Net course were <span class="text-base font-semibold text-[#76D466]">Up 70%</span> compared to the previous 14 days.</p>
                                    </div>
                                    <div id="widgetSplineArea" class="min-h-[430px]"></div>
                                </div>

Apps

Components

Help

Personalize Settings

Theme Mode

UI - Widgets

Light Color - Widgets

Earnings

Total Income

Earnings

Different Color - Widgets

Earnings

Total Income

Earnings

Social Media

Total User

Tik Tok Earnings

Tik Tok Earnings

Different Color Chart - Widgets

My Inbox Chat

1,486

In Progressing

K

WhatsApp User

1,699

Light Color Video - Widgets

Course Video

Light Color - Widgets

Completed Course

Completed Course

Different Color Pie Chart - Widgets

Increase

Increase

Increase

Growth Chart

Course Sales Status

Growth Chart Single

Course Sales Status