feat: admin dashboard fixed all modals and views

Author: syntaxlexx

.env.example

@@ -5,6 +5,7 @@ APP_DEBUG=true
 APP_URL=http://laravelte.test
 SESSION_DOMAIN=laravelte.test
 SANCTUM_STATEFUL_DOMAINS=laravelte.test
+APP_LOGO="/img/laravelte_logo.png"
 
 LOG_CHANNEL=stack
 LOG_DEPRECATIONS_CHANNEL=null

.env.testing

@@ -5,6 +5,7 @@ APP_DEBUG=true
 APP_URL=http://laravelte.test
 SESSION_DOMAIN=laravelte.test
 SANCTUM_STATEFUL_DOMAINS=laravelte.test
+APP_LOGO="/img/laravelte_logo.png"
 
 LOG_CHANNEL=stack
 LOG_DEPRECATIONS_CHANNEL=null

.github/workflows/deploy-ci.yml

@@ -7,7 +7,7 @@
 # Make sure that your key algorithm of choice is supported. On Ubuntu 20.04 or later you must explicitly allow the use of the ssh-rsa algorithm. Add the following line to your OpenSSH daemon file (which is either /etc/ssh/sshd_config or a drop-in file under /etc/ssh/sshd_config.d/):
 # CASignatureAlgorithms +ssh-rsa
 
-name: Deploy Education-Materials to Production
+name: Deploy Laravelte to Production
 
 # Controls when the workflow will run
 on:

database/seeders/DemoTableSeeder.php

@@ -2,6 +2,7 @@
 
 namespace Database\Seeders;
 
+use App\Models\ContactMessage;
 use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use Illuminate\Database\Seeder;
 
@@ -12,6 +13,6 @@ class DemoTableSeeder extends Seeder
      */
     public function run(): void
     {
-        //
+        ContactMessage::factory(10)->create();
     }
 }

resources/css/app.css

