lizandrogd/soft_usite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Lizandro Guarnizo
2025-02-06 14:22:29 -05:00
commit 6d8f1bcd6f
452 changed files with 250835 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/src/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

resources/src/flags/.gitkeep
View File
resources/src/font/.gitkeep
View File
resources/src/img/.gitkeep
View File
resources/src/js/App.vue
+11
View File
@@ -0,0 +1,11 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
resources/src/js/app.js
+32
View File
@@ -0,0 +1,32 @@
import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import {VuejsDatatableFactory} from 'vuejs-datatable';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import store from './store'
import routes from './routes'
import "./icons"
Vue.component('FontAwesome', FontAwesomeIcon)
Vue.config.productionTip = false
Vue.use(Router)
VuejsDatatableFactory.useDefaultType(false)
.registerTableType('datatable', tableType => tableType.mergeSettings({
table: {class: 'datatable table-fixed w-full'},
}));
Vue.use(VuejsDatatableFactory);
const router = new Router({
mode: 'hash',
routes
})
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')
resources/src/js/components/Dashboard.vue
+41
View File
@@ -0,0 +1,41 @@
<template>
<div class="leading-normal tracking-normal" id="main-body">
<div class="flex flex-wrap">
<Sidebar/>
<div class="w-full bg-gray-100 pl-0 lg:pl-64 min-h-screen" :class="sideBarOpen ? 'overlay' : ''"
id="main-content">
<Navbar/>
<div class="p-6 bg-gray-100 mb-20">
<router-view/>
</div>
<Footer/>
</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import Sidebar from './Sidebar'
import Navbar from './Navbar'
import Footer from './Footer'
export default {
name: 'Dashboard',
computed: {
...mapState(['sideBarOpen'])
},
components: {
Sidebar,
Navbar,
Footer
}
}
</script>
resources/src/js/components/Footer.vue
+17
View File
@@ -0,0 +1,17 @@
<template>
<div class="w-full border-t-2 px-8 py-6 lg:flex justify-between items-center">
<p class="mb-2 lg:mb-0">© Copyright 2020</p>
<div class="flex">
<a href="#" class="mr-6 hover:text-gray-900">Terms of Service</a>
<a href="#" class="mr-6 hover:text-gray-900">Privacy Policy</a>
<a href="#" class="hover:text-gray-900">About Us</a>
</div>
</div>
</template>
<script>
export default {
name: 'Footer'
}
</script>
resources/src/js/components/Navbar.vue
+78
View File
@@ -0,0 +1,78 @@
<template>
<div class="sticky top-0 z-40">
<div class="w-full h-20 px-6 bg-gray-100 border-b flex items-center justify-between">
<!-- left navbar -->
<div class="flex">
<!-- mobile hamburger -->
<div class="inline-block lg:hidden flex items-center mr-4">
<button class="hover:text-blue-500 hover:border-white focus:outline-none navbar-burger"
@click="toggleSidebar()">
<svg class="h-5 w-5" v-bind:style="{ fill: 'black' }" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"><title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
</svg>
</button>
</div>
<!-- search bar -->
<div class="relative text-gray-600">
<input type="search" name="serch" placeholder="Search products..."
class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none">
<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;"
xml:space="preserve" width="512px" height="512px">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"/>
</svg>
</button>
</div>
</div>
<!-- right navbar -->
<div class="flex items-center relative">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"
class="fill-current mr-3 hover:text-blue-500">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/>
</svg>
<img src="https://a7sas.net/wp-content/uploads/2019/07/4060.jpeg"
class="w-12 h-12 rounded-full shadow-lg" @click="dropDownOpen = !dropDownOpen">
</div>
</div>
<!-- dropdown menu -->
<div class="absolute bg-gray-100 border border-t-0 shadow-xl text-gray-700 rounded-b-lg w-48 bottom-10 right-0 mr-6"
:class="dropDownOpen ? '' : 'hidden'">
<a href="#" class="block px-4 py-2 hover:bg-gray-200">Account</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-200">Settings</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-200">Logout</a>
</div>
<!-- dropdown menu end -->
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Navbar',
computed: {
...mapState(['sideBarOpen'])
},
data() {
return {
dropDownOpen: false
}
},
methods: {
toggleSidebar() {
this.$store.dispatch('toggleSidebar')
}
}
}
</script>
resources/src/js/components/Sidebar.vue
+148
View File
@@ -0,0 +1,148 @@
<template>
<!-- give the sidebar z-50 class so its higher than the navbar if you want to see the logo -->
<!-- you will need to add a little "X" button next to the logo in order to close it though -->
<div
class="w-1/2 md:w-1/3 lg:w-64 fixed md:top-0 md:left-0 h-screen lg:block bg-gray-100 border-r z-30"
:class="sideBarOpen ? '' : 'hidden'"
id="main-nav"
>
<div class="w-full h-20 border-b flex px-4 items-center mb-8">
<router-link to="/dashboard/home">
<div class="font-semibold text-3xl text-blue-400 pl-4">LOGO</div>
</router-link>
</div>
<div class="mb-4 px-4">
<p class="pl-4 text-sm font-semibold mb-1">MAIN</p>
<router-link to="/dashboard/home">
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 bg-gray-200 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M18.121,9.88l-7.832-7.836c-0.155-0.158-0.428-0.155-0.584,0L1.842,9.913c-0.262,0.263-0.073,0.705,0.292,0.705h2.069v7.042c0,0.227,0.187,0.414,0.414,0.414h3.725c0.228,0,0.414-0.188,0.414-0.414v-3.313h2.483v3.313c0,0.227,0.187,0.414,0.413,0.414h3.726c0.229,0,0.414-0.188,0.414-0.414v-7.042h2.068h0.004C18.331,10.617,18.389,10.146,18.121,9.88 M14.963,17.245h-2.896v-3.313c0-0.229-0.186-0.415-0.414-0.415H8.342c-0.228,0-0.414,0.187-0.414,0.415v3.313H5.032v-6.628h9.931V17.245z M3.133,9.79l6.864-6.868l6.867,6.868H3.133z"
/>
</svg>
<span class="text-gray-700">Dashboard</span>
</div>
</router-link>
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M17.431,2.156h-3.715c-0.228,0-0.413,0.186-0.413,0.413v6.973h-2.89V6.687c0-0.229-0.186-0.413-0.413-0.413H6.285c-0.228,0-0.413,0.184-0.413,0.413v6.388H2.569c-0.227,0-0.413,0.187-0.413,0.413v3.942c0,0.228,0.186,0.413,0.413,0.413h14.862c0.228,0,0.413-0.186,0.413-0.413V2.569C17.844,2.342,17.658,2.156,17.431,2.156 M5.872,17.019h-2.89v-3.117h2.89V17.019zM9.587,17.019h-2.89V7.1h2.89V17.019z M13.303,17.019h-2.89v-6.651h2.89V17.019z M17.019,17.019h-2.891V2.982h2.891V17.019z"
/>
</svg>
<span class="text-gray-700">Analytics</span>
</div>
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M17.283,5.549h-5.26V4.335c0-0.222-0.183-0.404-0.404-0.404H8.381c-0.222,0-0.404,0.182-0.404,0.404v1.214h-5.26c-0.223,0-0.405,0.182-0.405,0.405v9.71c0,0.223,0.182,0.405,0.405,0.405h14.566c0.223,0,0.404-0.183,0.404-0.405v-9.71C17.688,5.731,17.506,5.549,17.283,5.549 M8.786,4.74h2.428v0.809H8.786V4.74z M16.879,15.26H3.122v-4.046h5.665v1.201c0,0.223,0.182,0.404,0.405,0.404h1.618c0.222,0,0.405-0.182,0.405-0.404v-1.201h5.665V15.26z M9.595,9.583h0.81v2.428h-0.81V9.583zM16.879,10.405h-5.665V9.19c0-0.222-0.183-0.405-0.405-0.405H9.191c-0.223,0-0.405,0.183-0.405,0.405v1.215H3.122V6.358h13.757V10.405z"
/>
</svg>
<span class="text-gray-700">Inventory</span>
</div>
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M18.303,4.742l-1.454-1.455c-0.171-0.171-0.475-0.171-0.646,0l-3.061,3.064H2.019c-0.251,0-0.457,0.205-0.457,0.456v9.578c0,0.251,0.206,0.456,0.457,0.456h13.683c0.252,0,0.457-0.205,0.457-0.456V7.533l2.144-2.146C18.481,5.208,18.483,4.917,18.303,4.742 M15.258,15.929H2.476V7.263h9.754L9.695,9.792c-0.057,0.057-0.101,0.13-0.119,0.212L9.18,11.36h-3.98c-0.251,0-0.457,0.205-0.457,0.456c0,0.253,0.205,0.456,0.457,0.456h4.336c0.023,0,0.899,0.02,1.498-0.127c0.312-0.077,0.55-0.137,0.55-0.137c0.08-0.018,0.155-0.059,0.212-0.118l3.463-3.443V15.929z M11.241,11.156l-1.078,0.267l0.267-1.076l6.097-6.091l0.808,0.808L11.241,11.156z"
/>
</svg>
<span class="text-gray-700">Enquiries</span>
</div>
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M16.557,4.467h-1.64v-0.82c0-0.225-0.183-0.41-0.409-0.41c-0.226,0-0.41,0.185-0.41,0.41v0.82H5.901v-0.82c0-0.225-0.185-0.41-0.41-0.41c-0.226,0-0.41,0.185-0.41,0.41v0.82H3.442c-0.904,0-1.64,0.735-1.64,1.639v9.017c0,0.904,0.736,1.64,1.64,1.64h13.114c0.904,0,1.64-0.735,1.64-1.64V6.106C18.196,5.203,17.461,4.467,16.557,4.467 M17.377,15.123c0,0.453-0.366,0.819-0.82,0.819H3.442c-0.453,0-0.82-0.366-0.82-0.819V8.976h14.754V15.123z M17.377,8.156H2.623V6.106c0-0.453,0.367-0.82,0.82-0.82h1.639v1.23c0,0.225,0.184,0.41,0.41,0.41c0.225,0,0.41-0.185,0.41-0.41v-1.23h8.196v1.23c0,0.225,0.185,0.41,0.41,0.41c0.227,0,0.409-0.185,0.409-0.41v-1.23h1.64c0.454,0,0.82,0.367,0.82,0.82V8.156z"
/>
</svg>
<span class="text-gray-700">Calender</span>
</div>
</div>
<div class="mb-4 px-4">
<p class="pl-4 text-sm font-semibold mb-1">PRODUCTS</p>
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10"
/>
</svg>
<span class="text-gray-700">Add Product</span>
</div>
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M15.396,2.292H4.604c-0.212,0-0.385,0.174-0.385,0.386v14.646c0,0.212,0.173,0.385,0.385,0.385h10.792c0.211,0,0.385-0.173,0.385-0.385V2.677C15.781,2.465,15.607,2.292,15.396,2.292 M15.01,16.938H4.99v-2.698h1.609c0.156,0.449,0.586,0.771,1.089,0.771c0.638,0,1.156-0.519,1.156-1.156s-0.519-1.156-1.156-1.156c-0.503,0-0.933,0.321-1.089,0.771H4.99v-3.083h1.609c0.156,0.449,0.586,0.771,1.089,0.771c0.638,0,1.156-0.518,1.156-1.156c0-0.638-0.519-1.156-1.156-1.156c-0.503,0-0.933,0.322-1.089,0.771H4.99V6.531h1.609C6.755,6.98,7.185,7.302,7.688,7.302c0.638,0,1.156-0.519,1.156-1.156c0-0.638-0.519-1.156-1.156-1.156c-0.503,0-0.933,0.322-1.089,0.771H4.99V3.062h10.02V16.938z M7.302,13.854c0-0.212,0.173-0.386,0.385-0.386s0.385,0.174,0.385,0.386s-0.173,0.385-0.385,0.385S7.302,14.066,7.302,13.854 M7.302,10c0-0.212,0.173-0.385,0.385-0.385S8.073,9.788,8.073,10s-0.173,0.385-0.385,0.385S7.302,10.212,7.302,10 M7.302,6.146c0-0.212,0.173-0.386,0.385-0.386s0.385,0.174,0.385,0.386S7.899,6.531,7.688,6.531S7.302,6.358,7.302,6.146"
/>
</svg>
<span class="text-gray-700">View Products</span>
</div>
</div>
<div class="mb-4 px-4">
<p class="pl-4 text-sm font-semibold mb-1">MISC</p>
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M17.592,8.936l-6.531-6.534c-0.593-0.631-0.751-0.245-0.751,0.056l0.002,2.999L5.427,9.075H2.491c-0.839,0-0.162,0.901-0.311,0.752l3.683,3.678l-3.081,3.108c-0.17,0.171-0.17,0.449,0,0.62c0.169,0.17,0.448,0.17,0.618,0l3.098-3.093l3.675,3.685c-0.099-0.099,0.773,0.474,0.773-0.296v-2.965l3.601-4.872l2.734-0.005C17.73,9.688,18.326,9.669,17.592,8.936 M3.534,9.904h1.906l4.659,4.66v1.906L3.534,9.904z M10.522,13.717L6.287,9.48l4.325-3.124l3.088,3.124L10.522,13.717z M14.335,8.845l-3.177-3.177V3.762l5.083,5.083H14.335z"
/>
</svg>
<span class="text-gray-700">Notices</span>
</div>
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M6.176,7.241V6.78c0-0.221-0.181-0.402-0.402-0.402c-0.221,0-0.403,0.181-0.403,0.402v0.461C4.79,7.416,4.365,7.955,4.365,8.591c0,0.636,0.424,1.175,1.006,1.35v3.278c0,0.222,0.182,0.402,0.403,0.402c0.222,0,0.402-0.181,0.402-0.402V9.941c0.582-0.175,1.006-0.714,1.006-1.35C7.183,7.955,6.758,7.416,6.176,7.241 M5.774,9.195c-0.332,0-0.604-0.272-0.604-0.604c0-0.332,0.272-0.604,0.604-0.604c0.332,0,0.604,0.272,0.604,0.604C6.377,8.923,6.105,9.195,5.774,9.195 M10.402,10.058V6.78c0-0.221-0.181-0.402-0.402-0.402c-0.222,0-0.402,0.181-0.402,0.402v3.278c-0.582,0.175-1.006,0.714-1.006,1.35c0,0.637,0.424,1.175,1.006,1.351v0.461c0,0.222,0.181,0.402,0.402,0.402c0.221,0,0.402-0.181,0.402-0.402v-0.461c0.582-0.176,1.006-0.714,1.006-1.351C11.408,10.772,10.984,10.233,10.402,10.058M10,12.013c-0.333,0-0.604-0.272-0.604-0.604S9.667,10.805,10,10.805c0.332,0,0.604,0.271,0.604,0.604S10.332,12.013,10,12.013M14.629,8.448V6.78c0-0.221-0.182-0.402-0.403-0.402c-0.221,0-0.402,0.181-0.402,0.402v1.668c-0.581,0.175-1.006,0.714-1.006,1.35c0,0.636,0.425,1.176,1.006,1.351v2.07c0,0.222,0.182,0.402,0.402,0.402c0.222,0,0.403-0.181,0.403-0.402v-2.07c0.581-0.175,1.006-0.715,1.006-1.351C15.635,9.163,15.21,8.624,14.629,8.448 M14.226,10.402c-0.331,0-0.604-0.272-0.604-0.604c0-0.332,0.272-0.604,0.604-0.604c0.332,0,0.604,0.272,0.604,0.604C14.83,10.13,14.558,10.402,14.226,10.402 M17.647,3.962H2.353c-0.221,0-0.402,0.181-0.402,0.402v11.27c0,0.222,0.181,0.402,0.402,0.402h15.295c0.222,0,0.402-0.181,0.402-0.402V4.365C18.05,4.144,17.869,3.962,17.647,3.962 M17.245,15.232H2.755V4.768h14.49V15.232z"
/>
</svg>
<span class="text-gray-700">Controls</span>
</div>
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<svg class="h-6 w-6 fill-current mr-2" viewBox="0 0 20 20">
<path
d="M17.498,11.697c-0.453-0.453-0.704-1.055-0.704-1.697c0-0.642,0.251-1.244,0.704-1.697c0.069-0.071,0.15-0.141,0.257-0.22c0.127-0.097,0.181-0.262,0.137-0.417c-0.164-0.558-0.388-1.093-0.662-1.597c-0.075-0.141-0.231-0.22-0.391-0.199c-0.13,0.02-0.238,0.027-0.336,0.027c-1.325,0-2.401-1.076-2.401-2.4c0-0.099,0.008-0.207,0.027-0.336c0.021-0.158-0.059-0.316-0.199-0.391c-0.503-0.274-1.039-0.498-1.597-0.662c-0.154-0.044-0.32,0.01-0.416,0.137c-0.079,0.106-0.148,0.188-0.22,0.257C11.244,2.956,10.643,3.207,10,3.207c-0.642,0-1.244-0.25-1.697-0.704c-0.071-0.069-0.141-0.15-0.22-0.257C7.987,2.119,7.821,2.065,7.667,2.109C7.109,2.275,6.571,2.497,6.07,2.771C5.929,2.846,5.85,3.004,5.871,3.162c0.02,0.129,0.027,0.237,0.027,0.336c0,1.325-1.076,2.4-2.401,2.4c-0.098,0-0.206-0.007-0.335-0.027C3.001,5.851,2.845,5.929,2.77,6.07C2.496,6.572,2.274,7.109,2.108,7.667c-0.044,0.154,0.01,0.32,0.137,0.417c0.106,0.079,0.187,0.148,0.256,0.22c0.938,0.936,0.938,2.458,0,3.394c-0.069,0.072-0.15,0.141-0.256,0.221c-0.127,0.096-0.181,0.262-0.137,0.416c0.166,0.557,0.388,1.096,0.662,1.596c0.075,0.143,0.231,0.221,0.392,0.199c0.129-0.02,0.237-0.027,0.335-0.027c1.325,0,2.401,1.076,2.401,2.402c0,0.098-0.007,0.205-0.027,0.334C5.85,16.996,5.929,17.154,6.07,17.23c0.501,0.273,1.04,0.496,1.597,0.66c0.154,0.047,0.32-0.008,0.417-0.137c0.079-0.105,0.148-0.186,0.22-0.256c0.454-0.453,1.055-0.703,1.697-0.703c0.643,0,1.244,0.25,1.697,0.703c0.071,0.07,0.141,0.15,0.22,0.256c0.073,0.098,0.188,0.152,0.307,0.152c0.036,0,0.073-0.004,0.109-0.016c0.558-0.164,1.096-0.387,1.597-0.66c0.141-0.076,0.22-0.234,0.199-0.393c-0.02-0.129-0.027-0.236-0.027-0.334c0-1.326,1.076-2.402,2.401-2.402c0.098,0,0.206,0.008,0.336,0.027c0.159,0.021,0.315-0.057,0.391-0.199c0.274-0.5,0.496-1.039,0.662-1.596c0.044-0.154-0.01-0.32-0.137-0.416C17.648,11.838,17.567,11.77,17.498,11.697 M16.671,13.334c-0.059-0.002-0.114-0.002-0.168-0.002c-1.749,0-3.173,1.422-3.173,3.172c0,0.053,0.002,0.109,0.004,0.166c-0.312,0.158-0.64,0.295-0.976,0.406c-0.039-0.045-0.077-0.086-0.115-0.123c-0.601-0.6-1.396-0.93-2.243-0.93s-1.643,0.33-2.243,0.93c-0.039,0.037-0.077,0.078-0.116,0.123c-0.336-0.111-0.664-0.248-0.976-0.406c0.002-0.057,0.004-0.113,0.004-0.166c0-1.75-1.423-3.172-3.172-3.172c-0.054,0-0.11,0-0.168,0.002c-0.158-0.312-0.293-0.639-0.405-0.975c0.044-0.039,0.085-0.078,0.124-0.115c1.236-1.236,1.236-3.25,0-4.486C3.009,7.719,2.969,7.68,2.924,7.642c0.112-0.336,0.247-0.664,0.405-0.976C3.387,6.668,3.443,6.67,3.497,6.67c1.75,0,3.172-1.423,3.172-3.172c0-0.054-0.002-0.11-0.004-0.168c0.312-0.158,0.64-0.293,0.976-0.405C7.68,2.969,7.719,3.01,7.757,3.048c0.6,0.6,1.396,0.93,2.243,0.93s1.643-0.33,2.243-0.93c0.038-0.039,0.076-0.079,0.115-0.123c0.336,0.112,0.663,0.247,0.976,0.405c-0.002,0.058-0.004,0.114-0.004,0.168c0,1.749,1.424,3.172,3.173,3.172c0.054,0,0.109-0.002,0.168-0.004c0.158,0.312,0.293,0.64,0.405,0.976c-0.045,0.038-0.086,0.077-0.124,0.116c-0.6,0.6-0.93,1.396-0.93,2.242c0,0.847,0.33,1.645,0.93,2.244c0.038,0.037,0.079,0.076,0.124,0.115C16.964,12.695,16.829,13.021,16.671,13.334 M10,5.417c-2.528,0-4.584,2.056-4.584,4.583c0,2.529,2.056,4.584,4.584,4.584s4.584-2.055,4.584-4.584C14.584,7.472,12.528,5.417,10,5.417 M10,13.812c-2.102,0-3.812-1.709-3.812-3.812c0-2.102,1.71-3.812,3.812-3.812c2.102,0,3.812,1.71,3.812,3.812C13.812,12.104,12.102,13.812,10,13.812"
/>
</svg>
<span class="text-gray-700">Settings</span>
</div>
<router-link to="/dashboard/user">
<div
class="w-full flex items-center text-blue-400 h-10 pl-4 hover:bg-gray-200 rounded-lg cursor-pointer"
>
<FontAwesome class="h-6 w-6 fill-current mr-3" icon="users"/>
<span class="text-gray-700">Users</span>
</div>
</router-link>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "Sidebar",
computed: {
...mapState(["sideBarOpen"])
}
};
</script>
resources/src/js/icons.js
+28
View File
@@ -0,0 +1,28 @@
import {library} from '@fortawesome/fontawesome-svg-core'
import {
faUsers,
faHome,
faChartBar,
faBriefcase,
faPencilAlt,
faCalendarAlt,
faPlusCircle,
faClipboardList,
faThumbtack,
faSlidersH,
faCogs,
} from '@fortawesome/free-solid-svg-icons'
library.add(
faUsers,
faHome,
faChartBar,
faBriefcase,
faPencilAlt,
faCalendarAlt,
faPlusCircle,
faClipboardList,
faThumbtack,
faSlidersH,
faCogs,
)
resources/src/js/pages/Home.vue
+294
View File
@@ -0,0 +1,294 @@
<template>
<div id="home">
<!-- breadcrumb -->
<nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
<ol class="list-none p-0 inline-flex">
<li class="flex items-center text-blue-500">
<a href="#" class="text-gray-700">Home</a>
<svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/>
</svg>
</li>
<li class="flex items-center">
<a href="#" class="text-gray-600">Dashboard</a>
</li>
</ol>
</nav>
<!-- breadcrumb end -->
<div class="lg:flex justify-between items-center mb-6">
<p class="text-2xl font-semibold mb-2 lg:mb-0">Good afternoon, Joe!</p>
<button class="bg-blue-500 hover:bg-blue-600 focus:outline-none rounded-lg px-6 py-2 text-white font-semibold shadow">
View Logs
</button>
</div>
<div class="flex flex-wrap -mx-3 mb-20">
<div class="w-1/2 xl:w-1/4 px-3">
<div class="w-full bg-white border text-blue-400 rounded-lg flex items-center p-6 mb-6 xl:mb-0">
<svg class="w-16 h-16 fill-current mr-4 hidden lg:block" viewBox="0 0 20 20">
<path d="M17.35,2.219h-5.934c-0.115,0-0.225,0.045-0.307,0.128l-8.762,8.762c-0.171,0.168-0.171,0.443,0,0.611l5.933,5.934c0.167,0.171,0.443,0.169,0.612,0l8.762-8.763c0.083-0.083,0.128-0.192,0.128-0.307V2.651C17.781,2.414,17.587,2.219,17.35,2.219M16.916,8.405l-8.332,8.332l-5.321-5.321l8.333-8.332h5.32V8.405z M13.891,4.367c-0.957,0-1.729,0.772-1.729,1.729c0,0.957,0.771,1.729,1.729,1.729s1.729-0.772,1.729-1.729C15.619,5.14,14.848,4.367,13.891,4.367 M14.502,6.708c-0.326,0.326-0.896,0.326-1.223,0c-0.338-0.342-0.338-0.882,0-1.224c0.342-0.337,0.881-0.337,1.223,0C14.84,5.826,14.84,6.366,14.502,6.708"></path>
</svg>
<div class="text-gray-700">
<p class="font-semibold text-3xl">237</p>
<p>Products Sold</p>
</div>
</div>
</div>
<div class="w-1/2 xl:w-1/4 px-3">
<div class="w-full bg-white border text-blue-400 rounded-lg flex items-center p-6 mb-6 xl:mb-0">
<svg class="w-16 h-16 fill-current mr-4 hidden lg:block" viewBox="0 0 20 20">
<path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z"></path>
</svg>
<div class="text-gray-700">
<p class="font-semibold text-3xl">177</p>
<p>Product Reviews</p>
</div>
</div>
</div>
<div class="w-1/2 xl:w-1/4 px-3">
<div class="w-full bg-white border text-blue-400 rounded-lg flex items-center p-6">
<svg class="w-16 h-16 fill-current mr-4 hidden lg:block" viewBox="0 0 20 20">
<path d="M14.999,8.543c0,0.229-0.188,0.417-0.416,0.417H5.417C5.187,8.959,5,8.772,5,8.543s0.188-0.417,0.417-0.417h9.167C14.812,8.126,14.999,8.314,14.999,8.543 M12.037,10.213H5.417C5.187,10.213,5,10.4,5,10.63c0,0.229,0.188,0.416,0.417,0.416h6.621c0.229,0,0.416-0.188,0.416-0.416C12.453,10.4,12.266,10.213,12.037,10.213 M14.583,6.046H5.417C5.187,6.046,5,6.233,5,6.463c0,0.229,0.188,0.417,0.417,0.417h9.167c0.229,0,0.416-0.188,0.416-0.417C14.999,6.233,14.812,6.046,14.583,6.046 M17.916,3.542v10c0,0.229-0.188,0.417-0.417,0.417H9.373l-2.829,2.796c-0.117,0.116-0.71,0.297-0.71-0.296v-2.5H2.5c-0.229,0-0.417-0.188-0.417-0.417v-10c0-0.229,0.188-0.417,0.417-0.417h15C17.729,3.126,17.916,3.313,17.916,3.542 M17.083,3.959H2.917v9.167H6.25c0.229,0,0.417,0.187,0.417,0.416v1.919l2.242-2.215c0.079-0.077,0.184-0.12,0.294-0.12h7.881V3.959z"></path>
</svg>
<div class="text-gray-700">
<p class="font-semibold text-3xl">31</p>
<p>New Enquiries</p>
</div>
</div>
</div>
<div class="w-1/2 xl:w-1/4 px-3">
<div class="w-full bg-white border text-blue-400 rounded-lg flex items-center p-6">
<svg class="w-16 h-16 fill-current mr-4 hidden lg:block" viewBox="0 0 20 20">
<path d="M17.431,2.156h-3.715c-0.228,0-0.413,0.186-0.413,0.413v6.973h-2.89V6.687c0-0.229-0.186-0.413-0.413-0.413H6.285c-0.228,0-0.413,0.184-0.413,0.413v6.388H2.569c-0.227,0-0.413,0.187-0.413,0.413v3.942c0,0.228,0.186,0.413,0.413,0.413h14.862c0.228,0,0.413-0.186,0.413-0.413V2.569C17.844,2.342,17.658,2.156,17.431,2.156 M5.872,17.019h-2.89v-3.117h2.89V17.019zM9.587,17.019h-2.89V7.1h2.89V17.019z M13.303,17.019h-2.89v-6.651h2.89V17.019z M17.019,17.019h-2.891V2.982h2.891V17.019z"></path>
</svg>
<div class="text-gray-700">
<p class="font-semibold text-3xl">1,653</p>
<p>Product Views</p>
</div>
</div>
</div>
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Master Cleanse Reliac
Heirloom</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed ">Whatever cardigan tote bag tumblr hexagon
brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't
heard of them man bun deep jianbing selfies heirloom prism food truck ugh squid celiac
humblebrag.</p>
</div>
<div class="flex flex-wrap -m-4 text-center">
<div class="p-4 md:w-1/4 sm:w-1/2 w-full">
<div class="border-2 border-gray-200 px-4 py-6 rounded-lg">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="text-indigo-500 w-12 h-12 mb-3 inline-block"
viewBox="0 0 24 24">
<path d="M8 17l4 4 4-4m-4-5v9"></path>
<path d="M20.88 18.09A5 5 0 0018 9h-1.26A8 8 0 103 16.29"></path>
</svg>
<h2 class="title-font font-medium text-3xl text-gray-900">2.7K</h2>
<p class="leading-relaxed">Downloads</p>
</div>
</div>
<div class="p-4 md:w-1/4 sm:w-1/2 w-full">
<div class="border-2 border-gray-200 px-4 py-6 rounded-lg">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="text-indigo-500 w-12 h-12 mb-3 inline-block"
viewBox="0 0 24 24">
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 00-3-3.87m-4-12a4 4 0 010 7.75"></path>
</svg>
<h2 class="title-font font-medium text-3xl text-gray-900">1.3K</h2>
<p class="leading-relaxed">Users</p>
</div>
</div>
<div class="p-4 md:w-1/4 sm:w-1/2 w-full">
<div class="border-2 border-gray-200 px-4 py-6 rounded-lg">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="text-indigo-500 w-12 h-12 mb-3 inline-block"
viewBox="0 0 24 24">
<path d="M3 18v-6a9 9 0 0118 0v6"></path>
<path d="M21 19a2 2 0 01-2 2h-1a2 2 0 01-2-2v-3a2 2 0 012-2h3zM3 19a2 2 0 002 2h1a2 2 0 002-2v-3a2 2 0 00-2-2H3z"></path>
</svg>
<h2 class="title-font font-medium text-3xl text-gray-900">74</h2>
<p class="leading-relaxed">Files</p>
</div>
</div>
<div class="p-4 md:w-1/4 sm:w-1/2 w-full">
<div class="border-2 border-gray-200 px-4 py-6 rounded-lg">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="text-indigo-500 w-12 h-12 mb-3 inline-block"
viewBox="0 0 24 24">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
<h2 class="title-font font-medium text-3xl text-gray-900">46</h2>
<p class="leading-relaxed">Places</p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="flex flex-wrap -mx-3">
<div class="w-full xl:w-1/3 px-3">
<p class="text-xl font-semibold mb-4">Recent Sales</p>
<div class="w-full bg-white border rounded-lg p-4 mb-8 xl:mb-0">
<canvas id="buyers-chart" width="600" height="400"></canvas>
</div>
</div>
<div class="w-full xl:w-1/3 px-3">
<p class="text-xl font-semibold mb-4">Recent Reviews</p>
<div class="w-full bg-white border rounded-lg p-4 mb-8 xl:mb-0">
<canvas id="reviews-chart" width="600" height="400"></canvas>
</div>
</div>
<div class="w-full xl:w-1/3 px-3">
<p class="text-xl font-semibold mb-4">Recent Transactions</p>
<div class="w-full bg-white border rounded-lg p-4">
<div class="w-full bg-gray-100 border rounded-lg flex justify-between items-center px-4 py-2 mb-4">
<div>
<p class="font-semibold text-xl">Trent Murphy</p>
<p>Product 1</p>
</div>
<span class="text-green-500 font-semibold text-lg">$25.00</span>
</div>
<div class="w-full bg-gray-100 border rounded-lg flex justify-between items-center px-4 py-2 mb-4">
<div>
<p class="font-semibold text-xl">Joseph Brent</p>
<p>Product 34</p>
</div>
<span class="text-red-500 font-semibold text-lg">$74.99</span>
</div>
<div class="w-full bg-gray-100 border rounded-lg flex justify-between items-center px-4 py-2 mb-4">
<div>
<p class="font-semibold text-xl">Jacob Bator</p>
<p>Product 23</p>
</div>
<span class="text-green-500 font-semibold text-lg">$14.95</span>
</div>
<div class="w-full bg-gray-100 border rounded-lg flex justify-between items-center px-4 py-2">
<div>
<p class="font-semibold text-xl">Alex Mason</p>
<p>Product 66</p>
</div>
<span class="text-green-500 font-semibold text-lg">$44.99</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Chart from 'chart.js'
export default {
name: 'DashboardHome',
data() {
return {
buyersData: {
type: 'line',
data: {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [{
backgroundColor: "rgba(99,179,237,0.4)",
strokeColor: "#63b3ed",
pointColor: "#fff",
pointStrokeColor: "#63b3ed",
data: [203, 156, 99, 251, 305, 247, 256]
},
{
backgroundColor: "rgba(198,198,198,0.4)",
strokeColor: "#f7fafc",
pointColor: "#fff",
pointStrokeColor: "#f7fafc",
data: [86, 97, 144, 114, 94, 108, 156]
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
display: false
},
ticks: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
}
},
reviewsData: {
type: 'bar',
data: {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [{
backgroundColor: "rgba(99,179,237,0.4)",
strokeColor: "#63b3ed",
pointColor: "#fff",
pointStrokeColor: "#63b3ed",
data: [203, 156, 99, 251, 305, 247, 256]
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
display: false
},
ticks: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
}
}
}
},
mounted() {
new Chart(document.getElementById('buyers-chart'), this.buyersData)
new Chart(document.getElementById('reviews-chart'), this.reviewsData)
}
}
</script>
resources/src/js/pages/User.vue
+79
View File
@@ -0,0 +1,79 @@
<template>
<div id="user">
<nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
<ol class="list-none p-0 inline-flex">
<li class="flex items-center text-blue-500">
<a href="#" class="text-gray-700">Home</a>
<svg
class="fill-current w-3 h-3 mx-3"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
/>
</svg>
</li>
<li class="flex items-center">
<a href="#" class="text-gray-600">Users</a>
</li>
</ol>
</nav>
<div class="lg:flex justify-between items-center mb-6">
<p class="text-2xl font-semibold mb-2 lg:mb-0">Users</p>
</div>
<div class="flex flex-wrap -mx-3 mb-20">
<div class="w-full xl:w-full px-3">
<div class="w-full bg-white border rounded-lg flex items-center p-6 mb-6 xl:mb-0">
<div v-if="loading" class="loading">Loading...</div>
<datatable v-else :columns="columns" :data="rows"></datatable>
</div>
</div>
</div>
</div>
</template>
<script>
import {GetUserList} from "../store/api/users";
export default {
data: () => ({
loading: false,
columns: [
{label: "#", field: "num", headerClass: "w-1/6"},
{
label: "Name",
field: "name"
},
{
label: "Age",
field: "age"
}
],
rows: []
}),
created() {
this.fetchData();
},
watch: {
// call again the method if the route changes
$route: "fetchData"
},
methods: {
fetchData() {
this.loading = true;
GetUserList()
.then(({data}) => {
this.loading = false;
for (let i in data) {
data[i].num = parseInt(i) + 1;
}
this.rows = data;
})
.error(err => {
this.loading = false;
});
}
}
};
</script>
resources/src/js/payment.js
+116
View File
@@ -0,0 +1,116 @@
paypal.Buttons({
// Set your environment
env: paypal_env,
// Set style of buttons
style: {
layout: 'horizontal', // horizontal | vertical
size: 'large', // medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold', // gold | blue | silver | black,
fundingicons: false, // true | false,
tagline: false // true | false,
},
// onInit is called when the button first renders
onInit: function (data, actions) {
// Disable the buttons
actions.disable();
// Listen for changes to the checkbox
document.querySelector('#amount')
.addEventListener('keyup', function (event) {
let amount = event.target.value;
amount = +amount;
if (isNaN(amount)) {
document.getElementById("amount-err").innerHTML = "Invalid amount format";
setTimeout(function () {
document.getElementById("amount-err").innerHTML = "";
}, 2000);
actions.disable();
} else if (amount < 5) {
document.getElementById("amount-err").innerHTML = "Amount must be greater than 5";
setTimeout(function () {
document.getElementById("amount-err").innerHTML = "";
}, 2000);
actions.disable();
}
if (event.target.value === "") {
document.getElementById("amount-err").innerHTML = "Invalid amount format";
setTimeout(function () {
document.getElementById("amount-err").innerHTML = "";
}, 2000);
actions.disable();
} else {
actions.enable();
}
});
},
// onClick is called when the button is clicked
onClick: function () {
var regex = /^\d+(?:\.\d{0,2})$/;
let amount = document.getElementById("amount").value;
amount = +amount;
if (isNaN(amount)) {
alert(2);
document.getElementById("amount-err").innerHTML = "Invalid amount format";
setTimeout(function () {
document.getElementById("amount-err").innerHTML = "";
}, 2000);
}
},
// Wait for the PayPal button to be clicked
createOrder: function () {
let formData = new FormData();
let amount = document.getElementById("amount").value;
formData.append('amount', amount);
return fetch(
'/app/paypal/do/order',
{
method: 'POST',
body: formData
}
).then(function (response) {
return response.json();
}).then(function (resJson) {
return resJson.data.id;
});
},
// Wait for the payment to be authorized by the customer
onApprove: function (data, actions) {
return fetch(
'/app/paypal/order/success/' + data.orderID,
{
method: 'POST'
}
).then(function (res) {
return res.json();
}).then(function (res) {
// window.location.href = '/account/paypal/order/success';
});
},
// Wait for the payment to be authorized by the customer
onCancel: function (data, actions) {
return fetch(
'/app/paypal/order/cancel/' + data.orderID,
{
method: 'POST'
}
).then(function (res) {
return res.json();
}).then(function (res) {
// window.location.href = '/account/paypal/order/success';
});
},
}).render('#paypalCheckoutContainer');
resources/src/js/routes.js
+16
View File
@@ -0,0 +1,16 @@
import Dashboard from './components/Dashboard'
import DashboardHome from './pages/Home'
import UserPage from './pages/User'
const routes = [
{path: '/', redirect: {name: 'DashboardHome'}},
{
path: '/dashboard', component: Dashboard, children: [
{path: '/', redirect: {name: 'DashboardHome'}},
{path: 'home', name: 'DashboardHome', component: DashboardHome},
{path: 'user', name: 'UserPage', component: UserPage}
]
}
]
export default routes
resources/src/js/store/api/users.js
+3
View File
@@ -0,0 +1,3 @@
import Axios from "axios";
export const GetUserList = () => Axios.get("/users").then(r => r.data)
resources/src/js/store/index.js
+26
View File
@@ -0,0 +1,26 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
sideBarOpen: false,
users: [],
},
getters: {
sideBarOpen: state => {
return state.sideBarOpen
}
},
mutations: {
toggleSidebar(state) {
state.sideBarOpen = !state.sideBarOpen
}
},
actions: {
toggleSidebar(context) {
context.commit('toggleSidebar')
}
}
})
resources/src/js/store/users.js
View File
resources/src/robots.txt
+3
View File
@@ -0,0 +1,3 @@
User-agent: *
Disallow:
Disallow: /cgi-bin/
resources/src/sass/app.scss
+26
View File
@@ -0,0 +1,26 @@
.fade-enter-active,
.fade-leave-active {
transition-duration: 0.2s;
transition-property: opacity;
transition-timing-function: ease;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.sidebar {
overflow-y: scroll; /* Add the ability to scroll */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.sidebar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.sidebar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
resources/src/sass/landing.scss
+37
View File
@@ -0,0 +1,37 @@
body {
background-image: url("../img/pattern.svg");
}
.string {
color: green;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: red;
}
.hero_button {
background-color: #0a165c !important;
color: #fff !important;
transition: all .5s ease
}
.hero_button:hover {
background-color: #6074edff !important
}
.container {
width: 70%;
}
resources/src/sass/table.scss
+356
View File
@@ -0,0 +1,356 @@
@import "~flag-icons/sass/flag-icons";
.gridjs-head button,
.gridjs-footer button {
cursor: pointer;
background-color: transparent;
background-image: none;
padding: 0;
margin: 0;
border: none;
outline: none;
}
.gridjs-head {
margin-bottom: 5px;
padding: 5px 1px;
}
.gridjs-head::after {
content: "";
display: block;
clear: both;
}
.gridjs-head:empty {
padding: 0;
border: none;
}
.gridjs-container {
overflow: hidden;
display: inline-block;
padding: 2px;
color: #000;
position: relative;
z-index: 0;
}
.gridjs-footer {
display: block;
position: relative;
z-index: 0;
padding: 12px 24px;
border-top: 1px solid #e5e7eb;
background-color: transparent;
box-shadow: none;
border-radius: 0;
border-bottom-width: ipx;
border-color: #e5e7eb;
border-bottom: none;
border: 0;
}
.gridjs-footer:empty {
padding: 0;
border: none;
}
input.gridjs-input {
outline: none;
background-color: #fff;
border: 1px solid #d2d6dc;
border-radius: 5px;
padding: 10px 13px;
font-size: 14px;
line-height: 1.45;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input.gridjs-input:focus {
box-shadow: 0 0 0 3px rgba(149, 189, 243, 0.5);
border-color: #9bc2f7;
}
.gridjs-pagination {
color: #3d4044;
}
.gridjs-pagination::after {
content: "";
display: block;
clear: both;
}
.gridjs-pagination .gridjs-summary {
float: left;
margin-top: 5px;
}
.gridjs-pagination .gridjs-pages {
float: right;
}
.gridjs-pagination .gridjs-pages button {
padding: 0.25rem 0.75rem;
border: 0;
background-color: transparent;
border-right: none;
outline: none;
margin-right: 1px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
}
.gridjs-pagination .gridjs-pages button:focus {
box-shadow: none;
}
.gridjs-pagination .gridjs-pages button:hover {
background-color: #f7f7f7;
color: #3c4257;
outline: none;
}
.gridjs-pagination .gridjs-pages button:disabled,
.gridjs-pagination .gridjs-pages button[disabled],
.gridjs-pagination .gridjs-pages button:hover:disabled {
cursor: default;
background-color: transparent;
color: #6b7280;
}
.gridjs-pagination .gridjs-pages button.gridjs-spread {
cursor: default;
box-shadow: none;
background-color: transparent;
}
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
background-color: #48bb78;
color: white;
border-radius: 0.25rem;
font-weight: normal;
}
.gridjs-pagination .gridjs-pages button.gridjs-currentPage:hover {
background-color: rgba(56, 161, 105, 1);
border-radius: 0.25rem;
font-weight: normal;
color: white;
}
.gridjs-pagination .gridjs-pages button:hover {
background-color: #48bb78;
border-radius: 0.25rem;
font-weight: normal;
color: white;
}
.gridjs-pagination .gridjs-pages button:last-child {
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
border-right: 1px solid #d2d6dc;
font-size: 13px;
border: 0;
}
.gridjs-pagination .gridjs-pages button:first-child {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
font-size: 13px;
border: 0;
}
button.gridjs-sort {
float: right;
height: 24px;
width: 16px;
background-repeat: no-repeat;
}
button.gridjs-sort-neutral {
opacity: 0.3;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAr0lEQVQ4T6WTUQ5BQQxFz1uG4IdnH2xHgo3w/xKLYSOEiMQqkCatSE2nwfy297Rz70zDn6dJ9APgAVyjvhpgAuyAOzADDiVIBDBxX0WXCFICeLENLkI8oAX2gE32WwtkChyt4AFzYJkYuwG2EeDrULMYU6AHLIBVoloDXXSFkZo4DCBnNfFU82CsD8hDPsQCiTzwkKK4BpCaQeQpS/avtd+vl6XQ0890++UzpRFKwxNZzCARuMPL3wAAAABJRU5ErkJggg==");
background-position-y: center;
}
button.gridjs-sort-asc {
padding-bottom: 6px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAaUlEQVQ4T+3SsQ1AUBQF0GMfQ5hEoddILKHR6VT2MIZtJBoSkf/9iE68+t1T3NzMy8te5v2AZAc1Vgyxsu9KbNHtwQZ9CIkB5/CRCyIhIBSOIlegwpgYV4np+LkCOYoEMGOJAY+X/YEpbzl7DBHJyXtQAAAAAElFTkSuQmCC");
background-position-y: top;
}
button.gridjs-sort-desc {
padding-top: 6px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAc0lEQVQ4T2NkoBAwUqifYRgaIMPAwGBAIFzOMzAwPIWpQQ+DYgYGhh4CBuQzMDBMwmUAEwMDw1QGBoYMHIaA5HIZGBj+4zIAJI7LEAzNIMW4ohHdEKya8RkAc0kvAwPDHwYGhjJkZyN7bxgmJJLzFsVhAAAclRAR/sEwnwAAAABJRU5ErkJggg==");
background-position-y: bottom;
}
button.gridjs-sort:focus {
outline: none;
}
table.gridjs-table {
max-width: 100%;
border-collapse: collapse;
text-align: left;
display: table;
margin: 0;
padding: 0;
overflow: auto;
table-layout: unset;
}
.gridjs-tbody {
background-color: #fff;
}
td.gridjs-td {
border: none;
padding: 0.5rem 1rem;
background-color: #fff;
box-sizing: content-box;
}
td.gridjs-td:first-child {
border-left: none;
}
td.gridjs-td:last-child {
border-right: none;
}
td.gridjs-message {
text-align: center;
}
th.gridjs-th {
color: hsl(220, 95%, 8%);
background-color: #f9fafb;
border: none;
padding: 0.5rem 1rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: content-box;
white-space: nowrap;
outline: none;
}
th.gridjs-th-sort {
cursor: pointer;
}
th.gridjs-th-sort:hover {
background-color: transparent;
}
th.gridjs-th-sort:focus {
background-color: transparent;
}
th.gridjs-th-fixed {
top: 0;
position: -webkit-sticky;
position: sticky;
box-shadow: 0 1px 0 0 #e5e7eb;
}
@supports (-moz-appearance: none) {
th.gridjs-th-fixed {
box-shadow: 0 0 0 1px #e5e7eb;
}
}
th.gridjs-th:first-child {
border-left: none;
}
th.gridjs-th:last-child {
border-right: none;
}
.gridjs-tr {
border: none;
border-bottom: 1px solid #e2e8f0;
}
.gridjs-tr:last-child td {
border-bottom: 0;
}
.gridjs *,
.gridjs :after,
.gridjs :before {
box-sizing: border-box;
}
.gridjs-wrapper {
position: relative;
z-index: 1;
overflow: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* box-shadow: none; */
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
border-radius: 0.125rem;
display: block;
border-top-width: 1px;
border-color: #e5e7eb;
border-top: none;
}
.gridjs-wrapper:last-of-type {
border-radius: 0;
border-bottom-width: 1px;
}
.gridjs-search {
float: left;
}
.gridjs-search-input {
width: 250px;
}
.gridjs-loading-bar {
z-index: 10;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #fff;
opacity: 0.5;
}
.gridjs-loading-bar::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(204, 204, 204, 0) 0,
rgba(204, 204, 204, 0.2) 20%,
rgba(204, 204, 204, 0.5) 60%,
rgba(204, 204, 204, 0)
);
animation: shimmer 2s infinite;
content: "";
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
resources/src/sass/vendor.scss
+96
View File
@@ -0,0 +1,96 @@
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
.bg-accent {
background-color: #f3f5f9;
}
.bg-primary {
background-color: #006aff;
}
.transition-basic {
@apply transition-colors duration-200 ease-in;
}
.shadow-primary {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.shadow-dropdown {
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 1px rgba(0, 0, 0, 0.15);
}
@tailwind utilities;
.fade-enter-active,
.fade-leave-active {
transition-duration: 0.2s;
transition-property: opacity;
transition-timing-function: ease;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
/* used for dropdown */
.slide-in-up-enter-active,
.slide-in-up-leave-active {
transition-duration: 250ms;
transition-property: transform, visibility, opacity;
transition-timing-function: ease-in;
transform: translate3d(0, 0, 0);
}
.slide-in-up-enter,
.slide-in-up-leave-active {
transform: translate3d(0, 50%, 0);
opacity: 0;
}
/* bounce in up */
.bounce-in-up-enter-active {
animation: bounceInUp 1s;
}
/* .bounce-in-up-leave-active { */
/* animation: bounceInUp 0.5s reverse; */
/* } */
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0) scaleY(5);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, 10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, -5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}