From 37397f8a7eca0a0ab5a27b0be5acc7381782afd0 Mon Sep 17 00:00:00 2001
From: NimeshaKahingala <nimesha.isholi94@gmail.com>
Date: Sun, 17 Nov 2024 20:17:19 -0600
Subject: [PATCH 1/7] login page added

---
 packages/front-end/pages/login.vue | 93 +++++++++++++++++++++++++++---
 1 file changed, 85 insertions(+), 8 deletions(-)

diff --git a/packages/front-end/pages/login.vue b/packages/front-end/pages/login.vue
index 5e6b0ab..a55ef0f 100644
--- a/packages/front-end/pages/login.vue
+++ b/packages/front-end/pages/login.vue
@@ -1,14 +1,91 @@
 <template>
-    <section>
-        <h1 class="login text-2xl font-bold tracking-tight text-red-900">Sign In</h1>
-    </section>
-  </template>
+  <section class="login">
+    <div class="container form">
+      <h1 class="title text-2xl font-bold tracking-tight">Sign In</h1>
+      <div class=" mb-3">
+        <label for="uname" class="pr-2 font-semibold">Username :</label>
+        <input
+          v-model="user.username"
+          type="text"
+          name="uname"
+          id="uname"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Username"
+          required
+        />
+      </div>
 
+      <div class=" mb-3">
+        <label for="psw" class="pr-2 font-semibold">Password :</label>
+        <input
+          v-model="user.password"
+          type="password"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Password"
+          name="psw"
+          required
+        />
+      </div>
 
+      <div class="link">Forgot password?</div>
 
+      <button
+        @click.prevent="login"
+        class="btn-login block rounded-md px-5 py-2 my-4 text-base font-medium"
+      >
+        Login
+      </button>
 
-  <style>
-  .login {
-    margin: 150px;
+      <div class="link">Don't have an account? <NuxtLink to="/register">Create an account</NuxtLink></div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+const user = ref({
+  username: "",
+  password: "",
+});
+
+const login = async () => {
+  // TODO send user Data to the login endpoint and redirect if  successful
+};
+</script>
+
+<style>
+.login {
+  margin: 150px;
+  place-self: center;
+
+  .btn-login {
+    background-color: #2a3952;
+    border-radius: 6px;
+    color: white;
+    font-size: 14px;
+    font-weight: 700;
+    width: 100%;
+  }
+
+  .container {
+    background-color: white;
+    border-radius: 6px;
+    padding: 30px 20px;
+    width: 450px;
+
+    label {
+      width: 120px;
+    }
+
+    .link {
+      cursor: pointer;
+      font-size: 14px;
+    }
+  }
+
+  .title {
+    color: #2a3952;
+    margin-bottom: 20px;
+    text-transform: uppercase;
   }
-</style>
\ No newline at end of file
+}
+</style>

From 4b9b571f3cf3f048949e219bdca77e5ea3670beb Mon Sep 17 00:00:00 2001
From: NimeshaKahingala <nimesha.isholi94@gmail.com>
Date: Sun, 17 Nov 2024 20:17:51 -0600
Subject: [PATCH 2/7] register page added

---
 packages/front-end/pages/register.vue | 109 ++++++++++++++++++++++++--
 1 file changed, 104 insertions(+), 5 deletions(-)

diff --git a/packages/front-end/pages/register.vue b/packages/front-end/pages/register.vue
index 617882b..c9b8e0f 100644
--- a/packages/front-end/pages/register.vue
+++ b/packages/front-end/pages/register.vue
@@ -1,13 +1,112 @@
 <template>
