From 34722d66dc5314dc963c0a506af6e74e838db1de Mon Sep 17 00:00:00 2001
From: Abdulqoyum6 <abdulqoyum@simplifiedux.com>
Date: Thu, 1 Jun 2023 16:02:53 +0100
Subject: [PATCH] new layout

---
 src/components/ClientListPage.vue |   2 +-
 src/components/Navbar.vue         |   3 -
 src/components/SampleInfo.vue     | 280 ++++++++++++++++++++++--------
 src/router/index.js               |  11 +-
 src/stores/sample.js              |   6 +-
 src/views/SampleView.vue          | 171 +-----------------
 6 files changed, 228 insertions(+), 245 deletions(-)

diff --git a/src/components/ClientListPage.vue b/src/components/ClientListPage.vue
index 7568049..55d746d 100644
--- a/src/components/ClientListPage.vue
+++ b/src/components/ClientListPage.vue
@@ -36,7 +36,7 @@ export default defineComponent({
         },
         viewClient(prod) {
             this.store.$state.client = prod
-            this.$router.push('/client')
+            this.$router.push('/client-details')
         }
     }
 })
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 7e9642e..448f86f 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -4,9 +4,6 @@
     <div class="sticky top-0 z-10 bg-white w-full py-3 flex items-center justify-between px-[30px]">
       <div class="flex space-x-3 items-center">
         <img class="h-[50px]" src="../assets/svg-rev-01.png" alt="">
-        <!-- <img src="../assets/download-removebg-preview.png" class="h-[50px]" />
-        <h1 class="hidden md:block text-[#0000fe] text-center text-3xl font-semibold">Env<span class="text-[#99ff00]">Accord</span></h1> -->
-
       </div>
       <div class="flex gap-8 items-center">
         <div class="flex gap-1">
diff --git a/src/components/SampleInfo.vue b/src/components/SampleInfo.vue
index b78285a..36eeae7 100644
--- a/src/components/SampleInfo.vue
+++ b/src/components/SampleInfo.vue
@@ -1,91 +1,223 @@
 <script>
 
 import { defineComponent } from 'vue';
