修改路由,添加页面

src/assets/sass/_input.scss

@@ -33,7 +33,7 @@
         width: 16px;
         height: 16px;
         border-radius: 0.2em;
-        @apply relative overflow-hidden cursor-pointer;
+        @apply p-0 relative overflow-hidden cursor-pointer;
         &:before {
             content: "";
             transition: all 0.2s ease-in-out;
@@ -84,28 +84,4 @@ select.input {
     &.input--lg {
         @apply pr-8;
     }
-}
-
-.dark {
-    .input {
-        @apply bg-dark-2 border-dark-4;
-        &[type="checkbox"]:not(.input--switch) {
-            @apply bg-dark-5 border-dark-5;
-            &:checked {
-                @apply bg-theme-1 border-theme-1;
-            }
-        }
-        &.input--switch[type="checkbox"] {
-            @apply bg-dark-5 border-dark-5;
-            &:before {
-                @apply bg-dark-1;
-            }
-            &:checked {
-                @apply bg-theme-10;
-            }
-        }
-    }
-    .input-group-info {
-        @apply text-gray-300 bg-dark-2 border-dark-4;
-    }
 }

src/components/TopBar.vue

@@ -3,9 +3,9 @@
   <div class="top-bar">
     <!-- BEGIN: Breadcrumb -->
     <div class="-intro-x breadcrumb mr-auto hidden sm:flex">
-      <a href class>智莺生活</a>
+      <div>智莺生活</div>
       <ChevronRightIcon class="breadcrumb__icon" />
-      <a href class="breadcrumb--active">Dashboard</a>
+      <div class="breadcrumb--active">{{ this.$route.meta.title }}</div>
     </div>
     <!-- END: Breadcrumb -->
     <!-- BEGIN: Search -->
@@ -181,7 +181,7 @@
               href
               class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 dark:hover:bg-dark-3 rounded-md"
             >
-              <LockIcon class="w-4 h-4 mr-2" /> Reset Password
+              <LockIcon class="w-4 h-4 mr-2" /> errerrrReset Password
             </a>
             <a
               href

src/layouts/SideMenu.vue

@@ -16,7 +16,7 @@
             src="@/assets/images/logo.svg"
           />
           <span class="hidden xl:block text-white text-lg ml-3">
-            ZhiOS<span class="font-medium">智莺</span>
+            ZhiOS<span class="font-medium"> 智莺</span>
           </span>
         </router-link>
         <!-- END: Logo -->

src/libs/tippy.js

@@ -2,6 +2,6 @@ import Vue from "vue";
 import VueTippy, { TippyComponent } from "vue-tippy";
 
 Vue.use(VueTippy);
-Vue.component("tippy", TippyComponent);
+Vue.component("Tippy", TippyComponent);
 
 import "tippy.js/themes/light.css";

src/router/index.js

@@ -1,307 +1,389 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
 Vue.use(VueRouter);
 
 const routes = [
-  {
-    path: "/",
-    component: () => import(/* webpackChunkName: "main" */ '@/layouts/SideMenu'),
-    children: [
-      {
-        path: "/",
-        name: "side-menu-dashboard",
-        component: () => import('@/views/Dashboard')
-      },
-      {
-        path: "inbox",
-        name: "side-menu-inbox",
-        component: () => import('@/views/Inbox')
-      },
-      {
-        path: "file-manager",
-        name: "side-menu-file-manager",
-        component: () => import('@/views/FileManager')
-      },
-      {
-        path: "point-of-sale",
-        name: "side-menu-point-of-sale",
-        component: () => import('@/views/PointOfSale')
-      },
-      {
-        path: "chat",
-        name: "side-menu-chat",
-        component: () => import('@/views/Chat')
-      },
-      {
-        path: "post",
-        name: "side-menu-post",
-        component: () => import('@/views/Post')
-      },
-      {
-        path: "crud-data-list",
-        name: "side-menu-crud-data-list",
-        component: () => import('@/views/CrudDataList')
-      },
-      {
-        path: "crud-form",
-        name: "side-menu-crud-form",
-        component: () => import('@/views/CrudForm')
-      },
-      {
-        path: "users-layout-1",
-        name: "side-menu-users-layout-1",
-        component: () => import('@/views/UsersLayout1')
-      },
-      {
-        path: "users-layout-2",
-        name: "side-menu-users-layout-2",
-        component: () => import('@/views/UsersLayout2')
-      },
-      {
-        path: "users-layout-3",
-        name: "side-menu-users-layout-3",
-        component: () => import('@/views/UsersLayout3')
-      },
-      {
-        path: "profile-overview-1",
-        name: "side-menu-profile-overview-1",
-        component: () => import('@/views/ProfileOverview1')
-      },
-      {
-        path: "profile-overview-2",
-        name: "side-menu-profile-overview-2",
-        component: () => import('@/views/ProfileOverview2')
-      },
-      {
-        path: "profile-overview-3",
-        name: "side-menu-profile-overview-3",
+	{
+		path: '/',
+		component: () => import(/* webpackChunkName: 'main' */ '@/layouts/SideMenu'),
+		children: [
+			{
+				path: '/',
+				name: 'side-menu-dashboard',
+				meta: {title: '会员中心'},
+				component: () => import('@/views/Dashboard')
+			},
+			{
+				path: 'inbox',
+				name: 'side-menu-inbox',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Inbox')
+			},
+			{
+				path: 'file-manager',
+				name: 'side-menu-file-manager',
+				meta: {title: '文件管理'},
+				component: () => import('@/views/FileManager')
+			},
+			{
+				path: 'point-of-sale',
+				name: 'side-menu-point-of-sale',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/PointOfSale')
+			},
+			{
+				path: 'chat',
+				name: 'side-menu-chat',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Chat')
+			},
+			{
+				path: 'post',
+				name: 'side-menu-post',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Post')
+			},
+			{
+				path: 'crud-data-list',
+				name: 'side-menu-crud-data-list',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/CrudDataList')
+			},
+			{
+				path: 'crud-form',
+				name: 'side-menu-crud-form',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/CrudForm')
+			},
+			{
+				path: 'users-layout-1',
+				name: 'side-menu-users-layout-1',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/UsersLayout1')
+			},
+			{
+				path: 'users-layout-2',
+				name: 'side-menu-users-layout-2',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/UsersLayout2')
+			},
+			{
+				path: 'users-layout-3',
+				name: 'side-menu-users-layout-3',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/UsersLayout3')
+			},
+			{
+				path: 'profile-overview-1',
+				name: 'side-menu-profile-overview-1',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/ProfileOverview1')
+			},
+			{
+				path: 'profile-overview-2',
+				name: 'side-menu-profile-overview-2',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/ProfileOverview2')
+			},
+			{
+        path: 'profile-overview-3',
+        name: 'side-menu-profile-overview-3',
         component: () => import('@/views/ProfileOverview3')
-      },
-      {
-        path: "wizard-layout-1",
-        name: "side-menu-wizard-layout-1",
-        component: () => import('@/views/WizardLayout1')
-      },
-      {
-        path: "wizard-layout-2",
-        name: "side-menu-wizard-layout-2",
-        component: () => import('@/views/WizardLayout2')
-      },
-      {
-        path: "wizard-layout-3",
-        name: "side-menu-wizard-layout-3",
-        component: () => import('@/views/WizardLayout3')
-      },
-      {
-        path: "blog-layout-1",
-        name: "side-menu-blog-layout-1",
-        component: () => import('@/views/BlogLayout1')
-      },
-      {
-        path: "blog-layout-2",
-        name: "side-menu-blog-layout-2",
-        component: () => import('@/views/BlogLayout2')
-      },
-      {
-        path: "blog-layout-3",
-        name: "side-menu-blog-layout-3",
-        component: () => import('@/views/BlogLayout3')
-      },
-      {
-        path: "pricing-layout-1",
-        name: "side-menu-pricing-layout-1",
-        component: () => import('@/views/PricingLayout1')
-      },
-      {
-        path: "pricing-layout-2",
-        name: "side-menu-pricing-layout-2",
-        component: () => import('@/views/PricingLayout2')
-      },
-      {
-        path: "invoice-layout-1",
-        name: "side-menu-invoice-layout-1",
-        component: () => import('@/views/InvoiceLayout1')
-      },
-      {
-        path: "invoice-layout-2",
-        name: "side-menu-invoice-layout-2",
-        component: () => import('@/views/InvoiceLayout2')
-      },
-      {
-        path: "faq-layout-1",
-        name: "side-menu-faq-layout-1",
-        component: () => import('@/views/FaqLayout1')
-      },
-      {
-        path: "faq-layout-2",
-        name: "side-menu-faq-layout-2",
-        component: () => import('@/views/FaqLayout2')
-      },
-      {
-        path: "faq-layout-3",
-        name: "side-menu-faq-layout-3",
-        component: () => import('@/views/FaqLayout3')
-      },
-      {
-        path: "update-profile",
-        name: "side-menu-update-profile",
-        component: () => import('@/views/UpdateProfile')
-      },
-      {
-        path: "change-password",
-        name: "side-menu-change-password",
-        component: () => import('@/views/ChangePassword')
-      },
-      {
-        path: "regular-table",
-        name: "side-menu-regular-table",
-        component: () => import('@/views/RegularTable')
-      },
-      {
-        path: "tabulator",
-        name: "side-menu-tabulator",
-        component: () => import('@/views/Tabulator')
-      },
-      {
-        path: "accordion",
-        name: "side-menu-accordion",
-        component: () => import('@/views/Accordion')
-      },
-      {
-        path: "button",
-        name: "side-menu-button",
-        component: () => import('@/views/Button')
-      },
-      {
-        path: "modal",
-        name: "side-menu-modal",
-        component: () => import('@/views/Modal')
-      },
-      {
-        path: "alert",
-        name: "side-menu-alert",
-        component: () => import('@/views/Alert')
-      },
-      {
-        path: "progress-bar",
-        name: "side-menu-progress-bar",
-        component: () => import('@/views/ProgressBar')
-      },
-      {
-        path: "tooltip",
-        name: "side-menu-tooltip",
-        component: () => import('@/views/Tooltip')
-      },
-      {
-        path: "dropdown",
-        name: "side-menu-dropdown",
-        component: () => import('@/views/Dropdown')
-      },
-      {
-        path: "toast",
-        name: "side-menu-toast",
-        component: () => import('@/views/Toast')
-      },
-      {
-        path: "typography",
-        name: "side-menu-typography",
-        component: () => import('@/views/Typography')
-      },
-      {
-        path: "icon",
-        name: "side-menu-icon",
-        component: () => import('@/views/Icon')
-      },
-      {
-        path: "loading-icon",
-        name: "side-menu-loading-icon",
-        component: () => import('@/views/LoadingIcon')
-      },
-      {
-        path: "regular-form",
-        name: "side-menu-regular-form",
-        component: () => import('@/views/RegularForm')
-      },
-      {
-        path: "datepicker",
-        name: "side-menu-datepicker",
-        component: () => import('@/views/Datepicker')
-      },
-      {
-        path: "tail-select",
-        name: "side-menu-tail-select",
-        component: () => import('@/views/TailSelect')
-      },
-      {
-        path: "file-upload",
-        name: "side-menu-file-upload",
-        component: () => import('@/views/FileUpload')
-      },
-      {
-        path: "wysiwyg-editor",
-        name: "side-menu-wysiwyg-editor",
-        component: () => import('@/views/WysiwygEditor')
-      },
-      {
-        path: "validation",
-        name: "side-menu-validation",
-        component: () => import('@/views/Validation')
-      },
-      {
-        path: "chart",
-        name: "side-menu-chart",
-        component: () => import('@/views/Chart')
-      },
-      {
-        path: "slider",
-        name: "side-menu-slider",
-        component: () => import('@/views/Slider')
-      },
-      {
-        path: "image-zoom",
-        name: "side-menu-image-zoom",
-        component: () => import('@/views/ImageZoom')
-      }
-    ]
-  },
-  {
-    path: "/test",
-    name: "test",
-    component: () => import('@/views/Inbox')
-  },
-  {
-    path: "/login",
-    name: "login",
-    component: () => import('@/views/Login')
-  },
-  {
-    path: "/register",
-    name: "register",
-    component: () => import('@/views/Register')
-  },
-  {
-    path: "/404",
-    name: "error-page",
-    component: () => import('@/views/ErrorPage')
-  },
-  {
-    path: "*",
-    redirect: '/404',
-    hidden: true,
-  }
+			},
+			{
+				path: 'wizard-layout-1',
+				name: 'side-menu-wizard-layout-1',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/WizardLayout1')
+			},
+			{
+				path: 'wizard-layout-2',
+				name: 'side-menu-wizard-layout-2',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/WizardLayout2')
+			},
+			{
+				path: 'wizard-layout-3',
+				name: 'side-menu-wizard-layout-3',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/WizardLayout3')
+			},
+			{
+				path: 'blog-layout-1',
+				name: 'side-menu-blog-layout-1',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/BlogLayout1')
+			},
+			{
+				path: 'blog-layout-2',
+				name: 'side-menu-blog-layout-2',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/BlogLayout2')
+			},
+			{
+				path: 'blog-layout-3',
+				name: 'side-menu-blog-layout-3',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/BlogLayout3')
+			},
+			{
+				path: 'pricing-layout-1',
+				name: 'side-menu-pricing-layout-1',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/PricingLayout1')
+			},
+			{
+				path: 'pricing-layout-2',
+				name: 'side-menu-pricing-layout-2',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/PricingLayout2')
+			},
+			{
+				path: 'invoice-layout-1',
+				name: 'side-menu-invoice-layout-1',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/InvoiceLayout1')
+			},
+			{
+				path: 'invoice-layout-2',
+				name: 'side-menu-invoice-layout-2',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/InvoiceLayout2')
+			},
+			{
+				path: 'faq-layout-1',
+				name: 'side-menu-faq-layout-1',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/FaqLayout1')
+			},
+			{
+				path: 'faq-layout-2',
+				name: 'side-menu-faq-layout-2',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/FaqLayout2')
+			},
+			{
+				path: 'faq-layout-3',
+				name: 'side-menu-faq-layout-3',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/FaqLayout3')
+			},
+			{
+				path: 'update-profile',
+				name: 'side-menu-update-profile',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/UpdateProfile')
+			},
+			{
+				path: 'change-password',
+				name: 'side-menu-change-password',
+				component: () => import('@/views/ChangePassword')
+			},
+			{
+				path: 'regular-table',
+				name: 'side-menu-regular-table',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/RegularTable')
+			},
+			{
+				path: 'tabulator',
+				name: 'side-menu-tabulator',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Tabulator')
+			},
+			{
+				path: 'accordion',
+				name: 'side-menu-accordion',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Accordion')
+			},
+			{
+				path: 'button',
+				name: 'side-menu-button',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Button')
+			},
+			{
+				path: 'modal',
+				name: 'side-menu-modal',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Modal')
+			},
+			{
+				path: 'alert',
+				name: 'side-menu-alert',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Alert')
+			},
+			{
+				path: 'progress-bar',
+				name: 'side-menu-progress-bar',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/ProgressBar')
+			},
+			{
+				path: 'tooltip',
+				name: 'side-menu-tooltip',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Tooltip')
+			},
+			{
+				path: 'dropdown',
+				name: 'side-menu-dropdown',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Dropdown')
+			},
+			{
+				path: 'toast',
+				name: 'side-menu-toast',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Toast')
+			},
+			{
+				path: 'typography',
+				name: 'side-menu-typography',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Typography')
+			},
+			{
+				path: 'icon',
+				name: 'side-menu-icon',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Icon')
+			},
+			{
+				path: 'loading-icon',
+				name: 'side-menu-loading-icon',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/LoadingIcon')
+			},
+			{
+				path: 'regular-form',
+				name: 'side-menu-regular-form',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/RegularForm')
+			},
+			{
+				path: 'datepicker',
+				name: 'side-menu-datepicker',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Datepicker')
+			},
+			{
+				path: 'tail-select',
+				name: 'side-menu-tail-select',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/TailSelect')
+			},
+			{
+				path: 'file-upload',
+				name: 'side-menu-file-upload',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/FileUpload')
+			},
+			{
+				path: 'wysiwyg-editor',
+				name: 'side-menu-wysiwyg-editor',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/WysiwygEditor')
+			},
+			{
+				path: 'validation',
+				name: 'side-menu-validation',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Validation')
+			},
+			{
+				path: 'chart',
+				name: 'side-menu-chart',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Chart')
+			},
+			{
+				path: 'slider',
+				name: 'side-menu-slider',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/Slider')
+			},
+			{
+				path: 'image-zoom',
+				name: 'side-menu-image-zoom',
+				meta: {title: '管理中心'},
+				component: () => import('@/views/ImageZoom')
+			},
+			{
+				path: 'profile',
+				name: 'profile',
+				meta: {title: '个人资料'},
+				component: () => import('@/views/Profile')
+			},
+			{
+				path: 'invitation',
+				name: 'invitation',
+				meta: {title: '邀请赚钱'},
+				component: () => import('@/views/Invitation')
+			},
+			{
+				path: 'app',
+				name: 'app',
+				meta: {title: '应用中心'},
+				component: () => import('@/views/App')
+			},
+			{
+				path: 'myApp',
+				name: 'my-app',
+				meta: {title: '我的应用'},
+				component: () => import('@/views/MyApp')
+			}
+		]
+	},
+	{
+		path: '/test',
+		name: 'test',
+		meta: {title: '管理中心'},
+		component: () => import('@/views/Inbox')
+	},
+	{
+		path: '/login',
+		name: 'login',
+		meta: {title: '管理中心'},
+		component: () => import('@/views/Login')
+	},
+	{
+		path: '/register',
+		name: 'register',
+		meta: {title: '管理中心'},
+		component: () => import('@/views/Register')
+	},
+	{
+		path: '/404',
+		name: 'error-page',
+		meta: {title: '管理中心'},
+		component: () => import('@/views/ErrorPage')
+	},
+	{
+		path: "*",
+		redirect: '/404',
+		hidden: true,
+	}
 ];
 
 const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
-  routes,
-  scrollBehavior(to, from, savedPosition) {
-    if (savedPosition) {
-      return savedPosition;
-    } else {
-      return { x: 0, y: 0 };
-    }
-  }
+	mode: 'history',
+	base: process.env.BASE_URL,
+	routes,
+	scrollBehavior(to, from, savedPosition) {
+		if (savedPosition) {
+			return savedPosition;
+		} else {
+			return {x: 0, y: 0};
+		}
+	}
 });
