Merge branch 'colors-and-styling'

app.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const themeStore = useThemeStore()
+
 useHead({
   titleTemplate: (title) => (title ? `${title} - Metschoo Library` : "Metschoo Library"),
   meta: [
@@ -22,8 +24,11 @@ useHead({
       rel: "stylesheet",
     },
   ],
+  htmlAttrs: {
+    class: computed(() => themeStore.theme),
+  },
   bodyAttrs: {
-    class: "bg-surface-200/80 dark:bg-surface-900 dark:text-gray-300",
+    class: "bg-surface-100/80 dark:bg-surface-900 dark:text-gray-300",
   },
 })
 </script>

assets/base.css

@@ -28,35 +28,32 @@
   --nav-link-active: var(--primary-200);
 }
 
-[data-theme="dark"] {
-  --background: var(--dark);
-  --text: var(--white);
-}
-
 :root {
   --p-primary-50: #eaf0ef;
   --p-primary-100: #d5e1e0;
   --p-primary-200: #c1d2d1;
-  --p-primary-300: #98b5b3;
-  --p-primary-500: #336f6c;
-  --p-primary-600: #2b605d;
+  --p-primary-300: hsl(175.86 16.38% 65.29%);
+  --p-primary-400: hsl(177.33, 19.48%, 45.29%);
+  --p-primary-500: hsl(177, 37.04%, 31.76%);
+  --p-primary-600: hsl(176.6, 38.13%, 27%);
   --p-primary-700: #23514e;
   --p-primary-900: #1c4240;
 
   --p-surface-0: hsl(0 0% 100%);
   --p-surface-50: hsl(210 40% 98%);
   --p-surface-100: hsl(210 32% 91%);
-  --p-surface-200: hsl(210 35% 80%);
+  --p-surface-200: hsl(200 35% 80%);
   --p-surface-300: hsl(213 27% 84%);
-  --p-surface-400: hsl(215 20% 65%);
-  --p-surface-500: hsl(215 16% 47%);
-  --p-surface-600: hsl(215 19% 35%);
+  --p-surface-400: hsl(215 20% 80%);
+  --p-surface-500: hsl(215 16% 75%);
+  --p-surface-600: hsl(218 40% 23%);
   --p-surface-700: hsl(219 35% 17%);
   --p-surface-800: hsl(219 46% 13%);
   --p-surface-900: hsl(222 47% 11%);
-  --p-surface-950: hsl(175 65% 3%);
+  --p-surface-950: hsl(168 38% 3%);
 
   --p-content-border-radius: 0.5rem;
+  --p-highlight-color: hsl(0, 50%, 100%);
 }
 
 :root {
@@ -76,3 +73,25 @@
   --p-text-muted-color: var(--p-surface-500);
   --p-text-hover-muted-color: var(--p-surface-600);
 }
+
+:root.dark {
+  --p-primary-color: var(--p-primary-400);
+  --p-primary-contrast-color: var(--p-surface-900);
+
+  --p-primary-hover-color: var(--p-primary-300);
+  --p-primary-active-color: var(--p-primary-200);
+
+  --p-content-border-color: var(--p-surface-700);
+  --p-content-hover-background: var(--p-surface-800);
+  --p-content-hover-color: var(--p-surface-0);
+
+  --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+  --p-highlight-color: rgba(255, 255, 255, 0.87);
+  --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+  --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
+
+  --p-text-color: var(--p-surface-0);
+  --p-text-hover-color: var(--p-surface-0);
+  --p-text-muted-color: var(--p-surface-400);
+  --p-text-hover-muted-color: var(--p-surface-300);
+}

assets/main.css

