#9 - set up frontend #10
16
.eslintrc.js
Normal file
16
.eslintrc.js
Normal file
@@ -0,0 +1,16 @@
|
||||
EwelinaLasowy
commented
Review
```suggestion
};
```
EwelinaLasowy
commented
Review
```suggestion
};
```
|
||||
module.exports = {
|
||||
```suggestion
};
```
|
||||
env: {
|
||||
```suggestion
};
```
|
||||
node: true,
|
||||
```suggestion
};
```
|
||||
},
|
||||
```suggestion
};
```
|
||||
extends: [
|
||||
```suggestion
};
```
|
||||
'eslint:recommended',
|
||||
```suggestion
};
```
|
||||
'plugin:vue/vue3-recommended',
|
||||
```suggestion
};
```
|
||||
],
|
||||
```suggestion
};
```
|
||||
rules: {
|
||||
```suggestion
};
```
|
||||
semi: [2, 'always'],
|
||||
```suggestion
};
```
|
||||
quotes: ['error', 'single'],
|
||||
```suggestion
};
```
|
||||
indent: ['error', 4],
|
||||
```suggestion
};
```
|
||||
'vue/html-indent': ['error', 4],
|
||||
```suggestion
};
```
|
||||
'vue/multi-word-component-names': 'off',
|
||||
```suggestion
};
```
|
||||
}
|
||||
```suggestion
};
```
|
||||
};
|
||||
```suggestion
};
```
|
||||
30
.github/workflows/test-and-lint-js.yml
vendored
Normal file
30
.github/workflows/test-and-lint-js.yml
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
name: Test & lint JS stuff
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches: [ "main" ]
|
||||
|
||||
jobs:
|
||||
test-and-lint-js:
|
||||
runs-on: ubuntu-20.04
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Cache dependencies
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: node_modules
|
||||
key: ${{ runner.os }}-npm-dependencies-${{ hashFiles('package.lock') }}
|
||||
restore-keys: ${{ runner.os }}-npm-dependencies
|
||||
|
||||
- name: Set up node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
- name: Instal npm dependencies
|
||||
run: npm install
|
||||
|
||||
- name: Run JS linter
|
||||
run: npm run lint
|
||||
@@ -1,4 +1,4 @@
|
||||
name: Build & Test
|
||||
name: Test & lint PHP stuff
|
||||
|
||||
on:
|
||||
push:
|
||||
@@ -7,7 +7,7 @@ on:
|
||||
branches: [ "main" ]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
test-and-lint-php:
|
||||
runs-on: ubuntu-20.04
|
||||
|
||||
steps:
|
||||
@@ -33,7 +33,7 @@ jobs:
|
||||
- name: Install Composer dependencies
|
||||
run: composer install --prefer-dist --no-interaction --no-suggest
|
||||
|
||||
- name: Run linter
|
||||
- name: Run PHP linter
|
||||
run: composer ecs
|
||||
|
||||
- name: Execute tests
|
||||
14
README.md
14
README.md
@@ -27,14 +27,18 @@ HR software you love to hate
|
||||
|
||||
dcr php php artisan key:generate
|
||||
|
||||
- generate storage link
|
||||
|
||||
dcr php php artisan storage:link
|
||||
|
||||
- migrate and seed database
|
||||
|
||||
dcr php php artisan migrate --seed
|
||||
|
||||
- install npm packages
|
||||
|
||||
dcr node npm install
|
||||
|
||||
- build assets
|
||||
|
||||
dcr node npm run dev
|
||||
|
||||
## Available containers (local)
|
||||
- **php** - php and composer stuff
|
||||
- **node** - npm stuff
|
||||
@@ -52,6 +56,8 @@ If xDebug is installed, set environment variable **XDEBUG_MODE=off** to improve
|
||||
dcr php composer ecs
|
||||
dcr php php vendor/bin/ecs check --fix
|
||||
dcr php composer ecsf
|
||||
dcr node npm run lint
|
||||
dcr node rpm run lintf
|
||||
|
||||
## xDebug
|
||||
|
||||
|
||||
@@ -23,8 +23,8 @@ use Illuminate\Routing\Middleware\ValidateSignature;
|
||||
use Illuminate\Session\Middleware\AuthenticateSession;
|
||||
use Illuminate\Session\Middleware\StartSession;
|
||||
use Illuminate\View\Middleware\ShareErrorsFromSession;
|
||||
use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;
|
||||
use Toby\Http\Middleware\Authenticate;
|
||||
use Toby\Http\Middleware\HandleInertiaRequests;
|
||||
use Toby\Http\Middleware\RedirectIfAuthenticated;
|
||||
use Toby\Http\Middleware\TrimStrings;
|
||||
use Toby\Http\Middleware\TrustProxies;
|
||||
@@ -49,10 +49,9 @@ class Kernel extends HttpKernel
|
||||
ShareErrorsFromSession::class,
|
||||
VerifyCsrfToken::class,
|
||||
SubstituteBindings::class,
|
||||
HandleInertiaRequests::class,
|
||||
],
|
||||
|
||||
"api" => [
|
||||
EnsureFrontendRequestsAreStateful::class,
|
||||
"throttle:api",
|
||||
SubstituteBindings::class,
|
||||
],
|
||||
|
||||
21
app/Http/Middleware/HandleInertiaRequests.php
Normal file
21
app/Http/Middleware/HandleInertiaRequests.php
Normal file
@@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Toby\Http\Middleware;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Inertia\Middleware;
|
||||
|
||||
class HandleInertiaRequests extends Middleware
|
||||
{
|
||||
public function share(Request $request): array
|
||||
{
|
||||
return array_merge(parent::share($request), [
|
||||
"flash" => fn() => [
|
||||
"success" => $request->session()->get("success"),
|
||||
"error" => $request->session()->get("error"),
|
||||
],
|
||||
]);
|
||||
}
|
||||
}
|
||||
@@ -9,8 +9,8 @@
|
||||
"ext-pdo": "*",
|
||||
"fruitcake/laravel-cors": "^2.0",
|
||||
"guzzlehttp/guzzle": "^7.0.1",
|
||||
"inertiajs/inertia-laravel": "^0.5.1",
|
||||
"laravel/framework": "^8.75",
|
||||
"laravel/sanctum": "^2.11",
|
||||
"laravel/telescope": "^4.6",
|
||||
"laravel/tinker": "^2.5"
|
||||
},
|
||||
@@ -41,12 +41,6 @@
|
||||
"post-autoload-dump": [
|
||||
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
|
||||
"@php artisan package:discover --ansi"
|
||||
],
|
||||
"post-update-cmd": [
|
||||
"@php artisan vendor:publish --tag=laravel-assets --ansi --force"
|
||||
],
|
||||
"post-create-project-cmd": [
|
||||
"@php artisan key:generate --ansi"
|
||||
]
|
||||
},
|
||||
"extra": {
|
||||
|
||||
135
composer.lock
generated
135
composer.lock
generated
@@ -4,7 +4,7 @@
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "b3242ebffedd8bc0c509138711278c97",
|
||||
"content-hash": "f17ac43c54d4ab19c3dfa87a3b6360c4",
|
||||
"packages": [
|
||||
{
|
||||
"name": "asm89/stack-cors",
|
||||
@@ -963,6 +963,75 @@
|
||||
],
|
||||
"time": "2021-10-06T17:43:30+00:00"
|
||||
},
|
||||
{
|
||||
"name": "inertiajs/inertia-laravel",
|
||||
"version": "v0.5.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/inertiajs/inertia-laravel.git",
|
||||
"reference": "1b2d57abcffc087f07d2d892f0197af559d23802"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/inertiajs/inertia-laravel/zipball/1b2d57abcffc087f07d2d892f0197af559d23802",
|
||||
"reference": "1b2d57abcffc087f07d2d892f0197af559d23802",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"ext-json": "*",
|
||||
"laravel/framework": "^6.0|^7.0|^8.74",
|
||||
"php": "^7.2|~8.0.0|~8.1.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"mockery/mockery": "^1.3.3",
|
||||
"orchestra/testbench": "^4.0|^5.0|^6.4",
|
||||
"phpunit/phpunit": "^8.0|^9.5.8",
|
||||
"roave/security-advisories": "dev-master"
|
||||
},
|
||||
"type": "library",
|
||||
"extra": {
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"Inertia\\ServiceProvider"
|
||||
]
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Inertia\\": "src"
|
||||
},
|
||||
"files": [
|
||||
"./helpers.php"
|
||||
]
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Jonathan Reinink",
|
||||
"email": "jonathan@reinink.ca",
|
||||
"homepage": "https://reinink.ca"
|
||||
}
|
||||
],
|
||||
"description": "The Laravel adapter for Inertia.js.",
|
||||
"keywords": [
|
||||
"inertia",
|
||||
"laravel"
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/inertiajs/inertia-laravel/issues",
|
||||
"source": "https://github.com/inertiajs/inertia-laravel/tree/v0.5.1"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://github.com/reinink",
|
||||
"type": "github"
|
||||
}
|
||||
],
|
||||
"time": "2022-01-07T18:18:00+00:00"
|
||||
},
|
||||
{
|
||||
"name": "laravel/framework",
|
||||
"version": "v8.78.1",
|
||||
@@ -1135,70 +1204,6 @@
|
||||
},
|
||||
"time": "2022-01-05T14:52:50+00:00"
|
||||
},
|
||||
{
|
||||
"name": "laravel/sanctum",
|
||||
"version": "v2.13.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/laravel/sanctum.git",
|
||||
"reference": "b4c07d0014b78430a3c827064217f811f0708eaa"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/laravel/sanctum/zipball/b4c07d0014b78430a3c827064217f811f0708eaa",
|
||||
"reference": "b4c07d0014b78430a3c827064217f811f0708eaa",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"ext-json": "*",
|
||||
"illuminate/contracts": "^6.9|^7.0|^8.0",
|
||||
"illuminate/database": "^6.9|^7.0|^8.0",
|
||||
"illuminate/support": "^6.9|^7.0|^8.0",
|
||||
"php": "^7.2|^8.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"mockery/mockery": "^1.0",
|
||||
"orchestra/testbench": "^4.0|^5.0|^6.0",
|
||||
"phpunit/phpunit": "^8.0|^9.3"
|
||||
},
|
||||
"type": "library",
|
||||
"extra": {
|
||||
"branch-alias": {
|
||||
"dev-master": "2.x-dev"
|
||||
},
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"Laravel\\Sanctum\\SanctumServiceProvider"
|
||||
]
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Laravel\\Sanctum\\": "src/"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Taylor Otwell",
|
||||
"email": "taylor@laravel.com"
|
||||
}
|
||||
],
|
||||
"description": "Laravel Sanctum provides a featherweight authentication system for SPAs and simple APIs.",
|
||||
"keywords": [
|
||||
"auth",
|
||||
"laravel",
|
||||
"sanctum"
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/laravel/sanctum/issues",
|
||||
"source": "https://github.com/laravel/sanctum"
|
||||
},
|
||||
"time": "2021-12-14T17:49:47+00:00"
|
||||
},
|
||||
{
|
||||
"name": "laravel/serializable-closure",
|
||||
"version": "v1.0.5",
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
return [
|
||||
"stateful" => explode(",", env("SANCTUM_STATEFUL_DOMAINS", sprintf(
|
||||
"%s%s",
|
||||
"localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1",
|
||||
env("APP_URL") ? "," . parse_url(env("APP_URL"), PHP_URL_HOST) : "",
|
||||
))),
|
||||
"guard" => ["web"],
|
||||
"expiration" => null,
|
||||
"middleware" => [
|
||||
"verify_csrf_token" => Toby\Http\Middleware\VerifyCsrfToken::class,
|
||||
"encrypt_cookies" => Toby\Http\Middleware\EncryptCookies::class,
|
||||
],
|
||||
];
|
||||
4508
package-lock.json
generated
4508
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
27
package.json
27
package.json
@@ -7,12 +7,29 @@
|
||||
"watch-poll": "mix watch -- --watch-options-poll=1000",
|
||||
"hot": "mix watch --hot",
|
||||
"prod": "npm run production",
|
||||
"production": "mix --production"
|
||||
"production": "mix --production",
|
||||
"lint": "./node_modules/.bin/eslint resources/js --ext .js,.vue",
|
||||
"lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.4.2",
|
||||
"@heroicons/vue": "^1.0.5",
|
||||
"@inertiajs/inertia": "^0.11.0",
|
||||
"@inertiajs/inertia-vue3": "^0.6.0",
|
||||
"@inertiajs/progress": "^0.2.7",
|
||||
"@tailwindcss/forms": "^0.4.0",
|
||||
"@tailwindcss/line-clamp": "^0.3.0",
|
||||
"@tailwindcss/typography": "^0.5.0",
|
||||
"@vue/compiler-sfc": "^3.2.26",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"laravel-mix": "^6.0.6",
|
||||
"postcss": "^8.4.5",
|
||||
"tailwindcss": "^3.0.12",
|
||||
"vue": "^3.2.26",
|
||||
"vue-loader": "^16.8.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"axios": "^0.21",
|
||||
"laravel-mix": "^6.0.6",
|
||||
"lodash": "^4.17.19",
|
||||
"postcss": "^8.1.14"
|
||||
"eslint": "^8.6.0",
|
||||
"eslint-plugin-vue": "^8.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
686
resources/js/Pages/Dashboard.vue
Normal file
686
resources/js/Pages/Dashboard.vue
Normal file
@@ -0,0 +1,686 @@
|
||||
|
|
||||
<template>
|
||||
|
|
||||
<div class="min-h-full">
|
||||
|
|
||||
<Popover
|
||||
|
|
||||
v-slot="{ open }"
|
||||
|
|
||||
as="header"
|
||||
|
|
||||
class="pb-24 bg-gradient-to-r from-sky-800 to-cyan-600"
|
||||
|
|
||||
>
|
||||
|
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
|
|
||||
<div class="relative flex flex-wrap items-center justify-center lg:justify-between">
|
||||
|
|
||||
<!-- Logo -->
|
||||
|
|
||||
<div class="absolute left-0 py-5 flex-shrink-0 lg:static">
|
||||
|
|
||||
<a href="#">
|
||||
|
|
||||
<span class="sr-only">Workflow</span>
|
||||
|
|
||||
<img
|
||||
|
|
||||
class="h-8 w-auto"
|
||||
|
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-cyan-200.svg"
|
||||
|
|
||||
alt="Workflow"
|
||||
|
|
||||
>
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
|
||||
|
|
||||
<!-- Right section on desktop -->
|
||||
|
|
||||
<div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
|
||||
|
|
||||
<button
|
||||
|
|
||||
type="button"
|
||||
|
|
||||
class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
|
|
||||
>
|
||||
|
|
||||
<span class="sr-only">View notifications</span>
|
||||
|
|
||||
<BellIcon
|
||||
|
|
||||
class="h-6 w-6"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
/>
|
||||
|
|
||||
</button>
|
||||
|
|
||||
|
||||
|
|
||||
<!-- Profile dropdown -->
|
||||
|
|
||||
<Menu
|
||||
|
|
||||
as="div"
|
||||
|
|
||||
class="ml-4 relative flex-shrink-0"
|
||||
|
|
||||
>
|
||||
|
|
||||
<div>
|
||||
|
|
||||
<MenuButton
|
||||
|
|
||||
class="bg-white rounded-full flex text-sm ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100"
|
||||
|
|
||||
>
|
||||
|
|
||||
<span class="sr-only">Open user menu</span>
|
||||
|
|
||||
<img
|
||||
|
|
||||
class="h-8 w-8 rounded-full"
|
||||
|
|
||||
:src="user.imageUrl"
|
||||
|
|
||||
alt=""
|
||||
|
|
||||
>
|
||||
|
|
||||
</MenuButton>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<transition
|
||||
|
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
|
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
|
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
|
|
||||
>
|
||||
|
|
||||
<MenuItems
|
||||
|
|
||||
class="origin-top-right z-40 absolute -right-2 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
|
|
||||
>
|
||||
|
|
||||
<MenuItem
|
||||
|
|
||||
v-for="item in userNavigation"
|
||||
|
|
||||
:key="item.name"
|
||||
|
|
||||
v-slot="{ active }"
|
||||
|
|
||||
>
|
||||
|
|
||||
<a
|
||||
|
|
||||
:href="item.href"
|
||||
|
|
||||
:class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']"
|
||||
|
|
||||
>
|
||||
|
|
||||
{{ item.name }}
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</MenuItem>
|
||||
|
|
||||
</MenuItems>
|
||||
|
|
||||
</transition>
|
||||
|
|
||||
</Menu>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
|
||||
|
|
||||
<div class="w-full py-5 lg:border-t lg:border-white lg:border-opacity-20">
|
||||
|
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8 lg:items-center">
|
||||
|
|
||||
<!-- Left nav -->
|
||||
|
|
||||
<div class="hidden lg:block lg:col-span-2">
|
||||
|
|
||||
<nav class="flex space-x-4">
|
||||
|
|
||||
<a
|
||||
|
|
||||
v-for="item in navigation"
|
||||
|
|
||||
:key="item.name"
|
||||
|
|
||||
:href="item.href"
|
||||
|
|
||||
:class="[item.current ? 'text-white' : 'text-cyan-100', 'text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10']"
|
||||
|
|
||||
:aria-current="item.current ? 'page' : undefined"
|
||||
|
|
||||
>
|
||||
|
|
||||
{{ item.name }}
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</nav>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="px-12 lg:px-0">
|
||||
|
|
||||
<!-- Search -->
|
||||
|
|
||||
<div class="max-w-xs mx-auto w-full lg:max-w-md">
|
||||
|
|
||||
<label
|
||||
|
|
||||
for="search"
|
||||
|
|
||||
class="sr-only"
|
||||
|
|
||||
>Search</label>
|
||||
|
|
||||
<div class="relative text-white focus-within:text-gray-600">
|
||||
|
|
||||
<div
|
||||
|
|
||||
class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center"
|
||||
|
|
||||
>
|
||||
|
|
||||
<SearchIcon
|
||||
|
|
||||
class="h-5 w-5"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
/>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<input
|
||||
|
|
||||
id="search"
|
||||
|
|
||||
class="block w-full text-white bg-white bg-opacity-20 py-2 pl-10 pr-3 border border-transparent rounded-md leading-5 focus:text-gray-900 placeholder-white focus:outline-none focus:bg-opacity-100 focus:border-transparent focus:placeholder-gray-500 focus:ring-0 sm:text-sm"
|
||||
|
|
||||
placeholder="Search"
|
||||
|
|
||||
type="search"
|
||||
|
|
||||
name="search"
|
||||
|
|
||||
>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
|
||||
|
|
||||
<!-- Menu button -->
|
||||
|
|
||||
<div class="absolute right-0 flex-shrink-0 lg:hidden">
|
||||
|
|
||||
<!-- Mobile menu button -->
|
||||
|
|
||||
<PopoverButton
|
||||
|
|
||||
class="bg-transparent p-2 rounded-md inline-flex items-center justify-center text-cyan-200 hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||
|
|
||||
>
|
||||
|
|
||||
<span class="sr-only">Open main menu</span>
|
||||
|
|
||||
<MenuIcon
|
||||
|
|
||||
v-if="!open"
|
||||
|
|
||||
class="block h-6 w-6"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
/>
|
||||
|
|
||||
<XIcon
|
||||
|
|
||||
v-else
|
||||
|
|
||||
class="block h-6 w-6"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
/>
|
||||
|
|
||||
</PopoverButton>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
|
||||
|
|
||||
<TransitionRoot
|
||||
|
|
||||
as="template"
|
||||
|
|
||||
:show="open"
|
||||
|
|
||||
>
|
||||
|
|
||||
<div class="lg:hidden">
|
||||
|
|
||||
<TransitionChild
|
||||
|
|
||||
as="template"
|
||||
|
|
||||
enter="duration-150 ease-out"
|
||||
|
|
||||
enter-from="opacity-0"
|
||||
|
|
||||
enter-to="opacity-100"
|
||||
|
|
||||
leave="duration-150 ease-in"
|
||||
|
|
||||
leave-from="opacity-100"
|
||||
|
|
||||
leave-to="opacity-0"
|
||||
|
|
||||
>
|
||||
|
|
||||
<PopoverOverlay class="z-20 fixed inset-0 bg-black bg-opacity-25" />
|
||||
|
|
||||
</TransitionChild>
|
||||
|
|
||||
|
||||
|
|
||||
<TransitionChild
|
||||
|
|
||||
as="template"
|
||||
|
|
||||
enter="duration-150 ease-out"
|
||||
|
|
||||
enter-from="opacity-0 scale-95"
|
||||
|
|
||||
enter-to="opacity-100 scale-100"
|
||||
|
|
||||
leave="duration-150 ease-in"
|
||||
|
|
||||
leave-from="opacity-100 scale-100"
|
||||
|
|
||||
leave-to="opacity-0 scale-95"
|
||||
|
|
||||
>
|
||||
|
|
||||
<PopoverPanel
|
||||
|
|
||||
focus
|
||||
|
|
||||
class="z-30 absolute top-0 inset-x-0 max-w-3xl mx-auto w-full p-2 transition transform origin-top"
|
||||
|
|
||||
>
|
||||
|
|
||||
<div
|
||||
|
|
||||
class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200"
|
||||
|
|
||||
>
|
||||
|
|
||||
<div class="pt-3 pb-2">
|
||||
|
|
||||
<div class="flex items-center justify-between px-4">
|
||||
|
|
||||
<div>
|
||||
|
|
||||
<img
|
||||
|
|
||||
class="h-8 w-auto"
|
||||
|
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-cyan-600.svg"
|
||||
|
|
||||
alt="Workflow"
|
||||
|
|
||||
>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="-mr-2">
|
||||
|
|
||||
<PopoverButton
|
||||
|
|
||||
class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500"
|
||||
|
|
||||
>
|
||||
|
|
||||
<span class="sr-only">Close menu</span>
|
||||
|
|
||||
<XIcon
|
||||
|
|
||||
class="h-6 w-6"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
/>
|
||||
|
|
||||
</PopoverButton>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
|
|
||||
<a
|
||||
|
|
||||
v-for="item in navigation"
|
||||
|
|
||||
:key="item.name"
|
||||
|
|
||||
:href="item.href"
|
||||
|
|
||||
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
|
||||
|
|
||||
>
|
||||
|
|
||||
{{ item.name }}
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="pt-4 pb-2">
|
||||
|
|
||||
<div class="flex items-center px-5">
|
||||
|
|
||||
<div class="flex-shrink-0">
|
||||
|
|
||||
<img
|
||||
|
|
||||
class="h-10 w-10 rounded-full"
|
||||
|
|
||||
:src="user.imageUrl"
|
||||
|
|
||||
alt=""
|
||||
|
|
||||
>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="ml-3 min-w-0 flex-1">
|
||||
|
|
||||
<div class="text-base font-medium text-gray-800 truncate">
|
||||
|
|
||||
{{ user.name }}
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="text-sm font-medium text-gray-500 truncate">
|
||||
|
|
||||
{{ user.email }}
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<button
|
||||
|
|
||||
type="button"
|
||||
|
|
||||
class="ml-auto flex-shrink-0 bg-white p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
|
||||
|
|
||||
>
|
||||
|
|
||||
<span class="sr-only">View notifications</span>
|
||||
|
|
||||
<BellIcon
|
||||
|
|
||||
class="h-6 w-6"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
/>
|
||||
|
|
||||
</button>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
|
|
||||
<a
|
||||
|
|
||||
v-for="item in userNavigation"
|
||||
|
|
||||
:key="item.name"
|
||||
|
|
||||
:href="item.href"
|
||||
|
|
||||
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
|
||||
|
|
||||
>
|
||||
|
|
||||
{{ item.name }}
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</PopoverPanel>
|
||||
|
|
||||
</TransitionChild>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</TransitionRoot>
|
||||
|
|
||||
</Popover>
|
||||
|
|
||||
<main class="-mt-24 pb-8">
|
||||
|
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||
|
|
||||
<h1 class="sr-only">
|
||||
|
|
||||
Profile
|
||||
|
|
||||
</h1>
|
||||
|
|
||||
<!-- Main 3 column grid -->
|
||||
|
|
||||
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
||||
|
|
||||
<!-- Left column -->
|
||||
|
|
||||
<div class="grid grid-cols-1 gap-4 lg:col-span-2">
|
||||
|
|
||||
<!-- Welcome panel -->
|
||||
|
|
||||
<section aria-labelledby="profile-overview-title">
|
||||
|
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
|
|
||||
<h2
|
||||
|
|
||||
id="profile-overview-title"
|
||||
|
|
||||
class="sr-only"
|
||||
|
|
||||
>
|
||||
|
|
||||
Profile Overview
|
||||
|
|
||||
</h2>
|
||||
|
|
||||
<div class="bg-white p-6">
|
||||
|
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
|
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
|
|
||||
<div class="flex-shrink-0">
|
||||
|
|
||||
<img
|
||||
|
|
||||
class="mx-auto h-20 w-20 rounded-full"
|
||||
|
|
||||
:src="user.imageUrl"
|
||||
|
|
||||
alt=""
|
||||
|
|
||||
>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
|
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
|
|
||||
Welcome back,
|
||||
|
|
||||
</p>
|
||||
|
|
||||
<p class="text-xl font-bold text-gray-900 sm:text-2xl">
|
||||
|
|
||||
{{ user.name }}
|
||||
|
|
||||
</p>
|
||||
|
|
||||
<p class="text-sm font-medium text-gray-600">
|
||||
|
|
||||
{{ user.role }}
|
||||
|
|
||||
</p>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="mt-5 flex justify-center sm:mt-0">
|
||||
|
|
||||
<a
|
||||
|
|
||||
href="#"
|
||||
|
|
||||
class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
|
|
||||
>
|
||||
|
|
||||
View profile
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div
|
||||
|
|
||||
class="border-t border-gray-200 bg-gray-50 grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
|
||||
|
|
||||
>
|
||||
|
|
||||
<div
|
||||
|
|
||||
v-for="stat in stats"
|
||||
|
|
||||
:key="stat.label"
|
||||
|
|
||||
class="px-6 py-5 text-sm font-medium text-center"
|
||||
|
|
||||
>
|
||||
|
|
||||
<span class="text-gray-900">{{ stat.value }}</span>
|
||||
|
|
||||
{{ ' ' }}
|
||||
|
|
||||
<span class="text-gray-600">{{ stat.label }}</span>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</section>
|
||||
|
|
||||
|
||||
|
|
||||
<!-- Actions panel -->
|
||||
|
|
||||
<section aria-labelledby="quick-links-title">
|
||||
|
|
||||
<div
|
||||
|
|
||||
class="rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px"
|
||||
|
|
||||
>
|
||||
|
|
||||
<h2
|
||||
|
|
||||
id="quick-links-title"
|
||||
|
|
||||
class="sr-only"
|
||||
|
|
||||
>
|
||||
|
|
||||
Quick links
|
||||
|
|
||||
</h2>
|
||||
|
|
||||
<div
|
||||
|
|
||||
v-for="(action, actionIdx) in actions"
|
||||
|
|
||||
:key="action.name"
|
||||
|
|
||||
:class="[actionIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '', actionIdx === 1 ? 'sm:rounded-tr-lg' : '', actionIdx === actions.length - 2 ? 'sm:rounded-bl-lg' : '', actionIdx === actions.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '', 'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500']"
|
||||
|
|
||||
>
|
||||
|
|
||||
<div>
|
||||
|
|
||||
<span
|
||||
|
|
||||
:class="[action.iconBackground, action.iconForeground, 'rounded-lg inline-flex p-3 ring-4 ring-white']"
|
||||
|
|
||||
>
|
||||
|
|
||||
<component
|
||||
|
|
||||
:is="action.icon"
|
||||
|
|
||||
class="h-6 w-6"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
/>
|
||||
|
|
||||
</span>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="mt-8">
|
||||
|
|
||||
<h3 class="text-lg font-medium">
|
||||
|
|
||||
<a
|
||||
|
|
||||
:href="action.href"
|
||||
|
|
||||
class="focus:outline-none"
|
||||
|
|
||||
>
|
||||
|
|
||||
<!-- Extend touch target to entire panel -->
|
||||
|
|
||||
<span
|
||||
|
|
||||
class="absolute inset-0"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
/>
|
||||
|
|
||||
{{ action.name }}
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</h3>
|
||||
|
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
|
|
||||
Doloribus dolores nostrum quia qui natus officia quod et dolorem. Sit
|
||||
|
|
||||
repellendus qui ut at blanditiis et quo et molestiae.
|
||||
|
|
||||
</p>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<span
|
||||
|
|
||||
class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
>
|
||||
|
|
||||
<svg
|
||||
|
|
||||
class="h-6 w-6"
|
||||
|
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
||||
fill="currentColor"
|
||||
|
|
||||
viewBox="0 0 24 24"
|
||||
|
|
||||
>
|
||||
|
|
||||
<path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z" />
|
||||
|
|
||||
</svg>
|
||||
|
|
||||
</span>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</section>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
|
||||
|
|
||||
<!-- Right column -->
|
||||
|
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
|
|
||||
<!-- Announcements -->
|
||||
|
|
||||
<section aria-labelledby="announcements-title">
|
||||
|
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
|
|
||||
<div class="p-6">
|
||||
|
|
||||
<h2
|
||||
|
|
||||
id="announcements-title"
|
||||
|
|
||||
class="text-base font-medium text-gray-900"
|
||||
|
|
||||
>
|
||||
|
|
||||
Announcements
|
||||
|
|
||||
</h2>
|
||||
|
|
||||
<div class="flow-root mt-6">
|
||||
|
|
||||
<ul
|
||||
|
|
||||
role="list"
|
||||
|
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
|
|
||||
>
|
||||
|
|
||||
<li
|
||||
|
|
||||
v-for="announcement in announcements"
|
||||
|
|
||||
:key="announcement.id"
|
||||
|
|
||||
class="py-5"
|
||||
|
|
||||
>
|
||||
|
|
||||
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
||||
|
|
||||
<h3 class="text-sm font-semibold text-gray-800">
|
||||
|
|
||||
<a
|
||||
|
|
||||
:href="announcement.href"
|
||||
|
|
||||
class="hover:underline focus:outline-none"
|
||||
|
|
||||
>
|
||||
|
|
||||
<!-- Extend touch target to entire panel -->
|
||||
|
|
||||
<span
|
||||
|
|
||||
class="absolute inset-0"
|
||||
|
|
||||
aria-hidden="true"
|
||||
|
|
||||
/>
|
||||
|
|
||||
{{ announcement.title }}
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</h3>
|
||||
|
|
||||
<p class="mt-1 text-sm text-gray-600 line-clamp-2">
|
||||
|
|
||||
{{ announcement.preview }}
|
||||
|
|
||||
</p>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</li>
|
||||
|
|
||||
</ul>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="mt-6">
|
||||
|
|
||||
<a
|
||||
|
|
||||
href="#"
|
||||
|
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
|
|
||||
>
|
||||
|
|
||||
View all
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</section>
|
||||
|
|
||||
|
||||
|
|
||||
<!-- Recent Hires -->
|
||||
|
|
||||
<section aria-labelledby="recent-hires-title">
|
||||
|
|
||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||
|
|
||||
<div class="p-6">
|
||||
|
|
||||
<h2
|
||||
|
|
||||
id="recent-hires-title"
|
||||
|
|
||||
class="text-base font-medium text-gray-900"
|
||||
|
|
||||
>
|
||||
|
|
||||
Recent Hires
|
||||
|
|
||||
</h2>
|
||||
|
|
||||
<div class="flow-root mt-6">
|
||||
|
|
||||
<ul
|
||||
|
|
||||
role="list"
|
||||
|
|
||||
class="-my-5 divide-y divide-gray-200"
|
||||
|
|
||||
>
|
||||
|
|
||||
<li
|
||||
|
|
||||
v-for="person in recentHires"
|
||||
|
|
||||
:key="person.handle"
|
||||
|
|
||||
class="py-4"
|
||||
|
|
||||
>
|
||||
|
|
||||
<div class="flex items-center space-x-4">
|
||||
|
|
||||
<div class="flex-shrink-0">
|
||||
|
|
||||
<img
|
||||
|
|
||||
class="h-8 w-8 rounded-full"
|
||||
|
|
||||
:src="person.imageUrl"
|
||||
|
|
||||
alt=""
|
||||
|
|
||||
>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="flex-1 min-w-0">
|
||||
|
|
||||
<p class="text-sm font-medium text-gray-900 truncate">
|
||||
|
|
||||
{{ person.name }}
|
||||
|
|
||||
</p>
|
||||
|
|
||||
<p class="text-sm text-gray-500 truncate">
|
||||
|
|
||||
{{ '@' + person.handle }}
|
||||
|
|
||||
</p>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div>
|
||||
|
|
||||
<a
|
||||
|
|
||||
:href="person.href"
|
||||
|
|
||||
class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50"
|
||||
|
|
||||
>
|
||||
|
|
||||
View
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</li>
|
||||
|
|
||||
</ul>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
<div class="mt-6">
|
||||
|
|
||||
<a
|
||||
|
|
||||
href="#"
|
||||
|
|
||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
|
|
||||
>
|
||||
|
|
||||
View all
|
||||
|
|
||||
</a>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</section>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</main>
|
||||
|
|
||||
<footer>
|
||||
|
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
|
||||
|
|
||||
<div class="border-t border-gray-200 py-8 text-sm text-gray-500 text-center sm:text-left">
|
||||
|
|
||||
<span
|
||||
|
|
||||
class="block sm:inline"
|
||||
|
|
||||
>© 2021 Tailwind Labs Inc.</span> <span class="block sm:inline">All rights reserved.</span>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</footer>
|
||||
|
|
||||
</div>
|
||||
|
|
||||
</template>
|
||||
|
|
||||
|
||||
|
|
||||
<script>
|
||||
|
|
||||
import {
|
||||
|
|
||||
Menu,
|
||||
|
|
||||
MenuButton,
|
||||
|
|
||||
MenuItem,
|
||||
|
|
||||
MenuItems,
|
||||
|
|
||||
Popover,
|
||||
|
|
||||
PopoverButton,
|
||||
|
|
||||
PopoverOverlay,
|
||||
|
|
||||
PopoverPanel,
|
||||
|
|
||||
TransitionChild,
|
||||
|
|
||||
TransitionRoot,
|
||||
|
|
||||
} from '@headlessui/vue';
|
||||
|
|
||||
import {
|
||||
|
|
||||
AcademicCapIcon,
|
||||
|
|
||||
BadgeCheckIcon,
|
||||
|
|
||||
BellIcon,
|
||||
|
|
||||
CashIcon,
|
||||
|
|
||||
ClockIcon,
|
||||
|
|
||||
MenuIcon,
|
||||
|
|
||||
ReceiptRefundIcon,
|
||||
|
|
||||
UsersIcon,
|
||||
|
|
||||
XIcon,
|
||||
|
|
||||
} from '@heroicons/vue/outline';
|
||||
|
|
||||
import {SearchIcon} from '@heroicons/vue/solid';
|
||||
|
|
||||
|
||||
|
|
||||
const user = {
|
||||
|
|
||||
name: 'Chelsea Hagon',
|
||||
|
|
||||
email: 'chelseahagon@example.com',
|
||||
|
|
||||
role: 'Human Resources Manager',
|
||||
|
|
||||
imageUrl:
|
||||
|
|
||||
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
|
|
||||
};
|
||||
|
|
||||
const navigation = [
|
||||
|
|
||||
{name: 'Home', href: '#', current: true},
|
||||
|
|
||||
{name: 'Profile', href: '#', current: false},
|
||||
|
|
||||
{name: 'Resources', href: '#', current: false},
|
||||
|
|
||||
{name: 'Company Directory', href: '#', current: false},
|
||||
|
|
||||
{name: 'Openings', href: '#', current: false},
|
||||
|
|
||||
];
|
||||
|
|
||||
const userNavigation = [
|
||||
|
|
||||
{name: 'Your Profile', href: '#'},
|
||||
|
|
||||
{name: 'Settings', href: '#'},
|
||||
|
|
||||
{name: 'Sign out', href: '#'},
|
||||
|
|
||||
];
|
||||
|
|
||||
const stats = [
|
||||
|
|
||||
{label: 'Vacation days left', value: 12},
|
||||
|
|
||||
{label: 'Sick days left', value: 4},
|
||||
|
|
||||
{label: 'Personal days left', value: 2},
|
||||
|
|
||||
];
|
||||
|
|
||||
const actions = [
|
||||
|
|
||||
{
|
||||
|
|
||||
icon: ClockIcon,
|
||||
|
|
||||
name: 'Request time off',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
iconForeground: 'text-teal-700',
|
||||
|
|
||||
iconBackground: 'bg-teal-50',
|
||||
|
|
||||
},
|
||||
|
|
||||
{
|
||||
|
|
||||
icon: BadgeCheckIcon,
|
||||
|
|
||||
name: 'Benefits',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
iconForeground: 'text-purple-700',
|
||||
|
|
||||
iconBackground: 'bg-purple-50',
|
||||
|
|
||||
},
|
||||
|
|
||||
{
|
||||
|
|
||||
icon: UsersIcon,
|
||||
|
|
||||
name: 'Schedule a one-on-one',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
iconForeground: 'text-sky-700',
|
||||
|
|
||||
iconBackground: 'bg-sky-50',
|
||||
|
|
||||
},
|
||||
|
|
||||
{icon: CashIcon, name: 'Payroll', href: '#', iconForeground: 'text-yellow-700', iconBackground: 'bg-yellow-50'},
|
||||
|
|
||||
{
|
||||
|
|
||||
icon: ReceiptRefundIcon,
|
||||
|
|
||||
name: 'Submit an expense',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
iconForeground: 'text-rose-700',
|
||||
|
|
||||
iconBackground: 'bg-rose-50',
|
||||
|
|
||||
},
|
||||
|
|
||||
{
|
||||
|
|
||||
icon: AcademicCapIcon,
|
||||
|
|
||||
name: 'Training',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
iconForeground: 'text-indigo-700',
|
||||
|
|
||||
iconBackground: 'bg-indigo-50',
|
||||
|
|
||||
},
|
||||
|
|
||||
];
|
||||
|
|
||||
const recentHires = [
|
||||
|
|
||||
{
|
||||
|
|
||||
name: 'Leonard Krasner',
|
||||
|
|
||||
handle: 'leonardkrasner',
|
||||
|
|
||||
imageUrl:
|
||||
|
|
||||
'https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
},
|
||||
|
|
||||
{
|
||||
|
|
||||
name: 'Floyd Miles',
|
||||
|
|
||||
handle: 'floydmiles',
|
||||
|
|
||||
imageUrl:
|
||||
|
|
||||
'https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
},
|
||||
|
|
||||
{
|
||||
|
|
||||
name: 'Emily Selman',
|
||||
|
|
||||
handle: 'emilyselman',
|
||||
|
|
||||
imageUrl:
|
||||
|
|
||||
'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
},
|
||||
|
|
||||
{
|
||||
|
|
||||
name: 'Kristin Watson',
|
||||
|
|
||||
handle: 'kristinwatson',
|
||||
|
|
||||
imageUrl:
|
||||
|
|
||||
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
},
|
||||
|
|
||||
];
|
||||
|
|
||||
const announcements = [
|
||||
|
|
||||
{
|
||||
|
|
||||
id: 1,
|
||||
|
|
||||
title: 'Office closed on July 2nd',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
preview:
|
||||
|
|
||||
'Cum qui rem deleniti. Suscipit in dolor veritatis sequi aut. Vero ut earum quis deleniti. Ut a sunt eum cum ut repudiandae possimus. Nihil ex tempora neque cum consectetur dolores.',
|
||||
|
|
||||
},
|
||||
|
|
||||
{
|
||||
|
|
||||
id: 2,
|
||||
|
|
||||
title: 'New password policy',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
preview:
|
||||
|
|
||||
'Alias inventore ut autem optio voluptas et repellendus. Facere totam quaerat quam quo laudantium cumque eaque excepturi vel. Accusamus maxime ipsam reprehenderit rerum id repellendus rerum. Culpa cum vel natus. Est sit autem mollitia.',
|
||||
|
|
||||
},
|
||||
|
|
||||
{
|
||||
|
|
||||
id: 3,
|
||||
|
|
||||
title: 'Office closed on July 2nd',
|
||||
|
|
||||
href: '#',
|
||||
|
|
||||
preview:
|
||||
|
|
||||
'Tenetur libero voluptatem rerum occaecati qui est molestiae exercitationem. Voluptate quisquam iure assumenda consequatur ex et recusandae. Alias consectetur voluptatibus. Accusamus a ab dicta et. Consequatur quis dignissimos voluptatem nisi.',
|
||||
|
|
||||
},
|
||||
|
|
||||
];
|
||||
|
|
||||
|
||||
|
|
||||
export default {
|
||||
|
|
||||
name: 'Dashboard',
|
||||
|
|
||||
components: {
|
||||
|
|
||||
Menu,
|
||||
|
|
||||
MenuButton,
|
||||
|
|
||||
MenuItem,
|
||||
|
|
||||
MenuItems,
|
||||
|
|
||||
Popover,
|
||||
|
|
||||
PopoverButton,
|
||||
|
|
||||
PopoverOverlay,
|
||||
|
|
||||
PopoverPanel,
|
||||
|
|
||||
TransitionChild,
|
||||
|
|
||||
TransitionRoot,
|
||||
|
|
||||
BellIcon,
|
||||
|
|
||||
MenuIcon,
|
||||
|
|
||||
SearchIcon,
|
||||
|
|
||||
XIcon,
|
||||
|
|
||||
},
|
||||
|
|
||||
setup() {
|
||||
|
|
||||
return {
|
||||
|
|
||||
user,
|
||||
|
|
||||
navigation,
|
||||
|
|
||||
userNavigation,
|
||||
|
|
||||
stats,
|
||||
|
|
||||
actions,
|
||||
|
|
||||
recentHires,
|
||||
|
|
||||
announcements,
|
||||
|
|
||||
};
|
||||
|
|
||||
},
|
||||
|
|
||||
};
|
||||
|
|
||||
</script>
|
||||
|
|
||||
@@ -1 +1,14 @@
|
||||
require('./bootstrap');
|
||||
import {createApp, h} from 'vue';
|
||||
import {createInertiaApp} from '@inertiajs/inertia-vue3';
|
||||
import {InertiaProgress} from '@inertiajs/progress';
|
||||
|
||||
createInertiaApp({
|
||||
resolve: name => require(`./Pages/${name}`),
|
||||
setup({el, App, props, plugin}) {
|
||||
createApp({render: () => h(App, props)})
|
||||
.use(plugin)
|
||||
.mount(el);
|
||||
},
|
||||
});
|
||||
|
||||
InertiaProgress.init();
|
||||
|
||||
28
resources/js/bootstrap.js
vendored
28
resources/js/bootstrap.js
vendored
@@ -1,28 +0,0 @@
|
||||
window._ = require('lodash');
|
||||
|
||||
/**
|
||||
* We'll load the axios HTTP library which allows us to easily issue requests
|
||||
* to our Laravel back-end. This library automatically handles sending the
|
||||
* CSRF token as a header based on the value of the "XSRF" token cookie.
|
||||
*/
|
||||
|
||||
window.axios = require('axios');
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
/**
|
||||
* Echo exposes an expressive API for subscribing to channels and listening
|
||||
* for events that are broadcast by Laravel. Echo and event broadcasting
|
||||
* allows your team to easily build robust real-time web applications.
|
||||
*/
|
||||
|
||||
// import Echo from 'laravel-echo';
|
||||
|
||||
// window.Pusher = require('pusher-js');
|
||||
|
||||
// window.Echo = new Echo({
|
||||
// broadcaster: 'pusher',
|
||||
// key: process.env.MIX_PUSHER_APP_KEY,
|
||||
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
|
||||
// forceTLS: true
|
||||
// });
|
||||
14
resources/views/app.blade.php
Normal file
14
resources/views/app.blade.php
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="h-full bg-gray-100">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link href="{{ asset('/css/app.css') }}" rel="stylesheet"/>
|
||||
<script src="{{ asset('/js/app.js') }}" defer></script>
|
||||
@inertiaHead
|
||||
</head>
|
||||
<body class="h-full">
|
||||
@inertia
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,112 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Laravel</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
|
||||
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
|
||||
<svg viewBox="0 0 651 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto text-gray-700 sm:h-20">
|
||||
<g clip-path="url(#clip0)" fill="#EF3B2D">
|
||||
<path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
|
||||
<div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-white">Documentation</a></div>
|
||||
</div>
|
||||
|
||||
<div class="ml-12">
|
||||
<div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
|
||||
Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
|
||||
<div class="flex items-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
<div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laracasts.com" class="underline text-gray-900 dark:text-white">Laracasts</a></div>
|
||||
</div>
|
||||
|
||||
<div class="ml-12">
|
||||
<div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
|
||||
Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
|
||||
<div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel-news.com/" class="underline text-gray-900 dark:text-white">Laravel News</a></div>
|
||||
</div>
|
||||
|
||||
<div class="ml-12">
|
||||
<div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
|
||||
Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-l">
|
||||
<div class="flex items-center">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<div class="ml-4 text-lg leading-7 font-semibold text-gray-900 dark:text-white">Vibrant Ecosystem</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-12">
|
||||
<div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
|
||||
Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="underline">Forge</a>, <a href="https://vapor.laravel.com" class="underline">Vapor</a>, <a href="https://nova.laravel.com" class="underline">Nova</a>, and <a href="https://envoyer.io" class="underline">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="underline">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="underline">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="underline">Echo</a>, <a href="https://laravel.com/docs/horizon" class="underline">Horizon</a>, <a href="https://laravel.com/docs/sanctum" class="underline">Sanctum</a>, <a href="https://laravel.com/docs/telescope" class="underline">Telescope</a>, and more.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-4 sm:items-center sm:justify-between">
|
||||
<div class="text-center text-sm text-gray-500 sm:text-left">
|
||||
<div class="flex items-center">
|
||||
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="-mt-px w-5 h-5 text-gray-400">
|
||||
<path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
|
||||
<a href="https://laravel.bigcartel.com" class="ml-1 underline">
|
||||
Shop
|
||||
</a>
|
||||
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="ml-4 -mt-px w-5 h-5 text-gray-400">
|
||||
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
|
||||
</svg>
|
||||
|
||||
<a href="https://github.com/sponsors/taylorotwell" class="ml-1 underline">
|
||||
Sponsor
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
|
||||
Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,4 +4,4 @@ declare(strict_types=1);
|
||||
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get("/", fn() => view("welcome"));
|
||||
Route::get("/", fn() => inertia("Dashboard"));
|
||||
|
||||
19
tailwind.config.js
Normal file
19
tailwind.config.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const defaultTheme = require('tailwindcss/defaultTheme');
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
'./resources/**/*.vue',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/line-clamp')
|
||||
],
|
||||
};
|
||||
@@ -1,17 +0,0 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Tests\Feature;
|
||||
|
||||
use Tests\TestCase;
|
||||
|
||||
class ExampleTest extends TestCase
|
||||
{
|
||||
public function testExample(): void
|
||||
{
|
||||
$response = $this->get("/");
|
||||
|
||||
$response->assertStatus(200);
|
||||
}
|
||||
}
|
||||
19
tests/Feature/InertiaTest.php
Normal file
19
tests/Feature/InertiaTest.php
Normal file
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace Tests\Feature;
|
||||
|
||||
use Inertia\Testing\AssertableInertia as Assert;
|
||||
use Tests\TestCase;
|
||||
|
||||
class InertiaTest extends TestCase
|
||||
{
|
||||
public function testInertia(): void
|
||||
{
|
||||
$response = $this->get("/");
|
||||
|
||||
$response->assertOk();
|
||||
$response->assertInertia(fn(Assert $page) => $page->component("Dashboard"));
|
||||
}
|
||||
}
|
||||
9
webpack.config.js
Normal file
9
webpack.config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const path = require("path");
|
||||
|
||||
module.exports = {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve('resources/js')
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,10 @@
|
||||
const mix = require('laravel-mix');
|
||||
const webpackConfig = require('./webpack.config');
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Mix Asset Management
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Mix provides a clean, fluent API for defining some Webpack build steps
|
||||
| for your Laravel applications. By default, we are compiling the CSS
|
||||
| file for the application as well as bundling up all the JS files.
|
||||
|
|
||||
*/
|
||||
|
||||
mix.js('resources/js/app.js', 'public/js')
|
||||
.postCss('resources/css/app.css', 'public/css', [
|
||||
//
|
||||
]);
|
||||
mix.js("resources/js/app.js", "public/js")
|
||||
.vue(3)
|
||||
.postCss("resources/css/app.css", "public/css", [
|
||||
require("tailwindcss"),
|
||||
])
|
||||
.webpackConfig(webpackConfig)
|
||||
.sourceMaps();
|
||||
|
||||
Reference in New Issue
Block a user