-  <section>
-    <h1 class="register-text text-2xl font-bold tracking-tight text-red-900">
-      Register
-    </h1>
+  <section class="register">
+    <div class="container form">
+      <h1 class="title text-2xl font-bold tracking-tight">Register</h1>
+      <div class=" mb-3">
+        <label for="uname" class="pr-2 font-semibold">Username :</label>
+        <input
+          v-model="user.username"
+          type="text"
+          name="uname"
+          id="uname"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Username"
+          required
+        />
+      </div>
+
+      <div class="mb-3">
+        <label for="uname" class="pr-2 font-semibold">Email :</label>
+        <input
+          v-model="user.email"
+          type="text"
+          name="email"
+          id="email"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Email"
+          required
+        />
+      </div>
+
+      <div class="mb-3">
+        <label for="psw" class="pr-2 font-semibold">Password :</label>
+        <input
+          v-model="user.password"
+          type="password"
+          class="input block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
+          placeholder="Enter Password"
+          name="psw"
+          required
+        />
+      </div>
+
+      <div class="flex justify-self-end">
+        <button
+        @click.prevent="login"
+        class="btn-login block rounded-md px-5 py-2 mt-4 mr-3 text-base font-medium"
+      >
+        Cancel
+      </button>
+
+      <button
+        @click.prevent="login"
+        class="btn-login block rounded-md px-5 py-2 mt-4 text-base font-medium"
+      >
+        Sign up
+      </button>
+      </div>
+      <div class="link"><NuxtLink to="/login">Already have an account? </NuxtLink></div>
+    </div>
   </section>
 </template>
 
+
+<script lang="ts" setup>
+const user = ref({
+  username: "",
+  password: "",
+  email: "",
+});
+
+const login = async () => {
+  // TODO send user Data to the login endpoint and redirect if  successful
+};
+</script>
+
+
 <style>
