Client/admin

client/.env

@@ -1,2 +1,2 @@
-VITE_BASE_URL=http://localhost:3000/api
+VITE_BASE_API=http://localhost:3000/api
 # VITE_BASE_URL=https://487a-113-161-73-213.ap.ngrok.io/api

client/src/App.vue

@@ -3,7 +3,67 @@ import { RouterView } from "vue-router";
 </script>
 
 <template>
-  <div class="dark:bg-gray-900 h-screen flex flex-col relative">
-    <RouterView class="flex-grow" />
+  <div
+    class="dark:bg-transparent h-screen max-h-screen min-h-screen flex flex-col relative bg-white overflow-hidden"
+  >
+    <div class="relative isolate">
+      <div
+        class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        aria-hidden="true"
+      >
+        <div
+          class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+          style="
+            clip-path: polygon(
+              74.1% 44.1%,
+              100% 61.6%,
+              97.5% 26.9%,
+              85.5% 0.1%,
+              80.7% 2%,
+              72.5% 32.5%,
+              60.2% 62.4%,
+              52.4% 68.1%,
+              47.5% 58.3%,
+              45.2% 34.5%,
+              27.5% 76.7%,
+              0.1% 64.9%,
+              17.9% 100%,
+              27.6% 76.8%,
+              76.1% 97.7%,
+              74.1% 44.1%
+            );
+          "
+        ></div>
+      </div>
+      <RouterView />
+      <div
+        class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+        aria-hidden="true"
+      >
+        <div
+          class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+          style="
+            clip-path: polygon(
+              74.1% 44.1%,
+              100% 61.6%,
+              97.5% 26.9%,
+              85.5% 0.1%,
+              80.7% 2%,
+              72.5% 32.5%,
+              60.2% 62.4%,
+              52.4% 68.1%,
+              47.5% 58.3%,
+              45.2% 34.5%,
+              27.5% 76.7%,
+              0.1% 64.9%,
+              17.9% 100%,
+              27.6% 76.8%,
+              76.1% 97.7%,
+              74.1% 44.1%
+            );
+          "
+        ></div>
+      </div>
+    </div>
   </div>
 </template>

client/src/components/admin/header.vue

@@ -1,3 +1,9 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import Button from "@/components/utilities/Button.vue";
+import DarkMode from "@/components/header/DarkMode.vue";
+</script>
+
 <template>
   <header class="absolute inset-x-0 top-0 z-50">
     <nav
@@ -44,10 +50,13 @@
           >Colors</a
         >
       </div>
-      <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-        <a href="#" class="text-sm font-semibold leading-6 text-gray-900"
-          >Logout <span aria-hidden="true">&rarr;</span></a
-        >
+      <div class="hidden lg:flex items-center lg:flex-1 lg:justify-end">
+        <DarkMode />
+        <Button text="Logout" variant="info" :isHoverEffect="true">
+          <template #rightIcon>
+            <Icon icon="ant-design:logout-outlined" class="ml-2" />
+          </template>
+        </Button>
       </div>
     </nav>
     <div class="lg:hidden" role="dialog" aria-modal="true">
@@ -82,7 +91,7 @@
             </svg>
           </button>
         </div>
-        <div class="mt-6 flow-root">
+        <div class="mt-6">
           <div class="-my-6 divide-y divide-gray-500/10">
             <div class="space-y-2 py-6">
               <a
@@ -107,6 +116,7 @@
               >
             </div>
             <div class="py-6">
+              <!-- <DarkMode /> -->
               <a
                 href="#"
                 class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"

client/src/components/ColorSet.vue → client/src/components/fixes/ColorSet.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import SettingService from "@/services/setting.service";
+import SettingService from "@/services/setting";
 
 const colors = ref<Array<any>>([]);
 

