feat: add withdraw request functionality and UI components

resources/js/Client/Pages/Dashboard/Reports/Index.vue

@@ -1,11 +1,42 @@
 <script setup>
-import ClientLayout from '../../../layouts/ClientLayout.vue'
+import ClientLayout from '../../../layouts/ClientLayout.vue';
+import TableGeneric from '../../../components/ui/TableGeneric.vue';
+import UiCard from '../../../components/ui/UiCard.vue';
+import EyeSvg from '../../../components/svg/eye.svg';
+import { Link } from '@inertiajs/inertia-vue3';
+import { reportColumns } from '../../../data/reportsTableColumns';
+
+defineProps({
+    reports: {
+        type: Object,
+        required: true
+    }
+})
 </script>
 
 <template>
     <ClientLayout>
-        <h1 class="text-2xl font-bold">
-            Reports
-        </h1>
+        <UiCard title="گزارشات" variant="default">
+            <TableGeneric
+                class="bg-white !rounded-2xl"
+                :data="reports.data"
+                customStyle="!text-[11px] !font-normal"
+                :searchable="false"
+                :columns="reportColumns"
+                :selectable="false"
+                :pagination="reports.meta"
+                :model-value="[]"
+            >
+                <template #column-actions="{ data }">
+                    <div class="flex items-center justify-end">
+                            <Link :href="`/dashboard/cases/${data.document?.id}`"
+                                class="text-primary-500 bg-complement-100 flex items-center justify-end p-1.5 rounded-md"
+                            >
+                            <EyeSvg class="w-4 h-4 text-primary-500" />
+                            </Link>
+                    </div>
+                </template>
+            </TableGeneric>
+        </UiCard>
     </ClientLayout>
 </template>