+import useSampleStore from '../stores/sample';
 
 export default defineComponent({
-    data(){
-        return{
-            table: [
-                {number: 1, name: "Balkis", id: "h557yi", sampleStatus: "READ", dateCreated: "Aug 29 2022" },
-                {number: 2, name: "Agba", id: "erfrti", sampleStatus: "UNREAD", dateCreated: "Sep 23 2023" },
-                {number: 3, name: "Abdulhameed", id: "njksd5", sampleStatus: "READ", dateCreated: "Aug 2 2021" },
-                {number: 4, name: "Esther", id: "8nfocd", sampleStatus: "READ", dateCreated: "Jan 29 2012" },
-                {number: 5, name: "Emma", id: "we34rd", sampleStatus: "UNREAD", dateCreated: "May 9 2022" },
-                {number: 6, name: "Fawas", id: "cdf4tg", sampleStatus: "READ", dateCreated: "Jul 4 2023" },
-                {number: 7, name: "Maruf", id: "43rfda", sampleStatus: "UNREAD", dateCreated: "Dec 29 2023" },
-                {number: 8, name: "Taye", id: "vf45gf", sampleStatus: "READ", dateCreated: "Aug 20 2023" },
-                {number: 9, name: "Ibrahim", id: "sdfrg4", sampleStatus: "UNREAD", dateCreated: "Aug 9 2022" },
-            ]
+    data() {
+        return {
+            client: useSampleStore().$state.clientList[4],
+            isSampleModal: false,
+            sampleData: {},
+            isFeedback: false
+        }
+    },
+    methods: {
+        singleSample(data) {
+            this.isSampleModal = true
+            this.sampleData = data
         }
     }
 })
 </script>
 <template>
-        <div>
-    <div class="sticky top-0 z-10 bg-white w-full py-3 flex items-center justify-between px-[30px]">
-      <div class="flex space-x-3 items-center">
-        <img src="../assets/download-removebg-preview.png" class="h-[50px]" />
-        <h1 class="hidden md:block text-[#0000fe] text-center text-3xl font-semibold">Env<span class="text-[#99ff00]">Accord</span></h1>
-      </div>
-      <div class="flex gap-8 items-center">
-        <div class="flex gap-1">
-         <div>
-            <svg class="text-[#0000fe]" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32"><path fill="currentColor" d="M27.71 4.29a1 1 0 0 0-1.05-.23l-22 8a1 1 0 0 0 0 1.87l8.59 3.43L19.59 11L21 12.41l-6.37 6.37l3.44 8.59A1 1 0 0 0 19 28a1 1 0 0 0 .92-.66l8-22a1 1 0 0 0-.21-1.05Z"/></svg>
-        </div>
-         <a href="#" class="hidden md:block text-[#0000fe] font-semibold">Send Feedback</a>
-       </div>
-        <router-link to="/login" class="flex gap-1">
-          <div><svg xmlns="http://www.w3.org/2000/svg" class="text-[#0000fe]" width="25" height="25"  viewBox="0 0 20 20"><path fill="currentColor" d="M8.5 11.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5ZM11 3.5a.5.5 0 0 0-.576-.494l-7 1.07A.5.5 0 0 0 3 4.57v10.86a.5.5 0 0 0 .424.494l7 1.071a.5.5 0 0 0 .576-.494V10h5.172l-.997.874a.5.5 0 0 0 .658.752l1.996-1.75a.5.5 0 0 0 0-.752l-1.996-1.75a.499.499 0 1 0-.658.752l.997.874H11V3.5Zm-1 .582V15.92L4 15V4.999l6-.917ZM12.5 16H12v-5h1v4.5a.5.5 0 0 1-.5.5ZM12 8V4h.5a.5.5 0 0 1 .5.5V8h-1Z"/></svg></div>
-          <p class="text-[#0000fe] hidden md:block font-semibold">Logout</p>
-        </router-link>
-      </div>
-      
-    </div>
-    <div class="container mx-auto min-h-screen w-full">
-<div class="w-full h-fit md:px-[30px] px-4 border-t-2 pb-[100px] lg:pb-4">
-    <div class="bg-white md:px-[30px] px-4 py-5 space-y-4">
-        <div class="md:flex justify-between border-b py-4">
-            <p class="text-lg font-semibold">{{ details.clientName }}</p>
-            <p class="">Date created: {{ details.dateReceived }}</p>
+    <div>
+        <div class="sticky top-0 z-10 bg-white w-full py-3 flex items-center justify-between px-[50px] border-b">
+            <div class="flex space-x-3 items-center">
+                <img class="h-[50px]" src="../assets/svg-rev-01.png" alt="">
+            </div>
+            <div class="flex gap-8 items-center">
+                <div @click="isFeedback = true" class="flex gap-1 cursor-pointer">
+                    <svg class="text-[#0000fe]" xmlns="http://www.w3.org/2000/svg" width="25" height="25"
+                        viewBox="0 0 32 32">
+                        <path fill="currentColor"
+                            d="M27.71 4.29a1 1 0 0 0-1.05-.23l-22 8a1 1 0 0 0 0 1.87l8.59 3.43L19.59 11L21 12.41l-6.37 6.37l3.44 8.59A1 1 0 0 0 19 28a1 1 0 0 0 .92-.66l8-22a1 1 0 0 0-.21-1.05Z" />
+                    </svg>
+                    <p href="#" class="hidden md:block text-[#0000fe] font-semibold">Send Feedback</p>
+                </div>
+            </div>
+
         </div>
-        <div>
-            <p class="font-semibold">Sample list</p>
+        <div class="container mx-auto min-h-screen w-full">
+            <div class="w-full h-fit md:px-[50px] px-4 pb-[100px] lg:pb-4 mt-10">
+                <div class="bg-white md:px-[30px] px-4 py-5 space-y-4">
+                    <div class="flex justify-between border-b py-4">
+                        <p class="text-lg font-bold">Mr. Anjorin</p>
+                        <p class="text-xl font-bold">Id: Anjb01</p>
+                    </div>
+                    <div>
+                        <p class="font-semibold">Sample list</p>
+                    </div>
+                </div>
+                <div class="bg-white w-full shadow-xl pb-9 overflow-x-scroll">
+                    <div class="space-y-5">
+                        <div class="relative min-w-[700px]">
+                            <table class="w-full bg-gray-100">
+                                <thead class="text-white bg-[#0000fe] h-[8vh]">
+                                    <th>Title</th>
+                                    <th>Id</th>
+                                    <th>Date created</th>
+                                    <th>Status</th>
+                                    <th>Analysis</th>
+                                    <th>Action</th>
+                                </thead>
+                                <tbody>
+                                    <tr class="text-center h-[7vh] border border-gray-300"
+                                        :class="client.samples.indexOf(row) % 2 === 0 ? 'bg-gray-100' : 'bg-white'"
+                                        v-for="row in client.samples" :key="row.id">
+                                        <td>{{ row.sampleType }}</td>
+                                        <td>{{ client.samples.indexOf(row) + 1 }}</td>
+                                        <td>{{ row.dateReceived }}</td>
+                                        <td>{{ row.sampleStatus }}</td>
+                                        <td>{{ row.listOfAnalysis.length }}</td>
+                                        <td>
+                                            <div class="flex space-x-4 items-center justify-center">
+                                                <div @click="singleSample(row)">
+                                                    <svg xmlns="http://www.w3.org/2000/svg"
+                                                        class="text-[#0000fe] cursor-pointer" width="25" height="25"
+                                                        viewBox="0 0 24 24">
+                                                        <path fill="currentColor"
+                                                            d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3z" />
+                                                    </svg>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
         </div>
-    </div>  
-<div class="bg-white w-full shadow-xl pb-9 overflow-x-scroll">
-    <div class="space-y-5">
-        <div class="relative min-w-[700px]">
-            <table class="w-full bg-gray-100">
-            <thead class="text-white bg-[#0000fe] h-[8vh]">
-                <th>Title</th>
-                <th>Id</th>
-                <th>Date created</th>
-                <th>Status</th>
-                <th>Analysis</th>
-                <th>Action</th>
-            </thead>
-            <tbody>
-                <tr class="text-center h-[7vh] border border-gray-300" :class="details.samples.indexOf(row) % 2 === 0 ? 'bg-gray-100' : 'bg-white'" v-for="row in details.samples" :key="row.id">
-                    <td>{{ row.sampleType }}</td>
-                    <td>{{ details.samples.indexOf(row) + 1 }}</td>
-                    <td>{{ row.dateReceived }}</td>
-                    <td>{{ row.sampleStatus }}</td>
-                    <td>{{ row.listOfAnalysis.length }}</td>
-                    <td>
-                        <div class="flex space-x-4 items-center justify-center">
-                            <div>
-                                <svg xmlns="http://www.w3.org/2000/svg" class="text-[#0000fe] cursor-pointer" width="25" height="25" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3z"/></svg>
-                            </div>
+    </div>
+</div>
+<!-- Modals -->
+
+
+<div @click.self="isSampleModal = false"  v-if="isSampleModal" class="h-screen w-screen fixed top-0 left-0 flex justify-center z-10 items-center bg-opacity-60 bg-black">
+        <div class="p-5 rounded-lg bg-white w-[550px]">
+            <div class="w-full flex justify-between">
+                <div>
+                    <p class="text-2xl font-semibold">Sample Information</p>
+                    <p class="">View the Information of your sample</p>
+                </div>
+                <div @click="showSample = false">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6L6.4 19Z"/></svg>
+                </div>
+            </div>
+
+            <div class="content">
+
+            <div class="flex space-x-8 mt-5">
+                <div class="">
+                    <p class="font-semibold">Title</p>
+                    <p class="">{{ sampleData.sampleType }}</p>
+                </div>
+                
+                <div class="">
+                    <p class="font-semibold">Status</p>
+                    <div class="flex space-x-2">
+                        <p class="">{{sampleData.sampleStatus}}</p>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="#0000fe" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M20 13V5.749a.6.6 0 0 0-.176-.425l-3.148-3.148A.6.6 0 0 0 16.252 2H4.6a.6.6 0 0 0-.6.6v18.8a.6.6 0 0 0 .6.6H14"/><path d="M16 2v3.4a.6.6 0 0 0 .6.6H20m-4 13h6m0 0l-3-3m3 3l-3 3"/></g></svg>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-4">
+                <p class="mb-2 font-semibold">Analysis</p>                
+                <div class="flex space-x-6">
+                    <div v-for="item in sampleData.listOfAnalysis.length" class="flex space-x-2">
+                        <p>Temperature</p>
+                        <div class="flex items-center space-x-2">
+                            <p>In progress</p>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 14"><g fill="none" stroke="#0000fe" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13.5a6.5 6.5 0 1 1 6.21-8.41M13.5 7v.5"/><path stroke-dasharray=".889 1.778" d="M13.11 9.23a6.51 6.51 0 0 1-2.79 3.36"/><path d="m9.53 13l-.47.18"/></g></svg>
                         </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="ml-auto mr-0 w-fit mt-5">
+                <button class="px-3 py-2 rounded-lg bg-gray-300 text-white">Download Result</button>
+            </div>
+            </div>
         </div>
     </div>
-</div>
-</div>
-</div>
+    <div @click.self="isFeedback = false"  v-if="isFeedback" class="h-screen w-screen fixed top-0 left-0 flex justify-center z-10 items-center bg-opacity-60 bg-black">
+        <div class="container mx-auto p-5 rounded-lg bg-white w-full md:w-[90vw] lg:w-[800px] relative z-80 h-[90vh] lg:h-fit overflow-scroll">
+           <div class="flex justify-between md:justify-end">
+            <svg class="md:hidden" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21l-9-9m0 0L3 3m9 9l9-9m-9 9l-9 9"/></svg>
+            <img src="../assets/svg-rev-01.png" alt="" class="h-[90px] ">
+        </div> 
+          <div class="md:px-[60px]">
+             <p class="text-xl font-bold py-3">Customer Satisfaction Survey</p>
+             
+             <p class="text font-semibold py-3">Overall level of satisfaction.</p>
+             <div class="mb-2">
+                <p class="text-[17px]">1. What is your overall level of satisfaction with our laboratory services?</p>
+                <div class="md:flex justify-between">
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">Very pleased</label>
+                   </div>
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">pleased</label>
+                   </div>
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">Adequate</label>
+                   </div>
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">Dissatisfied</label>
+                   </div>
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">Strongly dissatisfied</label>
+                   </div>
+                </div>
+             </div>
 
-</div>
+             <div class="mb-2">
+                <p class="text-[17px]">2. Will you use our service again?</p>
+                <div class="md:flex gap-[7%]">
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">Yes</label>
+                   </div>
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">Maybe</label>
+                   </div>
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">NO</label>
+                   </div>
+                </div>
+             </div>
+
+             <div class="mb-2">
+                <p class="text-[17px]">3. Did you receive value for the fees charged?</p>
+                <div class="md:flex gap-[7%]">
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">Yes</label>
+                   </div>
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">Maybe</label>
+                   </div>
+                   <div class="flex gap-[7px] justify-start item-center ">
+                       <input type="checkbox">
+                       <label class="w-fit">NO</label>
+                   </div>
+                </div>
+             </div>
+             <p class="text-[17px]">4. What can we do to serve you better?</p>
+             <textarea rows="6" type="text" class="w-full my-2 border border-black p-2 rounded-lg" />
+          </div>
+          <div class="flex justify-end items-end  mt-[15px] px-[30px]">
+                <button class="bg-black text-white px-[35px] py-[10px] font-[600] rounded-lg">Submit</button>
+               </div>
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index f7642af..c295938 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,7 +20,7 @@ const router = createRouter({
           component: import('../components/AddSampleForm.vue')
         },
         {
-          path: '/client',
+          path: '/client-details',
           name: 'Client-Details',
           component: import('../components/ClientPage.vue')
         },
@@ -37,10 +37,15 @@ const router = createRouter({
       component: () => import('../views/LoginView.vue')
     },
     {
-      path: '/sample',
-      name: 'Sample-page',
+      path: '/client',
+      name: 'Client-page',
       component: () => import('../views/SampleView.vue')
     },
+    {
+      path: '/client/samples',
+      name: 'View-Samples',
+      component: () => import('../components/SampleInfo.vue')
+    }
   ]
 })
 
diff --git a/src/stores/sample.js b/src/stores/sample.js
index 8554a47..d6b2021 100644
--- a/src/stores/sample.js
+++ b/src/stores/sample.js
@@ -345,7 +345,7 @@ export default function useSampleStore() {
                     listOfAnalysis: [
                         {
                             name : "phosphate",
-                            status : "ompleted",
+                            status : "Completed",
                         }
                     ]
                 },
@@ -357,6 +357,10 @@ export default function useSampleStore() {
                         {
                             name : "pH",
                             status : "In progress",
+                        },
+                        {
+                            name : "phosphate",
+                            status : "Completed",
                         }
                     ]
                 }
