From 11b55095b197f7dc3df8ae89a66459448279e798 Mon Sep 17 00:00:00 2001
From: dev dwd <dev@siliconpin.com>
Date: Wed, 26 Oct 2022 21:10:27 +0530
Subject: [PATCH] s5

---
 components.d.ts                 |   1 +
 public/favicon.ico              | Bin 0 -> 6110 bytes
 src/App.vue                     |  10 +-
 src/components/Header.vue       |  23 ----
 src/components/SellerHeader.vue |  82 +++++++++++++
 src/pages/index.vue             |   7 +-
 src/pages/seller/index.vue      | 209 +++++++++++++++++++++++++++++++-
 7 files changed, 296 insertions(+), 36 deletions(-)
 create mode 100755 public/favicon.ico
 create mode 100644 src/components/SellerHeader.vue

diff --git a/components.d.ts b/components.d.ts
index cad382b..0530920 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -16,5 +16,6 @@ declare module '@vue/runtime-core' {
     Product: typeof import('./src/components/product.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SellerHeader: typeof import('./src/components/SellerHeader.vue')['default']
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100755
index 0000000000000000000000000000000000000000..292b9dd98cb168574f2a64ca48fa9fd1a7801d48
GIT binary patch
literal 6110
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
F{~K8c>6rik

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 4ceadc5..a14d0c3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,5 @@
-<script setup>
-
-</script>
-
 <template>
   <div>
-    <Header />
-    <main>
-      <router-view />
-    </main>
+    <router-view />
   </div>
-  <Footer />
 </template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index cfd7042..abdabc7 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,12 +1,6 @@
-<!-- This example requires Tailwind CSS v2.0+ -->
 <template>
-
-
-
-
   <div class="container-fluid">
 
-    
   <div class=" bg-white border-b-2 border-gray-100 ">
     <div class="mx-auto max-w-7xl px-4 sm:px-6">
       <div class="flex items-center justify-between py-4 md:justify-start md:space-x-5">
@@ -18,32 +12,15 @@
         </div>
           <div class="z-50 fixed bottom-0 left-0 w-screen lg:hidden">
             <div class="m-6">
-
               <div  :class="{hidden: isOpen}" class="mobileMenu rounded-md flex flex-col bg-green-700 ">
                   <router-link @click="mobileMenu" v-for="item in mainMenu" :key="item.title" :to="item.link"  class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white"  >  {{item.title}}  </router-link>
-                  <!-- <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/administrators" > Administrators </router-link> 
-                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/resources" > Resources </router-link>
-                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/occassion" > Occassion </router-link>
-                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/themes" > Themes </router-link> 
-                  <router-link @click="mobileMenu" class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white" to="/blog" > Blog </router-link> -->
               </div>
               <div  @click="mobileMenu" class="mainMenu-active text-center p-2 rounded-md font-medium text-green-100 bg-green-800 hover:bg-green-900 hover:text-white"  > Menu </div> 
             </div>
           </div>
 
-
-        
-
         <div class="hidden lg:block  space-x-5 uppercase">
           <router-link v-for="item in mainMenu" :key="item.title" :to="item.link" class="text-sm font-bold hover:text-black-900" aria-current="page"> {{item.title}} </router-link>
-          <!-- <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">New </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Cases </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Accessories </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Sale </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Bags & wallets </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Home Office </router-link>
-          <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Collections </router-link> -->
-          <!-- <router-link to="/" class="text-sm font-bold hover:text-black-900" aria-current="page">Corporate Gifting </router-link> -->
         </div>
         <div class=" items-center justify-end md:flex md:flex-1 lg:w-0">
           
diff --git a/src/components/SellerHeader.vue b/src/components/SellerHeader.vue
new file mode 100644
index 0000000..900f529
--- /dev/null
+++ b/src/components/SellerHeader.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="container-fluid">
+  
+      
+    <div class=" bg-white border-b-2 border-gray-100 ">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6">
+        <div class="flex items-center justify-between py-4 md:justify-start md:space-x-5">
+          <div class="flex justify-start  lg:flex-1">
+  
+            <router-link to="/" class="flex items-center">
+              <img src="/img/logo.png" class=" h-10">
+            </router-link>
+          </div>
+            <div class="z-50 fixed bottom-0 left-0 w-screen lg:hidden">
+              <div class="m-6">
+  
+                <div  :class="{hidden: isOpen}" class="mobileMenu rounded-md flex flex-col bg-green-700 ">
+                    <router-link @click="mobileMenu" v-for="item in mainMenu" :key="item.title" :to="item.link"  class="mainMenu-active text-center pb-2 pt-2 rounded-md font-medium text-green-200 hover:bg-green-400 hover:text-white"  >  {{item.title}}  </router-link>
+                </div>
+                <div  @click="mobileMenu" class="mainMenu-active text-center p-2 rounded-md font-medium text-green-100 bg-green-800 hover:bg-green-900 hover:text-white"  > Menu </div> 
+              </div>
+            </div>
+  
+  
+          
+  
+          <div class="hidden lg:block  space-x-5 uppercase">
+            <router-link v-for="item in mainMenu" :key="item.title" :to="item.link" class="text-sm font-bold hover:text-black-900" aria-current="page"> {{item.title}} </router-link>
+          </div>
+          <div class=" items-center justify-end md:flex md:flex-1 lg:w-0">
+            
+            <a href="#" class="whitespace-nowrap text-sm font-medium text-gray-500  inline-flex hover:text-gray-900">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16"> <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> </svg>
+            </a>
+            <a href="#"
+              class="ml-8 inline-flex items-center justify-center whitespace-nowrap rounded-md text-gray-500 hover:text-gray-900 px-4 py-2 text-base font-medium">
+              <svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 18V17C7 14.2386 9.23858 12 12 12V12C14.7614 12 17 14.2386 17 17V18" stroke="currentColor" stroke-linecap="round"/> <path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/> </svg>
+            
+            </a>
+          </div>
+        </div>
+      </div>
+  
+  
+    </div>
+  </div>
+  
+  </template>
+  
+  
+  <style scoped>
+   .router-link-exact-active.mainMenu-active{
+      background-color: #f19138bd;
+      color:#ffffff
+   }
+  </style>
+  
+  <script>
+  export default {
+  
+  data() {
+      return {
+        isOpen: false,
+        mainMenu: [
+            { title: 'Manage Category', icon: 'dashboard', link: "/seller/category"  },
+            { title: 'Products', icon: 'dashboard', link: "/seller/products"  },
+            { title: 'Orders', icon: 'dashboard', link: "/seller/orders"  },
+            { title: 'Transactions', icon: 'dashboard', link: "/seller/transactions"  },
+            { title: 'Manage Tickets', icon: 'dashboard', link: "/seller/tickets"  }  
+          ],
+  
+      }
+    },
+    methods: {
+      mobileMenu: function() {
+        this.isOpen = !this.isOpen;
+        // some code to filter users
+      }
+    }
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 23f9836..aabbf2d 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,6 +1,8 @@
 <template>
 <div>
-  
+  <Header />
+  <main>
+
     <!-- <h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals for  {{this.$route.params.id}}</h1>
     <hr class=""> -->
   
@@ -89,6 +91,9 @@
       </section>
       
 
+  </main>
+    
+<Footer />
 </div>
 </template>
 
diff --git a/src/pages/seller/index.vue b/src/pages/seller/index.vue
index c017cc6..a09ab88 100644
--- a/src/pages/seller/index.vue
+++ b/src/pages/seller/index.vue
@@ -1,10 +1,213 @@
 <template>
 <div>
+    <SellerHeader />
+    <div class="container-fluid  bg-gray-100 mt-4">
+        <div class="p-3 text-2xl font-semibold text-center text-gray-600"> Seller Dashboard </div>
+    </div>
     <div class="container">
 
     </div>
-    <div >
-        
-    </div>
+
+    <section class="antialiased bg-gray-100 text-gray-600">
+        <div class="flex flex-col justify-center h-full">
+            <!-- Table -->
+            <div class="w-full max-w-2xl mx-auto bg-white shadow-lg rounded-sm border border-gray-200">
+                <header class="px-5 py-4 border-b border-gray-100">
+                    <h2 class="font-semibold text-gray-800">Customers</h2>
+                </header>
+                <div class="p-3">
+                    <div class="overflow-x-auto">
+                        <table class="table-auto w-full">
+                            <thead class="text-xs font-semibold uppercase text-gray-400 bg-gray-50">
+                                <tr>
+                                    <th class="p-2 whitespace-nowrap">
+                                        <div class="font-semibold text-left">Name</div>
+                                    </th>
+                                    <th class="p-2 whitespace-nowrap">
+                                        <div class="font-semibold text-left">Email</div>
+                                    </th>
+                                    <th class="p-2 whitespace-nowrap">
+                                        <div class="font-semibold text-left">Spent</div>
+                                    </th>
+                                    <th class="p-2 whitespace-nowrap">
+                                        <div class="font-semibold text-center">Country</div>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="text-sm divide-y divide-gray-100">
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-05.jpg" width="40" height="40" alt="Alex Shatov"></div>
+                                            <div class="font-medium text-gray-800">Alex Shatov</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">alexshatov@gmail.com</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500">&#8377;2890</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-06.jpg" width="40" height="40" alt="Philip Harbach"></div>
+                                            <div class="font-medium text-gray-800">Philip Harbach</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">philip.h@gmail.com</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500"> &#8377;2767</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-07.jpg" width="40" height="40" alt="Mirko Fisuk"></div>
+                                            <div class="font-medium text-gray-800">Mirko Fisuk</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">mirkofisuk@gmail.com</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500">&#8377;2996</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-08.jpg" width="40" height="40" alt="Olga Semklo"></div>
+                                            <div class="font-medium text-gray-800">Olga Semklo</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">olga.s@cool.design</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500">&#8377;1220</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3"><img class="rounded-full" src="https://raw.githubusercontent.com/cruip/vuejs-admin-dashboard-template/main/src/images/user-36-09.jpg" width="40" height="40" alt="Burak Long"></div>
+                                            <div class="font-medium text-gray-800">Burak Long</div>
+                                        </div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left">longburak@gmail.com</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-left font-medium text-green-500">&#8377;1890</div>
+                                    </td>
+                                    <td class="p-2 whitespace-nowrap">
+                                        <div class="text-lg text-center">??</div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-gray-100">
+        <div class="container px-6 py-10 mx-auto">
+            <div class="p-3 text-2xl font-semibold text-center text-gray-600"> Commerce details</div>
+
+            <div class="grid grid-cols-1 gap-8 mt-8 md:mt-16 md:grid-cols-2">
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1509315703195-529879416a7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            All Order Details
+                        </a>
+                        
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                           Pending Orders
+                        </a>
+
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1544654803-b69140b285a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            Delivered Orders
+                        </a>
+
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1530099486328-e021101a494a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1547&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            Cancelled Orders
+                        </a>
+
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1484&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            All Products on sale
+                        </a>
+
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+
+                <div class="lg:flex">
+                    <img class="object-cover w-full h-56 rounded-lg lg:w-64" src="https://images.unsplash.com/photo-1624996379697-f01d168b1a52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
+
+                    <div class="flex flex-col justify-between py-6 lg:mx-6">
+                        <a href="#" class="text-xl font-semibold text-gray-800 hover:underline dark:text-white ">
+                            Earnings
+                        </a>
+                        
+                        <span class="text-sm text-gray-500 dark:text-gray-300">Total 320</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <Footer />
 </div>
 </template>
\ No newline at end of file