ieeeucsd-org/src/components/dashboard/ProfileSection.astro

---
import { Icon } from "astro-icon/components";
import ShowProfileLogs from "./ProfileSection/ShowProfileLogs";
import { Stats } from "./ProfileSection/Stats";
---

<div id="" class="">
    <div class="mb-6">
        <h2 class="text-2xl font-bold">Dashboard Overview</h2>
        <p class="opacity-70">Welcome to your IEEE UCSD dashboard</p>
    </div>

    <!-- Resume Alert Notification -->
    <div id="resumeAlert" class="hidden">
        <div
            class="bg-error/10 border-l-4 border-error p-4 rounded-lg mb-6 shadow-md"
        >
            <div class="flex items-center justify-between">
                <div class="flex items-start space-x-3">
                    <div class="shrink-0 mt-0.5">
                        <div class="p-1.5 bg-error/20 rounded-full">
                            <Icon
                                name="heroicons:document-text"
                                class="h-5 w-5 text-error"
                            />
                        </div>
                    </div>
                    <div>
                        <h3 class="font-semibold text-white mb-1">
                            Resume Required
                        </h3>
                        <p class="text-sm text-base-content/80">
                            Your resume is missing. Upload your resume to
                            increase visibility to recruiters and access
                            exclusive career opportunities.
                        </p>
                    </div>
                </div>
                <div class="ml-4 shrink-0 self-center">
                    <a
                        href="#settings-section"
                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-error hover:bg-error-focus focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-error transition-colors duration-200"
                        id="uploadResumeBtn"
                    >
                        <Icon
                            name="heroicons:arrow-up-tray"
                            class="h-4 w-4 mr-1.5"
                        />
                        Upload Now
                    </a>
                </div>
            </div>
        </div>

        <script>
            // Function to check if user has a resume and show/hide the alert
            const checkResumeStatus = async () => {
                try {
                    const resumeAlert = document.getElementById("resumeAlert");
                    if (!resumeAlert) return;

                    // Get the current user from PocketBase
                    const { Authentication } = await import(
                        "../../scripts/pocketbase/Authentication"
                    );
                    const { Get } = await import(
                        "../../scripts/pocketbase/Get"
                    );

                    const auth = Authentication.getInstance();
                    const get = Get.getInstance();

                    if (!auth.isAuthenticated()) {
                        resumeAlert.classList.add("hidden");
                        return;
                    }

                    const user = auth.getCurrentUser();
                    if (!user) {
                        resumeAlert.classList.add("hidden");
                        return;
                    }

                    // Fetch user data to check if resume exists
                    const userData = await get.getOne("users", user.id);

                    if (userData && userData.resume) {
                        // User has a resume, hide the alert
                        resumeAlert.classList.add("hidden");
                    } else {
                        // User doesn't have a resume, show the alert
                        resumeAlert.classList.remove("hidden");
                    }
                } catch (error) {
                    console.error("Error checking resume status:", error);
                }
            };

            // Check resume status when the page loads
            document.addEventListener("DOMContentLoaded", checkResumeStatus);

            // Listen for resume upload events
            window.addEventListener("resumeUploaded", (event: Event) => {
                const resumeAlert = document.getElementById("resumeAlert");
                if (!resumeAlert) return;

                // Cast to CustomEvent to access detail property
                const customEvent = event as CustomEvent<{
                    hasResume: boolean;
                }>;
                const { hasResume } = customEvent.detail;

                if (hasResume) {
                    resumeAlert.classList.add("hidden");
                } else {
                    resumeAlert.classList.remove("hidden");
                }
            });

            // Handle the "Upload Now" button click
            document
                .getElementById("uploadResumeBtn")
                ?.addEventListener("click", (e) => {
                    e.preventDefault();

                    // Find the settings button in the sidebar and click it
                    const settingsButton = document.querySelector(
                        '[data-section="settings"]'
                    ) as HTMLElement;
                    if (settingsButton) {
                        settingsButton.click();

                        // Scroll to the resume section after a short delay
                        setTimeout(() => {
                            // Find the resume management section by ID or a more reliable selector
                            const resumeSection = document.getElementById(
                                "resume-management-section"
                            );

                            if (resumeSection) {
                                resumeSection.scrollIntoView({
                                    behavior: "smooth",
                                });
                            } else {
                                // Fallback: try to find by heading text
                                const headings =
                                    document.querySelectorAll("h3.card-title");
                                for (const heading of headings) {
                                    if (
                                        heading.textContent?.includes(
                                            "Resume Management"
                                        )
                                    ) {
                                        heading.scrollIntoView({
                                            behavior: "smooth",
                                        });
                                        break;
                                    }
                                }
                            }
                        }, 300);
                    }
                });
        </script>
    </div>

    <Stats client:load />

    <!-- Dashboard Content -->
    <div
        class="card bg-base-100 shadow-lg border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform"
    >
        <div class="card-body">
            <h3 class="card-title text-xl font-bold flex items-center gap-3">
                <div class="badge badge-primary p-3">
                    <Icon name="heroicons:eye" class="h-5 w-5" />
                </div>
                Recent Activity
                <div class="badge badge-ghost text-xs font-normal">
                    Real-time updates
                </div>
            </h3>
            <p class="text-sm opacity-70">
                Track your recent interactions with the IEEE UCSD platform
            </p>
            <div class="divider"></div>
            <div class="">
                <div class="min-h-[300px]">
                    <ShowProfileLogs client:load />
                </div>
            </div>
        </div>
    </div>
</div>