{"id":306,"date":"2024-03-17T22:22:17","date_gmt":"2024-03-18T01:22:17","guid":{"rendered":"https:\/\/ventiladorcito.com\/blog\/?p=306"},"modified":"2024-03-17T22:22:17","modified_gmt":"2024-03-18T01:22:17","slug":"mascotas-perdidas-py-parte-vi","status":"publish","type":"post","link":"https:\/\/ventiladorcito.com\/blog\/2024\/03\/mascotas-perdidas-py-parte-vi\/","title":{"rendered":"Mascotas Perdidas Py &#8211; Parte VI"},"content":{"rendered":"\n<p>Crearemos un peque\u00f1o Layout para administrar nuestro sitio, para eso buscaremos un tema que nos guste, yo eleg\u00ed este <a href=\"https:\/\/startbootstrap.com\/theme\/sb-admin-2\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/startbootstrap.com\/theme\/sb-admin-2<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"646\" src=\"https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-2.png\" alt=\"\" class=\"wp-image-308\" srcset=\"https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-2.png 952w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-2-300x204.png 300w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-2-768x521.png 768w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-2-624x423.png 624w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>10 de diciembre<\/p>\n\n\n\n<p>Estuve el \u00faltimo par de d\u00edas trabajando para que funcione correctamente y un detalle importante a tener en cuenta para que funcione con <a href=\"https:\/\/laravel.com\/docs\/9.x\/vite\">vite<\/a> <\/p>\n\n\n\n<p>Las versiones:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>bootstrap: 4.6.0 Por error instal\u00e9 la versi\u00f3n 5.2.3 y estuve un buen tiempo tratando de hacer funcionar y nada funcionaba, en fin, fue algo frustrante<\/li>\n\n\n\n<li>@fortawesome\/fontawesome-free: 6.5.1<\/li>\n\n\n\n<li>jquery:3.7.1<\/li>\n\n\n\n<li>jquery.easing: 1.4.1<\/li>\n\n\n\n<li>chart.js: 2.9.4<\/li>\n<\/ul>\n\n\n\n<p>Esos paquetes hay que instalar con npm en la raiz del proyecto<\/p>\n\n\n\n<p>Luego tenemos que modificar el archivo vite.config.js para que luzca algo como esto:<\/p>\n\n\n\n<pre title=\"vite.config.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">import { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\nimport path from 'path';\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: [\n                \/\/ 'resources\/css\/app.css', \n                'resources\/js\/app.js',\n                'resources\/js\/sb-admin-2.js',\n                'resources\/js\/chart-area-demo.js',\n                'resources\/js\/chart-bar-demo.js',\n                'resources\/js\/chart-pie-demo.js'\n            ],\n            refresh: true,\n        }),\n    ],\n    resolve: {\n        alias: {\n            '~jquery': path.resolve(__dirname, 'node_modules\/jquery'),\n            '~jquery.easing':path.resolve(__dirname,'node_modules\/jquery.easing'),\n            '~bootstrap': path.resolve(__dirname, 'node_modules\/bootstrap'),\n            '~fontawesome':path.resolve(__dirname,'node_modules\/@fortawesome\/fontawesome-free'),\n            '~chart.js':path.resolve(__dirname,'node_modules\/chart.js')\n        }\n    },\n});\n<\/code><\/pre>\n\n\n\n<p>Nuestro archivo resources\/js\/app.js luce algo as\u00ed<\/p>\n\n\n\n<pre title=\"resources\/js\/app.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">import '.\/bootstrap';\n\n\/\/ Import all of Bootstrap's JS\nimport * as bootstrap from 'bootstrap';\nwindow.bootstrap = bootstrap;\n\nimport jquery from 'jquery';\nwindow.$ = jquery;\nwindow.jQuery = jquery;\n\n\/\/  import '.\/sb-admin-2';\nimport  'jquery.easing';\nimport 'chart.js';\n\/\/ window.eax = easing;\n\nimport.meta.glob([\n    '..\/img\/**',\n    \/\/ '..\/fonts\/**',\n    \/\/ '..\/..\/node_modules\/bootstrap-icons\/font\/fonts\/**'\n  ]);\n\n\n\nimport '..\/sass\/app.scss'\nimport '..\/css\/app.css'\nimport '..\/css\/sb-admin-2.css'\nimport '..\/css\/sb-admin-2.min.css'\n<\/code><\/pre>\n\n\n\n<p>Si se fijan, importamos los javascripts, propios del ejemplo como glob, eso de modo a que en los archivos blade podamos usarlos como<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;script type=\"module\" src=\"{{Vite::asset('resources\/js\/sb-admin-2.js')}}\"&gt;&lt;\/script&gt;\nreemplazando a la linea original:\n&lt;script src=\"js\/sb-admin-2.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>En nuestro archivo routes\/web.php reemplazamos la entrada de \/home que ten\u00edamos antes por esta:<\/p>\n\n\n\n<pre title=\"routes\/web.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">Route::get('\/home',[HomeController::class,'index'])-&gt;middleware(['auth','verified']);<\/code><\/pre>\n\n\n\n<p>Para poder probar nuestra vista, debemos crear un controlador llamado HomeController, al que se le aplican dos middlewares, uno de auth, es decir que est\u00e9 autenticado el usuario, y uno de verified, es decir que haya verificado su direcci\u00f3n de correo.<\/p>\n\n\n\n<p>Nuestro archivo app\/Http\/Controllers\/HomeController.php luce algo as\u00ed<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\n\nclass HomeController extends Controller\n{\n    public function index(Request $request){\n        return view('users.home');\n    }\n}<\/code><\/pre>\n\n\n\n<p>Como se dar\u00e1n cuenta esto nos empuja a crear una carpeta users dentro de nuestro resources\/views que es donde Laravel deposita las vistas<\/p>\n\n\n\n<p>De momento el archivo resources\/views\/users\/home.blade.php luce algo as\u00ed<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">@extends('layouts.main')<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Para que esto funcione, debemos crear otra carpeta llamada layouts dentro de resources\/views a modo que este sea el lugar donde depositemos los distintos layouts que vamos a necesitar<\/p>\n\n\n\n<p>El contenido del archivo resources\/views\/layouts\/main.blade.php lucira de momento algo as\u00ed, ya en el futuro se editar\u00e1 y ser\u00e1 de menor tama\u00f1o<\/p>\n\n\n\n<pre title=\"resources\/views\/layouts\/main.blade.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">\n&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n\n    &lt;meta charset=\"utf-8\">\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    &lt;meta name=\"description\" content=\"\">\n    &lt;meta name=\"author\" content=\"\">\n\n    &lt;title>SB Admin 2 - Dashboard&lt;\/title>\n\n    &lt;!-- Custom fonts for this template-->\n    {{-- &lt;link href=\"vendor\/fontawesome-free\/css\/all.min.css\" rel=\"stylesheet\" type=\"text\/css\"> --}}\n    @vite('resources\/js\/app.js')\n    &lt;link\n        href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i\"\n        rel=\"stylesheet\">\n\n    &lt;!-- Custom styles for this template-->\n    {{-- &lt;link href=\"css\/sb-admin-2.min.css\" rel=\"stylesheet\"> --}}\n\n&lt;\/head>\n\n&lt;body id=\"page-top\">\n\n    &lt;!-- Page Wrapper -->\n    &lt;div id=\"wrapper\">\n\n        &lt;!-- Sidebar -->\n        &lt;ul class=\"navbar-nav bg-gradient-primary sidebar sidebar-dark accordion\" id=\"accordionSidebar\">\n\n            &lt;!-- Sidebar - Brand -->\n            &lt;a class=\"sidebar-brand d-flex align-items-center justify-content-center\" href=\"index.html\">\n                &lt;div class=\"sidebar-brand-icon rotate-n-15\">\n                    &lt;i class=\"fas fa-laugh-wink\">&lt;\/i>\n                &lt;\/div>\n                &lt;div class=\"sidebar-brand-text mx-3\">SB Admin &lt;sup>2&lt;\/sup>&lt;\/div>\n            &lt;\/a>\n\n            &lt;!-- Divider -->\n            &lt;hr class=\"sidebar-divider my-0\">\n\n            &lt;!-- Nav Item - Dashboard -->\n            &lt;li class=\"nav-item active\">\n                &lt;a class=\"nav-link\" href=\"index.html\">\n                    &lt;i class=\"fas fa-fw fa-tachometer-alt\">&lt;\/i>\n                    &lt;span>Dashboard&lt;\/span>&lt;\/a>\n            &lt;\/li>\n\n            &lt;!-- Divider -->\n            &lt;hr class=\"sidebar-divider\">\n\n            &lt;!-- Heading -->\n            &lt;div class=\"sidebar-heading\">\n                Interface\n            &lt;\/div>\n\n            &lt;!-- Nav Item - Pages Collapse Menu -->\n            &lt;li class=\"nav-item\">\n                &lt;a class=\"nav-link collapsed\" href=\"#\" data-toggle=\"collapse\" data-target=\"#collapseTwo\"\n                    aria-expanded=\"true\" aria-controls=\"collapseTwo\">\n                    &lt;i class=\"fas fa-fw fa-cog\">&lt;\/i>\n                    &lt;span>Components&lt;\/span>\n                &lt;\/a>\n                &lt;div id=\"collapseTwo\" class=\"collapse\" aria-labelledby=\"headingTwo\" data-parent=\"#accordionSidebar\">\n                    &lt;div class=\"bg-white py-2 collapse-inner rounded\">\n                        &lt;h6 class=\"collapse-header\">Custom Components:&lt;\/h6>\n                        &lt;a class=\"collapse-item\" href=\"buttons.html\">Buttons&lt;\/a>\n                        &lt;a class=\"collapse-item\" href=\"cards.html\">Cards&lt;\/a>\n                    &lt;\/div>\n                &lt;\/div>\n            &lt;\/li>\n\n            &lt;!-- Nav Item - Utilities Collapse Menu -->\n            &lt;li class=\"nav-item\">\n                &lt;a class=\"nav-link collapsed\" href=\"#\" data-toggle=\"collapse\" data-target=\"#collapseUtilities\"\n                    aria-expanded=\"true\" aria-controls=\"collapseUtilities\">\n                    &lt;i class=\"fas fa-fw fa-wrench\">&lt;\/i>\n                    &lt;span>Utilities&lt;\/span>\n                &lt;\/a>\n                &lt;div id=\"collapseUtilities\" class=\"collapse\" aria-labelledby=\"headingUtilities\"\n                    data-parent=\"#accordionSidebar\">\n                    &lt;div class=\"bg-white py-2 collapse-inner rounded\">\n                        &lt;h6 class=\"collapse-header\">Custom Utilities:&lt;\/h6>\n                        &lt;a class=\"collapse-item\" href=\"utilities-color.html\">Colors&lt;\/a>\n                        &lt;a class=\"collapse-item\" href=\"utilities-border.html\">Borders&lt;\/a>\n                        &lt;a class=\"collapse-item\" href=\"utilities-animation.html\">Animations&lt;\/a>\n                        &lt;a class=\"collapse-item\" href=\"utilities-other.html\">Other&lt;\/a>\n                    &lt;\/div>\n                &lt;\/div>\n            &lt;\/li>\n\n            &lt;!-- Divider -->\n            &lt;hr class=\"sidebar-divider\">\n\n            &lt;!-- Heading -->\n            &lt;div class=\"sidebar-heading\">\n                Addons\n            &lt;\/div>\n\n            &lt;!-- Nav Item - Pages Collapse Menu -->\n            &lt;li class=\"nav-item\">\n                &lt;a class=\"nav-link collapsed\" href=\"#\" data-toggle=\"collapse\" data-target=\"#collapsePages\"\n                    aria-expanded=\"true\" aria-controls=\"collapsePages\">\n                    &lt;i class=\"fas fa-fw fa-folder\">&lt;\/i>\n                    &lt;span>Pages&lt;\/span>\n                &lt;\/a>\n                &lt;div id=\"collapsePages\" class=\"collapse\" aria-labelledby=\"headingPages\" data-parent=\"#accordionSidebar\">\n                    &lt;div class=\"bg-white py-2 collapse-inner rounded\">\n                        &lt;h6 class=\"collapse-header\">Login Screens:&lt;\/h6>\n                        &lt;a class=\"collapse-item\" href=\"login.html\">Login&lt;\/a>\n                        &lt;a class=\"collapse-item\" href=\"register.html\">Register&lt;\/a>\n                        &lt;a class=\"collapse-item\" href=\"forgot-password.html\">Forgot Password&lt;\/a>\n                        &lt;div class=\"collapse-divider\">&lt;\/div>\n                        &lt;h6 class=\"collapse-header\">Other Pages:&lt;\/h6>\n                        &lt;a class=\"collapse-item\" href=\"404.html\">404 Page&lt;\/a>\n                        &lt;a class=\"collapse-item\" href=\"blank.html\">Blank Page&lt;\/a>\n                    &lt;\/div>\n                &lt;\/div>\n            &lt;\/li>\n\n            &lt;!-- Nav Item - Charts -->\n            &lt;li class=\"nav-item\">\n                &lt;a class=\"nav-link\" href=\"charts.html\">\n                    &lt;i class=\"fas fa-fw fa-chart-area\">&lt;\/i>\n                    &lt;span>Charts&lt;\/span>&lt;\/a>\n            &lt;\/li>\n\n            &lt;!-- Nav Item - Tables -->\n            &lt;li class=\"nav-item\">\n                &lt;a class=\"nav-link\" href=\"tables.html\">\n                    &lt;i class=\"fas fa-fw fa-table\">&lt;\/i>\n                    &lt;span>Tables&lt;\/span>&lt;\/a>\n            &lt;\/li>\n\n            &lt;!-- Divider -->\n            &lt;hr class=\"sidebar-divider d-none d-md-block\">\n\n            &lt;!-- Sidebar Toggler (Sidebar) -->\n            &lt;div class=\"text-center d-none d-md-inline\">\n                &lt;button class=\"rounded-circle border-0\" id=\"sidebarToggle\">&lt;\/button>\n            &lt;\/div>\n\n            &lt;!-- Sidebar Message -->\n            &lt;div class=\"sidebar-card d-none d-lg-flex\">\n                &lt;img class=\"sidebar-card-illustration mb-2\" src=\"{{ Vite::asset('resources\/img\/undraw_rocket.svg') }}\" alt=\"...\">\n                &lt;p class=\"text-center mb-2\">&lt;strong>SB Admin Pro&lt;\/strong> is packed with premium features, components, and more!&lt;\/p>\n                &lt;a class=\"btn btn-success btn-sm\" href=\"https:\/\/startbootstrap.com\/theme\/sb-admin-pro\">Upgrade to Pro!&lt;\/a>\n            &lt;\/div>\n\n        &lt;\/ul>\n        &lt;!-- End of Sidebar -->\n\n        &lt;!-- Content Wrapper -->\n        &lt;div id=\"content-wrapper\" class=\"d-flex flex-column\">\n\n            &lt;!-- Main Content -->\n            &lt;div id=\"content\">\n\n                &lt;!-- Topbar -->\n                &lt;nav class=\"navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow\">\n\n                    &lt;!-- Sidebar Toggle (Topbar) -->\n                    &lt;button id=\"sidebarToggleTop\" class=\"btn btn-link d-md-none rounded-circle mr-3\">\n                        &lt;i class=\"fa fa-bars\">&lt;\/i>\n                    &lt;\/button>\n\n                    &lt;!-- Topbar Search -->\n                    &lt;form\n                        class=\"d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search\">\n                        &lt;div class=\"input-group\">\n                            &lt;input type=\"text\" class=\"form-control bg-light border-0 small\" placeholder=\"Search for...\"\n                                aria-label=\"Search\" aria-describedby=\"basic-addon2\">\n                            &lt;div class=\"input-group-append\">\n                                &lt;button class=\"btn btn-primary\" type=\"button\">\n                                    &lt;i class=\"fas fa-search fa-sm\">&lt;\/i>\n                                &lt;\/button>\n                            &lt;\/div>\n                        &lt;\/div>\n                    &lt;\/form>\n\n                    &lt;!-- Topbar Navbar -->\n                    &lt;ul class=\"navbar-nav ml-auto\">\n\n                        &lt;!-- Nav Item - Search Dropdown (Visible Only XS) -->\n                        &lt;li class=\"nav-item dropdown no-arrow d-sm-none\">\n                            &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"searchDropdown\" role=\"button\"\n                                data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                &lt;i class=\"fas fa-search fa-fw\">&lt;\/i>\n                            &lt;\/a>\n                            &lt;!-- Dropdown - Messages -->\n                            &lt;div class=\"dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in\"\n                                aria-labelledby=\"searchDropdown\">\n                                &lt;form class=\"form-inline mr-auto w-100 navbar-search\">\n                                    &lt;div class=\"input-group\">\n                                        &lt;input type=\"text\" class=\"form-control bg-light border-0 small\"\n                                            placeholder=\"Search for...\" aria-label=\"Search\"\n                                            aria-describedby=\"basic-addon2\">\n                                        &lt;div class=\"input-group-append\">\n                                            &lt;button class=\"btn btn-primary\" type=\"button\">\n                                                &lt;i class=\"fas fa-search fa-sm\">&lt;\/i>\n                                            &lt;\/button>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/form>\n                            &lt;\/div>\n                        &lt;\/li>\n\n                        &lt;!-- Nav Item - Alerts -->\n                        &lt;li class=\"nav-item dropdown no-arrow mx-1\">\n                            &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"alertsDropdown\" role=\"button\"\n                                data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                &lt;i class=\"fas fa-bell fa-fw\">&lt;\/i>\n                                &lt;!-- Counter - Alerts -->\n                                &lt;span class=\"badge badge-danger badge-counter\">3+&lt;\/span>\n                            &lt;\/a>\n                            &lt;!-- Dropdown - Alerts -->\n                            &lt;div class=\"dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in\"\n                                aria-labelledby=\"alertsDropdown\">\n                                &lt;h6 class=\"dropdown-header\">\n                                    Alerts Center\n                                &lt;\/h6>\n                                &lt;a class=\"dropdown-item d-flex align-items-center\" href=\"#\">\n                                    &lt;div class=\"mr-3\">\n                                        &lt;div class=\"icon-circle bg-primary\">\n                                            &lt;i class=\"fas fa-file-alt text-white\">&lt;\/i>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                    &lt;div>\n                                        &lt;div class=\"small text-gray-500\">December 12, 2019&lt;\/div>\n                                        &lt;span class=\"font-weight-bold\">A new monthly report is ready to download!&lt;\/span>\n                                    &lt;\/div>\n                                &lt;\/a>\n                                &lt;a class=\"dropdown-item d-flex align-items-center\" href=\"#\">\n                                    &lt;div class=\"mr-3\">\n                                        &lt;div class=\"icon-circle bg-success\">\n                                            &lt;i class=\"fas fa-donate text-white\">&lt;\/i>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                    &lt;div>\n                                        &lt;div class=\"small text-gray-500\">December 7, 2019&lt;\/div>\n                                        $290.29 has been deposited into your account!\n                                    &lt;\/div>\n                                &lt;\/a>\n                                &lt;a class=\"dropdown-item d-flex align-items-center\" href=\"#\">\n                                    &lt;div class=\"mr-3\">\n                                        &lt;div class=\"icon-circle bg-warning\">\n                                            &lt;i class=\"fas fa-exclamation-triangle text-white\">&lt;\/i>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                    &lt;div>\n                                        &lt;div class=\"small text-gray-500\">December 2, 2019&lt;\/div>\n                                        Spending Alert: We've noticed unusually high spending for your account.\n                                    &lt;\/div>\n                                &lt;\/a>\n                                &lt;a class=\"dropdown-item text-center small text-gray-500\" href=\"#\">Show All Alerts&lt;\/a>\n                            &lt;\/div>\n                        &lt;\/li>\n\n                        &lt;!-- Nav Item - Messages -->\n                        &lt;li class=\"nav-item dropdown no-arrow mx-1\">\n                            &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"messagesDropdown\" role=\"button\"\n                                data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                &lt;i class=\"fas fa-envelope fa-fw\">&lt;\/i>\n                                &lt;!-- Counter - Messages -->\n                                &lt;span class=\"badge badge-danger badge-counter\">7&lt;\/span>\n                            &lt;\/a>\n                            &lt;!-- Dropdown - Messages -->\n                            &lt;div class=\"dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in\"\n                                aria-labelledby=\"messagesDropdown\">\n                                &lt;h6 class=\"dropdown-header\">\n                                    Message Center\n                                &lt;\/h6>\n                                &lt;a class=\"dropdown-item d-flex align-items-center\" href=\"#\">\n                                    &lt;div class=\"dropdown-list-image mr-3\">\n                                        &lt;img class=\"rounded-circle\" src=\"{{ Vite::asset('resources\/img\/undraw_profile_1.svg') }}\"\n                                            alt=\"...\">\n                                        &lt;div class=\"status-indicator bg-success\">&lt;\/div>\n                                    &lt;\/div>\n                                    &lt;div class=\"font-weight-bold\">\n                                        &lt;div class=\"text-truncate\">Hi there! I am wondering if you can help me with a\n                                            problem I've been having.&lt;\/div>\n                                        &lt;div class=\"small text-gray-500\">Emily Fowler \u00b7 58m&lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/a>\n                                &lt;a class=\"dropdown-item d-flex align-items-center\" href=\"#\">\n                                    &lt;div class=\"dropdown-list-image mr-3\">\n                                        &lt;img class=\"rounded-circle\" src=\"{{ Vite::asset('resources\/img\/undraw_profile_2.svg') }}\"\n                                            alt=\"...\">\n                                        &lt;div class=\"status-indicator\">&lt;\/div>\n                                    &lt;\/div>\n                                    &lt;div>\n                                        &lt;div class=\"text-truncate\">I have the photos that you ordered last month, how\n                                            would you like them sent to you?&lt;\/div>\n                                        &lt;div class=\"small text-gray-500\">Jae Chun \u00b7 1d&lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/a>\n                                &lt;a class=\"dropdown-item d-flex align-items-center\" href=\"#\">\n                                    &lt;div class=\"dropdown-list-image mr-3\">\n                                        &lt;img class=\"rounded-circle\" src=\"{{ Vite::asset('resources\/img\/undraw_profile_3.svg') }}\"\n                                            alt=\"...\">\n                                        &lt;div class=\"status-indicator bg-warning\">&lt;\/div>\n                                    &lt;\/div>\n                                    &lt;div>\n                                        &lt;div class=\"text-truncate\">Last month's report looks great, I am very happy with\n                                            the progress so far, keep up the good work!&lt;\/div>\n                                        &lt;div class=\"small text-gray-500\">Morgan Alvarez \u00b7 2d&lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/a>\n                                &lt;a class=\"dropdown-item d-flex align-items-center\" href=\"#\">\n                                    &lt;div class=\"dropdown-list-image mr-3\">\n                                        &lt;img class=\"rounded-circle\" src=\"https:\/\/source.unsplash.com\/Mv9hjnEUHR4\/60x60\"\n                                            alt=\"...\">\n                                        &lt;div class=\"status-indicator bg-success\">&lt;\/div>\n                                    &lt;\/div>\n                                    &lt;div>\n                                        &lt;div class=\"text-truncate\">Am I a good boy? The reason I ask is because someone\n                                            told me that people say this to all dogs, even if they aren't good...&lt;\/div>\n                                        &lt;div class=\"small text-gray-500\">Chicken the Dog \u00b7 2w&lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/a>\n                                &lt;a class=\"dropdown-item text-center small text-gray-500\" href=\"#\">Read More Messages&lt;\/a>\n                            &lt;\/div>\n                        &lt;\/li>\n\n                        &lt;div class=\"topbar-divider d-none d-sm-block\">&lt;\/div>\n\n                        &lt;!-- Nav Item - User Information -->\n                        &lt;li class=\"nav-item dropdown no-arrow\">\n                            &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"userDropdown\" role=\"button\"\n                                data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                &lt;span class=\"mr-2 d-none d-lg-inline text-gray-600 small\">Douglas McGee&lt;\/span>\n                                &lt;img class=\"img-profile rounded-circle\"\n                                    src=\"{{ Vite::asset('resources\/img\/undraw_profile.svg') }}\">\n                            &lt;\/a>\n                            &lt;!-- Dropdown - User Information -->\n                            &lt;div class=\"dropdown-menu dropdown-menu-right shadow animated--grow-in\"\n                                aria-labelledby=\"userDropdown\">\n                                &lt;a class=\"dropdown-item\" href=\"#\">\n                                    &lt;i class=\"fas fa-user fa-sm fa-fw mr-2 text-gray-400\">&lt;\/i>\n                                    Profile\n                                &lt;\/a>\n                                &lt;a class=\"dropdown-item\" href=\"#\">\n                                    &lt;i class=\"fas fa-cogs fa-sm fa-fw mr-2 text-gray-400\">&lt;\/i>\n                                    Settings\n                                &lt;\/a>\n                                &lt;a class=\"dropdown-item\" href=\"#\">\n                                    &lt;i class=\"fas fa-list fa-sm fa-fw mr-2 text-gray-400\">&lt;\/i>\n                                    Activity Log\n                                &lt;\/a>\n                                &lt;div class=\"dropdown-divider\">&lt;\/div>\n                                &lt;a class=\"dropdown-item\" href=\"#\" data-toggle=\"modal\" data-target=\"#logoutModal\">\n                                    &lt;i class=\"fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400\">&lt;\/i>\n                                    Logout\n                                &lt;\/a>\n                            &lt;\/div>\n                        &lt;\/li>\n\n                    &lt;\/ul>\n\n                &lt;\/nav>\n                &lt;!-- End of Topbar -->\n\n                &lt;!-- Begin Page Content -->\n                &lt;div class=\"container-fluid\">\n\n                    &lt;!-- Page Heading -->\n                    &lt;div class=\"d-sm-flex align-items-center justify-content-between mb-4\">\n                        &lt;h1 class=\"h3 mb-0 text-gray-800\">Dashboard&lt;\/h1>\n                        &lt;a href=\"#\" class=\"d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm\">&lt;i\n                                class=\"fas fa-download fa-sm text-white-50\">&lt;\/i> Generate Report&lt;\/a>\n                    &lt;\/div>\n\n                    &lt;!-- Content Row -->\n                    &lt;div class=\"row\">\n\n                        &lt;!-- Earnings (Monthly) Card Example -->\n                        &lt;div class=\"col-xl-3 col-md-6 mb-4\">\n                            &lt;div class=\"card border-left-primary shadow h-100 py-2\">\n                                &lt;div class=\"card-body\">\n                                    &lt;div class=\"row no-gutters align-items-center\">\n                                        &lt;div class=\"col mr-2\">\n                                            &lt;div class=\"text-xs font-weight-bold text-primary text-uppercase mb-1\">\n                                                Earnings (Monthly)&lt;\/div>\n                                            &lt;div class=\"h5 mb-0 font-weight-bold text-gray-800\">$40,000&lt;\/div>\n                                        &lt;\/div>\n                                        &lt;div class=\"col-auto\">\n                                            &lt;i class=\"fas fa-calendar fa-2x text-gray-300\">&lt;\/i>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                            &lt;\/div>\n                        &lt;\/div>\n\n                        &lt;!-- Earnings (Monthly) Card Example -->\n                        &lt;div class=\"col-xl-3 col-md-6 mb-4\">\n                            &lt;div class=\"card border-left-success shadow h-100 py-2\">\n                                &lt;div class=\"card-body\">\n                                    &lt;div class=\"row no-gutters align-items-center\">\n                                        &lt;div class=\"col mr-2\">\n                                            &lt;div class=\"text-xs font-weight-bold text-success text-uppercase mb-1\">\n                                                Earnings (Annual)&lt;\/div>\n                                            &lt;div class=\"h5 mb-0 font-weight-bold text-gray-800\">$215,000&lt;\/div>\n                                        &lt;\/div>\n                                        &lt;div class=\"col-auto\">\n                                            &lt;i class=\"fas fa-dollar-sign fa-2x text-gray-300\">&lt;\/i>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                            &lt;\/div>\n                        &lt;\/div>\n\n                        &lt;!-- Earnings (Monthly) Card Example -->\n                        &lt;div class=\"col-xl-3 col-md-6 mb-4\">\n                            &lt;div class=\"card border-left-info shadow h-100 py-2\">\n                                &lt;div class=\"card-body\">\n                                    &lt;div class=\"row no-gutters align-items-center\">\n                                        &lt;div class=\"col mr-2\">\n                                            &lt;div class=\"text-xs font-weight-bold text-info text-uppercase mb-1\">Tasks\n                                            &lt;\/div>\n                                            &lt;div class=\"row no-gutters align-items-center\">\n                                                &lt;div class=\"col-auto\">\n                                                    &lt;div class=\"h5 mb-0 mr-3 font-weight-bold text-gray-800\">50%&lt;\/div>\n                                                &lt;\/div>\n                                                &lt;div class=\"col\">\n                                                    &lt;div class=\"progress progress-sm mr-2\">\n                                                        &lt;div class=\"progress-bar bg-info\" role=\"progressbar\"\n                                                            style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\"\n                                                            aria-valuemax=\"100\">&lt;\/div>\n                                                    &lt;\/div>\n                                                &lt;\/div>\n                                            &lt;\/div>\n                                        &lt;\/div>\n                                        &lt;div class=\"col-auto\">\n                                            &lt;i class=\"fas fa-clipboard-list fa-2x text-gray-300\">&lt;\/i>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                            &lt;\/div>\n                        &lt;\/div>\n\n                        &lt;!-- Pending Requests Card Example -->\n                        &lt;div class=\"col-xl-3 col-md-6 mb-4\">\n                            &lt;div class=\"card border-left-warning shadow h-100 py-2\">\n                                &lt;div class=\"card-body\">\n                                    &lt;div class=\"row no-gutters align-items-center\">\n                                        &lt;div class=\"col mr-2\">\n                                            &lt;div class=\"text-xs font-weight-bold text-warning text-uppercase mb-1\">\n                                                Pending Requests&lt;\/div>\n                                            &lt;div class=\"h5 mb-0 font-weight-bold text-gray-800\">18&lt;\/div>\n                                        &lt;\/div>\n                                        &lt;div class=\"col-auto\">\n                                            &lt;i class=\"fas fa-comments fa-2x text-gray-300\">&lt;\/i>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                            &lt;\/div>\n                        &lt;\/div>\n                    &lt;\/div>\n\n                    &lt;!-- Content Row -->\n\n                    &lt;div class=\"row\">\n\n                        &lt;!-- Area Chart -->\n                        &lt;div class=\"col-xl-8 col-lg-7\">\n                            &lt;div class=\"card shadow mb-4\">\n                                &lt;!-- Card Header - Dropdown -->\n                                &lt;div\n                                    class=\"card-header py-3 d-flex flex-row align-items-center justify-content-between\">\n                                    &lt;h6 class=\"m-0 font-weight-bold text-primary\">Earnings Overview&lt;\/h6>\n                                    &lt;div class=\"dropdown no-arrow\">\n                                        &lt;a class=\"dropdown-toggle\" href=\"#\" role=\"button\" id=\"dropdownMenuLink\"\n                                            data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                            &lt;i class=\"fas fa-ellipsis-v fa-sm fa-fw text-gray-400\">&lt;\/i>\n                                        &lt;\/a>\n                                        &lt;div class=\"dropdown-menu dropdown-menu-right shadow animated--fade-in\"\n                                            aria-labelledby=\"dropdownMenuLink\">\n                                            &lt;div class=\"dropdown-header\">Dropdown Header:&lt;\/div>\n                                            &lt;a class=\"dropdown-item\" href=\"#\">Action&lt;\/a>\n                                            &lt;a class=\"dropdown-item\" href=\"#\">Another action&lt;\/a>\n                                            &lt;div class=\"dropdown-divider\">&lt;\/div>\n                                            &lt;a class=\"dropdown-item\" href=\"#\">Something else here&lt;\/a>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                                &lt;!-- Card Body -->\n                                &lt;div class=\"card-body\">\n                                    &lt;div class=\"chart-area\">\n                                        &lt;canvas id=\"myAreaChart\">&lt;\/canvas>\n                                    &lt;\/div>\n                                &lt;\/div>\n                            &lt;\/div>\n                        &lt;\/div>\n\n                        &lt;!-- Pie Chart -->\n                        &lt;div class=\"col-xl-4 col-lg-5\">\n                            &lt;div class=\"card shadow mb-4\">\n                                &lt;!-- Card Header - Dropdown -->\n                                &lt;div\n                                    class=\"card-header py-3 d-flex flex-row align-items-center justify-content-between\">\n                                    &lt;h6 class=\"m-0 font-weight-bold text-primary\">Revenue Sources&lt;\/h6>\n                                    &lt;div class=\"dropdown no-arrow\">\n                                        &lt;a class=\"dropdown-toggle\" href=\"#\" role=\"button\" id=\"dropdownMenuLink\"\n                                            data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                                            &lt;i class=\"fas fa-ellipsis-v fa-sm fa-fw text-gray-400\">&lt;\/i>\n                                        &lt;\/a>\n                                        &lt;div class=\"dropdown-menu dropdown-menu-right shadow animated--fade-in\"\n                                            aria-labelledby=\"dropdownMenuLink\">\n                                            &lt;div class=\"dropdown-header\">Dropdown Header:&lt;\/div>\n                                            &lt;a class=\"dropdown-item\" href=\"#\">Action&lt;\/a>\n                                            &lt;a class=\"dropdown-item\" href=\"#\">Another action&lt;\/a>\n                                            &lt;div class=\"dropdown-divider\">&lt;\/div>\n                                            &lt;a class=\"dropdown-item\" href=\"#\">Something else here&lt;\/a>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                                &lt;!-- Card Body -->\n                                &lt;div class=\"card-body\">\n                                    &lt;div class=\"chart-pie pt-4 pb-2\">\n                                        &lt;canvas id=\"myPieChart\">&lt;\/canvas>\n                                    &lt;\/div>\n                                    &lt;div class=\"mt-4 text-center small\">\n                                        &lt;span class=\"mr-2\">\n                                            &lt;i class=\"fas fa-circle text-primary\">&lt;\/i> Direct\n                                        &lt;\/span>\n                                        &lt;span class=\"mr-2\">\n                                            &lt;i class=\"fas fa-circle text-success\">&lt;\/i> Social\n                                        &lt;\/span>\n                                        &lt;span class=\"mr-2\">\n                                            &lt;i class=\"fas fa-circle text-info\">&lt;\/i> Referral\n                                        &lt;\/span>\n                                    &lt;\/div>\n                                &lt;\/div>\n                            &lt;\/div>\n                        &lt;\/div>\n                    &lt;\/div>\n\n                    &lt;!-- Content Row -->\n                    &lt;div class=\"row\">\n\n                        &lt;!-- Content Column -->\n                        &lt;div class=\"col-lg-6 mb-4\">\n\n                            &lt;!-- Project Card Example -->\n                            &lt;div class=\"card shadow mb-4\">\n                                &lt;div class=\"card-header py-3\">\n                                    &lt;h6 class=\"m-0 font-weight-bold text-primary\">Projects&lt;\/h6>\n                                &lt;\/div>\n                                &lt;div class=\"card-body\">\n                                    &lt;h4 class=\"small font-weight-bold\">Server Migration &lt;span\n                                            class=\"float-right\">20%&lt;\/span>&lt;\/h4>\n                                    &lt;div class=\"progress mb-4\">\n                                        &lt;div class=\"progress-bar bg-danger\" role=\"progressbar\" style=\"width: 20%\"\n                                            aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\">&lt;\/div>\n                                    &lt;\/div>\n                                    &lt;h4 class=\"small font-weight-bold\">Sales Tracking &lt;span\n                                            class=\"float-right\">40%&lt;\/span>&lt;\/h4>\n                                    &lt;div class=\"progress mb-4\">\n                                        &lt;div class=\"progress-bar bg-warning\" role=\"progressbar\" style=\"width: 40%\"\n                                            aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\">&lt;\/div>\n                                    &lt;\/div>\n                                    &lt;h4 class=\"small font-weight-bold\">Customer Database &lt;span\n                                            class=\"float-right\">60%&lt;\/span>&lt;\/h4>\n                                    &lt;div class=\"progress mb-4\">\n                                        &lt;div class=\"progress-bar\" role=\"progressbar\" style=\"width: 60%\"\n                                            aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\">&lt;\/div>\n                                    &lt;\/div>\n                                    &lt;h4 class=\"small font-weight-bold\">Payout Details &lt;span\n                                            class=\"float-right\">80%&lt;\/span>&lt;\/h4>\n                                    &lt;div class=\"progress mb-4\">\n                                        &lt;div class=\"progress-bar bg-info\" role=\"progressbar\" style=\"width: 80%\"\n                                            aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\">&lt;\/div>\n                                    &lt;\/div>\n                                    &lt;h4 class=\"small font-weight-bold\">Account Setup &lt;span\n                                            class=\"float-right\">Complete!&lt;\/span>&lt;\/h4>\n                                    &lt;div class=\"progress\">\n                                        &lt;div class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 100%\"\n                                            aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\">&lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                            &lt;\/div>\n\n                            &lt;!-- Color System -->\n                            &lt;div class=\"row\">\n                                &lt;div class=\"col-lg-6 mb-4\">\n                                    &lt;div class=\"card bg-primary text-white shadow\">\n                                        &lt;div class=\"card-body\">\n                                            Primary\n                                            &lt;div class=\"text-white-50 small\">#4e73df&lt;\/div>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                                &lt;div class=\"col-lg-6 mb-4\">\n                                    &lt;div class=\"card bg-success text-white shadow\">\n                                        &lt;div class=\"card-body\">\n                                            Success\n                                            &lt;div class=\"text-white-50 small\">#1cc88a&lt;\/div>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                                &lt;div class=\"col-lg-6 mb-4\">\n                                    &lt;div class=\"card bg-info text-white shadow\">\n                                        &lt;div class=\"card-body\">\n                                            Info\n                                            &lt;div class=\"text-white-50 small\">#36b9cc&lt;\/div>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                                &lt;div class=\"col-lg-6 mb-4\">\n                                    &lt;div class=\"card bg-warning text-white shadow\">\n                                        &lt;div class=\"card-body\">\n                                            Warning\n                                            &lt;div class=\"text-white-50 small\">#f6c23e&lt;\/div>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                                &lt;div class=\"col-lg-6 mb-4\">\n                                    &lt;div class=\"card bg-danger text-white shadow\">\n                                        &lt;div class=\"card-body\">\n                                            Danger\n                                            &lt;div class=\"text-white-50 small\">#e74a3b&lt;\/div>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                                &lt;div class=\"col-lg-6 mb-4\">\n                                    &lt;div class=\"card bg-secondary text-white shadow\">\n                                        &lt;div class=\"card-body\">\n                                            Secondary\n                                            &lt;div class=\"text-white-50 small\">#858796&lt;\/div>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                                &lt;div class=\"col-lg-6 mb-4\">\n                                    &lt;div class=\"card bg-light text-black shadow\">\n                                        &lt;div class=\"card-body\">\n                                            Light\n                                            &lt;div class=\"text-black-50 small\">#f8f9fc&lt;\/div>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                                &lt;div class=\"col-lg-6 mb-4\">\n                                    &lt;div class=\"card bg-dark text-white shadow\">\n                                        &lt;div class=\"card-body\">\n                                            Dark\n                                            &lt;div class=\"text-white-50 small\">#5a5c69&lt;\/div>\n                                        &lt;\/div>\n                                    &lt;\/div>\n                                &lt;\/div>\n                            &lt;\/div>\n\n                        &lt;\/div>\n\n                        &lt;div class=\"col-lg-6 mb-4\">\n\n                            &lt;!-- Illustrations -->\n                            &lt;div class=\"card shadow mb-4\">\n                                &lt;div class=\"card-header py-3\">\n                                    &lt;h6 class=\"m-0 font-weight-bold text-primary\">Illustrations&lt;\/h6>\n                                &lt;\/div>\n                                &lt;div class=\"card-body\">\n                                    &lt;div class=\"text-center\">\n                                        &lt;img class=\"img-fluid px-3 px-sm-4 mt-3 mb-4\" style=\"width: 25rem;\"\n                                            src=\"{{ Vite::asset('resources\/img\/undraw_posting_photo.svg') }}\" alt=\"...\">\n                                    &lt;\/div>\n                                    &lt;p>Add some quality, svg illustrations to your project courtesy of &lt;a\n                                            target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/undraw.co\/\">unDraw&lt;\/a>, a\n                                        constantly updated collection of beautiful svg images that you can use\n                                        completely free and without attribution!&lt;\/p>\n                                    &lt;a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/undraw.co\/\">Browse Illustrations on\n                                        unDraw &amp;rarr;&lt;\/a>\n                                &lt;\/div>\n                            &lt;\/div>\n\n                            &lt;!-- Approach -->\n                            &lt;div class=\"card shadow mb-4\">\n                                &lt;div class=\"card-header py-3\">\n                                    &lt;h6 class=\"m-0 font-weight-bold text-primary\">Development Approach&lt;\/h6>\n                                &lt;\/div>\n                                &lt;div class=\"card-body\">\n                                    &lt;p>SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce\n                                        CSS bloat and poor page performance. Custom CSS classes are used to create\n                                        custom components and custom utility classes.&lt;\/p>\n                                    &lt;p class=\"mb-0\">Before working with this theme, you should become familiar with the\n                                        Bootstrap framework, especially the utility classes.&lt;\/p>\n                                &lt;\/div>\n                            &lt;\/div>\n\n                        &lt;\/div>\n                    &lt;\/div>\n\n                &lt;\/div>\n                &lt;!-- \/.container-fluid -->\n\n            &lt;\/div>\n            &lt;!-- End of Main Content -->\n\n            &lt;!-- Footer -->\n            &lt;footer class=\"sticky-footer bg-white\">\n                &lt;div class=\"container my-auto\">\n                    &lt;div class=\"copyright text-center my-auto\">\n                        &lt;span>Copyright &amp;copy; Your Website 2021&lt;\/span>\n                    &lt;\/div>\n                &lt;\/div>\n            &lt;\/footer>\n            &lt;!-- End of Footer -->\n\n        &lt;\/div>\n        &lt;!-- End of Content Wrapper -->\n\n    &lt;\/div>\n    &lt;!-- End of Page Wrapper -->\n\n    &lt;!-- Scroll to Top Button-->\n    &lt;a class=\"scroll-to-top rounded\" href=\"#page-top\">\n        &lt;i class=\"fas fa-angle-up\">&lt;\/i>\n    &lt;\/a>\n\n    &lt;!-- Logout Modal-->\n    &lt;div class=\"modal fade\" id=\"logoutModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\"\n        aria-hidden=\"true\">\n        &lt;div class=\"modal-dialog\" role=\"document\">\n            &lt;div class=\"modal-content\">\n                &lt;div class=\"modal-header\">\n                    &lt;h5 class=\"modal-title\" id=\"exampleModalLabel\">Ready to Leave?&lt;\/h5>\n                    &lt;button class=\"close\" type=\"button\" data-dismiss=\"modal\" aria-label=\"Close\">\n                        &lt;span aria-hidden=\"true\">\u00d7&lt;\/span>\n                    &lt;\/button>\n                &lt;\/div>\n                &lt;div class=\"modal-body\">Select \"Logout\" below if you are ready to end your current session.&lt;\/div>\n                &lt;div class=\"modal-footer\">\n                    &lt;button class=\"btn btn-secondary\" type=\"button\" data-dismiss=\"modal\">Cancel&lt;\/button>\n                    &lt;a class=\"btn btn-primary\" href=\"login.html\">Logout&lt;\/a>\n                &lt;\/div>\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n\n    &lt;!-- Bootstrap core JavaScript-->\n    {{-- &lt;script src=\"vendor\/jquery\/jquery.min.js\">&lt;\/script> --}}\n    {{-- &lt;script src=\"vendor\/bootstrap\/js\/bootstrap.bundle.min.js\">&lt;\/script> --}}\n\n    &lt;!-- Core plugin JavaScript-->\n    {{-- &lt;script src=\"vendor\/jquery-easing\/jquery.easing.min.js\">&lt;\/script> --}}\n\n    &lt;!-- Custom scripts for all pages-->\n    {{-- &lt;script src=\"js\/sb-admin-2.min.js\">&lt;\/script> --}}\n    {{-- @vite('js\/sb-admin-2.min.js') --}}\n    {{-- &lt;script type=\"module\" src=\"{{Vite::asset('resources\/js\/sb-admin-2.js')}}\">&lt;\/script> --}}\n    @vite('resources\/js\/sb-admin-2.js')\n    \n    &lt;!-- Page level plugins -->\n    {{-- &lt;script src=\"vendor\/chart.js\/Chart.min.js\">&lt;\/script> --}}\n\n    &lt;!-- Page level custom scripts -->\n    {{-- &lt;script src=\"js\/demo\/chart-area-demo.js\">&lt;\/script> --}}\n    &lt;script type=\"module\" src=\"{{Vite::asset('resources\/js\/chart-area-demo.js')}}\">&lt;\/script>\n    {{-- &lt;script src=\"js\/demo\/chart-pie-demo.js\">&lt;\/script> --}}\n    &lt;script type=\"module\" src=\"{{Vite::asset('resources\/js\/chart-pie-demo.js')}}\">&lt;\/script>\n\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>Luego ejecutamos el comando para que vite compile los recursos necesarios <strong>npm run build<\/strong> y tendremos una salida parecida a esta:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-3-1024x444.png\" alt=\"\" class=\"wp-image-310\" srcset=\"https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-3-1024x444.png 1024w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-3-300x130.png 300w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-3-768x333.png 768w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-3-624x271.png 624w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-3.png 1219w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Por cierto, los otros recursos, en este caso imagenes svg que vienen son el sb-admin los copian con su carpeta img a resources, de modo a que vite los compile<\/p>\n\n\n\n<p>El resultado final deber\u00eda lucir como luce el archivo original, solo que ahora ya est\u00e1 en modo Laravel y listo para nuestro proyecto<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-4-1024x569.png\" alt=\"\" class=\"wp-image-311\" srcset=\"https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-4-1024x569.png 1024w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-4-300x167.png 300w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-4-768x427.png 768w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-4-1536x853.png 1536w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-4-624x347.png 624w, https:\/\/ventiladorcito.com\/blog\/wp-content\/uploads\/2023\/12\/image-4.png 1780w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Al final a\u00fan no creamos el layout, pero si logramos compilar el proyecto como para poder hacerlo en la siguiente entrada<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Crearemos un peque\u00f1o Layout para administrar nuestro sitio, para eso buscaremos un tema que nos guste, yo eleg\u00ed este https:\/\/startbootstrap.com\/theme\/sb-admin-2 10 de diciembre Estuve el \u00faltimo par de d\u00edas trabajando para que funcione correctamente y un detalle importante a tener en cuenta para que funcione con vite Las versiones: Esos paquetes hay que instalar con [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-306","post","type-post","status-publish","format-standard","hentry","category-miscelaneas"],"_links":{"self":[{"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/posts\/306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/comments?post=306"}],"version-history":[{"count":1,"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/posts\/306\/revisions"}],"predecessor-version":[{"id":312,"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/posts\/306\/revisions\/312"}],"wp:attachment":[{"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/media?parent=306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/categories?post=306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ventiladorcito.com\/blog\/wp-json\/wp\/v2\/tags?post=306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}