fix: #17 budget #4 navigation

Code-for-Senegal · Sep 8, 2024 · 0d8c1ef · 0d8c1ef
1 parent 011e214
commit 0d8c1ef
Show file tree

Hide file tree

Showing 48 changed files with 1,769 additions and 357 deletions.
diff --git a/components/AppBreadcrumb.vue b/components/AppBreadcrumb.vue
@@ -1,16 +1,20 @@
 <template>
-  <div class="flex flex-row gap-1 py-2 items-center text-gray-500 text-sm">
+  <div class="flex flex-row items-center gap-1 py-2 text-sm text-gray-500">
     <ULink to="/" class="xxx">
       <UIcon name="i-heroicons-home" size="sm" />
     </ULink>
     <UIcon name="i-heroicons-chevron-right" size="sm" />
-    <ULink v-for="link in props.links" :key="link.to" :to="link.to" class="text-sm">
+    <ULink
+      v-for="link in props.links"
+      :key="link.to"
+      :to="link.to"
+      class="text-sm"
+    >
       <span class="underline">{{ link.label }}</span>
     </ULink>
     <UIcon name="i-heroicons-chevron-right" size="sm" />
     <p class="truncate">{{ props.lastText }}</p>
   </div>
-
 </template>
 
 <script setup lang="ts">

diff --git a/components/AppFooter.vue b/components/AppFooter.vue
@@ -1,50 +1,60 @@
 <script setup lang="ts">
 const currentYear = new Date().getFullYear();
-const version = "22-Aout";
+const version = "02-Sept";
 
 const links = [
   {
-    label: 'À Propos',
-    to: '/about/us',
+    label: "À Propos",
+    to: "/about/us",
   },
   {
-    label: 'Contact',
-    to: '/contact',
+    label: "Contact",
+    to: "/contact",
   },
   {
-    label: 'Newsletter',
-    to: '/newsletter',
+    label: "Newsletter",
+    to: "/newsletter",
   },
   {
-    label: 'Règles de confidentialité',
-    to: '/about/privacy',
-  }, {
-    label: 'Linkedin',
-    to: 'https://www.linkedin.com/company/vie-publique-sn',
+    label: "Règles de confidentialité",
+    to: "/about/privacy",
   },
   {
-    label: 'Twitter',
-    to: 'https://twitter.com/malick_yacine',
-  }
-]
-
+    label: "Linkedin",
+    to: "https://www.linkedin.com/company/vie-publique-sn",
+  },
+  {
+    label: "Twitter",
+    to: "https://twitter.com/malick_yacine",
+  },
+];
 </script>
 
 <template>
-  <div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center mt-5">
-    <div class="bg-transparent dark:bg-gray-900 px-4">
-    </div>
+  <div
+    class="mt-5 flex h-px w-full items-center justify-center bg-gray-200 dark:bg-gray-800"
+  >
+    <div class="bg-transparent px-4 dark:bg-gray-900"></div>
   </div>
 
-  <footer class="relative mx-auto sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <ul class="flex flex-col md:flex-row items-center justify-center gap-4 lg:gap-6">
+  <footer
+    class="relative mx-auto py-8 sm:px-6 lg:flex lg:items-center lg:justify-between lg:gap-x-3 lg:px-8 lg:py-4"
+  >
+    <ul
+      class="flex flex-col items-center justify-center gap-4 md:flex-row lg:gap-6"
+    >
       <li class="relative">
-        <p class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
-          Version {{ version }}&copy;{{ currentYear }} </p>
+        <p
+          class="text-sm text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
+        >
+          Version {{ version }}&copy;{{ currentYear }}
+        </p>
       </li>
-      <li class="relative" v-for="link in links">
-        <ULink :to="link.to"
-          class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 underline">
+      <li v-for="link in links" class="relative">
+        <ULink
+          :to="link.to"
+          class="text-sm text-gray-500 underline hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
+        >
           {{ link.label }}
         </ULink>
       </li>
@@ -59,4 +69,4 @@ footer {
   border-image: linear-gradient(45deg, green 33%, #ff0 67%, red) 5;
   /* border-image: linear-gradient(90deg, green 33%, #ff0 34%, #ff0 66%, red 67%) 5; */
 }
-</style>
+</style>
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -1,21 +1,27 @@
 <template>
-    <NuxtLink :to="`/`">
-        <div class="flex flex-row items-center gap-1 px-2.5 py-3.5">
-            <div class="flag-logo px-2.5">
-                <img src="~/assets/logos/logo.svg" loading="lazy" alt="Logo" class="flag-logo" fetchpriority="high" />
-            </div>
-            <div class="text-xs">
-                <h2 class="text-gray-500 tracking-wide font-bold ">Vie-Publique.sn</h2>
-                <!-- <p class="text-gray-500">Au cœur du débat public au Sénégal</p> -->
-                <p class="text-gray-500">Sénégal transparent</p>
-            </div>
-        </div>
-    </NuxtLink>
+  <NuxtLink :to="`/`">
+    <div class="flex flex-row items-center gap-1 px-2.5 py-3.5">
+      <div class="flag-logo px-2.5">
+        <img
+          src="~/assets/logos/logo.svg"
+          loading="lazy"
+          fetchpriority="high"
+          alt="Logo"
+          class="flag-logo"
+        />
+      </div>
+      <div class="text-xs">
+        <h2 class="font-bold tracking-wide text-gray-500">Vie-Publique.sn</h2>
+        <!-- <p class="text-gray-500">Au cœur du débat public au Sénégal</p> -->
+        <p class="text-gray-500">Sénégal transparent</p>
+      </div>
+    </div>
+  </NuxtLink>
 </template>
 
 <style scoped>
 .flag-logo {
-    height: auto;
-    width: 60px;
+  height: auto;
+  width: 60px;
 }
-</style>
+</style>
diff --git a/components/Budget/BudgetTendance.vue b/components/Budget/BudgetTendance.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps<{
+  data: any;
+}>();
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl bg-white p-4 text-sm">
+    <h1 class="mb-2 text-center text-xl font-bold">
+      Tendances des finances publiques
+    </h1>
+
+    <div class="">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Taux de croissance du PIB</span>
+      </div>
+      <div>
+        <BudgetTendanceGrowthRateChart :growth-rates="data.growthRates" />
+      </div>
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Déficit budgétaire</span>
+      </div>
+      <div>
+        <BudgetTendanceDebtCompositionChart />
+      </div>
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Budget global</span>
+      </div>
+      <div class="text-center text-sm text-gray-500">
+        🚧 En cours d'élaboration
+      </div>
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Dette Publique</span>
+      </div>
+      <div class="text-center text-sm text-gray-500">
+        🚧 En cours d'élaboration
+      </div>
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Recettes fiscales</span>
+      </div>
+      <div class="text-center text-sm text-gray-500">
+        🚧 En cours d'élaboration
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bg-beige-300 {
+  background-color: #d7ccc8;
+}
+
+.bg-beige-100 {
+  background-color: #efebe9;
+}
+</style>