apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx

@@ -93,6 +93,12 @@ export default function AspectFormModal() {
 
     const handleSubmit = async (values: typeof form.values) => {
         try {
+            // Name field validation
+            if (values.name.trim() === "") {
+                form.setErrors({ name: "Nama aspek harus diisi" });
+                return;
+            }
+    
             let payload: CreateAspectPayload | EditAspectPayload;
     
             if (formType === "create") {
@@ -108,6 +114,7 @@ export default function AspectFormModal() {
                 };
                 await createAspect(payload);
             } else if (formType === "edit") {
+                // Add validation for aspect name here
                 payload = {
                     id: values.id,
                     name: values.name,
@@ -135,6 +142,18 @@ export default function AspectFormModal() {
             navigate({ search: {} });
         } catch (error) {
             console.error("Error during submit:", error);
+            
+            if (error instanceof Error && error.message === "Aspect name already exists") {
+                notifications.show({
+                    message: "Nama aspek sudah ada. Silakan gunakan nama lain.",
+                    color: "red",
+                });
+            } else {
+                notifications.show({
+                    message: "Terjadi kesalahan saat menyimpan aspek.",
+                    color: "red",
+                });
+            }
         }
     };        
 
@@ -152,6 +171,7 @@ export default function AspectFormModal() {
                     label="Nama"
                     {...form.getInputProps("name")}
                     disabled={formType === "detail"}
+                    error={form.errors.name}
                 />
     
                 {form.values.subAspects.map((field, index) => (
@@ -166,12 +186,14 @@ export default function AspectFormModal() {
                             form.setValues({ subAspects: newSubAspects });
                         }}
                         disabled={formType === "detail"}
+                        style={{ flex: 1 }}
                     />
                     {formType === "detail" && (
                         <Text>Jumlah Soal: {field.questionCount}</Text>
                     )}
                     {formType !== "detail" && (
                         <Button
+                        className="mt-6"
                             variant="outline"
                             onClick={() => {
                                 const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);