dick/views/pages/user/main.ejs

<!-- Content Title -->
<span class="text-lg font-semibold text-color-secondary md:text-xl lg:text-xl">
    Your Profile
</span>
<!-- End Content Title -->

<div class="bg-tertiary mt-6 h-auto w-full rounded-lg">
    <!-- Content Profile -->
    <div
        class="flex w-full flex-row flex-wrap items-center space-x-3 border-b border-purple-400/25 py-3 px-6 md:space-x-6 md:px-5 md:py-5 lg:space-x-6 lg:px-5 lg:py-5">
        
        <div class="flex flex-1 px-5 items-center justify-center lg:justify-start pb-5 xl:pb-0">
            <div class="flex-none lg:custom-size-profile md:h-40 md:w-40 sm:h-32 sm:w-32 h-20 w-20 relative">
                <img class="rounded-full object-cover object-center"
                src="/images/profile.png" alt="Profile" />
            </div>
            <div class="ml-5">
                <div class="truncate text-base text-color-primary sm:text-xl md:text-2xl lg:text-2xl">
                    <%= user.username %>
                </div>
                <div class="text-xs text-color-secondary sm:text-base md:text-base lg:text-base">
                    <% if(hasRole){ %> admin <% } else { %> user <% } %>
                </div>
            </div>
        </div>

        <!-- Profile Stat Cards -->
        <div class="flex flex-wrap lg:flex-row gap-6 items-center justify-center pb-5 -mx-5">

            <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
                    <div class="flex">
                        <i data-lucide="files" class="text-purple-400 mr-2"></i>
                        <p class="ml-auto text-slate-500 text-sm">
                            <%= totalSize %>
                        </p>
                    </div>
                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
                        <%= usersDataObj.data.length %>
                    </div> 
                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
                        Total Files
                    </div>
                </div>
            </div>

            <div class="col-span-6 sm:col-span-3 xl:col-span-1 w-px h-40 border border-r border-purple-400 border-dashed mx-4 xl:mx-6 hidden md:table-cell" ></div>

            <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover ">
                    <div class="flex">
                        <i data-lucide="image" class="text-blue-400 mr-2"></i>
                        <p class="ml-auto text-slate-500 text-sm">
                            <%= usersDataObj.totalImageSize %>
                        </p>
                    </div>
                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
                        <%= usersDataObj.allImages.length %>
                    </div>
                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
                        <% if(usersDataObj.allImages.length==1){ %> Image <% } else { %> Images <% } %>
                    </div>
                </div>
            </div>

            <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
                    <div class="flex">
                        <i data-lucide="video" class="text-yellow-400 mr-2"></i>
                        <p class="ml-auto text-slate-500 text-sm">
                            <%= usersDataObj.totalVideosSize %>
                        </p>
                    </div>
                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
                        <%= usersDataObj.allVideos.length %>
                    </div>
                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
                        <% if(usersDataObj.allVideos.length==1){ %> Video <% } else { %> Videos <% } %>
                    </div>
                </div>
            </div>

            <div class="col-span-12 sm:col-span-6 xl:col-span-2">
                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
                    <div class="flex">
                        <i data-lucide="file" class="text-orange-400 mr-2"></i>
                        <p class="ml-auto text-slate-500 text-sm">
                            <%= usersDataObj.totalFilesSize %>
                        </p>
                    </div>
                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
                        <%= usersDataObj.allFiles.length %>
                    </div>
                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
                        <% if(usersDataObj.allFiles.length==1){ %> File <% } else { %> Files <% } %>
                     </div>
                </div>
            </div>

            <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
                    <div class="flex">
                        <i data-lucide="ghost" class="text-green-400 mr-2"></i>
                        <p class="ml-auto text-slate-500 text-sm">
                            <%= usersDataObj.totalOthersSize %>
                        </p>
                    </div>
                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
                        <%= usersDataObj.allOthers.length %>
                    </div>
                    <div class="sm:text-sm md:text-base text-slate-500 mt-1">
                        <% if(usersDataObj.allOthers.length==1){ %> Other <% } else { %> Others <% } %>
                    </div>
                </div>
            </div>

        </div>
        <!-- EndProfile Stat Cards -->

    </div>
    <!-- EndContent Profile -->

    <!-- Content Profile Tabs -->
    <div
        class="flex flex-col flex-wrap items-center space-y-4 px-5 pt-5 md:flex-row md:space-y-0 lg:flex-row lg:space-y-0">
        <button data-id="file-manager"
            class="tabsProfile inline-flex w-full items-center space-x-2 border-b-2 border-purple-400 px-6 pb-5 text-sm font-semibold text-color-primary md:w-auto md:text-base lg:w-auto lg:text-base">
            <i data-lucide="Files" class="text-color-secondary"></i>
            <span class="truncate"> File Manager </span>
        </button>

        <button data-id="config-gen"
            class="tabsProfile inline-flex w-full items-center space-x-2 px-6 pb-5 text-sm text-color-primary md:w-auto md:text-base lg:w-auto lg:text-base">
            <i data-lucide="Settings" class="text-color-secondary"></i>
            <span> Config Gen </span>
            <span class="text-xs inline-block py-1 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-yellow-600 text-black rounded-full">
                TBA
            </span>
        </button>
    </div>
    <!-- EndContent Profile Tabs -->
</div>

<div class="mt-10 flex flex-col flex-wrap space-x-0 space-y-6 md:flex-row md:flex-nowrap md:space-x-6 md:space-y-0 lg:flex-row lg:flex-nowrap lg:space-x-6 lg:space-y-0">
    <div class="tabsProfileContent">
        <%- include("./tabs/filemanager") %>
    </div>
    <div class="tabsProfileContent hidden">
        <%- include("./tabs/configgen") %>
    </div>
</div>