-.register-text {
+.register {
   margin: 150px;
+  place-self: center;
+
+  .btn-login {
+    background-color: #2a3952;
+    border-radius: 6px;
+    color: white;
+    font-size: 14px;
+    font-weight: 700;
+  }   
+
+  .container {
+    background-color: white;
+    border-radius: 6px;
+    padding: 30px 20px;
+    width: 450px;
+
+    label {
+      width: 120px;
+    }
+
+    .link {
+      cursor: pointer;
+      font-size: 14px;
+    }
+  }
+
+  .title {
+    color: #2a3952;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+  }
 }
 </style>

From 2b835ca5be387c3b1f2428c8bdc6b7d9edba4b06 Mon Sep 17 00:00:00 2001
From: NimeshaKahingala <nimesha.isholi94@gmail.com>
Date: Tue, 19 Nov 2024 22:37:18 -0600
Subject: [PATCH 3/7] okh type updated

---
 packages/front-end/types/OKH.type.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/front-end/types/OKH.type.ts b/packages/front-end/types/OKH.type.ts
index f4fd18a..2e79439 100644
--- a/packages/front-end/types/OKH.type.ts
+++ b/packages/front-end/types/OKH.type.ts
@@ -10,12 +10,13 @@ import {
 import { type ATOM_TYPE } from "./ATOM.type";
 
 export type OKH_TYPE = {
+  id: number;
   title: string;
   description: string;
   "intended-use": string;
   keywords?: string[];
   "project-link": string;
-  image: string;
+  image: string | string[] | null;
   made: boolean;
   "made-independently": boolean;
   license:

From 735f49c970e256d55d08e384ce40d64e5fff5f62 Mon Sep 17 00:00:00 2001
From: NimeshaKahingala <nimesha.isholi94@gmail.com>
Date: Tue, 19 Nov 2024 22:38:22 -0600
Subject: [PATCH 4/7] styles added

---
 packages/front-end/components/RelatedItems.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/front-end/components/RelatedItems.vue b/packages/front-end/components/RelatedItems.vue
index 91f6cb8..29c617e 100644
--- a/packages/front-end/components/RelatedItems.vue
+++ b/packages/front-end/components/RelatedItems.vue
@@ -4,7 +4,7 @@
     <div class="related-product-wrap">
       <NuxtLink
         :to="`/products/${related_product.id}`"
-        class="center m-6"
+        class="related-okh center mt-6"
         v-for="related_product in related_products"
         :key="related_product.id"
         :product="related_product"
@@ -66,9 +66,14 @@ const related_products = [
   margin-bottom: 40px;
 
   .name {
+    color: #2A3952;
     font-size: 16px;
   }
 
+  .related-okh {
+    margin: 20px 5px;
+  }
+
   .title {
     color: #2a3952;
     font-size: 24px;

From 3699ee8b2acd356d60bbfeef94c0ac8c1817b399 Mon Sep 17 00:00:00 2001
From: NimeshaKahingala <nimesha.isholi94@gmail.com>
Date: Tue, 19 Nov 2024 22:39:23 -0600
Subject: [PATCH 5/7] product details page updated

---
 packages/front-end/pages/products/[id].vue | 791 +++++++++++++++++++--
 1 file changed, 720 insertions(+), 71 deletions(-)

diff --git a/packages/front-end/pages/products/[id].vue b/packages/front-end/pages/products/[id].vue
index 81ec9c1..4b93b30 100644
--- a/packages/front-end/pages/products/[id].vue
+++ b/packages/front-end/pages/products/[id].vue
@@ -1,14 +1,73 @@
 <template>
   <div class="product-detail container center m-10">
     <div class="left">
-      <Slider :images="product.images" />
-      <div>Specifications</div>
-      <div>Detail</div>
+      <Slider :images="product?.image" />
+      <div class="specification">Specifications</div>
+      <div class="okh-details">
+        <div>version</div>
+        <div class="value">{{ product?.version }}</div>
+      </div>
+      <div class="okh-details">
+        <div>License</div>
+        <div class="value">{{ product?.license }}</div>
+      </div>
+      <div class="okh-details">
+        <div>Licensor</div>
+        <div class="value">
+          <div>{{ product?.licensor.name }}</div>
+          <div>{{ product?.licensor.email }}</div>
+          <div>{{ product?.licensor.affiliation }}</div>
+        </div>
+      </div>
+      <div class="okh-details">
+        <div>manifest author</div>
+        <div class="value">
+          <div>{{ product["manifest-author"].name }}</div>
+          <div>{{ product["manifest-author"].email }}</div>
+          <div>{{ product["manifest-author"].affiliation }}</div>
+        </div>
+      </div>
+      <div class="okh-details">
+        <div>manifest language</div>
+        <div class="value">{{ product["manifest-language"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>okh manifest version</div>
+        <div class="value">{{ product["okh-manifest-version"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>date created</div>
+        <div class="value">{{ product["date-created"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>date updated</div>
+        <div class="value">{{ product["date-updated"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>keywords</div>
+        <div class="value">{{ product?.keywords?.join(', ') }}</div>
+      </div>
+      <div class="okh-details">
+        <div>contact</div>
+        <div class="value">
+          <div>{{ product.contact.name }}</div>
+          <div>{{ product.contact.email }}</div>
+          <div>{{ product.contact.affiliation }}</div>
+        </div>
+      </div>
+      <div class="okh-details">
+        <div>development stage</div>
+        <div class="value">{{ product["development-stage"] }}</div>
+      </div>
+      <div class="okh-details">
+        <div>health safety notice</div>
+        <div class="value">{{ product["health-safety-notice"] }}</div>
+      </div>
     </div>
     <div class="center">
-      <h1 class="title">{{ product.name }}</h1>
+      <h1 class="title">{{ product?.title }}</h1>
       <div class="location">Location, Country</div>
-      <p>{{ product.shortDescription }}</p>
+      <p>{{ product?.description }}</p>
       <div class="review-wrap">
         <Reviews />
         <Reviews />
@@ -23,121 +82,678 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useRoute } from "#app";
+import type { OKH_TYPE } from "../../types/OKH.type";
 
 const route = useRoute();
-const productId = route.params.id;
+const productId = route.params.id as string;
 
 // Mock product data
-const products = [
+const products: OKH_TYPE[] = [
   {
     id: 1,
-    name: "IV Bag Hook",
-    images:["https://field-ready-projects.openknowhow.org/images/HL003-attC88mXadLwq4sLy-400x300.jpg",
+    title: "IV Bag Hook",
+    description: "For IV bags to be hung. Lorem ipsum dolor sit amet consectetur. Quis risus enim aliquam feugiat aliquam vulputate placerat sed. Consectetur pellentesque dis nunc sit et odio non viverra. Facilisi vitae sed in massa nibh elit. Bibendum massa nunc lorem mattis bibendum malesuada ac magna lorem. Morbi in a faucibus cum diam aliquam mi faucibus. Dapibus id maecenas aliquet quis arcu tempor nisi risus.",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/HL003-attC88mXadLwq4sLy-400x300.jpg",
       "https://field-ready-projects.openknowhow.org/images/HL003-attnOADswJg8Z1Tkr-400x300.jpg",
-      "https://field-ready-projects.openknowhow.org/images/HL003-attTWOBTURxhJke0d-400x300.jpg"
+      "https://field-ready-projects.openknowhow.org/images/HL003-attTWOBTURxhJke0d-400x300.jpg",
     ],
-    shortDescription: "For IV bags to be hung",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: "2.0",
+    "development-stage": "Production",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 2,
-    name: "Oxygen Supply Fitting",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/HL002-attmlR243asYolZRO-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL002-attEl2ohzRMv9ARYL-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL002-att6KspJ44bsDBbTY-400x300.jpg"
-      ],
-    shortDescription:
+    title: "Oxygen Supply Fitting",
+    description:
       "Adapter that connects oxygen supply tubing to standard oxygen systems",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/HL002-attmlR243asYolZRO-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL002-attEl2ohzRMv9ARYL-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL002-att6KspJ44bsDBbTY-400x300.jpg",
+    ],
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 3,
-    name: "Umbilical Cord Clamp",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/HL001-attG43ftDEHSUFPVG-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL001-attf3p6aS1A0NgjXH-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL001-attQY27dM3l2ON5Ao-400x300.jpg"
-      ],
-    shortDescription:
-      "Enclosure of umbilical cords of newborns to prevent sepsis",
+    title: "Umbilical Cord Clamp",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/HL001-attG43ftDEHSUFPVG-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL001-attf3p6aS1A0NgjXH-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL001-attQY27dM3l2ON5Ao-400x300.jpg",
+    ],
+    description: "Enclosure of umbilical cords of newborns to prevent sepsis",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 4,
-    name: "Finger Brace",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/HL005-attgxsUzHxoTnTmSP-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL005-att5gRPVVqNrEdNzQ-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/HL005-att7KSVbxiaJwycvm-400x300.jpg"
-      ],
-    shortDescription: "In order to keep a injured index finger immobile",
+    title: "Finger Brace",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/HL005-attgxsUzHxoTnTmSP-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL005-att5gRPVVqNrEdNzQ-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/HL005-att7KSVbxiaJwycvm-400x300.jpg",
+    ],
+    description: "In order to keep a injured index finger immobile",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 5,
-    name: "Water Truck Clamp",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/WA012-attbQe9vW0QdVGkqD-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/WA012-attOlLPPqg7ONAQBC-400x300.jpg",
-        "https://field-ready-projects.openknowhow.org/images/WA012-attr7TkuBVgBqtkoP-400x300.jpg"
-      ],
-    shortDescription:
+    title: "Water Truck Clamp",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/WA012-attbQe9vW0QdVGkqD-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/WA012-attOlLPPqg7ONAQBC-400x300.jpg",
+      "https://field-ready-projects.openknowhow.org/images/WA012-attr7TkuBVgBqtkoP-400x300.jpg",
+    ],
+    description:
       "Clamps over the hose on the outlet of a water distribution truck to create a seal",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 6,
-    name: "Jerry Can Roller",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/WA013-attjDSod18c5Ru8PN-400x300.jpeg"],
-    shortDescription: "Transports 80 litres of drinking water",
+    title: "Jerry Can Roller",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/WA013-attjDSod18c5Ru8PN-400x300.jpeg",
+    ],
+    description: "Transports 80 litres of drinking water",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 7,
-    name: "Make-Fit Pipe Fitting",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/WA016-attP4Uy56ROfYjAjF-400x300.jpg"],
-    shortDescription:
+    title: "Make-Fit Pipe Fitting",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/WA016-attP4Uy56ROfYjAjF-400x300.jpg",
+    ],
+    description:
       "Using Make-Fit app a range of 3DP pipe fitting can be produced",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 8,
-    name: "Straight Coupler",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/WA010-attuWhYn15CARwJu4-400x300.jpg"],
-    shortDescription: "20.5/16.5 straight coupler used to join to pipes.",
+    title: "Straight Coupler",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/WA010-attuWhYn15CARwJu4-400x300.jpg",
+    ],
+    description: "20.5/16.5 straight coupler used to join to pipes.",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 9,
-    name: "Baby Crib",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/CP002-attt4t66rFpYaqdTj-400x300.jpeg"],
-    shortDescription: "Provides a safe area for a baby to sleep",
+    title: "Baby Crib",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/CP002-attt4t66rFpYaqdTj-400x300.jpeg",
+    ],
+    description: "Provides a safe area for a baby to sleep",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 10,
-    name: "Play Pen",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/CP003-attz3CoRAhIzA5x9v-400x300.jpeg"],
-    shortDescription: "Provides a safe area for a child to play",
+    title: "Play Pen",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/CP003-attz3CoRAhIzA5x9v-400x300.jpeg",
+    ],
+    description: "Provides a safe area for a child to play",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 11,
-    name: "Duoband Yagi Antenna",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/DR002-attJBcwM43eItgWAE-400x300.jpg"],
-    shortDescription:
+    title: "Duoband Yagi Antenna",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/DR002-attJBcwM43eItgWAE-400x300.jpg",
+    ],
+    description:
       "3D printed bespoke parts to construct standard antenna design",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   {
     id: 12,
-    name: "Rescue Airbag",
-    images:
-      ["https://field-ready-projects.openknowhow.org/images/DR001-att5yL3AEAbc3wDh2-400x300.png"],
-    shortDescription: "For first responders to remove large blocks of debris",
+    title: "Rescue Airbag",
+    "intended-use": "",
+    keywords: ["IV", "hook", "medical"],
+    "project-link": "",
+    image: [
+      "https://field-ready-projects.openknowhow.org/images/DR001-att5yL3AEAbc3wDh2-400x300.png",
+    ],
+    description: "For first responders to remove large blocks of debris",
+    made: true,
+    "made-independently": false,
+    license: "CC BY-SA 4.0",
+    licensor: {
+      name: "Medical Supply Co.",
+      email: "contact@medicalco.com",
+      affiliation: "",
+    },
+    "okh-manifest-version": "1.0",
+    "date-created": "2024-11-17",
+    "date-updated": "2024-11-17",
+    "manifest-author": {
+      name: "John Doe",
+      email: "johndoe@example.com",
+      affiliation: "",
+    },
+    "manifest-language": "en",
+    contact: {
+      name: "Support Team",
+      email: "support@medicalco.com",
+      affiliation: "",
+    },
+    version: 2.0,
+    "development-stage": "",
+    "documentation-home": "",
+    bom: "",
+    "bom-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "tool-list": "",
+    "tool-list-atoms": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
+    "product-atom": "",
+    "making-instructions": [],
+    "maintenance-instructions": "",
+    "health-safety-notice": "",
+    "standards-used": "",
   },
   // Add more products here
 ];
 
 const product = products.find((p) => p.id === parseInt(productId));
+
+// const baseUrl = useRuntimeConfig().public.baseUrl;
+// const url = baseUrl + "/getOKH/"+ productId;
+// console.log("url",url);
+// const loading = "loading";
+// const success = "success";
+// console.log("url", url);
+// const { data: product, status, error, refresh, clear } = await useFetch(url);
+// console.log("product",product);
 </script>
 
 <style scoped>
@@ -169,6 +785,31 @@ const product = products.find((p) => p.id === parseInt(productId));
 
   .left {
     width: 300px;
+
+    .okh-details {
+      display: flex;
+      font-weight: 500;
+      justify-content: space-between;
+      padding: 8px 4px;
+
+      .value {
+        color: #2a3952;
+        font-size: 14px;
+        font-weight: 400;
+        text-align: right;
+      }
+
+      &:nth-child(even) {
+        background-color: #ebebeb;
+      }
+    }
+
+    .specification {
+      color: #2a3952;
+      font-size: 18px;
+      font-weight: 700;
+      margin: 30px 0 5px 0;
+    }
   }
 
   .location {
@@ -176,13 +817,13 @@ const product = products.find((p) => p.id === parseInt(productId));
   }
 
   .center {
-    width: calc(100% - 500px);
+    width: calc(100% - 600px);
   }
 
   .review-wrap {
     display: flex;
     justify-content: space-between;
-    margin: 20px 0;
+    margin: 40px 0 20px 0;
   }
 
   .right {
@@ -198,4 +839,12 @@ const product = products.find((p) => p.id === parseInt(productId));
     font-weight: 700;
   }
 }
+
+@media only screen and (min-width: 1536px) {
+  .product-detail {
+    &.container {
+      max-width: 1400px;
+    }
+  }
+}
 </style>

From 639ec2a8ef8e1fc52b39a7ea1bf16f22a35997b7 Mon Sep 17 00:00:00 2001
From: NimeshaKahingala <nimesha.isholi94@gmail.com>
Date: Thu, 21 Nov 2024 17:03:41 -0600
Subject: [PATCH 6/7] login link removed

---
 packages/front-end/components/AppHeader.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/front-end/components/AppHeader.vue b/packages/front-end/components/AppHeader.vue
index ce62762..49239c2 100644
--- a/packages/front-end/components/AppHeader.vue
+++ b/packages/front-end/components/AppHeader.vue
@@ -53,7 +53,7 @@
             >
               <NuxtLink to="/contact">Contact</NuxtLink>
             </li>
-            <li
+            <!-- <li
               class="nav-link text-white uppercase [item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block rounded-md px-3 py-2 text-base font-medium']"
             >
               <NuxtLink to="/login">Sign IN</NuxtLink>
@@ -62,7 +62,7 @@
               class="btn-register text-white uppercase [item.current ? 'bg-gray-900 text-white' : 'text-gray-300', 'block rounded-md px-3 py-2 text-base font-medium']"
             >
               <NuxtLink to="/register">Register</NuxtLink>
-            </li>
+            </li> -->
           </div>
         </ul>
       </Disclosure>

From 64449473363ba78dd6f34ef21b2f45f1bf11eac0 Mon Sep 17 00:00:00 2001
From: NimeshaKahingala <nimesha.isholi94@gmail.com>
Date: Thu, 21 Nov 2024 17:04:33 -0600
Subject: [PATCH 7/7] sample data updated

---
 packages/front-end/pages/products/[id].vue | 72 ++++++++++++++++++----
 1 file changed, 60 insertions(+), 12 deletions(-)

diff --git a/packages/front-end/pages/products/[id].vue b/packages/front-end/pages/products/[id].vue
index 4b93b30..8b14dd0 100644
--- a/packages/front-end/pages/products/[id].vue
+++ b/packages/front-end/pages/products/[id].vue
@@ -140,7 +140,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -196,7 +200,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -251,7 +259,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -306,7 +318,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -362,7 +378,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -415,7 +435,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -469,7 +493,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -522,7 +550,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -575,7 +607,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -628,7 +664,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -682,7 +722,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+    "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",
@@ -735,7 +779,11 @@ const products: OKH_TYPE[] = [
       description: "",
       link: "",
     },
-    "product-atom": "",
+   "product-atom": {
+      identifier: "",
+      description: "",
+      link: "",
+    },
     "making-instructions": [],
     "maintenance-instructions": "",
     "health-safety-notice": "",