From f465108ab00ded66eb6fb65a5b5324272c3e90ac Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Wed, 5 Jun 2024 17:32:22 +0200
Subject: [PATCH] fix ui

---
 dashboard/components/dashboard/BarsCard.vue   |  4 +-
 dashboard/components/dashboard/TopSection.vue | 20 +++++----
 .../components/pricing/PricingDrawer.vue      | 26 ++++++++---
 dashboard/layouts/dashboard.vue               |  2 +-
 dashboard/pages/index.vue                     |  2 +-
 dashboard/pages/plans.vue                     | 43 ++++++++++++-------
 dashboard/pages/project_selector.vue          | 10 +++--
 dashboard/pages/report.vue                    |  7 ++-
 8 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/dashboard/components/dashboard/BarsCard.vue b/dashboard/components/dashboard/BarsCard.vue
index 7023f86..c8a97b4 100644
--- a/dashboard/components/dashboard/BarsCard.vue
+++ b/dashboard/components/dashboard/BarsCard.vue
@@ -87,7 +87,7 @@ function showDetails(id: string) {
                     </div>
 
                     <div class="flex flex-col gap-1">
-                        <div v-if="props.data.length > 0" class="flex justify-between" v-for="element of props.data">
+                        <div v-if="props.data.length > 0" class="flex justify-between items-center" v-for="element of props.data">
                             <div class="w-10/12 relative" @click="showDetails(element._id)"
                                 :class="{ 'cursor-pointer line-active': interactive }">
                                 <div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
@@ -105,7 +105,7 @@ function showDetails(id: string) {
                                     </span>
                                 </div>
                             </div>
-                            <div class="text-text font-semibold manrope"> {{ formatNumberK(element.count) }} </div>
+                            <div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{ formatNumberK(element.count) }} </div>
                         </div>
                         <div v-if="props.data.length == 0"
                             class="flex justify-center text-text-sub font-bold text-[1.1rem]">
diff --git a/dashboard/components/dashboard/TopSection.vue b/dashboard/components/dashboard/TopSection.vue
index 4df04bb..4b7ef50 100644
--- a/dashboard/components/dashboard/TopSection.vue
+++ b/dashboard/components/dashboard/TopSection.vue
@@ -2,7 +2,7 @@
 
 const activeProject = useActiveProject();
 const { onlineUsers, stopWatching, startWatching } = useOnlineUsers();
-onMounted(()=> startWatching());
+onMounted(() => startWatching());
 onUnmounted(() => stopWatching());
 
 
@@ -18,24 +18,26 @@ function copyProjectId() {
     <div
         class="w-full px-6 py-2 lg:py-6 font-bold text-text-sub/40 flex flex-col xl:flex-row text-lg lg:text-2xl gap-2 xl:gap-12">
 
-        <div class="flex gap-2 items-center text-text/90">
+        <div class="flex gap-2 items-center text-text/90 justify-center md:justify-start">
             <div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
             <div> {{ onlineUsers }} Online users</div>
         </div>
 
         <div class="grow"></div>
 
-        <div class="flex gap-2">
+        <div class="flex md:gap-2 items-center md:justify-start flex-col md:flex-row">
             <div>Project:</div>
             <div class="text-text/90"> {{ activeProject?.name || 'Loading...' }} </div>
         </div>
-        <div class="flex gap-2">
+        <div class="flex flex-col md:flex-row md:gap-2 items-center md:justify-start">
             <div>Project id:</div>
-            <div class="text-text/90 text-[.9rem] lg:text-2xl">
-                {{ activeProject?._id || 'Loading...' }}
-            </div>
-            <div class="flex items-center ml-3">
-                <i @click="copyProjectId()" class="far fa-copy hover:text-text cursor-pointer text-[1.2rem]"></i>
+            <div class="flex gap-2">
+                <div class="text-text/90 text-[.9rem] lg:text-2xl">
+                    {{ activeProject?._id || 'Loading...' }}
+                </div>
+                <div class="flex items-center ml-3">
+                    <i @click="copyProjectId()" class="far fa-copy hover:text-text cursor-pointer text-[1.2rem]"></i>
+                </div>
             </div>
         </div>
     </div>
diff --git a/dashboard/components/pricing/PricingDrawer.vue b/dashboard/components/pricing/PricingDrawer.vue
index ce6c46e..8ff0d0e 100644
--- a/dashboard/components/pricing/PricingDrawer.vue
+++ b/dashboard/components/pricing/PricingDrawer.vue
@@ -62,18 +62,28 @@ const expansionTierCardData = ref<PricingCardProp>({
     planId: 2
 });
 
+
+const emits = defineEmits<{
+    (evt: 'onCloseClick'): void
+}>();
+
 </script>
 
 <template>
-    <div class="p-8">
+    <div class="p-8 overflow-y-auto xl:overflow-y-hidden">
 
-        <div class="flex gap-8 h-max">
+        <div @click="$emit('onCloseClick')"
+            class="cursor-pointer fixed top-4 right-4 rounded-full bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center">
+            <i class="fas fa-close text-[1.6rem]"></i>
+        </div>
+
+        <div class="flex gap-8 mt-10 h-max xl:flex-row flex-col">
             <PricingCard class="flex-1" :data="starterTierCardData"></PricingCard>
             <PricingCard class="flex-1" :data="accelerationTierCardData"></PricingCard>
             <PricingCard class="flex-1" :data="expansionTierCardData"></PricingCard>
         </div>
 
-        <div class="flex justify-between items-center mt-10">
+        <div class="flex justify-between items-center mt-10 flex-col xl:flex-row">
             <div class="flex flex-col gap-2">
                 <div class="poppins text-[2rem] font-semibold">
                     Do you need help ?
@@ -82,10 +92,12 @@ const expansionTierCardData = ref<PricingCardProp>({
                     We respond in max. 1-2 days
                 </div>
             </div>
-            <div class="py-4 px-20 bg-[#303030] rounded-lg">
-                <a href="mailto:helplitlyx@gmail.com" class="poppins text-[1.3rem]">
-                    helplitlyx@gmail.com
-                </a>
+            <div class="mt-2">
+                <div class="rounded-lg px-10 py-3 bg-[#303030]">
+                    <a href="mailto:helplitlyx@gmail.com" class="poppins text-[1.3rem]">
+                        helplitlyx@gmail.com
+                    </a>
+                </div>
             </div>
         </div>
     </div>
diff --git a/dashboard/layouts/dashboard.vue b/dashboard/layouts/dashboard.vue
index 0fabedb..03f3302 100644
--- a/dashboard/layouts/dashboard.vue
+++ b/dashboard/layouts/dashboard.vue
@@ -38,7 +38,7 @@ const sections: Section[] = [
                 label: 'Github', to: 'https://github.com/litlyx/litlyx', icon: 'fab fa-github', external: true,
                 action() { Lit.event('git_clicked') },
             },
-            { label: 'Plans', to: '/plans', icon: 'far fa-wallet' },
+            { label: 'Billing', to: '/plans', icon: 'far fa-wallet' },
             { label: 'Book a demo', to: '/book_demo', icon: 'far fa-calendar' },
         ]
     },
diff --git a/dashboard/pages/index.vue b/dashboard/pages/index.vue
index d8fae40..8159305 100644
--- a/dashboard/pages/index.vue
+++ b/dashboard/pages/index.vue
@@ -107,7 +107,7 @@ const selectLabelsEvents = [
 
 
 
-            <div class="flex flex-row p-6 gap-6">
+            <div class="flex p-6 gap-6 flex-col xl:flex-row">
 
 
 
diff --git a/dashboard/pages/plans.vue b/dashboard/pages/plans.vue
index fdba3c8..dc37677 100644
--- a/dashboard/pages/plans.vue
+++ b/dashboard/pages/plans.vue
@@ -27,7 +27,7 @@ const leftPercent = computed(() => {
     if (!planData.value) return 0;
     const left = dayjs().diff(planData.value.billing_expire_at, 'days');
     const total = dayjs(planData.value.billing_start_at).diff(planData.value.billing_expire_at, 'days');
-    const percent = 100 / total * left;
+    const percent = 100 - (100 / total * left);
     return percent;
 });
 
@@ -48,6 +48,14 @@ function openInvoice(link: string) {
     window.open(link, '_blank');
 }
 
+function getPremiumName(type: number) {
+    if (type === 0) return 'FREE';
+    if (type === 1) return 'ACCELERATION';
+    if (type === 2) return 'EXPANSION';
+    return 'CUSTOM';
+
+}
+
 </script>
 
 <template>
@@ -55,7 +63,7 @@ function openInvoice(link: string) {
     <div class="w-full h-full p-8 overflow-y-auto pb-40 lg:pb-0 relative overflow-x-hidden">
 
         <Transition name="pdrawer">
-            <PricingDrawer class="bg-black absolute right-0 top-0 w-[60vw] min-w-[65rem] h-full z-[20]"
+            <PricingDrawer @onCloseClick="showPricingDrawer = false" class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]"
                 v-if=showPricingDrawer>
             </PricingDrawer>
         </Transition>
@@ -67,12 +75,14 @@ function openInvoice(link: string) {
         <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>
 
@@ -87,7 +97,7 @@ function openInvoice(link: string) {
                                 </div>
                                 <div
                                     class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
-                                    {{ planData.premium ? 'PREMIUM ' + planData.premium_type : 'FREE' }}
+                                    {{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
                                 </div>
                             </div>
                             <div class="poppins text-text-sub text-[.9rem]">
@@ -101,8 +111,8 @@ function openInvoice(link: string) {
                     </div>
                     <div class="flex flex-col">
                         <div class="poppins"> Billing period:</div>
-                        <div class="flex items-center gap-4">
-                            <div class="grow">
+                        <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>
@@ -141,8 +151,8 @@ function openInvoice(link: string) {
                     </div>
                     <div class="flex flex-col">
                         <div class="poppins"> Usage:</div>
-                        <div class="flex items-center gap-4">
-                            <div class="grow">
+                        <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>
@@ -171,17 +181,20 @@ function openInvoice(link: string) {
 
             <div class="flex flex-col gap-2">
 
-                <div class="flex gap-10 bg-black p-4 rounded-lg" v-for="invoice of invoices">
+                <div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg" v-for="invoice of invoices">
 
-                    <div> <i class="far fa-file-invoice"></i> </div>
+                    <div> <i class="fal fa-file-invoice"></i> </div>
 
-                    <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 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>
diff --git a/dashboard/pages/project_selector.vue b/dashboard/pages/project_selector.vue
index 528b493..5106420 100644
--- a/dashboard/pages/project_selector.vue
+++ b/dashboard/pages/project_selector.vue
@@ -49,10 +49,12 @@ async function onProjectClick(pid: string) {
 
         <div class="flex flex-col justify-center mt-16 gap-10 px-10" v-if="projects">
 
-            <div class="flex gap-4 items-center">
-                <div class="text-text font-bold text-[1.5rem]"> Projects </div>
-                <div class="text-text-sub/90 text-[1rem] font-semibold lato">
-                    {{ projects?.length ?? '-' }} / 3
+            <div class="flex gap-4 items-center flex-col md:flex-row">
+                <div class="flex gap-4 items-center">
+                    <div class="text-text font-bold text-[1.5rem]"> Projects </div>
+                    <div class="text-text-sub/90 text-[1rem] font-semibold lato">
+                        {{ projects?.length ?? '-' }} / 3
+                    </div>
                 </div>
                 <NuxtLink v-if="(projects?.length || 0) < 3" to="/project_creation"
                     class="bg-blue-500/20 hover:bg-blue-500/30 px-4 py-1 flex items-center gap-4 rounded-xl cursor-pointer">
diff --git a/dashboard/pages/report.vue b/dashboard/pages/report.vue
index dc0db9e..418a7f6 100644
--- a/dashboard/pages/report.vue
+++ b/dashboard/pages/report.vue
@@ -24,7 +24,7 @@ async function generatePDF() {
 
 <template>
 
-    <div class="home w-full h-full px-10 lg:px-0">
+    <div class="home w-full h-full px-10 lg:px-0 overflow-y-auto pb-[12rem] md:pb-0">
 
         <div class="flex flex-col items-center justify-center mt-20 gap-20">
 
@@ -32,16 +32,15 @@ async function generatePDF() {
                 <div class="poppins text-[2.4rem] font-bold text-text">
                     Project Report
                 </div>
-                <div class="poppins text-[1.8rem] text-text-sub/90">
+                <div class="poppins text-[1.4rem] text-center lg:text-[1.8rem] text-text-sub/90">
                     One-Click, Comprehensive KPI PDF for Your Investors or Team.
                 </div>
-                <div v-if="activeProject" class="flex gap-2">
+                <div v-if="activeProject" class="flex md:gap-2 flex-col md:flex-row">
                     <div class="poppins text-[1.4rem] font-semibold text-text-sub/90">
                         Relative to:
                     </div>
                     <div class="poppins text-[1.4rem] font-semibold text-text">
                         {{ activeProject.name }}
-                        <span class="text-[.9rem] text-text-sub/80"> ( {{ activeProject._id }} ) </span>
                     </div>
                 </div>
             </div>