ZeroTwentyFifty · JohnVonNeumann · Nov 24, 2024 · Nov 24, 2024 · Nov 24, 2024 · Nov 24, 2024
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -9,6 +9,7 @@ Please fill in the following content to let us know better about this change.
 
 ## Checklist
 
+- [ ] Read the [developer contribution guide](./docs/developer_contribution_guide.md)
 - [ ] Add test cases to all the changes you introduce
 - [ ] Test the changes on the local machine manually
 - [ ] Update the documentation for the changes

diff --git a/docs/developer_contribution_guide.md b/docs/developer_contribution_guide.md
@@ -0,0 +1,8 @@
+# Developer Contribution Guide
+
+Use commitizen for commit messages:
+https://commitizen.github.io/cz-cli/
+
+Use Conventional Commits for commit messages:
+https://www.conventionalcommits.org/en/v1.0.0/
+
diff --git a/frontend/app.vue b/frontend/app.vue
@@ -1,16 +1,24 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
 import AuthForm from './components/AuthForm.vue'
 import FootprintForm from './components/FootprintForm.vue'
 import FootprintList from './components/FootprintList.vue'
 </script>
 
 <template>
   <div class="flex flex-col items-center min-h-screen bg-gray-100 pt-10">
-    <AuthForm class="w-full max-w-md p-6 bg-white rounded-lg shadow-md mb-6" />
+    <AuthForm class="w-full max-w-md mb-6" />
 
-    <div class="flex flex-col lg:flex-row w-full max-w-7xl space-y-6 lg:space-y-0 lg:space-x-6">
-      <FootprintForm class="w-full lg:w-1/2 p-6 bg-white rounded-lg shadow-md" />
-      <FootprintList class="w-full lg:w-1/2 p-6 bg-white rounded-lg shadow-md" />
+    <div class="flex flex-col lg:flex-row w-full max-w-7xl space-y-6 lg:space-y-0 lg:space-x-6 px-4">
+      <FootprintForm class="w-full lg:w-1/2" />
+      <FootprintList class="w-full lg:w-1/2" />
     </div>
   </div>
-</template>
+</template> -->
+
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
diff --git a/frontend/components/AppAlert.vue b/frontend/components/AppAlert.vue
@@ -0,0 +1,5 @@
+<template>
+    <span>
+      <slot />
+    </span>
+</template>
diff --git a/frontend/components/AppFooter.vue b/frontend/components/AppFooter.vue
@@ -0,0 +1,24 @@
+<template>
+    <header class="bg-blue-500 text-white p-4">
+      <div class="container mx-auto flex justify-between items-center">
+        <h1 class="text-xl font-bold">ZeroTwentyFifty</h1>
+        <nav>
+          <ul class="flex space-x-4">
+            <li><NuxtLink to="/">Home</NuxtLink></li>
+            <li><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
+            <li><NuxtLink to="/about">About</NuxtLink></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  </template>
+
+  <script setup lang="ts">
+  </script>
+
+  <style scoped>
+  header {
+    background-color: var(--color-primary);
+  }
+  </style>
+
diff --git a/frontend/components/AppHeader.vue b/frontend/components/AppHeader.vue
@@ -0,0 +1,24 @@
+<template>
+    <header class="bg-blue-500 text-white p-4">
+      <div class="container mx-auto flex justify-between items-center">
+        <h1 class="text-xl font-bold">ZeroTwentyFifty</h1>
+        <nav>
+          <ul class="flex space-x-4">
+            <li><NuxtLink to="/">Home</NuxtLink></li>
+            <li><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
+            <li><NuxtLink to="/about">About</NuxtLink></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  </template>
+
+  <script setup lang="ts">
+  </script>
+
+  <style scoped>
+  header {
+    background-color: var(--color-primary);
+  }
+  </style>
+
diff --git a/frontend/components/AuthForm.vue b/frontend/components/AuthForm.vue
@@ -1,21 +1,34 @@
 <script setup lang="ts">
 import { useAuth } from '../composables/useAuth'
