spy4x/gb-lux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: add page Users & Access Management

Browse Source
This commit is contained in:
Eirene 2024-07-30 20:50:03 +08:00
parent cc0378a910
commit 379968156e
3 changed files with 104 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/front/src/app.css
View File

@ -10,34 +10,35 @@
@apply text-base text-black;
}
.h1 {
@apply text-4xl font-semibold mb-4;
@apply text-4xl font-semibold;
}
.h2 {
@apply text-3xl font-semibold mb-3;
@apply text-3xl font-semibold;
}
.h3 {
@apply text-2xl font-medium mb-2;
@apply text-2xl font-medium;
}
.h4 {
@apply text-xl font-medium mb-2;
@apply text-xl font-medium;
}
.h5 {
@apply text-lg font-medium mb-2;
@apply text-lg font-medium;
}
.h6 {
@apply text-base font-medium mb-2;
@apply text-base font-medium;
}
.p {
@apply text-base mb-4;
@apply text-base;
}
.text-primary{@apply text-purple-600;}
.bg-primary{@apply bg-purple-900;}
.border-primary{@apply border-purple-600;}
.rounded-primary{@apply rounded-lg;}
}

93
apps/front/src/routes/admin/+page.svelte
View File

@ -1,3 +1,90 @@
<h1 class="text-3xl font-bold text-center text-gray-900">
To be discussed...
</h1>
<script lang="ts">
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">
<h1 class="h1">
Users & Access Management
</h1>
<div class="ml-auto">
<button type="button" class="btn btn-primary">Add user</button>
</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 text-black sm:pl-6">{user.name}</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="/" class="text-primary hover:underline">Edit<span class="sr-only">, {user.name}</span></a>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>
</section>

12
apps/front/src/routes/schedule/+page.svelte
View File

@ -2,7 +2,7 @@
</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">
Schedule
</h1>
@ -23,9 +23,9 @@
</th>
</tr>
</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>
<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">
@ -44,7 +44,7 @@
</td>
</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">
@ -63,7 +63,7 @@
</td>
</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">
@ -82,7 +82,7 @@
</td>
</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">