client/src/components/utilities/Button.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps<{
+  text: string;
+  class?: string;
+  variant?: string;
+  isOutline?: boolean;
+  isDisabled?: boolean;
+  isHoverEffect?: boolean;
+}>();
+
+const getClassOption = (color: string) => {
+  return props.isOutline
+    ? `border border-${color}-300`
+    : props.isHoverEffect
+    ? `hover:bg-${color}-500 hover:text-white`
+    : `bg-${color}-500 text-white`;
+};
+
+const classOptions = () => {
+  switch (props.variant) {
+    case "primary":
+      return getClassOption("blue");
+    case "info":
+      return getClassOption("purple");
+    case "warning":
+      return getClassOption("orange");
+    case "error":
+      return getClassOption("red");
+    default:
+      return "";
+  }
+};
+
+const emits = defineEmits(["onSubmit"]);
+
+const onSubmit = () => {
+  emits("onSubmit");
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    @click="onSubmit"
+    :disabled="isDisabled ?? false"
+    :class="`${
+      props.class
+    } ${classOptions()} flex items-center rounded-md px-2.5 py-1.5 font-medium dark:text-white`"
+  >
+    <slot name="leftIcon" />
+    <span>{{ props.text }}</span>
+    <slot name="rightIcon" />
+  </button>
+</template>

client/src/components/utilities/Dialog.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+defineProps<{
+  isOpen: boolean;
+  title: string;
+  hasIcon?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="relative z-10">
+    <slot name="openButton" />
+    <Transition
+      enter-from-class="opacity-0"
+      enter-active-class="ease-out duration-300"
+      enter-to-class="opacity-100"
+      leave-from-class="opacity-100"
+      leave-active-class="ease-in duration-200"
+      leave-to-class="opacity-0"
+    >
+      <div
+        class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+        v-if="isOpen"
+      />
+    </Transition>
+    <Transition
+      enter-from-class="opacity-0 sm:-translate-y-4 sm:scale-95"
+      enter-active-class="ease-out duration-300"
+      enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+      leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+      leave-active-class="ease-in duration-200"
+      leave-to-class="opacity-0 -translate-y-4 sm:scale-95"
+    >
+      <div class="fixed inset-0 z-10 overflow-y-auto" v-if="isOpen">
+        <div
+          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+        >
+          <div
+            class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+          >
+            <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <div class="sm:flex sm:items-start">
+                <div
+                  class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
+                >
+                  <slot name="icon" />
+                </div>
+                <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                  <h3
+                    class="text-base font-semibold leading-6 text-gray-900 mb-2"
+                    id="modal-title"
+                  >
+                    {{ title }}
+                  </h3>
+                  <slot name="content" />
+                </div>
+              </div>
+            </div>
+            <div
+              class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6"
+            >
+              <slot name="doneButton" />
+              <slot name="closeButton" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>

client/src/components/utilities/Input.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const props = defineProps<{
+  value: string;
+  type?: string;
+  required?: boolean;
+  placeholder?: string;
+  class?: string;
+  disabled?: boolean;
+}>();
+
+const emits = defineEmits(["update:value"]);
+
+const updateValue = (value: string) => {
+  emits("update:value", value);
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center rounded-md shadow-sm dark:ring-transparent ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-purple-600 sm:text-sm sm:leading-6 dark:bg-white/10 text-gray-900 dark:text-gray-200"
+    :class="`${props.class} ${
+      props.disabled ? 'cursor-none pointer-events-none' : ''
+    }`"
+  >
+    <slot name="leftIcon" />
+    <input
+      :type="props.type || 'text'"
+      :value="props.value"
+      @input="(e: any) => updateValue(e.target?.value)"
+      :required="props.required || false"
+      :autocomplete="props.value ? 'on' : 'off'"
+      :disabled="props.disabled || false"
+      :placeholder="props.placeholder || ''"
+      autofocus
+      class="w-full border-0 bg-transparent placeholder:text-gray-400 focus:ring-0"
+    />
+    <slot name="rightIcon" />
+  </div>
+</template>