Compare commits
3 Commits
main
...
ui-users-m
| Author | SHA1 | Date | |
|---|---|---|---|
| 9ab79b2778 | |||
| 30a6ade9f6 | |||
| 379968156e |
@ -10,47 +10,51 @@
|
|||||||
@apply text-base text-black;
|
@apply text-base text-black;
|
||||||
}
|
}
|
||||||
.h1 {
|
.h1 {
|
||||||
@apply text-4xl font-semibold mb-4;
|
@apply text-3xl xl:text-4xl font-semibold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2 {
|
.h2 {
|
||||||
@apply text-3xl font-semibold mb-3;
|
@apply text-2xl xl:text-3xl font-semibold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h3 {
|
.h3 {
|
||||||
@apply text-2xl font-medium mb-2;
|
@apply text-xl xl:text-2xl font-medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h4 {
|
.h4 {
|
||||||
@apply text-xl font-medium mb-2;
|
@apply text-lg xl:text-xl font-medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h5 {
|
.h5 {
|
||||||
@apply text-lg font-medium mb-2;
|
@apply text-lg font-medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h6 {
|
.h6 {
|
||||||
@apply text-base font-medium mb-2;
|
@apply text-base font-medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p {
|
.p {
|
||||||
@apply text-base mb-4;
|
@apply text-base;
|
||||||
}
|
}
|
||||||
.text-primary{@apply text-purple-600;}
|
.text-primary{@apply text-purple-600;}
|
||||||
.bg-primary{@apply bg-purple-900;}
|
.bg-primary{@apply bg-purple-900;}
|
||||||
|
.border-primary{@apply border-purple-600;}
|
||||||
.rounded-primary{@apply rounded-lg;}
|
.rounded-primary{@apply rounded-lg;}
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
.btn {
|
.btn {
|
||||||
@apply cursor-pointer flex items-center justify-center gap-2;
|
@apply cursor-pointer flex items-center justify-center gap-2;
|
||||||
@apply rounded-primary px-6 h-12 text-white;
|
@apply rounded-primary px-6 h-12 text-white whitespace-nowrap;
|
||||||
@apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
|
@apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
@apply bg-primary text-purple-50 hover:bg-purple-600 focus-visible:outline-purple-600;
|
@apply bg-primary text-purple-50 hover:bg-purple-600 focus-visible:outline-purple-600;
|
||||||
}
|
}
|
||||||
|
.btn-danger{
|
||||||
|
@apply border border-red-600 text-red-600 hover:bg-red-700 hover:text-red-50 focus-visible:outline-red-700;
|
||||||
|
}
|
||||||
|
|
||||||
.input{
|
.input{
|
||||||
@apply block w-full h-12 rounded-primary border border-gray-300 text-gray-900;
|
@apply block w-full h-12 rounded-primary border border-gray-300 text-gray-900;
|
||||||
@ -58,6 +62,16 @@
|
|||||||
@apply focus:border-purple-600 focus:ring-1 focus:ring-inset focus:ring-transparent;
|
@apply focus:border-purple-600 focus:ring-1 focus:ring-inset focus:ring-transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select{
|
||||||
|
@apply input;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea{
|
||||||
|
@apply block w-full min-h-24 rounded-primary border border-gray-300 text-gray-900;
|
||||||
|
@apply placeholder:text-gray-500;
|
||||||
|
@apply focus:border-purple-600 focus:ring-1 focus:ring-inset focus:ring-transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.label{
|
.label{
|
||||||
@apply block text-black text-sm;
|
@apply block text-black text-sm;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,94 @@
|
|||||||
<h1 class="text-3xl font-bold text-center text-gray-900">
|
<script lang="ts">
|
||||||
To be discussed...
|
const users = [
|
||||||
|
{
|
||||||
|
name: "Leslie Alexander",
|
||||||
|
username: "leslie.alexander",
|
||||||
|
role: "Viewer",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Michael Foster",
|
||||||
|
username: "michael.foster",
|
||||||
|
role: "Viewer",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Dries Vincent",
|
||||||
|
username: "dries.vincent",
|
||||||
|
role: "User",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Lindsay Walton",
|
||||||
|
username: "lindsay.walton",
|
||||||
|
role: "User",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Courtney Henry",
|
||||||
|
username: "courtney.henry",
|
||||||
|
role: "Operator",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Tom Cook",
|
||||||
|
username: "tom.cook",
|
||||||
|
role: "Administrator",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<h1 class="h1">
|
||||||
|
Users & Access Management
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
|
<div class="ml-auto">
|
||||||
|
<a href="/admin/1/add/" class="btn btn-primary">Add user</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="-mx-4 lg:mx-0 overflow-x-auto p-px">
|
||||||
|
<div class="inline-block min-w-full py-2 align-middle">
|
||||||
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 lg:rounded-primary">
|
||||||
|
<table class="min-w-full divide-y divide-gray-300 text-sm">
|
||||||
|
<thead class="bg-gray-50 font-medium">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="py-3.5 pl-4 pr-3 text-left sm:pl-6">Name</th>
|
||||||
|
<th scope="col" class="px-3 py-3.5 text-left">Username</th>
|
||||||
|
<th scope="col" class="px-3 py-3.5 text-left">Role</th>
|
||||||
|
<th scope="col" class="px-3 py-3.5 text-left">Comment</th>
|
||||||
|
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
|
||||||
|
<span class="sr-only">Edit</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-200 bg-white text-gray-500">
|
||||||
|
{#each users as user}
|
||||||
|
<tr>
|
||||||
|
<td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 sm:pl-6">
|
||||||
|
<a href="/admin/1/edit/" class="text-black hover:underline">
|
||||||
|
{user.name}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="whitespace-nowrap px-3 py-4 text-sm">{user.username}</td>
|
||||||
|
<td class="whitespace-nowrap px-3 py-4 text-sm">
|
||||||
|
{#if user.role.toLowerCase() === "administrator"}
|
||||||
|
<span class="-translate-x-2 inline-flex items-center rounded-primary px-2 py-1
|
||||||
|
text-primary border border-primary">
|
||||||
|
{user.role}
|
||||||
|
</span>
|
||||||
|
{:else}
|
||||||
|
{user.role}
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
<td class="whitespace-nowrap px-3 py-4 text-sm"></td>
|
||||||
|
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
|
||||||
|
<a href="/admin/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, {user.name}</span></a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|||||||
70
apps/front/src/routes/admin/1/add/+page.svelte
Normal file
70
apps/front/src/routes/admin/1/add/+page.svelte
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
|
||||||
|
<h1 class="h1">
|
||||||
|
Add new user
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="space-y-10 divide-y divide-gray-900/10">
|
||||||
|
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
|
||||||
|
<div class="px-4 py-6 sm:p-8">
|
||||||
|
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<label for="first-name" class="label">First Name</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input type="text" name="name1" id="first-name" autocomplete="given-name"
|
||||||
|
class="input" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<label for="last-name" class="label">Last Name</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input type="text" name="name" id="last-name" autocomplete="given-name"
|
||||||
|
class="input" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-2 sm:col-start-1">
|
||||||
|
<label for="username" class="label">Username</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input type="text" name="username" id="username" autocomplete="username"
|
||||||
|
class="input" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<label for="password" class="label">Password</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input type="password" name="password" id="password" autocomplete="given-name"
|
||||||
|
class="input" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-4 sm:col-start-1">
|
||||||
|
<label for="role" class="label">Role</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<select id="role" name="role" class="select">
|
||||||
|
<option>Administrator</option>
|
||||||
|
<option>Operator</option>
|
||||||
|
<option selected>Viewer</option>
|
||||||
|
<option>User</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-4 sm:col-start-1">
|
||||||
|
<label for="comment" class="label">Comment</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<textarea id="comment" class="textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-end gap-x-4 border-t border-gray-900/10 px-4 py-4 sm:px-8">
|
||||||
|
<a href="/admin" class="btn text-purple-600">Cancel</a>
|
||||||
|
<button type="submit" class="btn btn-primary">Save</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
72
apps/front/src/routes/admin/1/edit/+page.svelte
Normal file
72
apps/front/src/routes/admin/1/edit/+page.svelte
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
|
||||||
|
<h1 class="h1">
|
||||||
|
Edit
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="space-y-10 divide-y divide-gray-900/10">
|
||||||
|
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
|
||||||
|
<div class="px-4 py-6 sm:p-8">
|
||||||
|
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<label for="first-name" class="label">First Name</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input type="text" name="name1" id="first-name" autocomplete="given-name"
|
||||||
|
class="input" value="Lindsay">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<label for="last-name" class="label">Last Name</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input type="text" name="name" id="last-name" autocomplete="given-name"
|
||||||
|
class="input" value="Walton">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-2 sm:col-start-1">
|
||||||
|
<label for="username" class="label">Username</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input type="text" name="username" id="username" autocomplete="username"
|
||||||
|
class="input" value="leslie.alexander">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<label for="password" class="label">Password</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input type="password" name="password" id="password" autocomplete="given-name"
|
||||||
|
class="input" value="slfj832849JSDF!#38">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-4 sm:col-start-1">
|
||||||
|
<label for="role" class="label">Role</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<select id="role" name="role" class="select">
|
||||||
|
<option>Administrator</option>
|
||||||
|
<option>Operator</option>
|
||||||
|
<option selected>Viewer</option>
|
||||||
|
<option>User</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-4 sm:col-start-1">
|
||||||
|
<label for="comment" class="label">Comment</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<textarea id="comment" class="textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-end gap-x-4 border-t border-gray-900/10 px-4 py-4 sm:px-8">
|
||||||
|
<button type="button" class="btn btn-danger mr-auto">Delete</button>
|
||||||
|
|
||||||
|
<a href="/admin" class="btn text-purple-600">Cancel</a>
|
||||||
|
<button type="submit" class="btn btn-primary">Save</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="space-y-4 lg:space-y-8">
|
<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
|
||||||
<h1 class="h1">
|
<h1 class="h1">
|
||||||
Schedule
|
Schedule
|
||||||
</h1>
|
</h1>
|
||||||
@ -23,9 +23,28 @@
|
|||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="divide-y divide-gray-200 bg-white text-gray-600">
|
<tbody class="divide-y divide-gray-200 bg-white text-gray-500">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
|
<td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 sm:pl-6">
|
||||||
|
<a href="/schedule/1/edit/" class="text-black hover:underline">South entrance weekends</a>
|
||||||
|
</td>
|
||||||
|
<td class="whitespace-nowrap px-3 py-4">
|
||||||
|
17:00
|
||||||
|
</td>
|
||||||
|
<td class="whitespace-nowrap px-3 py-4">02:00</td>
|
||||||
|
<td class="whitespace-nowrap px-3 py-4">
|
||||||
|
<div class="flex items-center gap-x-2">
|
||||||
|
<span class="h-2 w-2 rounded-full bg-green-600"></span>
|
||||||
|
<span class="text-gray-500">On</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
|
||||||
|
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
|
||||||
|
<a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">
|
||||||
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
|
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
|
||||||
</td>
|
</td>
|
||||||
<td class="whitespace-nowrap px-3 py-4">
|
<td class="whitespace-nowrap px-3 py-4">
|
||||||
@ -44,7 +63,7 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
|
<td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">
|
||||||
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
|
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
|
||||||
</td>
|
</td>
|
||||||
<td class="whitespace-nowrap px-3 py-4">
|
<td class="whitespace-nowrap px-3 py-4">
|
||||||
@ -63,26 +82,7 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
|
<td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">
|
||||||
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
|
|
||||||
</td>
|
|
||||||
<td class="whitespace-nowrap px-3 py-4">
|
|
||||||
17:00
|
|
||||||
</td>
|
|
||||||
<td class="whitespace-nowrap px-3 py-4">02:00</td>
|
|
||||||
<td class="whitespace-nowrap px-3 py-4">
|
|
||||||
<div class="flex items-center gap-x-2">
|
|
||||||
<span class="h-2 w-2 rounded-full bg-green-600"></span>
|
|
||||||
<span class="text-gray-500">On</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
|
|
||||||
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
|
|
||||||
<a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
|
|
||||||
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
|
<a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
|
||||||
</td>
|
</td>
|
||||||
<td class="whitespace-nowrap px-3 py-4">
|
<td class="whitespace-nowrap px-3 py-4">
|
||||||
|
|||||||
@ -9,7 +9,7 @@ const handleToggle = (newStatus: boolean) => {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="space-y-4 lg:space-y-8">
|
<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
|
||||||
<h1 class="h1">
|
<h1 class="h1">
|
||||||
Edit
|
Edit
|
||||||
</h1>
|
</h1>
|
||||||
@ -17,7 +17,7 @@ const handleToggle = (newStatus: boolean) => {
|
|||||||
<div class="space-y-10 divide-y divide-gray-900/10">
|
<div class="space-y-10 divide-y divide-gray-900/10">
|
||||||
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
|
<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
|
||||||
<div class="px-4 py-6 sm:p-8">
|
<div class="px-4 py-6 sm:p-8">
|
||||||
<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
|
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
|
||||||
<div class="sm:col-span-5">
|
<div class="sm:col-span-5">
|
||||||
<label for="first-name" class="label">Name</label>
|
<label for="first-name" class="label">Name</label>
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user