corrad-bp/error.vue
Md Afiq Iskandar 1f22375c95 Update error button styles, theme colors, and enhance audit model
- Changed the button background color in `error.vue` to improve visibility.
- Updated the secondary color in `theme.css` for better consistency.
- Refactored border color references in `collapse.css` for clarity.
- Added new fields (`auditAction`, `auditDetails`, `auditUsername`) to the `audit` model in `schema.prisma` for enhanced tracking.
- Updated JSON schema to reflect new audit model fields.
2025-04-09 12:19:01 +08:00

71 lines
2.0 KiB
Vue

<script setup>
definePageMeta({
title: "Error Page",
layout: "empty",
});
const props = defineProps({
error: Object,
});
// console.log("props", props);
const redirectClearError = () => {
clearError({ redirect: "/" });
};
</script>
<template>
<div>
<div
class="flex h-screen p-6 md:p-10"
v-if="props.error.statusCode === 404"
>
<div class="m-auto">
<div class="flex items-center flex-col md:flex-row gap-10">
<img
class="w-80 flex-shrink"
src="@/assets/img/illustration/404-2.svg"
alt=""
/>
<div class="flex-1 text-center md:text-left items-center">
<span class="block mb-2 font-bold text-2xl md:text-3xl">Oops!</span>
<p class="text-lg md:text-xl font-base">
The page you are looking for does not exist.
</p>
<button
@click="redirectClearError"
class="mt-5 w-fit rounded-lg flex justify-center items-center h-fit text-sm px-8 py-2.5 text-white bg-[#212E3B] hover:bg-[#212E3B]/90 disabled:bg-[#212E3B]/30 disabled:text-[#212E3B]/50 disabled:border-primary/5 disabled:cursor-default"
>
Back to Home
</button>
</div>
</div>
</div>
</div>
<div
class="flex h-screen p-6 md:p-10"
v-else-if="props.error.statusCode === 500"
>
<div class="m-auto">
<div class="flex items-center flex-col md:flex-row gap-10">
<img
class="w-80 flex-shrink"
src="@/assets/img/illustration/500.svg"
alt=""
/>
<div class="flex-1 text-center md:text-left items-center">
<span class="block mb-2 font-bold text-2xl md:text-3xl"
>Oops, something went wrong.
</span>
<p class="text-lg md:text-xl font-base">
Please try again later or contact us if the problem persists.
</p>
</div>
</div>
</div>
</div>
</div>
</template>