@@ -33,6 +33,9 @@ body, p, h1, h2, h3 {
 .form-error {
    @apply text-right;
 }
+.checkbox {
+    @apply ml-2 text-sm font-medium text-gray-900 dark:text-gray-300
+}
 .scrollbar-hidden::-webkit-scrollbar {
     display: none;
 }
@@ -49,14 +52,49 @@ a {
 .page-top-padding {
     @apply mt-28;
 }
+.scrollbar-hidden::-webkit-scrollbar {
+    display: none;
+}
+
+
 
 /* ========== Table =========== */
 .table-responsive {
-	@apply overflow-x-auto;
+    @apply overflow-x-auto relative shadow-md sm:rounded-lg;
+}
+table {
+    @apply w-full text-sm text-left rounded text-gray-500 dark:text-gray-400;
+}
+table caption {
+    @apply p-5 text-lg font-semibold text-left text-gray-900 bg-white dark:text-white dark:bg-gray-800;
 }
 
-.scrollbar-hidden::-webkit-scrollbar {
-    display: none;
+table caption p {
+    @apply mt-1 text-sm font-normal text-gray-500 dark:text-gray-400;
+}
+
+table thead,
+table tfoot {
+    @apply text-xs text-gray-700 uppercase bg-gray-50 dark:bg-[#2c3543] dark:text-gray-400;
+}
+
+table thead tr td,
+table thead tr th,
+table tfoot tr td,
+table tfoot tr th {
+    @apply py-3 px-6;
+}
+table tbody tr {
+    @apply bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700;
+}
+table tbody tr th {
+    @apply py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white;
+}
+table tbody tr td {
+    @apply py-4 px-6;
+}
+table .actions {
+    @apply flex gap-2;
 }
 
 
@@ -105,5 +143,5 @@ a {
 	@apply p-6 space-y-6;
 }
 .modal-footer {
-	@apply mt-3 p-6 space-y-6 border-t border-gray-600 flex justify-end items-center gap-3;
+	@apply mt-3 p-6 space-y-6 border-t border-gray-600 flex justify-end items-baseline gap-3;
 }

resources/ts/Components/AdminSidebar.svelte

@@ -43,7 +43,7 @@
         },
         {
             title: ' My Profile',
-            route: route('user.profile'),
+            route: route('admin.profile'),
             icon: 'user',
         },
         {

resources/ts/Components/Button.svelte

@@ -6,7 +6,7 @@
     const dispatch = createEventDispatcher()
 
     type ButtonSize = 'normal' | 'sm' | 'lg'
-    type ButtonColor = 'primary' | 'secondary' | 'tertiary'
+    type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'ghost'
 
     export let size: ButtonSize = 'normal'
     export let color: ButtonColor = 'primary'
@@ -54,6 +54,9 @@
     button.tertiary {
         @apply bg-gradient-to-r from-tertiary-500 via-tertiary-600 to-tertiary-700 hover:opacity-70;
     }
+    button.ghost {
+        @apply border border-primary-700 dark:border-primary-300 text-primary-800 dark:text-primary-200;
+    }
     button.btn-sm {
         @apply py-1 lg:py-2 px-2 lg:px-3;
     }

resources/ts/Components/Circle.svelte

@@ -1,44 +1,54 @@
 <script lang="ts">
-	import Icon from './Icon.svelte';
-	import { createEventDispatcher } from 'svelte';
+    import Icon from './Icon.svelte'
+    import { createEventDispatcher } from 'svelte'
 
-	const dispatch = createEventDispatcher();
+    const dispatch = createEventDispatcher()
 
-	function handleClick() {
-		dispatch('click');
-	}
+    function handleClick() {
+        dispatch('click')
+    }
 
-	type CircleSize = 'sm' | 'lg' | 'xl' | 'n';
-	type CircleColor = 'primary' | 'danger' | 'success' | 'error' | 'warning';
+    type CircleSize = 'sm' | 'lg' | 'xl' | 'n'
+    type CircleColor = 'primary' | 'danger' | 'success' | 'error' | 'warning'
 
-	export let icon = 'edit';
-	export let size: CircleSize = 'sm';
-	export let color: CircleColor = 'primary';
-
-	$: btnSize =
-		size == 'xl'
-			? 'w-12 h-12 text-3xl'
-			: size == 'lg'
-			? 'w-10 h-10 text-2xl'
-			: size == 'sm'
-			? 'w-6 h-6 text-base'
-			: 'w-8 h-8 text-xl';
-
-	$: btnColor =
-		color == 'primary'
-			? 'blue'
-			: color == 'success'
-			? 'green'
-			: color == 'warning'
-			? 'yellow'
-			: 'red';
+    export let icon = 'edit'
+    export let size: CircleSize = 'sm'
+    export let color: CircleColor = 'primary'
 </script>
 
 <button
-	type="button"
-	class="{btnSize} rounded-full bg-{btnColor}-500 hover:bg-{btnColor}-600 focus:bg-{btnColor}-700 text-white flex flex-col items-center justify-center"
-	on:click={handleClick}
-	{...$$props}
+    type="button"
+    class="circle-{size} rounded-full circle-{color} text-white flex flex-col items-center justify-center"
+    on:click={handleClick}
+    {...$$props}
 >
-	<Icon name={icon} />
+    <Icon name={icon} />
 </button>
+
+<style lang="css">
+    button.circle-primary {
+        @apply bg-primary-500 hover:bg-primary-600 focus:bg-primary-700;
+    }
+    button.circle-success {
+        @apply bg-green-500 hover:bg-green-600 focus:bg-green-700;
+    }
+    button.circle-warning {
+        @apply bg-yellow-500 hover:bg-yellow-600 focus:bg-yellow-700;
+    }
+    button.circle-error,
+    button.circle-danger {
+        @apply bg-red-500 hover:bg-red-600 focus:bg-red-700;
+    }
+    button.circle-xl {
+        @apply w-12 h-12 text-3xl;
+    }
+    button.circle-lg {
+        @apply w-10 h-10 text-2xl;
+    }
+    button.circle-sm {
+        @apply w-6 h-6 text-base;
+    }
+    button.circle-n {
+        @apply w-8 h-8 text-xl;
+    }
+</style>