Muluhabt ERP modules

apps/edr-hr-web/src/shared/components/ApiErrorAlert.tsx

@@ -0,0 +1,31 @@
+import { Alert } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { apiErrorMessage } from "@/auth/http";
+
+/**
+ * Surfaces the SERVER's message rather than "Request failed with status code
+ * NNN" — the API's validation and conflict errors say exactly what is wrong
+ * ("Employee number EMP-00007 is already in use"), and that is what the user
+ * needs to see.
+ */
+export function ApiErrorAlert({
+  error,
+  title = "Something went wrong",
+}: {
+  error: unknown;
+  title?: string;
+}) {
+  if (!error) return null;
+  return (
+    <Alert
+      color="red"
+      icon={<IconAlertTriangle size={18} />}
+      title={title}
+      mb="md"
+      styles={{ message: { whiteSpace: "pre-line" } }}
+    >
+      {apiErrorMessage(error)}
+    </Alert>
+  );
+}