+import { useRouter } from 'vue-router'
 
 const { state, validate, onSubmit } = useAuth()
+const router = useRouter()
+
+async function handleSubmit(event: Event) {
+  event.preventDefault()
+  const success = await onSubmit(event)
+  if (success) {
+    router.push('/dashboard')
+  }
+}
 </script>
 
 <template>
-  <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
+  <div class="bg-white p-6 rounded-lg shadow-md">
+    <h2 class="text-2xl font-bold mb-4 text-gray-800">Login</h2>
+    <UForm :validate="validate" :state="state" class="space-y-4" @submit="handleSubmit">
+      <UFormGroup label="Email" name="email" class="text-gray-700">
+        <UInput v-model="state.email" class="border-gray-300" />
+      </UFormGroup>
 
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
+      <UFormGroup label="Password" name="password" class="text-gray-700">
+        <UInput v-model="state.password" type="password" class="border-gray-300" />
+      </UFormGroup>
 
-    <UButton type="submit" class="w-full">
-      Submit
-    </UButton>
-  </UForm>
+      <UButton type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white">
+        Submit
+      </UButton>
+    </UForm>
+  </div>
 </template>
diff --git a/frontend/components/FootprintDetails.vue b/frontend/components/FootprintDetails.vue
@@ -10,45 +10,45 @@ const isOpen = ref(false)
 </script>
 
 <template>
-  <div>
-    <div @click="isOpen = !isOpen" class="cursor-pointer flex justify-between items-center">
-      <p><strong>ID:</strong> {{ footprint.id }}</p>
-      <p><strong>Status:</strong> {{ footprint.status }}</p>
-      <UIcon name="i-heroicons-chevron-down" :class="{ 'transform rotate-180': isOpen }" />
+  <div class="text-gray-800">
+    <div @click="isOpen = !isOpen" class="cursor-pointer flex justify-between items-center p-2 hover:bg-gray-100 rounded">
+      <p><strong class="text-gray-900">ID:</strong> {{ footprint.id }}</p>
+      <p><strong class="text-gray-900">Status:</strong> <span :class="footprint.status === 'Active' ? 'text-green-600' : 'text-red-600'">{{ footprint.status }}</span></p>
+      <UIcon name="i-heroicons-chevron-down" :class="{ 'transform rotate-180': isOpen }" class="text-gray-600" />
     </div>
