FlightsAPI/resources/js/Pages/Profile/UserAchievement.vue

<script setup lang="ts">
import {Achievement, Airline, Continent, Region, User, UserAchievement} from "@/Types/types";
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
import {computed, defineAsyncComponent} from 'vue';
import AchievementCard from "@/Components/FlightsGoneBy/AchievementCard.vue";
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
import {Head, Link} from '@inertiajs/vue3';
import MainLayout from "@/Layouts/MainLayout.vue";
import {useFlights} from "@/Composables/useFlights";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";

defineOptions({ layout: MainLayout })

const props = defineProps<{
    achievement: Achievement
    userAchievement: UserAchievement | null
    user: User
    loggedInUser: User | null
    isFollowing: boolean
    flight_api_url: string
    regions: Region[]
    alliance: string | null
    airlines: Airline[]
    continents: Continent[]
    aircraft_families: Record<string, string[]>
    achievementCount: number
    canView: boolean
}>()


const { flights, flightsLoading } = useFlights(props.flight_api_url, true)

const AchievementDetail = defineAsyncComponent(
    () => import(`./Achievements/${props.achievement.internal_name}.vue`)
)

const progress = computed(() => {
    if (!props.achievement.progressive || !props.achievement.threshold) return null
    const current = props.userAchievement?.progress ?? 0
    return {
        current,
        threshold: props.achievement.threshold,
        percentage: Math.min(Math.round((current / props.achievement.threshold) * 100), 100)
    }
})

const unlocked = computed(() => {
    if (!props.userAchievement) return false
    if (props.achievement.progressive) return (progress.value?.percentage ?? 0) >= 100
    return true
})

</script>

<template>
    <ProfileLayout :title="`${achievement.name}`" :canView="canView" :achievementCount="achievementCount" :user="user" :isFollowing="isFollowing" :loading="flightsLoading">
        <div class="innerLayout">
            <ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Achievements`"  :href="`${route('profile.achievements', { user: user.name })}#${achievement.internal_name}`" />


            <VAlert type="info" v-if="loggedInUser?.id !== user.id && loggedInUser">
                You are viewing {{user.name}}'s progress in this achievement. If you would like to see your progress,
                <Link :href="route('profile.achievement', {user: loggedInUser.name, achievement: achievement.internal_name})">please click here</Link>.
            </VAlert>


            <Panel>
                <div class="achievement-hero">
                    <div class="achievement-icon-wrap" :class="{ unlocked }">
                        <v-icon
                            icon="mdi-trophy"
                            :color="unlocked ? 'amber' : 'grey'"
                            size="48"
                        />
                    </div>

                    <div class="achievement-titles">
                        <div class="name-row">
                            <PanelHeader centered>{{ achievement.name }}</PanelHeader>
                        </div>

                        <PanelSubHeader>{{ achievement.short_description }}</PanelSubHeader>

                        <template v-if="achievement.progressive && progress">
                            <div class="progress-label">
                                <span>{{ Math.min(progress.current, progress.threshold) }} / {{ progress.threshold }}</span>
                                <span>{{ progress.percentage }}%</span>
                            </div>
                            <v-progress-linear
                                :model-value="progress.percentage"
                                :color="unlocked ? 'amber' : 'grey'"
                                rounded
                                height="8"
                                bg-color="white"
                            />
                        </template>

                        <div v-else-if="unlocked" class="achieved-label">
                            <v-icon icon="mdi-check-circle" color="amber" size="16" /> Achieved
                        </div>
                    </div>
                </div>
            </Panel>

            <component
                :is="AchievementDetail"
                :regions="regions"
                :flights="flights"
                :achievement="achievement"
                :user="user"
                :isFollowing="isFollowing"
                :airlines="airlines"
                :alliance="alliance"
                :continents="continents"
                :families="aircraft_families"
            />
        </div>
    </ProfileLayout>
</template>

<style scoped>
.innerLayout{
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 60%;
    max-width: 1000px;
    margin: auto;
}

/* Tablet portrait */
@media (max-width: 1024px) {
    .innerLayout {
        width: 90%;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .innerLayout {
        width: 100%;
        padding: 0 0.1rem; /* optional so content doesn't touch edges */
        box-sizing: border-box;
    }
}

.achievement-hero {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.achievement-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.achievement-icon-wrap.unlocked {
    background: rgba(255, 193, 7, 0.15);
}

.achievement-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;  /* add this */
    text-align: center;   /* add this */
}

.name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    opacity: 0.6;
}

.progress-label,
.v-progress-linear {
    width: 100%;
}
</style>