From 3106ebce6ceb99b2127952324b0046ed300b39af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veronika=20Feh=C3=A9rv=C3=ADziov=C3=A1?=
 <128744051+VeronikaFeherviziova@users.noreply.github.com>
Date: Sat, 1 Nov 2025 16:26:16 +0100
Subject: [PATCH] feat: add internship status history to internship editor for
 admins

---
 .../InternshipStatusHistoryView.vue           | 53 +++++++++++++++++++
 .../dashboard/admin/internships/edit/[id].vue |  3 ++
 2 files changed, 56 insertions(+)
 create mode 100644 frontend/app/components/InternshipStatusHistoryView.vue

diff --git a/frontend/app/components/InternshipStatusHistoryView.vue b/frontend/app/components/InternshipStatusHistoryView.vue
new file mode 100644
index 0000000..b10ee38
--- /dev/null
+++ b/frontend/app/components/InternshipStatusHistoryView.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { prettyInternshipStatus, type InternshipStatusData } from '~/types/internship_status';
+
+const props = defineProps({
+    internship: {
+        type: Number,
+        required: true,
+        default: -1
+    },
+});
+
+const headers = [
+    { title: 'Stav', key: 'status', align: 'left' },
+    { title: 'Zmenené', key: 'changed', align: 'left' },
+    { title: 'Poznámka', key: 'start', align: 'left' },
+    { title: 'Zmenu vykonal', key: 'modified_by', align: 'left' },
+];
+
+const route = useRoute();
+const { data, error, pending } = await useSanctumFetch<InternshipStatusData[]>(`/api/internships/${route.params.id}/statuses`);
+</script>
+
+<template>
+    <div>
+        <!-- Čakajúca hláška -->
+        <v-alert v-if="pending" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
+            id="login-error-alert" class="mx-auto alert"></v-alert>
+
+        <!-- Chybová hláška -->
+        <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error" id="login-error-alert"
+            class="mx-auto alert"></v-alert>
+
+        <v-table v-else>
+            <thead>
+                <tr>
+                    <th v-for="header in headers" :class="'text-' + header.align">
+                        <strong>{{ header.title }}</strong>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in data">
+                    <td>{{ prettyInternshipStatus(item.status) }}</td>
+                    <td>{{ item.changed }}</td>
+                    <td>{{ item.note }}</td>
+                    <td>{{ item.modified_by.name }}</td>
+                </tr>
+            </tbody>
+        </v-table>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/frontend/app/pages/dashboard/admin/internships/edit/[id].vue b/frontend/app/pages/dashboard/admin/internships/edit/[id].vue
index 823ea92..b5d2549 100644
--- a/frontend/app/pages/dashboard/admin/internships/edit/[id].vue
+++ b/frontend/app/pages/dashboard/admin/internships/edit/[id].vue
@@ -79,8 +79,11 @@ const { data, error } = await useSanctumFetch<Internship>(`/api/internships/${ro
                         <p>{{ prettyInternshipStatus(data?.status.status!) }}</p>
                         <p>Poznámka: <em>{{ data?.status.note }}</em></p>
                         <p>Posledná zmena: <em>{{ data?.status.changed }}, {{ data?.status.modified_by.name }}</em></p>
+
                         <br />
+
                         <h4>História</h4>
+                        <InternshipStatusHistoryView :internship="data?.id" />
                     </div>
 
                     <hr />