mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 07:48:37 +01:00
updating ui
This commit is contained in:
Emily
@@ -1,5 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs';
|
||||
import type { SettingsTemplateEntry } from './Template.vue';
|
||||
|
||||
const activeProject = useActiveProject();
|
||||
|
||||
@@ -56,11 +57,18 @@ function getPremiumName(type: number) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
const entries: SettingsTemplateEntry[] = [
|
||||
{ id: 'plan', title: 'Current plan', text: 'Manage current plat for this project' },
|
||||
{ id: 'usage', title: 'Usage', text: 'Show usage of current project' },
|
||||
{ id: 'invoices', title: 'Invoices', text: 'Manage invoices of current project' },
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="w-full h-full p-8 overflow-y-auto pb-40 lg:pb-0 relative overflow-x-hidden">
|
||||
<div class="relative">
|
||||
|
||||
<Transition name="pdrawer">
|
||||
<PricingDrawer @onCloseClick="showPricingDrawer = false" :currentSub="planData?.premium_type || 0"
|
||||
@@ -69,136 +77,123 @@ function getPremiumName(type: number) {
|
||||
</PricingDrawer>
|
||||
</Transition>
|
||||
|
||||
<div @click="showPricingDrawer = false" v-if="showPricingDrawer"
|
||||
class="barrier absolute left-0 top-0 w-full h-full z-[19] bg-black/40 backdrop-blur-[1px]">
|
||||
</div>
|
||||
|
||||
<div class="poppins font-semibold text-[1.8rem]">
|
||||
Billing
|
||||
</div>
|
||||
|
||||
<div class="poppins text-[1.3rem] text-text-sub">
|
||||
Manage your billing cycle for the project
|
||||
<span class="font-bold">
|
||||
{{ activeProject?.name || '' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="my-4 mb-10 w-full bg-gray-400/30 h-[1px]">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap justify-start gap-8">
|
||||
<Card v-if="planData" class="px-0 pt-6 pb-4 w-[35rem] flex flex-col">
|
||||
<div class="flex flex-col gap-6 px-8 grow">
|
||||
<div class="flex justify-between flex-col sm:flex-row">
|
||||
<SettingsTemplate :entries="entries">
|
||||
<template #plan>
|
||||
<LyxUiCard v-if="planData" class="flex flex-col w-full">
|
||||
<div class="flex flex-col gap-6 px-8 grow">
|
||||
<div class="flex justify-between flex-col sm:flex-row">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex gap-3 items-center">
|
||||
<div class="poppins font-semibold text-[1.1rem]">
|
||||
{{ planData.premium ? 'Premium plan' : 'Basic plan' }}
|
||||
</div>
|
||||
<div
|
||||
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
|
||||
{{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="poppins text-text-sub text-[.9rem]">
|
||||
Our free plan for testing the product.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="poppins font-semibold text-[2rem]"> $0 </div>
|
||||
<div class="poppins text-text-sub mt-2"> per month </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex gap-3 items-center">
|
||||
<div class="poppins"> Billing period:</div>
|
||||
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
|
||||
<div class="grow w-full md:w-auto">
|
||||
<UProgress color="green" :min="0" :max="100" :value="leftPercent"></UProgress>
|
||||
</div>
|
||||
<div class="poppins"> {{ daysLeft }} days left </div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
Subscription: {{ planData.subscription_status }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-4 w-full bg-gray-400/30 h-[1px]">
|
||||
</div>
|
||||
<div class="flex justify-between px-8 flex-col sm:flex-row">
|
||||
<div class="flex gap-2 text-text-sub text-[.9rem]">
|
||||
<div class="poppins"> Expire date:</div>
|
||||
<div> {{ prettyExpireDate }}</div>
|
||||
</div>
|
||||
<div v-if="!isGuest" @click="onPlanUpgradeClick()"
|
||||
class="cursor-pointer flex items-center gap-2 text-[.9rem] text-white font-semibold bg-accent px-4 py-1 rounded-lg drop-shadow-[0_0_8px_#000000]">
|
||||
<div class="poppins"> Upgrade plan </div>
|
||||
<i class="fas fa-arrow-up-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</LyxUiCard>
|
||||
</template>
|
||||
<template #usage>
|
||||
<LyxUiCard v-if="planData" class="flex flex-col w-full">
|
||||
<div class="flex flex-col gap-6 px-8">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex flex-col">
|
||||
<div class="poppins font-semibold text-[1.1rem]">
|
||||
{{ planData.premium ? 'Premium plan' : 'Basic plan' }}
|
||||
Usage
|
||||
</div>
|
||||
<div
|
||||
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
|
||||
{{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
|
||||
<div class="poppins text-text-sub text-[.9rem]">
|
||||
Check the usage limits of your project.
|
||||
</div>
|
||||
</div>
|
||||
<div class="poppins text-text-sub text-[.9rem]">
|
||||
Our free plan for testing the product.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="poppins font-semibold text-[2rem]"> $0 </div>
|
||||
<div class="poppins text-text-sub mt-2"> per month </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="poppins"> Billing period:</div>
|
||||
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
|
||||
<div class="grow w-full md:w-auto">
|
||||
<UProgress color="green" :min="0" :max="100" :value="leftPercent"></UProgress>
|
||||
</div>
|
||||
<div class="poppins"> {{ daysLeft }} days left </div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
Subscription: {{ planData.subscription_status }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-4 w-full bg-gray-400/30 h-[1px]">
|
||||
</div>
|
||||
<div class="flex justify-between px-8 flex-col sm:flex-row">
|
||||
<div class="flex gap-2 text-text-sub text-[.9rem]">
|
||||
<div class="poppins"> Expire date:</div>
|
||||
<div> {{ prettyExpireDate }}</div>
|
||||
</div>
|
||||
<div v-if="!isGuest" @click="onPlanUpgradeClick()"
|
||||
class="cursor-pointer flex items-center gap-2 text-[.9rem] text-white font-semibold bg-accent px-4 py-1 rounded-lg drop-shadow-[0_0_8px_#000000]">
|
||||
<div class="poppins"> Upgrade plan </div>
|
||||
<i class="fas fa-arrow-up-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card v-if="planData" class="px-0 pt-6 pb-4 w-[35rem] flex flex-col">
|
||||
<div class="flex flex-col gap-6 px-8">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex flex-col">
|
||||
<div class="poppins font-semibold text-[1.1rem]">
|
||||
Usage
|
||||
<div class="poppins"> Usage:</div>
|
||||
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
|
||||
<div class="grow w-full md:w-auto">
|
||||
<UProgress :color="color" :min="0" :max="planData.limit" :value="planData.count">
|
||||
</UProgress>
|
||||
</div>
|
||||
<div class="poppins"> {{ percent }}</div>
|
||||
</div>
|
||||
<div class="poppins text-text-sub text-[.9rem]">
|
||||
Check the usage limits of your project.
|
||||
<div class="flex justify-center">
|
||||
{{ formatNumberK(planData.count) }} / {{ formatNumberK(planData.limit) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="poppins"> Usage:</div>
|
||||
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
|
||||
<div class="grow w-full md:w-auto">
|
||||
<UProgress :color="color" :min="0" :max="planData.limit" :value="planData.count">
|
||||
</UProgress>
|
||||
</LyxUiCard>
|
||||
</template>
|
||||
<template #invoices>
|
||||
|
||||
<CardTitled v-if="!isGuest" title="Invoices"
|
||||
:sub="(invoices && invoices.length == 0) ? 'No invoices yet' : ''" class="p-4 mt-8 w-full">
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
|
||||
<div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg"
|
||||
v-for="invoice of invoices">
|
||||
|
||||
<div> <i class="fal fa-file-invoice"></i> </div>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:justify-around md:grow items-center gap-2">
|
||||
<div> {{ new Date(invoice.date).toLocaleString() }} </div>
|
||||
<div> € {{ invoice.cost / 100 }} </div>
|
||||
<div> {{ invoice.id }} </div>
|
||||
<div
|
||||
class="flex items-center lato text-[.8rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
|
||||
{{ invoice.status }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i @click="openInvoice(invoice.link)"
|
||||
class="far fa-download cursor-pointer hover:text-white/80"></i>
|
||||
</div>
|
||||
<div class="poppins"> {{ percent }}</div>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
{{ formatNumberK(planData.count) }} / {{ formatNumberK(planData.limit) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
|
||||
<CardTitled v-if="!isGuest" title="Invoices" :sub="(invoices && invoices.length == 0) ? 'No invoices yet' : ''"
|
||||
class="p-4 mt-8 max-w-[72rem]">
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
|
||||
<div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg" v-for="invoice of invoices">
|
||||
|
||||
<div> <i class="fal fa-file-invoice"></i> </div>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:justify-around md:grow items-center gap-2">
|
||||
<div> {{ new Date(invoice.date).toLocaleString() }} </div>
|
||||
<div> € {{ invoice.cost / 100 }} </div>
|
||||
<div> {{ invoice.id }} </div>
|
||||
<div
|
||||
class="flex items-center lato text-[.8rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
|
||||
{{ invoice.status }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<i @click="openInvoice(invoice.link)"
|
||||
class="far fa-download cursor-pointer hover:text-white/80"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</CardTitled>
|
||||
|
||||
</CardTitled>
|
||||
</template>
|
||||
</SettingsTemplate>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user