wip: implement admin crud

assets/styles/components/autocomplete.css

@@ -0,0 +1,33 @@
+.autocomplete {
+    @apply relative w-full;
+}
+
+.autocomplete[data-loading="true"]:after {
+    @apply block absolute top-0 right-0;
+    @apply absolute w-4 h-4 rounded-full right-0 mr-4;
+    content: "";
+    border: 3px solid rgba(0, 0, 0, 0.12);
+    border-right: 3px solid rgba(0, 0, 0, 0.48);
+    top: 50%;
+    transform: translateY(-50%);
+    animation: rotate 1s infinite linear;
+}
+
+.autocomplete-icon {
+    @apply absolute top-1/2 right-0 transform -translate-y-1/2 mr-4;
+}
+.autocomplete[data-loading="true"] .autocomplete-icon {
+    @apply hidden;
+}
+
+.autocomplete-result-list {
+    @apply bg-white shadow-md max-h-64 overflow-y-auto;
+}
+
+.autocomplete-result {
+    @apply p-2;
+}
+.autocomplete-result:hover,
+.autocomplete-result[aria-selected="true"] {
+    @apply bg-gray-200;
+}

assets/styles/components/badge.css

@@ -0,0 +1,3 @@
+.badge {
+    @apply inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium whitespace-nowrap;
+}

assets/styles/components/datepicker.css

@@ -0,0 +1,13 @@
+@import "flatpickr/dist/flatpickr.css";
+
+.flatpickr-day.selected,
+.flatpickr-day.selected:hover,
+.flatpickr-day.selected:focus {
+    background-color: theme('colors.secondary');
+    border-color: theme('colors.secondary');
+}
+
+.flatpickr-monthDropdown-months,
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+    @apply form-select pt-0 pb-0 focus:outline-none focus:shadow-none;
+}