diff --git a/src/views/SampleView.vue b/src/views/SampleView.vue
index 376e137..aa52053 100644
--- a/src/views/SampleView.vue
+++ b/src/views/SampleView.vue
@@ -7,14 +7,17 @@ export default defineComponent({
             showSample: false,
             id: ''
         }
+    },
+    methods: {
+        proceed() {this.$router.push('/client/samples')}
     }
 })
 </script>
 
 <template>
-    <div class="h-screen w-screen flex items-center bg-gray-300">
-        <div class=" w-fit h-fit mx-auto  flex shadow-2xl">
-        <div class="hidden md:block relative h-[520px] w-[500px] bg-black rounded-s-[15px] overflow-hidden">
+    <div class="h-screen w-screen flex items-center lg:bg-gray-300">
+        <div class="w-fit h-fit mx-auto  flex md:shadow-2xl">
+        <div class="hidden lg:block relative h-[520px] w-[500px] bg-black rounded-s-[15px] overflow-hidden">
           <div class="w-full h-full bg-black opacity-60 absolute">
             <img src="../assets/Kinetic-Labs-access-to-lab-space-and-facilities.jpg" alt="" class="w-full h-full">
           </div>
@@ -23,176 +26,18 @@ export default defineComponent({
             <p class="font-semibold text-2xl text-white">We are a leading provider of specialised environmental and sustainability risk management advisory services in Africa.</p></div> 
         </div>
 
-        <div class="bg-[white] h-[520px] w-[500px] rounded-e-[15px] pt-[50px] px-[100px] text-center">
+        <div class="bg-[white] md:h-[520px] md:w-[500px] rounded-e-[15px] pt-[50px] px-4 md:px-[100px] text-center">
          <div class="border border-black border-1 w-fit mx-auto rounded-full p-[7px] bg-gray-100 mb-[10px]"> <img src="../assets/download-removebg-preview.png" alt="" class="w-[80px] "></div>
          <div class="">
          <p class="text-xl font-semibold py-3">Enter Sample ID</p>
          <p class="text-sm">Enter the sample Id to check the status and result of your sample</p>
          <label class="flex justify-start mt-[20px]">Sample ID</label>
          <input placeholder="Enter sample Id" class="block focus:outline-none w-full px-3 py-2 border mt-2 mb-4 rounded-lg" v-model="id" />
-         <button @click="() => showSample = true" :class="id === '' ? 'bg-[#0000fe]' : 'bg-gray-300'" class="font-medium text-white p-2 rounded-lg mt-4 w-full text-center">View Sample</button>
+         <button @click="proceed" :class="id === '' ? 'bg-[#0000fe]' : 'bg-gray-300'" class="font-medium text-white p-2 rounded-lg mt-4 w-full text-center">View Sample</button>
         </div>
         </div>
       </div>
     </div>
-
-    <!-- Modal -->
-    <div @click.self="showSample = false"  v-if="showSample" class="h-screen w-screen fixed top-0 left-0 flex justify-center items-center bg-opacity-60 bg-black">
-        <!-- <div class="p-5 rounded-lg bg-white w-[550px]">
-            <div class="w-full flex justify-between">
-                <div>
-                    <p class="text-2xl font-semibold">Sample Information</p>
-                    <p class="">View the Information of your sample</p>
-                </div>
-                <div @click="showSample = false">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6L6.4 19Z"/></svg>
-                </div>
-            </div>
-
-            <div class="content">
-
-            <div class="flex space-x-8 mt-5">
-                <div class="">
-                    <p class="font-semibold">Title</p>
-                    <p class="">Blood Sample</p>
-                </div>
-                
-                <div class="">
-                    <p class="font-semibold">Status</p>
-                    <div class="flex space-x-2">
-                        <p class="">Received</p>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="#0000fe" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M20 13V5.749a.6.6 0 0 0-.176-.425l-3.148-3.148A.6.6 0 0 0 16.252 2H4.6a.6.6 0 0 0-.6.6v18.8a.6.6 0 0 0 .6.6H14"/><path d="M16 2v3.4a.6.6 0 0 0 .6.6H20m-4 13h6m0 0l-3-3m3 3l-3 3"/></g></svg>
-                    </div>
-                </div>
-            </div>
-
-            <div class="mt-4">
-                <p class="mb-2 font-semibold">Analysis</p>                
-                <div class="flex space-x-6">
-                    <div class="flex space-x-2">
-                        <p>pH</p>
-                        <div class="flex items-center space-x-2">
-                            <p>In progress</p>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 14"><g fill="none" stroke="#0000fe" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13.5a6.5 6.5 0 1 1 6.21-8.41M13.5 7v.5"/><path stroke-dasharray=".889 1.778" d="M13.11 9.23a6.51 6.51 0 0 1-2.79 3.36"/><path d="m9.53 13l-.47.18"/></g></svg>
-                        </div>
-                    </div>
-                    <div class="flex space-x-4">
-                        <p>pH</p>
-                        <div class="flex items-center space-x-4">
-                            <p>In progress</p>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 14 14"><g fill="none" stroke="#0000fe" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13.5a6.5 6.5 0 1 1 6.21-8.41M13.5 7v.5"/><path stroke-dasharray=".889 1.778" d="M13.11 9.23a6.51 6.51 0 0 1-2.79 3.36"/><path d="m9.53 13l-.47.18"/></g></svg>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="ml-auto mr-0 w-fit mt-5">
-                <button class="px-3 py-2 rounded-lg bg-gray-300 text-white">Download Result</button>
-            </div>
-            </div>
-        </div> -->
-        <div class="p-5 rounded-lg bg-white w-[800px] relative z-80 h-[90vh] overflow-scroll">
-           <div class="flex justify-between md:justify-end">
-            <svg class="md:hidden" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21l-9-9m0 0L3 3m9 9l9-9m-9 9l-9 9"/></svg>
-            <img src="../assets/svg-rev-01.png" alt="" class="h-[90px] ">
-        </div> 
-          <div class="px-[60px]">
-             <p class="text-xl font-bold py-3">Customer Satisfaction Survey</p>
-             <table class="py-2 w-full my-2">
-                <tr>
-                    <th class="text-left w-[30%] text-lg px-2">Client Name</th>
-                    <th><input type="text" class="focus:outline-none w-full"></th>
-                </tr>
-
-                <tr>
-                    <th class="text-left w-[30%] text-lg px-2">Project Title</th>
-                    <th><input type="text" class="focus:outline-none w-full"></th>
-                </tr>
-
-                <tr>
-                    <th class="text-left w-[30%] text-lg px-2">Client Contact</th>
-                    <th><input type="text" class="focus:outline-none w-full"></th>
-                </tr>
-
-                <tr>
-                    <th class="text-left w-[30%] text-lg px-2">Service Provided</th>
-                    <th><input type="text" class="focus:outline-none w-full"></th>
-                </tr>
-
-                <tr>
-                    <th class="text-left w-[30%] text-lg px-2">Date</th>
-                    <th><input type="text" class="focus:outline-none w-full"></th>
-                </tr>
-             </table>
-             <p class="text-xl font-bold py-3">Overall level of satisfaction.</p>
-             <div class="mb-2">
-                <p class="text-[17px]">1. What is your overall level of satisfaction with our laboratory services?</p>
-                <div class="md:flex justify-between">
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">Very pleased</label>
-                   </div>
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">pleased</label>
-                   </div>
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">Adequate</label>
-                   </div>
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">Dissatisfied</label>
-                   </div>
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">Strongly dissatisfied</label>
-                   </div>
-                </div>
-             </div>
-
-             <div class="mb-2">
-                <p class="text-[17px]">2. Will you use our service again?</p>
-                <div class="md:flex gap-[7%]">
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">Yes</label>
-                   </div>
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">Maybe</label>
-                   </div>
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">NO</label>
-                   </div>
-                </div>
-             </div>
-
-             <div class="mb-2">
-                <p class="text-[17px]">3. Did you receive value for the fees charged?</p>
-                <div class="md:flex gap-[7%]">
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">Yes</label>
-                   </div>
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">Maybe</label>
-                   </div>
-                   <div class="flex gap-[7px] justify-start item-center ">
-                       <input type="checkbox">
-                       <label class="w-fit">NO</label>
-                   </div>
-                </div>
-             </div>
-             <p class="text-[17px]">4. What can we do to serve you better?</p>
-             <input type="text" class="w-full my-2 border border-black h-[50vh]">
-          </div>
-          <div class="flex justify-end items-end  my-[15px] px-[30px]">
-                <button class="bg-black text-white px-[35px] py-[10px] font-[600] rounded-lg">Submit</button>
-               </div>
-        </div>
-    </div>
 </template>
 
 <style>