@@ -13,7 +13,6 @@ input {
 
 label {
   display: block;
-  padding-block-start: 0.75rem;
   line-height: 1;
 
   @apply dark:text-gray-300;

assets/presets/lara/datatable/index.js

@@ -341,7 +341,7 @@ export default {
             { 'bg-highlight': context.selected },
             { 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected },
             { 'font-bold bg-surface-0 dark:bg-surface-800 z-20': props.frozenRow },
-            { 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-800 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-900/50': context.stripedRows },
+            { 'odd:bg-surface-0 dark:odd:bg-surface-800 even:bg-surface-50 dark:even:bg-surface-900/50': context.stripedRows },
 
             // State
             { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 ring-inset dark:focus:ring-primary-300/50': context.selectable },

components/TheNavbar.vue

@@ -44,6 +44,9 @@ const isAdmin = computed(() =>
           <MdiClose />
         </button>
       </li>
+      <li>
+        <ThemeToggle class="nav-link text-lg" />
+      </li>
       <li>
         <NuxtLink class="nav-link" to="/"> Beranda </NuxtLink>
       </li>

components/ThemeToggle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import IconMoonCrescent from "~icons/mdi/moon-and-stars"
+import IconSun from "~icons/mdi/weather-sunny"
+import { type Theme } from "@/types"
+
+const themeStore = useThemeStore()
+
+function toggleTheme(theme: Theme) {
+  themeStore.setTheme(theme === "light" ? "dark" : "light")
+}
+</script>
+
+<template>
+  <button @click="toggleTheme(themeStore.theme)" :title="`mode ${themeStore.theme}`">
+    <IconMoonCrescent v-if="themeStore.theme === 'dark'" />
+    <IconSun v-else />
+  </button>
+</template>

components/admin/DataRow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AdminPeminjamanData as PeminjamanData } from "@/pages/admin/index.vue"
+import type { PeminjamanData } from "@/pages/admin/index.vue"
 
 interface Props {
   data: PeminjamanData[number]

components/profile/ProfileBook.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PeminjamanData } from "@/pages/profil/index.vue"
+import type { PeminjamanData } from "@/pages/admin/index.vue"
 
 interface Props {
   data: PeminjamanData[number]

lib/peminjaman.ts

@@ -1,7 +1,6 @@
 import type { PostgrestError } from "@supabase/supabase-js"
 import type { Database } from "@/types/database.types.ts"
-import type { AdminPeminjamanData } from "@/pages/admin/index.vue"
-import type { PeminjamanData } from "@/pages/profil/index.vue"
+import type { PeminjamanData } from "@/pages/admin/index.vue"
 
 export async function getPeminjamanData(
   startDate?: Date | null,
@@ -24,7 +23,7 @@ export async function getPeminjamanData(
     const { data, error } = await query
 
     if (error) throw error
-    return data as AdminPeminjamanData
+    return data
   } catch (error) {
     console.log(error as PostgrestError)
     return []

pages/admin/buku/[isbn].vue

@@ -4,8 +4,6 @@ import { useDialog } from "@/composables"
 import type { Kategori } from "@/types"
 import type { PostgrestError, QueryData } from "@supabase/supabase-js"
 
-import LoadingSpinner from "@/components/LoadingSpinner.vue"
-import Select from "primevue/select"
 import type { Database } from "~/types/database.types.ts"
 
 definePageMeta({
@@ -15,7 +13,7 @@ definePageMeta({
 const supabase = useSupabaseClient<Database>()
 const isLoading = ref(false)
 
-const availableCategories = ref<Kategori[] | null>([])
+const availableCategories = ref<Kategori[]>([])
 const router = useRouter()
 const currentRoute = useRoute()
 
@@ -173,13 +171,11 @@ function toggleFormVisibility() {
           required
         />
         <label for="buku-jumlah">Jumlah</label>
-        <InputText
+        <InputNumber
           id="buku-jumlah"
           v-model="buku.jumlah_exspl"
-          type="number"
+          :invalid="0 > buku.jumlah_exspl || buku.jumlah_exspl > 1000"
           name="buku-jumlah"
-          min="0"
-          max="10000"
           required
         />
         <label for="buku-kategori">Kategori</label>

pages/admin/buku/tambah.vue

@@ -208,13 +208,12 @@ const router = useRouter()
 
       <label for="buku-jumlah">
         Jumlah
-        <InputText
+        <InputNumber
           id="buku-jumlah"
           v-model="buku.jumlah_exspl"
-          type="number"
+          :min="0"
+          :max="10000"
           name="buku-jumlah"
-          min="0"
-          max="10000"
           placeholder="jumlah buku"
           required
         />

pages/admin/index.vue

@@ -9,7 +9,7 @@ import type { Buku, Peminjaman } from "@/types"
 import DataRow from "@/components/admin/DataRow.vue"
 import ConfirmDialog from "primevue/confirmdialog"
 import Toast from "primevue/toast"
-import { getAdminPeminjamanData } from "@/lib/peminjaman"
+import { getPeminjamanData } from "@/lib/peminjaman"
 import { useConfirm } from "primevue/useconfirm"
 import { useToast } from "primevue/usetoast"
 import type { Database } from "~/types/database.types.ts"
@@ -29,8 +29,8 @@ const isLoading = ref(false)
 const peminjamanQuery = supabase
   .from("peminjaman")
   .select("*, peminjaman_state(name), pengguna(nama, kelas, jurusan), buku(*)")
-export type AdminPeminjamanData = QueryData<typeof peminjamanQuery>
-const peminjamanData = ref<AdminPeminjamanData>([])
+export type PeminjamanData = QueryData<typeof peminjamanQuery>
+const peminjamanData = ref<PeminjamanData>([])
 
 const bukusBorrowPending = computed(() => {
   return peminjamanData.value.filter((data) => data.state_id === 1)
@@ -46,7 +46,7 @@ const bukusReturnPending = computed(() => {
 
 onMounted(async () => {
   isLoading.value = true
-  peminjamanData.value = await getAdminPeminjamanData()
+  peminjamanData.value = await getPeminjamanData()
   isLoading.value = false
 })
 
@@ -122,7 +122,7 @@ async function insertPeminjamandata(payload: RealtimePostgresChangesPayload<Pemi
   try {
     const { data, error } = await supabase
       .from("peminjaman")
-      .select("pengguna(nama, kelas, jurusan), buku(*)")
+      .select("peminjaman_state(name), pengguna(nama, kelas, jurusan), buku(*)")
       .eq("id", (payload.new as Peminjaman).id)
       .single()
     if (error) throw error

pages/admin/peminjaman.vue

@@ -44,9 +44,7 @@ const lateClass = (data: Peminjaman) => {
   <PageHeader heading="Data peminjaman" />
 
   <section class="main-section">
-    <h2>Belum dikonfirmasi</h2>
-
-    <form class="pt-8 pb-4 flex gap-4" @submit.prevent="handleFilterPeminjaman">
+    <form class="py-4 flex gap-4" @submit.prevent="handleFilterPeminjaman">
       <FloatLabel>
         <DatePicker
           v-model="startDate"

pages/admin/pengguna/[id].vue

@@ -57,16 +57,16 @@ const keteranganText = (state_id: Peminjaman["state_id"]) => {
 <template>
   <LoadingSpinner v-if="isLoading" />
 
-  <div v-if="!isLoading && !pengguna" class="max-w-100ch mx-auto">
+  <div v-else-if="!pengguna" class="max-w-100ch mx-auto">
     <h1>pengguna tidak ditemukan!</h1>
-  </div>
 
-  <div v-else class="max-w-[100ch] mx-auto">
-    <PageHeader v-if="!pengguna" heading="gagal memuat pengguna!">
+    <PageHeader heading="gagal memuat pengguna!">
       <p>Silahkan coba lagi.</p>
     </PageHeader>
+  </div>
 
-    <PageHeader v-else :heading="pengguna.nama">
+  <div v-else class="max-w-[100ch] mx-auto">
+    <PageHeader :heading="pengguna.nama">
       <routerLink to="/admin/pengguna">kembali</routerLink>
 
       <p>kelas: {{ pengguna.kelas ? pengguna.kelas : "tidak ada kelas" }}</p>

pages/profil/index.vue

@@ -3,6 +3,7 @@ import type { PostgrestError, QueryData } from "@supabase/supabase-js"
 import { getPeminjamanData } from "~/lib/peminjaman"
 import type { Pengguna } from "~/types"
 import type { Database } from "~/types/database.types"
+import type { PeminjamanData } from "@/pages/admin/index.vue"
 
 useHead({
   title: "Profil",
@@ -14,9 +15,6 @@ definePageMeta({
 
 const supabase = useSupabaseClient<Database>()
 
-const peminjamanQuery = supabase.from("peminjaman").select("*, buku(*)")
-export type PeminjamanData = QueryData<typeof peminjamanQuery>
-
 const bukuYangDipinjam = ref<PeminjamanData>([])
 
 /** daftar buku yang belum dikonfirmasi */

stores/theme.ts

@@ -0,0 +1,19 @@
+import { ref } from "vue"
+import { type Theme } from "@/types"
+
+export const useThemeStore = defineStore("theme", () => {
+  const THEME_KEY = "ml-app-theme"
+  const theme: Ref<Theme> = ref("dark")
+
+  function getTheme(): Theme {
+    const storedTheme = ref(localStorage.getItem(THEME_KEY) || "dark")
+    return storedTheme.value as Theme
+  }
+
+  function setTheme(targetTheme: Theme) {
+    localStorage.setItem(THEME_KEY, targetTheme)
+    theme.value = targetTheme
+  }
+
+  return { theme, getTheme, setTheme }
+})

tailwind.config.js

@@ -10,5 +10,6 @@ export default {
       },
     },
   },
+  darkMode: "selector",
   plugins: [require("tailwindcss-primeui")],
 }

types/index.ts

@@ -15,3 +15,5 @@ export interface PeminjamanState {
   isCancellable: boolean
   isReturnable: boolean
 }
+
+export type Theme = "light" | "dark"