ui: add page for edit Users & Access Management

apps/front/src/app.css

@@ -52,6 +52,9 @@
 	.btn-primary {
 		@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{
 		@apply block w-full h-12 rounded-primary border border-gray-300 text-gray-900;
@@ -59,6 +62,16 @@
 		@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{
 		@apply block text-black text-sm;
 	}

apps/front/src/routes/admin/+page.svelte

@@ -77,7 +77,7 @@
                                 </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>
+                                <a href="/admin/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, {user.name}</span></a>
                             </td>
                         </tr>
                     {/each}

apps/front/src/routes/admin/1/edit/+page.svelte

@@ -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>

apps/front/src/routes/schedule/1/edit/+page.svelte

@@ -9,7 +9,7 @@ const handleToggle = (newStatus: boolean) => {
 };
 </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">
         Edit
     </h1>
@@ -17,7 +17,7 @@ const handleToggle = (newStatus: boolean) => {
     <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 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">
                         <label for="first-name" class="label">Name</label>
                         <div class="mt-2">