+router.beforeEach((to, from, next) => {
+	document.title = to.meta.title ? to.meta.title + ' - ZhiOS智莺' : 'ZhiOS智莺'
+	next()
+})
 
 export default router;

src/store/side-menu.js

@@ -2,34 +2,34 @@ const state = () => {
   return {
     menu: [
       {
-        icon: "HomeIcon",
-        pageName: "side-menu-dashboard",
-        title: "会员中心"
+        icon: 'HomeIcon',
+        pageName: 'side-menu-dashboard',
+        title: '会员中心'
       },
       {
-        icon: "BoxIcon",
-        pageName: "profile-overview-3",
-        title: "个人资料"
+        icon: 'BoxIcon',
+        pageName: 'profile',
+        title: '个人资料'
       },
       {
-        icon: "GridIcon",
-        pageName: "side-menu-file-manager",
-        title: "我的应用"
+        icon: 'GridIcon',
+        pageName: 'my-app',
+        title: '我的应用'
       },
       {
-        icon: "DollarSignIcon",
-        pageName: "side-menu-point-of-sale",
-        title: "财务管理"
+        icon: 'DollarSignIcon',
+        pageName: 'side-menu-point-of-sale',
+        title: '财务管理'
       },
       {
-        icon: "UsersIcon",
-        pageName: "side-menu-post",
-        title: "邀请好友"
+        icon: 'UsersIcon',
+        pageName: 'invitation',
+        title: '推广赚钱'
       },
       {
-        icon: "MessageSquareIcon",
-        pageName: "side-menu-chat",
-        title: "消息中心"
+        icon: 'MessageSquareIcon',
+        pageName: 'side-menu-chat',
+        title: '消息中心'
       }
     ]
   };

src/views/App.vue

@@ -0,0 +1,383 @@
+<template>
+  <div>
+    <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
+      <h2 class="text-lg font-medium mr-auto">Point of Sale</h2>
+      <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
+        <a
+          href="javascript:;"
+          data-toggle="modal"
+          data-target="#new-order-modal"
+          class="button text-white bg-theme-1 shadow-md mr-2"
+          >New Order</a
+        >
+        <div class="pos-dropdown dropdown ml-auto sm:ml-0">
+          <button
+            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+          >
+            <span class="w-5 h-5 flex items-center justify-center">
+              <ChevronDownIcon class="w-4 h-4" />
+            </span>
+          </button>
+          <div class="pos-dropdown__dropdown-box dropdown-box">
+            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+              <a
+                href=""
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+              >
+                <ActivityIcon class="w-4 h-4 mr-2" />
+                <span class="truncate"
+                  >INV-0206020 - {{ $f()[3].users[0].name }}</span
+                >
+              </a>
+              <a
+                href=""
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+              >
+                <ActivityIcon class="w-4 h-4 mr-2" />
+                <span class="truncate"
+                  >INV-0206022 - {{ $f()[4].users[0].name }}</span
+                >
+              </a>
+              <a
+                href=""
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+              >
+                <ActivityIcon class="w-4 h-4 mr-2" />
+                <span class="truncate"
+                  >INV-0206021 - {{ $f()[5].users[0].name }}</span
+                >
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pos intro-y grid grid-cols-12 gap-5 mt-5">
+      <!-- BEGIN: Item List -->
+      <div class="intro-y col-span-12 lg:col-span-8">
+        <div class="lg:flex intro-y">
+          <div class="relative text-gray-700 dark:text-gray-300">
+            <input
+              type="text"
+              class="input input--lg w-full lg:w-64 box pr-10 placeholder-theme-13"
+              placeholder="Search item..."
+            />
+            <SearchIcon
+              class="w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0"
+            />
+          </div>
+          <select
+            class="input input--lg box w-full lg:w-auto mt-3 lg:mt-0 ml-auto"
+          >
+            <option>Sort By</option>
+            <option>A to Z</option>
+            <option>Z to A</option>
+            <option>Lowest Price</option>
+            <option>Highest Price</option>
+          </select>
+        </div>
+        <div class="grid grid-cols-12 gap-5 mt-5">
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Soup</div>
+            <div class="text-gray-600">5 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box bg-theme-1 dark:bg-theme-1 p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base text-white">Pancake & Toast</div>
+            <div class="text-theme-25 dark:text-gray-400">8 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Pasta</div>
+            <div class="text-gray-600">4 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Waffle</div>
+            <div class="text-gray-600">3 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Snacks</div>
+            <div class="text-gray-600">8 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Deserts</div>
+            <div class="text-gray-600">8 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Beverage</div>
+            <div class="text-gray-600">9 Items</div>
+          </div>
+        </div>
+        <div class="grid grid-cols-12 gap-5 mt-5 pt-5 border-t border-theme-5">
+          <a
+            v-for="(faker, fakerKey) in $_.take($f(), 8)"
+            :key="fakerKey"
+            href="javascript:;"
+            data-toggle="modal"
+            data-target="#add-item-modal"
+            class="intro-y block col-span-12 sm:col-span-4 xxl:col-span-3"
+          >
+            <div class="box rounded-md p-3 relative zoom-in">
+              <div class="flex-none pos-image relative block">
+                <div class="pos-image__preview image-fit">
+                  <img
+                    alt=""
+                    :src="require(`@/assets/images/${faker.foods[0].image}`)"
+                  />
+                </div>
+              </div>
+              <div class="block font-medium text-center truncate mt-3">
+                {{ faker.foods[0].name }}
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <!-- END: Item List -->
+      <!-- BEGIN: Ticket -->
+      <div class="col-span-12 lg:col-span-4">
+        <div class="intro-y pr-1">
+          <div class="box p-2">
+            <div class="pos__tabs nav-tabs justify-center flex">
+              <a
+                data-toggle="tab"
+                data-target="#ticket"
+                href="javascript:;"
+                class="flex-1 py-2 rounded-md text-center active"
+                >Ticket</a
+              >
+              <a
+                data-toggle="tab"
+                data-target="#details"
+                href="javascript:;"
+                class="flex-1 py-2 rounded-md text-center"
+                >Details</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="tab-content">
+          <div id="ticket" class="tab-content__pane active">
+            <div class="pos__ticket box p-2 mt-5">
+              <a
+                v-for="(faker, fakerKey) in $_.take($f(), 5)"
+                :key="fakerKey"
+                href="javascript:;"
+                data-toggle="modal"
+                data-target="#add-item-modal"
+                class="flex items-center p-3 cursor-pointer transition duration-300 ease-in-out bg-white dark:bg-dark-3 hover:bg-gray-200 dark:hover:bg-dark-1 rounded-md"
+              >
+                <div class="pos__ticket__item-name truncate mr-1">
+                  {{ faker.foods[0].name }}
+                </div>
+                <div class="text-gray-600">x 1</div>
+                <EditIcon class="w-4 h-4 text-gray-600 ml-2" />
+                <div class="ml-auto">${{ faker.totals[0] }}</div>
+              </a>
+            </div>
+            <div class="box flex p-5 mt-5">
+              <div class="w-full relative text-gray-700">
+                <input
+                  type="text"
+                  class="input input--lg w-full bg-gray-200 pr-10 placeholder-theme-13"
+                  placeholder="Use coupon code..."
+                />
+                <SearchIcon
+                  class="w-4 h-4 hidden sm:absolute my-auto inset-y-0 mr-3 right-0"
+                />
+              </div>
+              <button class="button text-white bg-theme-1 ml-2">Apply</button>
+            </div>
+            <div class="box p-5 mt-5">
+              <div class="flex">
+                <div class="mr-auto">Subtotal</div>
+                <div>$250</div>
+              </div>
+              <div class="flex mt-4">
+                <div class="mr-auto">Discount</div>
+                <div class="text-theme-6">-$20</div>
+              </div>
+              <div class="flex mt-4">
+                <div class="mr-auto">Tax</div>
+                <div>15%</div>
+              </div>
+              <div
+                class="flex mt-4 pt-4 border-t border-gray-200 dark:border-dark-5"
+              >
+                <div class="mr-auto font-medium text-base">Charge</div>
+                <div class="font-medium text-base">$220</div>
+              </div>
+            </div>
+            <div class="flex mt-5">
+              <button
+                class="button w-32 border border-gray-400 dark:border-dark-5 text-gray-600 dark:text-gray-300"
+              >
+                Clear Items
+              </button>
+              <button
+                class="button w-32 text-white bg-theme-1 shadow-md ml-auto"
+              >
+                Charge
+              </button>
+            </div>
+          </div>
+          <div id="details" class="tab-content__pane">
+            <div class="box p-5 mt-5">
+              <div class="flex items-center border-b dark:border-dark-5 pb-5">
+                <div class="">
+                  <div class="text-gray-600">Time</div>
+                  <div>02/06/20 02:10 PM</div>
+                </div>
+                <ClockIcon class="w-4 h-4 text-gray-600 ml-auto" />
+              </div>
+              <div class="flex items-center border-b dark:border-dark-5 py-5">
+                <div class="">
+                  <div class="text-gray-600">Customer</div>
+                  <div>{{ $f()[0].users[0].name }}</div>
+                </div>
+                <UserIcon class="w-4 h-4 text-gray-600 ml-auto" />
+              </div>
+              <div class="flex items-center border-b dark:border-dark-5 py-5">
+                <div class="">
+                  <div class="text-gray-600">People</div>
+                  <div>3</div>
+                </div>
+                <UsersIcon class="w-4 h-4 text-gray-600 ml-auto" />
+              </div>
+              <div class="flex items-center pt-5">
+                <div class="">
+                  <div class="text-gray-600">Table</div>
+                  <div>21</div>
+                </div>
+                <MicIcon class="w-4 h-4 text-gray-600 ml-auto" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- END: Ticket -->
+    </div>
+    <!-- BEGIN: New Order Modal -->
+    <div id="new-order-modal" class="modal">
+      <div class="modal__content">
+        <div
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+        >
+          <h2 class="font-medium text-base mr-auto">New Order</h2>
+        </div>
+        <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
+          <div class="col-span-12">
+            <label>Name</label>
+            <input
+              type="text"
+              class="input w-full border mt-2 flex-1"
+              placeholder="Customer name"
+            />
+          </div>
+          <div class="col-span-12">
+            <label>Table</label>
+            <input
+              type="text"
+              class="input w-full border mt-2 flex-1"
+              placeholder="Customer table"
+            />
+          </div>
+          <div class="col-span-12">
+            <label>Number of People</label>
+            <input
+              type="text"
+              class="input w-full border mt-2 flex-1"
+              placeholder="People"
+            />
+          </div>
+        </div>
+        <div
+          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+        >
+          <button
+            type="button"
+            data-dismiss="modal"
+            class="button w-32 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+          >
+            Cancel
+          </button>
+          <button type="button" class="button w-32 bg-theme-1 text-white">
+            Create Ticket
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- END: New Order Modal -->
+    <!-- BEGIN: Add Item Modal -->
+    <div id="add-item-modal" class="modal">
+      <div class="modal__content">
+        <div
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+        >
+          <h2 class="font-medium text-base mr-auto">
+            {{ $f()[0].foods[0].name }}
+          </h2>
+        </div>
+        <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
+          <div class="col-span-12">
+            <label>Quantity</label>
+            <div class="flex mt-2 flex-1">
+              <button
+                type="button"
+                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 mr-1"
+              >
+                -
+              </button>
+              <input
+                type="text"
+                class="input w-full border text-center"
+                placeholder="Item quantity"
+                value="2"
+              />
+              <button
+                type="button"
+                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 ml-1"
+              >
+                +
+              </button>
+            </div>
+          </div>
+          <div class="col-span-12">
+            <label>Notes</label>
+            <textarea
+              class="input w-full border mt-2 flex-1"
+              placeholder="Item notes"
+            ></textarea>
+          </div>
+        </div>
+        <div
+          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+        >
+          <button
+            type="button"
+            data-dismiss="modal"
+            class="button w-24 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+          >
+            Cancel
+          </button>
+          <button type="button" class="button w-24 bg-theme-1 text-white">
+            Add Item
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- END: Add Item Modal -->
+  </div>
+</template>

src/views/Invitation.vue

@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <div class="intro-y flex items-center mt-8">
+      <h3 class="text-lg font-medium mr-auto">我的推广信息</h3>
+    </div>
+    <div class="grid grid-cols-12 gap-6">
+      <!-- BEGIN: Profile Menu -->
+      <div class="col-span-12 lg:col-span-4 xxl:col-span-3 flex lg:block flex-col-reverse">
+        <div class="intro-y box mt-5">
+          <div class="relative flex items-center p-5">
+            <div class="w-12 h-12 image-fit">
+              <img
+                  alt=""
+                  class="rounded-full"
+                  :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
+              />
+            </div>
+            <div class="ml-4 mr-auto">
+              <div class="font-medium text-base">
+                {{ $f()[0].users[0].name }}
+              </div>
+              <div class="text-gray-600">{{ $f()[0].jobs[0] }}</div>
+            </div>
+            <div class="dropdown">
+              <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
+                <MoreHorizontalIcon
+                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                />
+              </a>
+              <div class="dropdown-box w-56">
+                <div class="dropdown-box__content box dark:bg-dark-1">
+                  <div
+                      class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"
+                  >
+                    Export Options
+                  </div>
+                  <div class="p-2">
+                    <a
+                        href=""
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <ActivityIcon
+                          class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      English
+                    </a>
+                    <a
+                        href=""
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <BoxIcon
+                          class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      Indonesia
+                      <div
+                          class="text-xs text-white px-1 rounded-full bg-theme-6 ml-auto"
+                      >
+                        10
+                      </div>
+                    </a>
+                    <a
+                        href=""
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <LayoutIcon
+                          class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      English
+                    </a>
+                    <a
+                        href=""
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <SidebarIcon
+                          class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      Indonesia
+                    </a>
+                  </div>
+                  <div
+                      class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"
+                  >
+                    <button
+                        type="button"
+                        class="button button--sm bg-theme-1 text-white"
+                    >
+                      Settings
+                    </button>
+                    <button
+                        type="button"
+                        class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+                    >
+                      View Profile
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+            <a
+                class="flex items-center text-theme-1 dark:text-theme-10 font-medium"
+                href=""
+            >
+              <ActivityIcon class="w-4 h-4 mr-2"/>
+              Personal Information
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <BoxIcon class="w-4 h-4 mr-2"/>
+              Account Settings
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <LockIcon class="w-4 h-4 mr-2"/>
+              Change Password
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <SettingsIcon class="w-4 h-4 mr-2"/>
+              User Settings
+            </a>
+          </div>
+          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+            <a class="flex items-center" href="">
+              <ActivityIcon class="w-4 h-4 mr-2"/>
+              Email Settings
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <BoxIcon class="w-4 h-4 mr-2"/>
+              Saved Credit Cards
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <LockIcon class="w-4 h-4 mr-2"/>
+              Social Networks
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <SettingsIcon class="w-4 h-4 mr-2"/>
+              Tax Information
+            </a>
+          </div>
+          <div class="p-5 border-t flex dark:border-dark-5">
+            <button
+                type="button"
+                class="button button--sm block bg-theme-1 text-white"
+            >
+              New Group
+            </button>
+            <button
+                type="button"
+                class="button button--sm border text-gray-700 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+            >
+              New Quick Link
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- END: Profile Menu -->
+      <div class="col-span-12 lg:col-span-8 xxl:col-span-9">
+        <!-- BEGIN: Change Password -->
+        <div class="intro-y box lg:mt-5">
+          <div
+              class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+          >
+            <h2 class="font-medium text-base mr-auto">Change Password</h2>
+          </div>
+          <div class="p-5">
+            <div>
+              <label>Old Password</label>
+              <input
+                  type="password"
+                  class="input w-full border mt-2"
+                  placeholder="Input text"
+              />
+            </div>
+            <div class="mt-3">
+              <label>New Password</label>
+              <input
+                  type="password"
+                  class="input w-full border mt-2"
+                  placeholder="Input text"
+              />
+            </div>
+            <div class="mt-3">
+              <label>Confirm New Password</label>
+              <input
+                  type="password"
+                  class="input w-full border mt-2"
+                  placeholder="Input text"
+              />
+            </div>
+            <button type="button" class="button bg-theme-1 text-white mt-4">
+              Change Password
+            </button>
+          </div>
+        </div>
+        <!-- END: Change Password -->
+      </div>
+    </div>
+  </div>
+</template>

src/views/MyApp.vue

@@ -0,0 +1,383 @@
+<template>
+  <div>
+    <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
+      <h2 class="text-lg font-medium mr-auto">Point of Sale</h2>
+      <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
+        <a
+          href="javascript:;"
+          data-toggle="modal"
+          data-target="#new-order-modal"
+          class="button text-white bg-theme-1 shadow-md mr-2"
+          >New Order</a
+        >
+        <div class="pos-dropdown dropdown ml-auto sm:ml-0">
+          <button
+            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+          >
+            <span class="w-5 h-5 flex items-center justify-center">
+              <ChevronDownIcon class="w-4 h-4" />
+            </span>
+          </button>
+          <div class="pos-dropdown__dropdown-box dropdown-box">
+            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+              <a
+                href=""
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+              >
+                <ActivityIcon class="w-4 h-4 mr-2" />
+                <span class="truncate"
+                  >INV-0206020 - {{ $f()[3].users[0].name }}</span
+                >
+              </a>
+              <a
+                href=""
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+              >
+                <ActivityIcon class="w-4 h-4 mr-2" />
+                <span class="truncate"
+                  >INV-0206022 - {{ $f()[4].users[0].name }}</span
+                >
+              </a>
+              <a
+                href=""
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+              >
+                <ActivityIcon class="w-4 h-4 mr-2" />
+                <span class="truncate"
+                  >INV-0206021 - {{ $f()[5].users[0].name }}</span
+                >
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pos intro-y grid grid-cols-12 gap-5 mt-5">
+      <!-- BEGIN: Item List -->
+      <div class="intro-y col-span-12 lg:col-span-8">
+        <div class="lg:flex intro-y">
+          <div class="relative text-gray-700 dark:text-gray-300">
+            <input
+              type="text"
+              class="input input--lg w-full lg:w-64 box pr-10 placeholder-theme-13"
+              placeholder="Search item..."
+            />
+            <SearchIcon
+              class="w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0"
+            />
+          </div>
+          <select
+            class="input input--lg box w-full lg:w-auto mt-3 lg:mt-0 ml-auto"
+          >
+            <option>Sort By</option>
+            <option>A to Z</option>
+            <option>Z to A</option>
+            <option>Lowest Price</option>
+            <option>Highest Price</option>
+          </select>
+        </div>
+        <div class="grid grid-cols-12 gap-5 mt-5">
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Soup</div>
+            <div class="text-gray-600">5 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box bg-theme-1 dark:bg-theme-1 p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base text-white">Pancake & Toast</div>
+            <div class="text-theme-25 dark:text-gray-400">8 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Pasta</div>
+            <div class="text-gray-600">4 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Waffle</div>
+            <div class="text-gray-600">3 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Snacks</div>
+            <div class="text-gray-600">8 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Deserts</div>
+            <div class="text-gray-600">8 Items</div>
+          </div>
+          <div
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
+          >
+            <div class="font-medium text-base">Beverage</div>
+            <div class="text-gray-600">9 Items</div>
+          </div>
+        </div>
+        <div class="grid grid-cols-12 gap-5 mt-5 pt-5 border-t border-theme-5">
+          <a
+            v-for="(faker, fakerKey) in $_.take($f(), 8)"
+            :key="fakerKey"
+            href="javascript:;"
+            data-toggle="modal"
+            data-target="#add-item-modal"
+            class="intro-y block col-span-12 sm:col-span-4 xxl:col-span-3"
+          >
+            <div class="box rounded-md p-3 relative zoom-in">
+              <div class="flex-none pos-image relative block">
+                <div class="pos-image__preview image-fit">
+                  <img
+                    alt=""
+                    :src="require(`@/assets/images/${faker.foods[0].image}`)"
+                  />
+                </div>
+              </div>
+              <div class="block font-medium text-center truncate mt-3">
+                {{ faker.foods[0].name }}
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <!-- END: Item List -->
+      <!-- BEGIN: Ticket -->
+      <div class="col-span-12 lg:col-span-4">
+        <div class="intro-y pr-1">
+          <div class="box p-2">
+            <div class="pos__tabs nav-tabs justify-center flex">
+              <a
+                data-toggle="tab"
+                data-target="#ticket"
+                href="javascript:;"
+                class="flex-1 py-2 rounded-md text-center active"
+                >Ticket</a
+              >
+              <a
+                data-toggle="tab"
+                data-target="#details"
+                href="javascript:;"
+                class="flex-1 py-2 rounded-md text-center"
+                >Details</a
+              >
+            </div>
+          </div>
+        </div>
+        <div class="tab-content">
+          <div id="ticket" class="tab-content__pane active">
+            <div class="pos__ticket box p-2 mt-5">
+              <a
+                v-for="(faker, fakerKey) in $_.take($f(), 5)"
+                :key="fakerKey"
+                href="javascript:;"
+                data-toggle="modal"
+                data-target="#add-item-modal"
+                class="flex items-center p-3 cursor-pointer transition duration-300 ease-in-out bg-white dark:bg-dark-3 hover:bg-gray-200 dark:hover:bg-dark-1 rounded-md"
+              >
+                <div class="pos__ticket__item-name truncate mr-1">
+                  {{ faker.foods[0].name }}
+                </div>
+                <div class="text-gray-600">x 1</div>
+                <EditIcon class="w-4 h-4 text-gray-600 ml-2" />
+                <div class="ml-auto">${{ faker.totals[0] }}</div>
+              </a>
+            </div>
+            <div class="box flex p-5 mt-5">
+              <div class="w-full relative text-gray-700">
+                <input
+                  type="text"
+                  class="input input--lg w-full bg-gray-200 pr-10 placeholder-theme-13"
+                  placeholder="Use coupon code..."
+                />
+                <SearchIcon
+                  class="w-4 h-4 hidden sm:absolute my-auto inset-y-0 mr-3 right-0"
+                />
+              </div>
+              <button class="button text-white bg-theme-1 ml-2">Apply</button>
+            </div>
+            <div class="box p-5 mt-5">
+              <div class="flex">
+                <div class="mr-auto">Subtotal</div>
+                <div>$250</div>
+              </div>
+              <div class="flex mt-4">
+                <div class="mr-auto">Discount</div>
+                <div class="text-theme-6">-$20</div>
+              </div>
+              <div class="flex mt-4">
+                <div class="mr-auto">Tax</div>
+                <div>15%</div>
+              </div>
+              <div
+                class="flex mt-4 pt-4 border-t border-gray-200 dark:border-dark-5"
+              >
+                <div class="mr-auto font-medium text-base">Charge</div>
+                <div class="font-medium text-base">$220</div>
+              </div>
+            </div>
+            <div class="flex mt-5">
+              <button
+                class="button w-32 border border-gray-400 dark:border-dark-5 text-gray-600 dark:text-gray-300"
+              >
+                Clear Items
+              </button>
+              <button
+                class="button w-32 text-white bg-theme-1 shadow-md ml-auto"
+              >
+                Charge
+              </button>
+            </div>
+          </div>
+          <div id="details" class="tab-content__pane">
+            <div class="box p-5 mt-5">
+              <div class="flex items-center border-b dark:border-dark-5 pb-5">
+                <div class="">
+                  <div class="text-gray-600">Time</div>
+                  <div>02/06/20 02:10 PM</div>
+                </div>
+                <ClockIcon class="w-4 h-4 text-gray-600 ml-auto" />
+              </div>
+              <div class="flex items-center border-b dark:border-dark-5 py-5">
+                <div class="">
+                  <div class="text-gray-600">Customer</div>
+                  <div>{{ $f()[0].users[0].name }}</div>
+                </div>
+                <UserIcon class="w-4 h-4 text-gray-600 ml-auto" />
+              </div>
+              <div class="flex items-center border-b dark:border-dark-5 py-5">
+                <div class="">
+                  <div class="text-gray-600">People</div>
+                  <div>3</div>
+                </div>
+                <UsersIcon class="w-4 h-4 text-gray-600 ml-auto" />
+              </div>
+              <div class="flex items-center pt-5">
+                <div class="">
+                  <div class="text-gray-600">Table</div>
+                  <div>21</div>
+                </div>
+                <MicIcon class="w-4 h-4 text-gray-600 ml-auto" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- END: Ticket -->
+    </div>
+    <!-- BEGIN: New Order Modal -->
+    <div id="new-order-modal" class="modal">
+      <div class="modal__content">
+        <div
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+        >
+          <h2 class="font-medium text-base mr-auto">New Order</h2>
+        </div>
+        <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
+          <div class="col-span-12">
+            <label>Name</label>
+            <input
+              type="text"
+              class="input w-full border mt-2 flex-1"
+              placeholder="Customer name"
+            />
+          </div>
+          <div class="col-span-12">
+            <label>Table</label>
+            <input
+              type="text"
+              class="input w-full border mt-2 flex-1"
+              placeholder="Customer table"
+            />
+          </div>
+          <div class="col-span-12">
+            <label>Number of People</label>
+            <input
+              type="text"
+              class="input w-full border mt-2 flex-1"
+              placeholder="People"
+            />
+          </div>
+        </div>
+        <div
+          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+        >
+          <button
+            type="button"
+            data-dismiss="modal"
+            class="button w-32 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+          >
+            Cancel
+          </button>
+          <button type="button" class="button w-32 bg-theme-1 text-white">
+            Create Ticket
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- END: New Order Modal -->
+    <!-- BEGIN: Add Item Modal -->
+    <div id="add-item-modal" class="modal">
+      <div class="modal__content">
+        <div
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+        >
+          <h2 class="font-medium text-base mr-auto">
+            {{ $f()[0].foods[0].name }}
+          </h2>
+        </div>
+        <div class="p-5 grid grid-cols-12 gap-4 row-gap-3">
+          <div class="col-span-12">
+            <label>Quantity</label>
+            <div class="flex mt-2 flex-1">
+              <button
+                type="button"
+                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 mr-1"
+              >
+                -
+              </button>
+              <input
+                type="text"
+                class="input w-full border text-center"
+                placeholder="Item quantity"
+                value="2"
+              />
+              <button
+                type="button"
+                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 ml-1"
+              >
+                +
+              </button>
+            </div>
+          </div>
+          <div class="col-span-12">
+            <label>Notes</label>
+            <textarea
+              class="input w-full border mt-2 flex-1"
+              placeholder="Item notes"
+            ></textarea>
+          </div>
+        </div>
+        <div
+          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+        >
+          <button
+            type="button"
+            data-dismiss="modal"
+            class="button w-24 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+          >
+            Cancel
+          </button>
+          <button type="button" class="button w-24 bg-theme-1 text-white">
+            Add Item
+          </button>
+        </div>
+      </div>
+    </div>
+    <!-- END: Add Item Modal -->
+  </div>
+</template>

src/views/Profile.vue

@@ -0,0 +1,997 @@
+<template>
+  <div>
+    <div class="intro-y flex items-center mt-8">
+      <h2 class="text-lg font-medium mr-auto">Profile Layout</h2>
+    </div>
+    <div class="grid grid-cols-12 gap-6">
+      <!-- BEGIN: Profile Menu -->
+      <div
+        class="col-span-12 lg:col-span-4 xxl:col-span-3 flex lg:block flex-col-reverse"
+      >
+        <div class="intro-y box mt-5">
+          <div class="relative flex items-center p-5">
+            <div class="w-12 h-12 image-fit">
+              <img
+                alt=""
+                class="rounded-full"
+                :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
+              />
+            </div>
+            <div class="ml-4 mr-auto">
+              <div class="font-medium text-base">
+                {{ $f()[0].users[0].name }}
+              </div>
+              <div class="text-gray-600">{{ $f()[0].jobs[0] }}</div>
+            </div>
+            <div class="dropdown">
+              <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
+                <MoreHorizontalIcon
+                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                />
+              </a>
+              <div class="dropdown-box w-56">
+                <div class="dropdown-box__content box dark:bg-dark-1">
+                  <div
+                    class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"
+                  >
+                    Export Options
+                  </div>
+                  <div class="p-2">
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <ActivityIcon
+                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      English
+                    </a>
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <BoxIcon
+                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      Indonesia
+                      <div
+                        class="text-xs text-white px-1 rounded-full bg-theme-6 ml-auto"
+                      >
+                        10
+                      </div>
+                    </a>
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <LayoutIcon
+                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      English
+                    </a>
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <SidebarIcon
+                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      Indonesia
+                    </a>
+                  </div>
+                  <div
+                    class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"
+                  >
+                    <button
+                      type="button"
+                      class="button button--sm bg-theme-1 text-white"
+                    >
+                      Settings
+                    </button>
+                    <button
+                      type="button"
+                      class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+                    >
+                      View Profile
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+            <a
+              class="flex items-center text-theme-1 dark:text-theme-10 font-medium"
+              href=""
+            >
+              <ActivityIcon class="w-4 h-4 mr-2" /> Personal Information
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <BoxIcon class="w-4 h-4 mr-2" /> Account Settings
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <LockIcon class="w-4 h-4 mr-2" /> Change Password
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <SettingsIcon class="w-4 h-4 mr-2" /> User Settings
+            </a>
+          </div>
+          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+            <a class="flex items-center" href="">
+              <ActivityIcon class="w-4 h-4 mr-2" /> Email Settings
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <BoxIcon class="w-4 h-4 mr-2" /> Saved Credit Cards
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <LockIcon class="w-4 h-4 mr-2" /> Social Networks
+            </a>
+            <a class="flex items-center mt-5" href="">
+              <SettingsIcon class="w-4 h-4 mr-2" /> Tax Information
+            </a>
+          </div>
+          <div class="p-5 border-t flex">
+            <button
+              type="button"
+              class="button button--sm block bg-theme-1 text-white"
+            >
+              New Group
+            </button>
+            <button
+              type="button"
+              class="button button--sm border text-gray-700 dark:border-dark-5 dark:text-gray-300 ml-auto"
+            >
+              New Quick Link
+            </button>
+          </div>
+        </div>
+        <div class="intro-y box p-5 bg-theme-1 text-white mt-5">
+          <div class="flex items-center">
+            <div class="font-medium text-lg">Important Update</div>
+            <div
+              class="text-xs bg-white dark:bg-theme-1 dark:text-white text-gray-800 px-1 rounded-md ml-auto"
+            >
+              New
+            </div>
+          </div>
+          <div class="mt-4">
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry's standard dummy text
+            ever since the 1500s.
+          </div>
+          <div class="font-medium flex mt-5">
+            <button
+              type="button"
+              class="button button--sm border border-white text-white dark:border-dark-5 dark:text-gray-300"
+            >
+              Take Action
+            </button>
+            <button
+              type="button"
+              class="button button--sm dark:text-gray-500 ml-auto"
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- END: Profile Menu -->
+      <div class="col-span-12 lg:col-span-8 xxl:col-span-9">
+        <!-- BEGIN: Daily Sales -->
+        <div class="intro-y box lg:mt-5">
+          <div
+            class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+          >
+            <h2 class="font-medium text-base mr-auto">Daily Sales</h2>
+            <div class="dropdown ml-auto sm:hidden">
+              <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
+                <MoreHorizontalIcon
+                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                />
+              </a>
+              <div class="dropdown-box w-40">
+                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <a
+                    href="javascript:;"
+                    class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  >
+                    <FileIcon class="w-4 h-4 mr-2" /> Download Excel
+                  </a>
+                </div>
+              </div>
+            </div>
+            <button
+              class="button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+            >
+              <FileIcon class="w-4 h-4 mr-2" /> Download Excel
+            </button>
+          </div>
+          <div class="p-5">
+            <div class="relative flex items-center">
+              <div class="w-12 h-12 flex-none image-fit">
+                <img
+                  alt=""
+                  class="rounded-full"
+                  :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
+                />
+              </div>
+              <div class="ml-4 mr-auto">
+                <a href="" class="font-medium">{{ $f()[0].users[0].name }}</a>
+                <div class="text-gray-600 mr-5 sm:mr-5">
+                  Bootstrap 4 HTML Admin Template
+                </div>
+              </div>
+              <div class="font-medium text-gray-700 dark:text-gray-500">
+                +$19
+              </div>
+            </div>
+            <div class="relative flex items-center mt-5">
+              <div class="w-12 h-12 flex-none image-fit">
+                <img
+                  alt=""
+                  class="rounded-full"
+                  :src="require(`@/assets/images/${$f()[1].photos[0]}`)"
+                />
+              </div>
+              <div class="ml-4 mr-auto">
+                <a href="" class="font-medium">{{ $f()[1].users[0].name }}</a>
+                <div class="text-gray-600 mr-5 sm:mr-5">
+                  Tailwind HTML Admin Template
+                </div>
+              </div>
+              <div class="font-medium text-gray-700 dark:text-gray-500">
+                +$25
+              </div>
+            </div>
+            <div class="relative flex items-center mt-5">
+              <div class="w-12 h-12 flex-none image-fit">
+                <img
+                  alt=""
+                  class="rounded-full"
+                  :src="require(`@/assets/images/${$f()[2].photos[0]}`)"
+                />
+              </div>
+              <div class="ml-4 mr-auto">
+                <a href="" class="font-medium">{{ $f()[2].users[0].name }}</a>
+                <div class="text-gray-600 mr-5 sm:mr-5">
+                  Vuejs HTML Admin Template
+                </div>
+              </div>
+              <div class="font-medium text-gray-700 dark:text-gray-500">
+                +$21
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- END: Daily Sales -->
+        <!-- BEGIN: Announcement -->
+        <div class="intro-y box mt-5">
+          <div
+            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+          >
+            <h2 class="font-medium text-base mr-auto">Announcement</h2>
+            <button
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+              @click="prevAnnouncement"
+            >
+              <ChevronLeftIcon class="w-4 h-4" />
+            </button>
+            <button
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300"
+              @click="nextAnnouncement"
+            >
+              <ChevronRightIcon class="w-4 h-4" />
+            </button>
+          </div>
+          <VueSlickCarousel
+            ref="announcement"
+            :arrows="false"
+            :dots="false"
+            class="py-5"
+          >
+            <div class="px-5">
+              <div class="font-medium text-lg">Midone Admin Template</div>
+              <div class="text-gray-700 dark:text-gray-600 mt-2">
+                Lorem Ipsum is simply dummy text of the printing and typesetting
+                industry. Lorem Ipsum has been the industry's standard dummy
+                text ever since the 1500s.
+              </div>
+              <div class="flex items-center mt-5">
+                <div
+                  class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium"
+                >
+                  02 June 2021
+                </div>
+                <button
+                  class="button justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                >
+                  View Details
+                </button>
+              </div>
+            </div>
+            <div class="px-5">
+              <div class="font-medium text-lg">Midone Admin Template</div>
+              <div class="text-gray-700 dark:text-gray-600 mt-2">
+                Lorem Ipsum is simply dummy text of the printing and typesetting
+                industry. Lorem Ipsum has been the industry's standard dummy
+                text ever since the 1500s.
+              </div>
+              <div class="flex items-center mt-5">
+                <div
+                  class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium"
+                >
+                  02 June 2021
+                </div>
+                <button
+                  class="button justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                >
+                  View Details
+                </button>
+              </div>
+            </div>
+            <div class="px-5">
+              <div class="font-medium text-lg">Midone Admin Template</div>
+              <div class="text-gray-700 dark:text-gray-600 mt-2">
+                Lorem Ipsum is simply dummy text of the printing and typesetting
+                industry. Lorem Ipsum has been the industry's standard dummy
+                text ever since the 1500s.
+              </div>
+              <div class="flex items-center mt-5">
+                <div
+                  class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium"
+                >
+                  02 June 2021
+                </div>
+                <button
+                  class="button justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                >
+                  View Details
+                </button>
+              </div>
+            </div>
+          </VueSlickCarousel>
+        </div>
+        <!-- END: Announcement -->
+        <!-- BEGIN: Projects -->
+        <div class="intro-y box mt-5">
+          <div
+            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+          >
+            <h2 class="font-medium text-base mr-auto">Projects</h2>
+            <button
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+              @click="prevNewProjects"
+            >
+              <ChevronLeftIcon class="w-4 h-4" />
+            </button>
+            <button
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300"
+              @click="nextNewProjects"
+            >
+              <ChevronRightIcon class="w-4 h-4" />
+            </button>
+          </div>
+          <VueSlickCarousel
+            ref="projects"
+            :arrows="false"
+            :dots="false"
+            class="py-5"
+          >
+            <div class="px-5">
+              <div class="font-medium text-lg">Midone Admin Template</div>
+              <div class="text-gray-700 dark:text-gray-600 mt-2">
+                Lorem Ipsum is simply dummy text of the printing and typesetting
+                industry. Lorem Ipsum has been the industry's standard dummy
+                text ever since the 1500s.
+              </div>
+              <div class="mt-5">
+                <div class="flex">
+                  <div class="text-gray-700 dark:text-gray-600 mr-auto">
+                    Pending Tasks
+                  </div>
+                  <div class="font-medium">20%</div>
+                </div>
+                <div
+                  class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                >
+                  <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
+                </div>
+              </div>
+            </div>
+            <div class="px-5">
+              <div class="font-medium text-lg">Midone Admin Template</div>
+              <div class="text-gray-700 dark:text-gray-600 mt-2">
+                Lorem Ipsum is simply dummy text of the printing and typesetting
+                industry. Lorem Ipsum has been the industry's standard dummy
+                text ever since the 1500s.
+              </div>
+              <div class="mt-5">
+                <div class="flex">
+                  <div class="text-gray-700 dark:text-gray-600 mr-auto">
+                    Pending Tasks
+                  </div>
+                  <div class="font-medium">20%</div>
+                </div>
+                <div
+                  class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                >
+                  <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
+                </div>
+              </div>
+            </div>
+            <div class="px-5">
+              <div class="font-medium text-lg">Midone Admin Template</div>
+              <div class="text-gray-700 dark:text-gray-600 mt-2">
+                Lorem Ipsum is simply dummy text of the printing and typesetting
+                industry. Lorem Ipsum has been the industry's standard dummy
+                text ever since the 1500s.
+              </div>
+              <div class="mt-5">
+                <div class="flex">
+                  <div class="text-gray-700 dark:text-gray-600 mr-auto">
+                    Pending Tasks
+                  </div>
+                  <div class="font-medium">20%</div>
+                </div>
+                <div
+                  class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                >
+                  <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
+                </div>
+              </div>
+            </div>
+          </VueSlickCarousel>
+        </div>
+        <!-- END: Projects -->
+        <!-- BEGIN: Today's Schedule -->
+        <div class="intro-y box mt-5">
+          <div
+            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+          >
+            <h2 class="font-medium text-base mr-auto">Today's Schedule</h2>
+            <button
+              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+              @click="prevTodaysSchedule"
+            >
+              <ChevronLeftIcon class="w-4 h-4" />
+            </button>
+            <button
+              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700 dark:text-gray-300"
+              @click="nextTodaysSchedule"
+            >
+              <ChevronRightIcon class="w-4 h-4" />
+            </button>
+          </div>
+          <VueSlickCarousel
+            ref="todays-schedule"
+            :arrows="false"
+            :dots="false"
+            class="py-5"
+          >
+            <div class="px-5 text-center sm:text-left">
+              <div class="font-medium">Developing rest API with Laravel 7</div>
+              <div
+                class="text-theme-1 dark:text-theme-10 font-medium text-lg mt-2"
+              >
+                11:15AM - 12:30PM
+              </div>
+              <div class="flex flex-col sm:flex-row items-center mt-5">
+                <div class="flex items-center text-gray-600">
+                  <MapPinIcon class="hidden sm:block w-4 h-4 mr-2" />
+                  1396 Pooh Bear Lane, New Market
+                </div>
+                <button
+                  class="button button--sm justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
+                >
+                  View On Map
+                </button>
+              </div>
+            </div>
+            <div class="px-5 text-center sm:text-left">
+              <div class="font-medium">Developing rest API with Laravel 7</div>
+              <div
+                class="text-theme-1 dark:text-theme-10 font-medium text-lg mt-2"
+              >
+                11:15AM - 12:30PM
+              </div>
+              <div class="flex flex-col sm:flex-row items-center mt-5">
+                <div class="flex items-center text-gray-600">
+                  <MapPinIcon class="hidden sm:block w-4 h-4 mr-2" />
+                  1396 Pooh Bear Lane, New Market
+                </div>
+                <button
+                  class="button button--sm justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
+                >
+                  View On Map
+                </button>
+              </div>
+            </div>
+            <div class="px-5 text-center sm:text-left">
+              <div class="font-medium">Developing rest API with Laravel 7</div>
+              <div
+                class="text-theme-1 dark:text-theme-10 font-medium text-lg mt-2"
+              >
+                11:15AM - 12:30PM
+              </div>
+              <div class="flex flex-col sm:flex-row items-center mt-5">
+                <div class="flex items-center text-gray-600">
+                  <MapPinIcon class="hidden sm:block w-4 h-4 mr-2" />
+                  1396 Pooh Bear Lane, New Market
+                </div>
+                <button
+                  class="button button--sm justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
+                >
+                  View On Map
+                </button>
+              </div>
+            </div>
+          </VueSlickCarousel>
+        </div>
+        <!-- END: Today's Schedule -->
+        <!-- BEGIN: Top Products -->
+        <div class="intro-y box mt-5">
+          <div
+            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+          >
+            <h2 class="font-medium text-base mr-auto">Top Products</h2>
+            <div class="dropdown ml-auto">
+              <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
+                <MoreHorizontalIcon
+                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                />
+              </a>
+              <div class="dropdown-box w-40">
+                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <a
+                    href=""
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  >
+                    <Edit2Icon class="w-4 h-4 mr-2" /> New Chat
+                  </a>
+                  <a
+                    href=""
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  >
+                    <TrashIcon class="w-4 h-4 mr-2" /> Delete
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="p-5">
+            <div
+              class="boxed-tabs nav-tabs justify-center flex flex-col sm:flex-row text-gray-700 dark:text-gray-300"
+            >
+              <a
+                data-toggle="tab"
+                data-target="#laravel"
+                href="javascript:;"
+                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box dark:bg-dark-5 text-center sm:mx-2 active"
+              >
+                <BoxIcon class="w-6 h-6 mb-2 mx-auto" /> Laravel
+              </a>
+              <a
+                data-toggle="tab"
+                data-target="#symfony"
+                href="javascript:;"
+                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box dark:bg-dark-5 text-center sm:mx-2"
+              >
+                <InboxIcon class="w-6 h-6 mb-2 mx-auto" />
+                Symfony
+              </a>
+              <a
+                data-toggle="tab"
+                data-target="#bootstrap"
+                href="javascript:;"
+                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box dark:bg-dark-5 text-center sm:mx-2"
+              >
+                <ActivityIcon class="w-6 h-6 mb-2 mx-auto" />
+                Bootstrap
+              </a>
+            </div>
+            <div class="tab-content mt-8">
+              <div id="laravel" class="tab-content__pane active">
+                <div class="flex flex-col sm:flex-row items-center">
+                  <div class="mr-auto">
+                    <a href="" class="font-medium">Wordpress Template</a>
+                    <div class="text-gray-600 mt-1">HTML, PHP, Mysql</div>
+                  </div>
+                  <div class="w-full sm:w-auto flex items-center mt-3 sm:mt-0">
+                    <div class="bg-theme-18 text-theme-9 rounded px-2 mr-5">
+                      +20%
+                    </div>
+                    <div
+                      class="w-full sm:w-40 h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                    >
+                      <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-col sm:flex-row items-center mt-5">
+                  <div class="mr-auto">
+                    <a href="" class="font-medium">Laravel Template</a>
+                    <div class="text-gray-600 mt-1">PHP, Mysql</div>
+                  </div>
+                  <div class="w-full sm:w-auto flex items-center mt-3 sm:mt-0">
+                    <div class="bg-theme-18 text-theme-9 rounded px-2 mr-5">
+                      +55%
+                    </div>
+                    <div
+                      class="w-full sm:w-40 h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                    >
+                      <div class="w-2/3 h-full bg-theme-1 rounded-full"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-col sm:flex-row items-center mt-5">
+                  <div class="mr-auto">
+                    <a href="" class="font-medium">Tailwind HTML Template</a>
+                    <div class="text-gray-600 mt-1">HTML, CSS, JS</div>
+                  </div>
+                  <div class="w-full sm:w-auto flex items-center mt-3 sm:mt-0">
+                    <div class="bg-theme-18 text-theme-9 rounded px-2 mr-5">
+                      +40%
+                    </div>
+                    <div
+                      class="w-full sm:w-40 h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                    >
+                      <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- END: Top Products -->
+        <!-- BEGIN: Work In Progress -->
+        <div class="intro-y box mt-5">
+          <div
+            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+          >
+            <h2 class="font-medium text-base mr-auto">Work In Progress</h2>
+            <div class="dropdown ml-auto sm:hidden">
+              <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
+                <MoreHorizontalIcon
+                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                />
+              </a>
+              <div class="nav-tabs dropdown-box w-40">
+                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <a
+                    href="javascript:;"
+                    data-toggle="tab"
+                    data-target="#new"
+                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >New</a
+                  >
+                  <a
+                    href="javascript:;"
+                    data-toggle="tab"
+                    data-target="#last-week"
+                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >Last Week</a
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="nav-tabs ml-auto hidden sm:flex">
+              <a
+                data-toggle="tab"
+                data-target="#work-in-progress-new"
+                href="javascript:;"
+                class="py-5 ml-6 active"
+                >New</a
+              >
+              <a
+                data-toggle="tab"
+                data-target="#work-in-progress-last-week"
+                href="javascript:;"
+                class="py-5 ml-6"
+                >Last Week</a
+              >
+            </div>
+          </div>
+          <div class="p-5">
+            <div class="tab-content">
+              <div id="work-in-progress-new" class="tab-content__pane active">
+                <div>
+                  <div class="flex">
+                    <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                      Pending Tasks
+                    </div>
+                    <div class="font-medium">20%</div>
+                  </div>
+                  <div
+                    class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                  >
+                    <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
+                  </div>
+                </div>
+                <div class="mt-5">
+                  <div class="flex">
+                    <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                      Completed Tasks
+                    </div>
+                    <div class="font-medium">
+                      2 / <span class="text-gray-600">20</span>
+                    </div>
+                  </div>
+                  <div
+                    class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                  >
+                    <div class="w-1/4 h-full bg-theme-1 rounded-full"></div>
+                  </div>
+                </div>
+                <div class="mt-5">
+                  <div class="flex">
+                    <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                      Tasks In Progress
+                    </div>
+                    <div class="font-medium">42</div>
+                  </div>
+                  <div
+                    class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                  >
+                    <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
+                  </div>
+                </div>
+                <a
+                  href=""
+                  class="button w-40 mx-auto justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mt-5"
+                  >View More Details</a
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- END: Work In Progress -->
+        <!-- BEGIN: Latest Tasks -->
+        <div class="intro-y box mt-5">
+          <div
+            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+          >
+            <h2 class="font-medium text-base mr-auto">Latest Tasks</h2>
+            <div class="dropdown ml-auto sm:hidden">
+              <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
+                <MoreHorizontalIcon
+                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                />
+              </a>
+              <div class="nav-tabs dropdown-box w-40">
+                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <a
+                    href="javascript:;"
+                    data-toggle="tab"
+                    data-target="#new"
+                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >New</a
+                  >
+                  <a
+                    href="javascript:;"
+                    data-toggle="tab"
+                    data-target="#last-week"
+                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >Last Week</a
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="nav-tabs ml-auto hidden sm:flex">
+              <a
+                data-toggle="tab"
+                data-target="#latest-tasks-new"
+                href="javascript:;"
+                class="py-5 ml-6 active"
+                >New</a
+              >
+              <a
+                data-toggle="tab"
+                data-target="#latest-tasks-last-week"
+                href="javascript:;"
+                class="py-5 ml-6"
+                >Last Week</a
+              >
+            </div>
+          </div>
+          <div class="p-5">
+            <div class="tab-content">
+              <div id="latest-tasks-new" class="tab-content__pane active">
+                <div class="flex items-center">
+                  <div class="border-l-2 border-theme-1 pl-4">
+                    <a href="" class="font-medium">Create New Campaign</a>
+                    <div class="text-gray-600">10:00 AM</div>
+                  </div>
+                  <input
+                    class="input input--switch ml-auto border"
+                    type="checkbox"
+                  />
+                </div>
+                <div class="flex items-center mt-5">
+                  <div class="border-l-2 border-theme-1 pl-4">
+                    <a href="" class="font-medium">Meeting With Client</a>
+                    <div class="text-gray-600">02:00 PM</div>
+                  </div>
+                  <input
+                    class="input input--switch ml-auto border"
+                    type="checkbox"
+                  />
+                </div>
+                <div class="flex items-center mt-5">
+                  <div class="border-l-2 border-theme-1 pl-4">
+                    <a href="" class="font-medium">Create New Repository</a>
+                    <div class="text-gray-600">04:00 PM</div>
+                  </div>
+                  <input
+                    class="input input--switch ml-auto border"
+                    type="checkbox"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- END: Latest Tasks -->
+        <!-- BEGIN: General Statistics -->
+        <div class="intro-y box mt-5">
+          <div
+            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+          >
+            <h2 class="font-medium text-base mr-auto">General Statistics</h2>
+            <div class="dropdown ml-auto">
+              <a
+                class="dropdown-toggle w-5 h-5 block sm:hidden"
+                href="javascript:;"
+              >
+                <MoreHorizontalIcon
+                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                />
+              </a>
+              <button
+                class="dropdown-toggle button font-normal border dark:border-dark-5 text-white relative items-center text-gray-700 dark:text-gray-300 hidden sm:flex"
+              >
+                Export <ChevronDownIcon class="w-4 h-4 ml-2" />
+              </button>
+              <div class="dropdown-box w-40">
+                <div class="dropdown-box__content box dark:bg-dark-1">
+                  <div
+                    class="px-4 py-2 border-b border-gray-200 dark:border-dark-5 font-medium"
+                  >
+                    Export Tools
+                  </div>
+                  <div class="p-2">
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <PrinterIcon
+                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      Print
+                    </a>
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <ExternalLinkIcon
+                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      Excel
+                    </a>
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <FileTextIcon
+                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      CSV
+                    </a>
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    >
+                      <ArchiveIcon
+                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                      />
+                      PDF
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="p-5">
+            <div class="flex flex-col sm:flex-row items-center">
+              <div class="flex flex-wrap sm:flex-no-wrap mr-auto">
+                <div class="flex items-center mr-5 mb-1 sm:mb-0">
+                  <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>
+                  <span>Author Sales</span>
+                </div>
+                <div class="flex items-center mr-5 mb-1 sm:mb-0">
+                  <div class="w-2 h-2 bg-theme-1 rounded-full mr-3"></div>
+                  <span>Product Profit</span>
+                </div>
+              </div>
+              <div class="dropdown mt-3 sm:mt-0 mr-auto sm:mr-0">
+                <button
+                  class="dropdown-toggle button font-normal border dark:border-dark-5 text-white relative flex items-center text-gray-700 dark:text-gray-300"
+                >
+                  Filter by Month
+                  <ChevronDownIcon class="w-4 h-4 ml-2" />
+                </button>
+                <div class="dropdown-box w-40">
+                  <div
+                    class="dropdown-box__content box dark:bg-dark-1 p-2 overflow-y-auto h-32"
+                  >
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      >January</a
+                    >
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      >February</a
+                    >
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      >March</a
+                    >
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      >June</a
+                    >
+                    <a
+                      href=""
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      >July</a
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="report-chart mt-8">
+              <ReportLineChart :height="290" />
+            </div>
+          </div>
+        </div>
+        <!-- END: General Statistics -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueSlickCarousel from "vue-slick-carousel";
+import ReportLineChart from "@/components/ReportLineChart";
+
+export default {
+  components: {
+    ReportLineChart,
+    VueSlickCarousel
+  },
+  methods: {
+    prevAnnouncement() {
+      this.$refs["announcement"].prev();
+    },
+    nextAnnouncement() {
+      this.$refs["announcement"].next();
+    },
+    prevNewProjects() {
+      this.$refs["new-projects"].prev();
+    },
+    nextNewProjects() {
+      this.$refs["new-projects"].next();
+    },
+    prevTodaysSchedule() {
+      this.$refs["todays-schedule"].prev();
+    },
+    nextTodaysSchedule() {
+      this.$refs["todays-schedule"].next();
+    }
+  }
+};
+</script>