-    <div v-if="isOpen" class="mt-4 space-y-2">
-      <p><strong>Spec Version:</strong> {{ footprint.specVersion }}</p>
-      <p><strong>Preceding PF IDs:</strong> {{ footprint.precedingPfIds?.join(', ') || 'None' }}</p>
-      <p><strong>Version:</strong> {{ footprint.version }}</p>
-      <p><strong>Created:</strong> {{ new Date(footprint.created).toLocaleString() }}</p>
-      <p><strong>Updated:</strong> {{ footprint.updated ? new Date(footprint.updated).toLocaleString() : 'N/A' }}</p>
-      <p><strong>Status Comment:</strong> {{ footprint.statusComment || 'N/A' }}</p>
-      <p><strong>Validity Period Start:</strong> {{ footprint.validityPeriodStart ? new Date(footprint.validityPeriodStart).toLocaleString() : 'N/A' }}</p>
-      <p><strong>Validity Period End:</strong> {{ footprint.validityPeriodEnd ? new Date(footprint.validityPeriodEnd).toLocaleString() : 'N/A' }}</p>
-      <p><strong>Company Name:</strong> {{ footprint.companyName }}</p>
-      <p><strong>Company IDs:</strong> {{ footprint.companyIds.join(', ') }}</p>
-      <p><strong>Product Description:</strong> {{ footprint.productDescription }}</p>
-      <p><strong>Product IDs:</strong> {{ footprint.productIds.join(', ') }}</p>
-      <p><strong>Product Category CPC:</strong> {{ footprint.productCategoryCpc }}</p>
-      <p><strong>Product Name Company:</strong> {{ footprint.productNameCompany }}</p>
-      <p><strong>Comment:</strong> {{ footprint.comment }}</p>
+    <div v-if="isOpen" class="mt-4 space-y-2 p-4 bg-white rounded border border-gray-200">
+      <p class="text-gray-700"><strong class="text-gray-900">Spec Version:</strong> {{ footprint.specVersion }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Preceding PF IDs:</strong> {{ footprint.precedingPfIds?.join(', ') || 'None' }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Version:</strong> {{ footprint.version }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Created:</strong> {{ new Date(footprint.created).toLocaleString() }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Updated:</strong> {{ footprint.updated ? new Date(footprint.updated).toLocaleString() : 'N/A' }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Status Comment:</strong> {{ footprint.statusComment || 'N/A' }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Validity Period Start:</strong> {{ footprint.validityPeriodStart ? new Date(footprint.validityPeriodStart).toLocaleString() : 'N/A' }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Validity Period End:</strong> {{ footprint.validityPeriodEnd ? new Date(footprint.validityPeriodEnd).toLocaleString() : 'N/A' }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Company Name:</strong> {{ footprint.companyName }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Company IDs:</strong> {{ footprint.companyIds.join(', ') }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Product Description:</strong> {{ footprint.productDescription }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Product IDs:</strong> {{ footprint.productIds.join(', ') }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Product Category CPC:</strong> {{ footprint.productCategoryCpc }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Product Name Company:</strong> {{ footprint.productNameCompany }}</p>
+      <p class="text-gray-700"><strong class="text-gray-900">Comment:</strong> {{ footprint.comment }}</p>
       <div class="mt-4">
         <h3 class="font-bold">PCF Details:</h3>
-        <p><strong>Declared Unit:</strong> {{ footprint.pcf.declaredUnit }}</p>
-        <p><strong>Unitary Product Amount:</strong> {{ footprint.pcf.unitaryProductAmount }}</p>
-        <p><strong>PCF Excluding Biogenic:</strong> {{ footprint.pcf.pCfExcludingBiogenic }}</p>
-        <p><strong>PCF Including Biogenic:</strong> {{ footprint.pcf.pCfIncludingBiogenic || 'N/A' }}</p>
-        <p><strong>Fossil GHG Emissions:</strong> {{ footprint.pcf.fossilGhgEmissions }}</p>
-        <p><strong>Fossil Carbon Content:</strong> {{ footprint.pcf.fossilCarbonContent }}</p>
-        <p><strong>Biogenic Carbon Content:</strong> {{ footprint.pcf.biogenicCarbonContent }}</p>
-        <p><strong>DLUC GHG Emissions:</strong> {{ footprint.pcf.dLucGhgEmissions || 'N/A' }}</p>
-        <p><strong>Land Management GHG Emissions:</strong> {{ footprint.pcf.landManagementGhgEmissions || 'N/A' }}</p>
-        <p><strong>Other Biogenic GHG Emissions:</strong> {{ footprint.pcf.otherBiogenicGhgEmissions || 'N/A' }}</p>
-        <p><strong>ILUC GHG Emissions:</strong> {{ footprint.pcf.iLucGhgEmissions || 'N/A' }}</p>
-        <p><strong>Biogenic Carbon Withdrawal:</strong> {{ footprint.pcf.biogenicCarbonWithdrawal || 'N/A' }}</p>
-        <p><strong>Aircraft GHG Emissions:</strong> {{ footprint.pcf.aircraftGhgEmissions || 'N/A' }}</p>
-        <p><strong>Characterization Factors:</strong> {{ footprint.pcf.characterizationFactors }}</p>
-        <p><strong>Cross Sectoral Standards Used:</strong> {{ footprint.pcf.crossSectoralStandardsUsed.join(', ') }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Declared Unit:</strong> {{ footprint.pcf.declaredUnit }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Unitary Product Amount:</strong> {{ footprint.pcf.unitaryProductAmount }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">PCF Excluding Biogenic:</strong> {{ footprint.pcf.pCfExcludingBiogenic }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">PCF Including Biogenic:</strong> {{ footprint.pcf.pCfIncludingBiogenic || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Fossil GHG Emissions:</strong> {{ footprint.pcf.fossilGhgEmissions }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Fossil Carbon Content:</strong> {{ footprint.pcf.fossilCarbonContent }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Biogenic Carbon Content:</strong> {{ footprint.pcf.biogenicCarbonContent }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">DLUC GHG Emissions:</strong> {{ footprint.pcf.dLucGhgEmissions || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Land Management GHG Emissions:</strong> {{ footprint.pcf.landManagementGhgEmissions || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Other Biogenic GHG Emissions:</strong> {{ footprint.pcf.otherBiogenicGhgEmissions || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">ILUC GHG Emissions:</strong> {{ footprint.pcf.iLucGhgEmissions || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Biogenic Carbon Withdrawal:</strong> {{ footprint.pcf.biogenicCarbonWithdrawal || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Aircraft GHG Emissions:</strong> {{ footprint.pcf.aircraftGhgEmissions || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Characterization Factors:</strong> {{ footprint.pcf.characterizationFactors }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Cross Sectoral Standards Used:</strong> {{ footprint.pcf.crossSectoralStandardsUsed.join(', ') }}</p>
         <div v-if="footprint.pcf.productOrSectorSpecificRules">
           <h4 class="font-semibold">Product or Sector Specific Rules:</h4>
           <ul>
@@ -58,13 +58,13 @@ const isOpen = ref(false)
             </li>
           </ul>
         </div>
-        <p><strong>Biogenic Accounting Methodology:</strong> {{ footprint.pcf.biogenicAccountingMethodology || 'N/A' }}</p>
-        <p><strong>Boundary Processes Description:</strong> {{ footprint.pcf.boundaryProcessesDescription }}</p>
-        <p><strong>Reference Period Start:</strong> {{ footprint.pcf.referencePeriodStart }}</p>
-        <p><strong>Reference Period End:</strong> {{ footprint.pcf.referencePeriodEnd }}</p>
-        <p><strong>Geography Country Subdivision:</strong> {{ footprint.pcf.geographyCountrySubdivision || 'N/A' }}</p>
-        <p><strong>Geography Country:</strong> {{ footprint.pcf.geographyCountry }}</p>
-        <p><strong>Geography Region or Subregion:</strong> {{ footprint.pcf.geographyRegionOrSubregion || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Biogenic Accounting Methodology:</strong> {{ footprint.pcf.biogenicAccountingMethodology || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Boundary Processes Description:</strong> {{ footprint.pcf.boundaryProcessesDescription }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Reference Period Start:</strong> {{ footprint.pcf.referencePeriodStart }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Reference Period End:</strong> {{ footprint.pcf.referencePeriodEnd }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Geography Country Subdivision:</strong> {{ footprint.pcf.geographyCountrySubdivision || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Geography Country:</strong> {{ footprint.pcf.geographyCountry }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Geography Region or Subregion:</strong> {{ footprint.pcf.geographyRegionOrSubregion || 'N/A' }}</p>
         <div v-if="footprint.pcf.secondaryEmissionFactorSources">
           <h4 class="font-semibold">Secondary Emission Factor Sources:</h4>
           <ul>
@@ -73,13 +73,13 @@ const isOpen = ref(false)
             </li>
           </ul>
         </div>
-        <p><strong>Exempted Emissions Percent:</strong> {{ footprint.pcf.exemptedEmissionsPercent }}%</p>
-        <p><strong>Exempted Emissions Description:</strong> {{ footprint.pcf.exemptedEmissionsDescription }}</p>
-        <p><strong>Packaging Emissions Included:</strong> {{ footprint.pcf.packagingEmissionsIncluded ? 'Yes' : 'No' }}</p>
-        <p><strong>Packaging GHG Emissions:</strong> {{ footprint.pcf.packagingGhgEmissions || 'N/A' }}</p>
-        <p><strong>Allocation Rules Description:</strong> {{ footprint.pcf.allocationRulesDescription || 'N/A' }}</p>
-        <p><strong>Uncertainty Assessment Description:</strong> {{ footprint.pcf.uncertaintyAssessmentDescription || 'N/A' }}</p>
-        <p><strong>Primary Data Share:</strong> {{ footprint.pcf.primaryDataShare || 'N/A' }}%</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Exempted Emissions Percent:</strong> {{ footprint.pcf.exemptedEmissionsPercent }}%</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Exempted Emissions Description:</strong> {{ footprint.pcf.exemptedEmissionsDescription }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Packaging Emissions Included:</strong> {{ footprint.pcf.packagingEmissionsIncluded ? 'Yes' : 'No' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Packaging GHG Emissions:</strong> {{ footprint.pcf.packagingGhgEmissions || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Allocation Rules Description:</strong> {{ footprint.pcf.allocationRulesDescription || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Uncertainty Assessment Description:</strong> {{ footprint.pcf.uncertaintyAssessmentDescription || 'N/A' }}</p>
+        <p class="text-gray-700"><strong class="text-gray-900">Primary Data Share:</strong> {{ footprint.pcf.primaryDataShare || 'N/A' }}%</p>
       </div>
       <div v-if="footprint.extensions && footprint.extensions.length > 0" class="mt-4">
         <h3 class="font-bold">Extensions:</h3>

diff --git a/frontend/components/FootprintList.vue b/frontend/components/FootprintList.vue
@@ -6,16 +6,19 @@ const { footprints, fetchFootprints } = useFootprints()
 </script>
 
 <template>
-  <div>
-    <h2 class="text-2xl font-bold mb-4">Footprints Dashboard</h2>
-    <UButton @click="fetchFootprints" class="mb-4">
+  <div class="bg-white p-6 rounded-lg shadow-md">
+    <h2 class="text-2xl font-bold mb-4 text-gray-800">Footprints Dashboard</h2>
+    <UButton 
+      @click="fetchFootprints" 
+      class="mb-4 bg-blue-600 hover:bg-blue-700 text-white"
+    >
       Fetch Footprints
     </UButton>
     <ul v-if="footprints.length > 0" class="space-y-4 max-h-[calc(100vh-200px)] overflow-y-auto">
-      <li v-for="footprint in footprints" :key="footprint.id" class="border p-4 rounded">
+      <li v-for="footprint in footprints" :key="footprint.id" class="border border-gray-200 p-4 rounded bg-gray-50">
         <FootprintDetails :footprint="footprint" />
       </li>
     </ul>
-    <p v-else>No footprints data available. Click the button to fetch data.</p>
+    <p v-else class="text-gray-700">No footprints data available. Click the button to fetch data.</p>
   </div>
 </template>
diff --git a/frontend/composables/useAuth.ts b/frontend/composables/useAuth.ts
@@ -7,6 +7,8 @@ export function useAuth() {
     password: undefined
   })
 
+  const config = useRuntimeConfig()
+
   const validate = (state: any): FormError[] => {
     const errors = []
     if (!state.email) errors.push({ path: 'email', message: 'Required' })
@@ -21,7 +23,7 @@ export function useAuth() {
       formData.append('client_id', event.data.email);
       formData.append('client_secret', event.data.password);
 
-      const response = await fetch('https://localhost:8000/auth/token', {
+      const response = await fetch(`${config.public.apiBase}/auth/token`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
@@ -31,7 +33,7 @@ export function useAuth() {
 
       if (!response.ok) {
         throw new Error('Failed to authenticate');
-      }
+      } 
 
       const data = await response.json();
       console.log('Authentication successful:', data);
@@ -41,9 +43,11 @@ export function useAuth() {
       localStorage.setItem('bearerToken', bearerToken);
 
       console.log('Bearer token stored for future API calls');
+
+      return true; // Indicate successful authentication
     } catch (error) {
       console.error('Authentication error:', error);
-      // Handle the error, e.g., show an error message to the user
+      return false; // Indicate failed authentication
     }
   }