New report system and views

resources/js/Components/ui/alert/Alert.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { cn } from "@/lib/utils";
+import { cva } from "class-variance-authority";
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "default",
+    validator: (value) => ["default", "destructive"].includes(value),
+  },
+  class: {
+    type: String,
+    default: "",
+  },
+});
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/alert/AlertDescription.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/alert/AlertTitle.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

resources/js/Components/ui/alert/index.js

@@ -0,0 +1,3 @@
+export { default as Alert } from "./Alert.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";

resources/js/Components/ui/checkbox/CheckboxArray.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { computed } from "vue";
+import { Checkbox } from "@/Components/ui/checkbox";
+
+const props = defineProps({
+  modelValue: { type: [Boolean, Array], required: true },
+  value: { type: [String, Number], required: false },
+  disabled: { type: Boolean, default: false },
+  id: { type: String, required: false },
+  class: { type: String, default: "" },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const isChecked = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(props.value);
+  }
+  return props.modelValue;
+});
+
+function handleChange(checked) {
+  if (Array.isArray(props.modelValue)) {
+    const newValue = [...props.modelValue];
+    if (checked) {
+      if (!newValue.includes(props.value)) {
+        newValue.push(props.value);
+      }
+    } else {
+      const index = newValue.indexOf(props.value);
+      if (index > -1) {
+        newValue.splice(index, 1);
+      }
+    }
+    emit("update:modelValue", newValue);
+  } else {
+    emit("update:modelValue", checked);
+  }
+}
+</script>
+
+<template>
+  <Checkbox
+    :model-value="isChecked"
+    @update:model-value="handleChange"
+    :disabled="disabled"
+    :id="id"
+    :class="class"
+  />
+</template>