Skip to content

Commit 996b115

Browse files
phpfourphpfour
committed
Add initial dashboard page markup
1 parent 239129c commit 996b115

File tree

5 files changed

+212
-147
lines changed

5 files changed

+212
-147
lines changed

‎app/Http/Controllers/DashboardController.php

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<?php
2+
3+
namespace App\Http\Controllers;
4+
5+
class DashboardController extends Controller
6+
{
7+
public function index()
8+
{
9+
return view('app');
10+
}
11+
}

‎app/Providers/NativeAppServiceProvider.php

-6
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,8 @@ public function boot(): void
1818
{
1919
Menu::new()
2020
->appMenu()
21-
->submenu('About', Menu::new()
22-
->link('https://beyondco.de', 'Beyond Code')
23-
->link('https://simonhamp.me', 'Simon Hamp')
24-
)
2521
->submenu('View', Menu::new()
2622
->toggleFullscreen()
27-
->separator()
28-
->link('https://laravel.com', 'Learn More', 'CmdOrCtrl+L')
2923
)
3024
->register();
3125

‎resources/views/app.blade.php

+199
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
<!doctype html>
2+
<html class="h-full bg-gray-100">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
@vite('resources/css/app.css')
7+
</head>
8+
<body class="h-full">
9+
<div class="min-h-full">
10+
<div class="flex flex-1 flex-col">
11+
<div class="flex h-16 flex-shrink-0 border-b border-gray-200 bg-white lg:border-none">
12+
<!-- Search bar -->
13+
<div class="flex flex-1 justify-between px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
14+
<div class="flex flex-1">
15+
<form class="flex w-full md:ml-0" action="#" method="GET">
16+
<label for="search-field" class="sr-only">Search</label>
17+
<div class="relative w-full text-gray-400 focus-within:text-gray-600">
18+
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center" aria-hidden="true">
19+
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
20+
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
21+
</svg>
22+
</div>
23+
<input id="search-field" name="search-field" class="block h-full w-full border-transparent py-2 pl-8 pr-3 text-gray-900 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm" placeholder="Search transactions" type="search">
24+
</div>
25+
</form>
26+
</div>
27+
<div class="ml-4 flex items-center md:ml-6">
28+
<button type="button" class="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
29+
<span class="sr-only">View notifications</span>
30+
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
31+
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
32+
</svg>
33+
</button>
34+
</div>
35+
</div>
36+
</div>
37+
<main class="flex-1 pb-8">
38+
<!-- Page header -->
39+
<div class="bg-white shadow">
40+
<div class="px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
41+
<div class="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-gray-200">
42+
<div class="min-w-0 flex-1">
43+
<!-- Profile -->
44+
<div class="flex items-center">
45+
<div>
46+
<div class="flex items-center">
47+
<img class="h-16 w-16 rounded-full sm:hidden" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80" alt="">
48+
<h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:leading-9">Good morning, Mohammad Emran!</h1>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
<div class="mt-6 flex space-x-3 md:ml-4 md:mt-0">
54+
<button type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Add Income</button>
55+
<button type="button" class="inline-flex items-center rounded-md bg-cyan-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600">Add Expense</button>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
61+
<div class="mt-8">
62+
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
63+
<h2 class="text-lg font-medium leading-6 text-gray-900">Overview</h2>
64+
<div class="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
65+
<!-- Card -->
66+
<div class="overflow-hidden rounded-lg bg-white shadow">
67+
<div class="p-5">
68+
<div class="flex items-center">
69+
<div class="flex-shrink-0">
70+
<svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
71+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
72+
</svg>
73+
</div>
74+
<div class="ml-5 w-0 flex-1">
75+
<dl>
76+
<dt class="truncate text-sm font-medium text-gray-500">Account balance</dt>
77+
<dd>
78+
<div class="text-lg font-medium text-gray-900">$30,659.45</div>
79+
</dd>
80+
</dl>
81+
</div>
82+
</div>
83+
</div>
84+
<div class="bg-gray-50 px-5 py-3">
85+
<div class="text-sm">
86+
<a href="#" class="font-medium text-cyan-700 hover:text-cyan-900">View all</a>
87+
</div>
88+
</div>
89+
</div>
90+
91+
<!-- More items... -->
92+
</div>
93+
</div>
94+
95+
<h2 class="mx-auto mt-8 max-w-6xl px-4 text-lg font-medium leading-6 text-gray-900 sm:px-6 lg:px-8">Recent activity</h2>
96+
97+
<!-- Activity list (smallest breakpoint only) -->
98+
<div class="shadow sm:hidden">
99+
<ul role="list" class="mt-2 divide-y divide-gray-200 overflow-hidden shadow sm:hidden">
100+
<li>
101+
<a href="#" class="block bg-white px-4 py-4 hover:bg-gray-50">
102+
<span class="flex items-center space-x-4">
103+
<span class="flex flex-1 space-x-2 truncate">
104+
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
105+
<path fill-rule="evenodd" d="M1 4a1 1 0 011-1h16a1 1 0 011 1v8a1 1 0 01-1 1H2a1 1 0 01-1-1V4zm12 4a3 3 0 11-6 0 3 3 0 016 0zM4 9a1 1 0 100-2 1 1 0 000 2zm13-1a1 1 0 11-2 0 1 1 0 012 0zM1.75 14.5a.75.75 0 000 1.5c4.417 0 8.693.603 12.749 1.73 1.111.309 2.251-.512 2.251-1.696v-.784a.75.75 0 00-1.5 0v.784a.272.272 0 01-.35.25A49.043 49.043 0 001.75 14.5z" clip-rule="evenodd" />
106+
</svg>
107+
<span class="flex flex-col truncate text-sm text-gray-500">
108+
<span class="truncate">Payment to Molly Sanders</span>
109+
<span><span class="font-medium text-gray-900">$20,000</span> USD</span>
110+
<time datetime="2020-07-11">July 11, 2020</time>
111+
</span>
112+
</span>
113+
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
114+
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
115+
</svg>
116+
</span>
117+
</a>
118+
</li>
119+
120+
<!-- More transactions... -->
121+
</ul>
122+
123+
<nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3" aria-label="Pagination">
124+
<div class="flex flex-1 justify-between">
125+
<a href="#" class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Previous</a>
126+
<a href="#" class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Next</a>
127+
</div>
128+
</nav>
129+
</div>
130+
131+
<!-- Activity table (small breakpoint and up) -->
132+
<div class="hidden sm:block">
133+
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
134+
<div class="mt-2 flex flex-col">
135+
<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
136+
<table class="min-w-full divide-y divide-gray-200">
137+
<thead>
138+
<tr>
139+
<th class="bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900" scope="col">Transaction</th>
140+
<th class="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900" scope="col">Amount</th>
141+
<th class="hidden bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900 md:block" scope="col">Status</th>
142+
<th class="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900" scope="col">Date</th>
143+
</tr>
144+
</thead>
145+
<tbody class="divide-y divide-gray-200 bg-white">
146+
<tr class="bg-white">
147+
<td class="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-gray-900">
148+
<div class="flex">
149+
<a href="#" class="group inline-flex space-x-2 truncate text-sm">
150+
<svg class="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
151+
<path fill-rule="evenodd" d="M1 4a1 1 0 011-1h16a1 1 0 011 1v8a1 1 0 01-1 1H2a1 1 0 01-1-1V4zm12 4a3 3 0 11-6 0 3 3 0 016 0zM4 9a1 1 0 100-2 1 1 0 000 2zm13-1a1 1 0 11-2 0 1 1 0 012 0zM1.75 14.5a.75.75 0 000 1.5c4.417 0 8.693.603 12.749 1.73 1.111.309 2.251-.512 2.251-1.696v-.784a.75.75 0 00-1.5 0v.784a.272.272 0 01-.35.25A49.043 49.043 0 001.75 14.5z" clip-rule="evenodd" />
152+
</svg>
153+
<p class="truncate text-gray-500 group-hover:text-gray-900">Payment to Molly Sanders</p>
154+
</a>
155+
</div>
156+
</td>
157+
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
158+
<span class="font-medium text-gray-900">$20,000</span>
159+
USD
160+
</td>
161+
<td class="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
162+
<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-100 text-green-800 capitalize">success</span>
163+
</td>
164+
<td class="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
165+
<time datetime="2020-07-11">July 11, 2020</time>
166+
</td>
167+
</tr>
168+
169+
<!-- More transactions... -->
170+
</tbody>
171+
</table>
172+
<!-- Pagination -->
173+
<nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6" aria-label="Pagination">
174+
<div class="hidden sm:block">
175+
<p class="text-sm text-gray-700">
176+
Showing
177+
<span class="font-medium">1</span>
178+
to
179+
<span class="font-medium">10</span>
180+
of
181+
<span class="font-medium">20</span>
182+
results
183+
</p>
184+
</div>
185+
<div class="flex flex-1 justify-between gap-x-3 sm:justify-end">
186+
<a href="#" class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400">Previous</a>
187+
<a href="#" class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400">Next</a>
188+
</div>
189+
</nav>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
</div>
195+
</main>
196+
</div>
197+
</div>
198+
</body>
199+
</html>

0 commit comments

Comments
 (0)