feat: implement feedback management with status updates and permissions

app/Http/Controllers/Admin/FeedbackController.php

@@ -5,7 +5,8 @@
 use App\Enums\FeedbackStatus;
 use App\Enums\FeedbackType;
 use App\Http\Controllers\Controller;
-use App\Http\Requests\Admin\FeedbackRequest;
+use App\Http\Requests\Admin\Feedback\FeedbackRequest;
+use App\Http\Requests\Admin\Feedback\UpdateFeedbackStatusRequest;
 use App\Http\Requests\PaginatedRequest;
 use App\Models\Feedback;
 use App\Services\Admin\FeedbackService;
@@ -55,6 +56,13 @@ public function update(FeedbackRequest $request, Feedback $feedback): RedirectRe
         return to_route('admin.feedback.index');
     }
 
+    public function updateStatus(UpdateFeedbackStatusRequest $request, Feedback $feedback): RedirectResponse
+    {
+        $this->service->updateStatus($feedback, $request->validated('status'));
+
+        return Inertia::flash('toast', ['type' => 'success', 'message' => 'Status masukan berhasil diperbarui.'])->back();
+    }
+
     public function destroy(Request $request, Feedback $feedback): RedirectResponse
     {
         abort_unless($feedback->user_id === $request->user()->id, 403);

app/Http/Middleware/HandleInertiaRequests.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Middleware;
 
+use App\Services\Admin\FeedbackService;
 use App\Services\NotificationService;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
@@ -48,6 +49,9 @@ public function share(Request $request): array
             'unreadNotificationsCount' => fn () => $request->user()
                 ? app(NotificationService::class)->unreadCount($request->user())
                 : 0,
+            'pendingFeedbackCount' => fn () => $request->user()
+                ? app(FeedbackService::class)->pendingCount($request->user())
+                : 0,
             'notifications' => Inertia::merge(fn () => $request->user()
                 ? app(NotificationService::class)->paginated($request->user())
                 : null)->append('data', 'id'),

app/Http/Requests/Admin/Feedback/FeedbackRequest.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Http\Requests\Admin;
+namespace App\Http\Requests\Admin\Feedback;
 
 use App\Enums\FeedbackType;
 use Illuminate\Foundation\Http\FormRequest;
@@ -10,7 +10,7 @@ class FeedbackRequest extends FormRequest
 {
     public function authorize(): bool
     {
-        return true;
+        return $this->user()->can($this->isMethod('post') ? 'create-feedback' : 'update-feedback');
     }
 
     public function rules(): array

app/Http/Requests/Admin/Feedback/UpdateFeedbackStatusRequest.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Requests\Admin\Feedback;
+
+use App\Enums\FeedbackStatus;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class UpdateFeedbackStatusRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return $this->user()->can('update-feedback-status');
+    }
+
+    public function rules(): array
+    {
+        return [
+            'status' => ['required', Rule::enum(FeedbackStatus::class)],
+        ];
+    }
+}

app/Models/Feedback.php

@@ -28,4 +28,9 @@ public function user(): BelongsTo
     {
         return $this->belongsTo(User::class);
     }
+
+    public function handler(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'handled_by');
+    }
 }

app/Services/Admin/FeedbackService.php

@@ -2,6 +2,7 @@
 
 namespace App\Services\Admin;
 
+use App\Enums\FeedbackStatus;
 use App\Models\Feedback;
 use App\Models\User;
 use App\Support\TextAlignAttributeSanitizer;
@@ -44,13 +45,22 @@ public function paginated(User $user, int $perPage = 25, string $search = '', ?s
     {
         return Feedback::query()
             ->where('user_id', $user->id)
-            ->when($search, fn ($q) => $q->where('subject', 'like', "%{$search}%"))
+            ->with('handler.profile')
-            ->when($type, fn ($q) => $q->where('type', $type))
+            ->when($search, fn($q) => $q->where('subject', 'like', "%{$search}%"))
-            ->when($status, fn ($q) => $q->where('status', $status))
+            ->when($type, fn($q) => $q->where('type', $type))
+            ->when($status, fn($q) => $q->where('status', $status))
             ->latest()
             ->paginate($perPage);
     }
 
+    public function pendingCount(User $user): int
+    {
+        return Feedback::query()
+            ->where('user_id', $user->id)
+            ->where('status', '!=', FeedbackStatus::Resolved)
+            ->count();
+    }
+
     public function create(User $user, array $data): Feedback
     {
         return Feedback::create([
@@ -71,6 +81,16 @@ public function update(Feedback $feedback, array $data): Feedback
         return $feedback;
     }
 
+    public function updateStatus(Feedback $feedback, string $status): Feedback
+    {
+        $feedback->update([
+            'status' => $status,
+            'handled_by' => auth()->id(),
+        ]);
+
+        return $feedback;
+    }
+
     public function delete(Feedback $feedback): bool
     {
         return $feedback->delete();

app/Support/PermissionCatalog.php

@@ -48,6 +48,10 @@ class PermissionCatalog
         'view-roles', 'update-roles',
     ];
 
+    public const FEEDBACK = [
+        'view-feedback', 'create-feedback', 'update-feedback', 'delete-feedback', 'update-feedback-status',
+    ];
+
     /**
      * @return array<string, array<int, string>>
      */
@@ -61,6 +65,7 @@ public static function groups(): array
             'Keuangan' => self::FINANCES,
             'Layanan' => self::SERVICES,
             'Pengguna' => self::USERS,
+            'Kritik & Saran' => self::FEEDBACK,
             'Pengembang' => self::DEVELOPER,
         ];
     }

database/migrations/2026_08_25_000006_create_feedbacks_table.php

@@ -17,6 +17,7 @@ public function up(): void
             $table->string('subject', 150);
             $table->text('message');
             $table->enum('status', FeedbackStatus::values())->default(FeedbackStatus::Submitted->value);
+            $table->foreignId('handled_by')->nullable()->constrained('users')->nullOnDelete();
             $table->text('admin_notes')->nullable();
             $table->timestamps();
         });

database/migrations/2026_08_30_150000_add_created_by_to_notifications_table.php

@@ -1,22 +0,0 @@
-<?php
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-
-return new class extends Migration
-{
-    public function up(): void
-    {
-        Schema::table('notifications', function (Blueprint $table) {
-            $table->foreignId('created_by')->nullable()->after('user_id')->constrained('users')->nullOnDelete();
-        });
-    }
-
-    public function down(): void
-    {
-        Schema::table('notifications', function (Blueprint $table) {
-            $table->dropConstrainedForeignId('created_by');
-        });
-    }
-};

database/seeders/RolePermissionSeeder.php

@@ -21,6 +21,10 @@ public function run(): void
         $services = PermissionCatalog::SERVICES;
         $users = PermissionCatalog::USERS;
 
+        $feedbackSelfService = [
+            'view-feedback', 'create-feedback', 'update-feedback', 'delete-feedback',
+        ];
+
         $permissionNames = PermissionCatalog::all();
 
         foreach ($permissionNames as $name) {
@@ -30,8 +34,8 @@ public function run(): void
         app()[PermissionRegistrar::class]->forgetCachedPermissions();
 
         $roles = [
-            'mahasiswa' => ['view-dashboard'],
+            'mahasiswa' => ['view-dashboard', ...$feedbackSelfService],
-            'dosen' => ['view-dashboard'],
+            'dosen' => ['view-dashboard', ...$feedbackSelfService],
             'staff-admin' => [
                 'view-dashboard',
                 ...$master,
@@ -39,10 +43,13 @@ public function run(): void
                 ...$manage,
                 ...$services,
                 ...$users,
+                ...$feedbackSelfService,
+                'update-feedback-status',
             ],
             'staff-keuangan' => [
                 'view-dashboard',
                 ...$finances,
+                ...$feedbackSelfService,
             ],
             'kaprodi' => [
                 'view-dashboard',
@@ -51,6 +58,7 @@ public function run(): void
                 'view-course-classes',
                 'view-course-registrations',
                 'view-students',
+                ...$feedbackSelfService,
             ],
             'developer' => $permissionNames,
         ];

resources/js/components/app-sidebar.tsx

@@ -224,21 +224,27 @@ function buildNavMain({
     ];
 }
 
-const navSecondary: { title: string; url: string; icon: Icon }[] = [
+function buildNavSecondary(
-    {
+    pendingFeedbackCount: number,
-        title: 'Kritik dan Saran',
+): { title: string; url: string; icon: Icon; badge?: number }[] {
-        url: feedbackRoute.url(),
+    return [
-        icon: IconMessageDots,
+        {
-    },
+            title: 'Kritik dan Saran',
-    {
+            url: feedbackRoute.url(),
-        title: 'Bantuan',
+            icon: IconMessageDots,
-        url: '#',
+            badge: pendingFeedbackCount,
-        icon: IconHelp,
+        },
-    },
+        {
-];
+            title: 'Bantuan',
+            url: '#',
+            icon: IconHelp,
+        },
+    ];
+}
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-    const { name, auth } = usePage<{ auth: Auth }>().props;
+    const { name, auth, pendingFeedbackCount } = usePage<{ auth: Auth }>()
+        .props;
     const roleNames = auth?.user?.roles?.map((role) => role.name) ?? [];
     const isStaff = roleNames.some((role) => STAFF_ROLES.includes(role));
     const isMahasiswa = !isStaff && roleNames.includes('mahasiswa');
@@ -273,7 +279,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             </SidebarHeader>
             <SidebarContent>
                 <NavMain items={navMain} />
-                <NavSecondary items={navSecondary} className="mt-auto" />
+                <NavSecondary
+                    items={buildNavSecondary(pendingFeedbackCount ?? 0)}
+                    className="mt-auto"
+                />
             </SidebarContent>
         </Sidebar>
     );

resources/js/components/form-dialog.tsx

@@ -20,12 +20,13 @@ type FormDialogProps = {
     submitDisabled?: boolean;
     submitLabel?: ReactNode;
     submittingLabel?: ReactNode;
+    contentClassName?: string;
     children:
-    | ReactNode
+        | ReactNode
-    | ((ctx: {
+        | ((ctx: {
-        errors: Record<string, string>;
+              errors: Record<string, string>;
-        processing: boolean;
+              processing: boolean;
-    }) => ReactNode);
+          }) => ReactNode);
 };
 
 export function FormDialog({
@@ -38,11 +39,12 @@ export function FormDialog({
     submitDisabled = false,
     submitLabel = 'Simpan',
     submittingLabel = 'Menyimpan...',
+    contentClassName,
     children,
 }: FormDialogProps) {
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent>
+            <DialogContent className={contentClassName}>
                 <Form
                     action={action}
                     resetOnSuccess={resetOnSuccess}

resources/js/components/nav-secondary.tsx

@@ -8,6 +8,7 @@ import {
     SidebarGroup,
     SidebarGroupContent,
     SidebarMenu,
+    SidebarMenuBadge,
     SidebarMenuButton,
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
@@ -20,6 +21,7 @@ export function NavSecondary({
         title: string;
         url: string;
         icon: Icon;
+        badge?: number;
     }[];
 } & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
     return (
@@ -34,6 +36,11 @@ export function NavSecondary({
                                     <span>{item.title}</span>
                                 </Link>
                             </SidebarMenuButton>
+                            {!!item.badge && (
+                                <SidebarMenuBadge>
+                                    {item.badge}
+                                </SidebarMenuBadge>
+                            )}
                         </SidebarMenuItem>
                     ))}
                 </SidebarMenu>

resources/js/components/status-badge.tsx

@@ -9,34 +9,29 @@ import {
 
 type StatusOption = { value: string; label: string };
 
-type StudentStatusBadgeProps = {
+type StatusBadgeProps = {
     status: string | null | undefined;
     statuses: StatusOption[];
     onChange: (status: string) => void;
     disabled?: boolean;
+    variants?: Record<
+        string,
+        'default' | 'secondary' | 'destructive' | 'outline'
+    >;
 };
 
-const StudentStatusVariants: Record<
+export function StatusBadge({
-    string,
-    'default' | 'secondary' | 'destructive' | 'outline'
-> = {
-    active: 'default',
-    on_leave: 'secondary',
-    graduated: 'outline',
-    dropped_out: 'destructive',
-};
-
-export function StudentStatusBadge({
     status,
     statuses,
     onChange,
     disabled,
-}: StudentStatusBadgeProps) {
+    variants,
+}: StatusBadgeProps) {
     const label =
         statuses.find((option) => option.value === status)?.label ??
         status ??
         '-';
-    const variant = (status && StudentStatusVariants[status]) || 'outline';
+    const variant = (status && variants?.[status]) || 'outline';
 
     return (
         <DropdownMenu>

resources/js/pages/admin/academic-classes/schedules/index.tsx

@@ -1,6 +1,3 @@
-import { Head, router } from '@inertiajs/react';
-import { Clock, MapPin, Pencil, Plus, Trash2, Video } from 'lucide-react';
-import { useState } from 'react';
 import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
 import { FormDialog } from '@/components/form-dialog';
 import InputError from '@/components/input-error';
@@ -27,6 +24,9 @@ import {
 } from '@/routes/admin/academic-classes/schedules';
 import type { Schedule } from '@/types/schedule';
 import { DayOfWeekLabels, DaysOfWeek } from '@/types/schedule';
+import { Head, router } from '@inertiajs/react';
+import { Clock, MapPin, Pencil, Plus, Trash2, Video } from 'lucide-react';
+import { useState } from 'react';
 
 type CourseClassOption = {
     id: number;
@@ -108,6 +108,10 @@ export default function ScheduleIndex({
                     }
                 />
 
+                <p className="hidden text-xs text-muted-foreground md:block">
+                    Geser ke samping untuk melihat hari lainnya.
+                </p>
+
                 <CreateForm
                     open={createOpen}
                     onOpenChange={setCreateOpen}
@@ -131,14 +135,14 @@ export default function ScheduleIndex({
                         Belum ada data jadwal.
                     </p>
                 ) : (
-                    <div className="flex flex-1 gap-4 overflow-x-auto pb-2">
+                    <div className="flex flex-1 flex-col gap-4 pb-2 md:flex-row md:overflow-x-auto">
                         {columns.map((day) => {
                             const items = grouped.get(day) ?? [];
 
                             return (
                                 <div
                                     key={day}
-                                    className="flex w-72 shrink-0 flex-col gap-3"
+                                    className="flex w-full shrink-0 flex-col gap-3 border-b pb-6 last:border-b-0 last:pb-0 md:w-72 md:border-b-0 md:pb-0"
                                 >
                                     <div className="flex items-center justify-between rounded-md bg-muted px-3 py-2">
                                         <span className="text-sm font-semibold">
@@ -163,8 +167,8 @@ export default function ScheduleIndex({
                                                     className={cn(
                                                         'gap-3 py-4',
                                                         highlight ===
-                                                            schedule.id &&
+                                                        schedule.id &&
-                                                            'ring-2 ring-primary',
+                                                        'ring-2 ring-primary',
                                                     )}
                                                 >
                                                     <CardHeader className="flex flex-row items-start justify-between gap-2 px-4">
@@ -209,17 +213,17 @@ export default function ScheduleIndex({
                                                     <CardContent className="flex flex-col gap-1.5 px-4 text-xs text-muted-foreground">
                                                         {(schedule.start_time ||
                                                             schedule.end_time) && (
-                                                            <span className="inline-flex items-center gap-1.5">
+                                                                <span className="inline-flex items-center gap-1.5">
-                                                                <Clock className="h-3.5 w-3.5 shrink-0" />
+                                                                    <Clock className="h-3.5 w-3.5 shrink-0" />
-                                                                {toTimeInput(
+                                                                    {toTimeInput(
-                                                                    schedule.start_time,
+                                                                        schedule.start_time,
-                                                                ) || '-'}{' '}
+                                                                    ) || '-'}{' '}
-                                                                -{' '}
+                                                                    -{' '}
-                                                                {toTimeInput(
+                                                                    {toTimeInput(
-                                                                    schedule.end_time,
+                                                                        schedule.end_time,
-                                                                ) || '-'}
+                                                                    ) || '-'}
-                                                            </span>
+                                                                </span>
-                                                        )}
+                                                            )}
                                                         {schedule.room && (
                                                             <span className="inline-flex items-center gap-1.5">
                                                                 <MapPin className="h-3.5 w-3.5 shrink-0" />

resources/js/pages/admin/feedback/columns.tsx

@@ -1,16 +1,34 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { format } from 'date-fns';
-import { Pencil, Trash2 } from 'lucide-react';
+import { Eye, Pencil, Trash2 } from 'lucide-react';
 import { RowActions } from '@/components/row-actions';
+import { StatusBadge } from '@/components/status-badge';
 import { Badge } from '@/components/ui/badge';
-import type { Feedback, FeedbackStatusValue } from '@/types/feedback';
+import type { Feedback } from '@/types/feedback';
-import { FeedbackStatusLabels, FeedbackTypeLabels } from '@/types/feedback';
+import { FeedbackTypeLabels } from '@/types/feedback';
 
 export type { Feedback } from '@/types/feedback';
 
+type StatusOption = { value: string; label: string };
+
 type CreateColumnsParams = {
+    handleView: (feedback: Feedback) => void;
     handleEdit: (feedback: Feedback) => void;
     handleDeleteClick: (feedback: Feedback) => void;
+    handleStatusChange: (feedback: Feedback, status: string) => void;
+    statuses: StatusOption[];
+    canUpdateStatus: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
+};
+
+export const FeedbackStatusVariants: Record<
+    string,
+    'default' | 'secondary' | 'destructive' | 'outline'
+> = {
+    submitted: 'outline',
+    in_review: 'secondary',
+    resolved: 'default',
 };
 
 function stripHtml(html: string): string {
@@ -20,24 +38,19 @@ function stripHtml(html: string): string {
         .trim();
 }
 
-function statusBadgeVariant(
-    status: FeedbackStatusValue,
-): 'outline' | 'secondary' | 'default' {
-    if (status === 'resolved') {
-        return 'default';
-    }
-
-    if (status === 'in_review') {
-        return 'secondary';
-    }
-
-    return 'outline';
-}
-
 export function createFeedbackColumns(
     params: CreateColumnsParams,
 ): ColumnDef<Feedback>[] {
-    const { handleEdit, handleDeleteClick } = params;
+    const {
+        handleView,
+        handleEdit,
+        handleDeleteClick,
+        handleStatusChange,
+        statuses,
+        canUpdateStatus,
+        canUpdate,
+        canDelete,
+    } = params;
 
     return [
         {
@@ -80,12 +93,23 @@ export function createFeedbackColumns(
             },
             cell: ({ row }) => (
                 <div className="flex justify-center">
-                    <Badge variant={statusBadgeVariant(row.original.status)}>
+                    <StatusBadge
-                        {FeedbackStatusLabels[row.original.status]}
+                        status={row.original.status}
-                    </Badge>
+                        statuses={statuses}
+                        variants={FeedbackStatusVariants}
+                        onChange={(status) =>
+                            handleStatusChange(row.original, status)
+                        }
+                        disabled={!canUpdateStatus}
+                    />
                 </div>
             ),
         },
+        {
+            accessorKey: 'handler.profile.full_name',
+            header: () => <span>Ditindaklanjuti Oleh</span>,
+            cell: ({ row }) => row.original.handler?.profile?.full_name ?? '-',
+        },
         {
             accessorKey: 'created_at',
             header: () => <span>Dikirim</span>,
@@ -102,9 +126,15 @@ export function createFeedbackColumns(
             cell: ({ row }) => (
                 <RowActions
                     actions={[
+                        {
+                            label: 'Lihat Detail',
+                            icon: <Eye className="h-4 w-4" />,
+                            onClick: () => handleView(row.original),
+                        },
                         {
                             label: 'Edit',
                             icon: <Pencil className="h-4 w-4" />,
+                            show: canUpdate,
                             onClick: () => handleEdit(row.original),
                         },
                         {
@@ -112,6 +142,7 @@ export function createFeedbackColumns(
                             icon: (
                                 <Trash2 className="h-4 w-4 text-destructive" />
                             ),
+                            show: canDelete,
                             onClick: () => handleDeleteClick(row.original),
                         },
                     ]}

resources/js/pages/admin/feedback/index.tsx

@@ -1,4 +1,5 @@
 import { Head, router } from '@inertiajs/react';
+import { format } from 'date-fns';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import type { PaginationState } from '@/components/data-table';
@@ -10,7 +11,14 @@ import { FormDialog } from '@/components/form-dialog';
 import InputError from '@/components/input-error';
 import { PageHeader } from '@/components/page-header';
 import TiptapEditor from '@/components/rich-text-editor';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
@@ -20,15 +28,18 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
+import { usePermissions } from '@/hooks/use-permissions';
 import { useServerTable } from '@/hooks/use-server-table';
 import {
     index as feedbackIndex,
     destroy,
     store,
     update,
+    update_status,
 } from '@/routes/admin/feedback';
 import type { Feedback } from '@/types/feedback';
-import { createFeedbackColumns } from './columns';
+import { FeedbackStatusLabels, FeedbackTypeLabels } from '@/types/feedback';
+import { createFeedbackColumns, FeedbackStatusVariants } from './columns';
 
 type FeedbackTypeOption = { value: string; label: string };
 
@@ -57,6 +68,12 @@ export default function FeedbackIndex({
     const [createOpen, setCreateOpen] = useState(false);
     const [editing, setEditing] = useState<Feedback | null>(null);
     const [deleting, setDeleting] = useState<Feedback | null>(null);
+    const [viewing, setViewing] = useState<Feedback | null>(null);
+    const { hasPermission } = usePermissions();
+    const canCreate = hasPermission('create-feedback');
+    const canUpdate = hasPermission('update-feedback');
+    const canDelete = hasPermission('delete-feedback');
+    const canUpdateStatus = hasPermission('update-feedback-status');
 
     const filterFields: FilterField[] = [
         {
@@ -100,9 +117,23 @@ export default function FeedbackIndex({
         });
     }
 
+    function handleStatusChange(feedback: Feedback, status: string) {
+        router.patch(
+            update_status.url(feedback.id),
+            { status },
+            { preserveScroll: true },
+        );
+    }
+
     const columns = createFeedbackColumns({
+        handleView: (feedback) => setViewing(feedback),
         handleEdit: (feedback) => setEditing(feedback),
         handleDeleteClick: (feedback) => setDeleting(feedback),
+        handleStatusChange,
+        statuses,
+        canUpdateStatus,
+        canUpdate,
+        canDelete,
     });
 
     return (
@@ -112,22 +143,18 @@ export default function FeedbackIndex({
             <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
                 <PageHeader
                     title="Kritik dan Saran"
-                    description={
-                        <p className="mt-1 text-sm text-muted-foreground">
-                            Sampaikan kritik, saran, atau aduan Anda kepada
-                            kami.
-                        </p>
-                    }
                     actions={
-                        <Button asChild>
+                        canCreate && (
-                            <button
+                            <Button asChild>
-                                type="button"
+                                <button
-                                onClick={() => setCreateOpen(true)}
+                                    type="button"
-                            >
+                                    onClick={() => setCreateOpen(true)}
-                                <Plus className="h-4 w-4" />
+                                >
-                                Tambah
+                                    <Plus className="h-4 w-4" />
-                            </button>
+                                    Tambah
-                        </Button>
+                                </button>
+                            </Button>
+                        )
                     }
                 />
 
@@ -149,6 +176,16 @@ export default function FeedbackIndex({
                     types={types}
                 />
 
+                <ViewDetailDialog
+                    open={viewing !== null}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            setViewing(null);
+                        }
+                    }}
+                    feedback={viewing}
+                />
+
                 <DataTable
                     columns={columns}
                     data={feedbacks.data}
@@ -262,6 +299,7 @@ function CreateForm({
             action={store()}
             resetOnSuccess
             onSuccess={() => onOpenChange(false)}
+            contentClassName="sm:max-w-4xl"
         >
             {({ errors }) => (
                 <div className="grid gap-4">
@@ -291,6 +329,7 @@ function EditForm({
             action={editing ? update(editing.id) : ''}
             resetOnSuccess
             onSuccess={() => onOpenChange(false)}
+            contentClassName="sm:max-w-2xl"
         >
             {({ errors }) =>
                 editing && (
@@ -306,3 +345,87 @@ function EditForm({
         </FormDialog>
     );
 }
+
+function ViewDetailDialog({
+    open,
+    onOpenChange,
+    feedback,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    feedback: Feedback | null;
+}) {
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="flex max-h-[85vh] flex-col overflow-hidden sm:max-w-3xl">
+                <DialogHeader>
+                    <DialogTitle>Detail Kritik dan Saran</DialogTitle>
+                </DialogHeader>
+
+                {feedback && (
+                    <div className="grid gap-4 overflow-y-auto">
+                        <div className="flex flex-wrap items-center gap-2">
+                            <Badge variant="outline">
+                                {FeedbackTypeLabels[feedback.type]}
+                            </Badge>
+                            <Badge
+                                variant={
+                                    FeedbackStatusVariants[feedback.status]
+                                }
+                            >
+                                {FeedbackStatusLabels[feedback.status]}
+                            </Badge>
+                            <span className="text-xs text-muted-foreground">
+                                Dikirim{' '}
+                                {format(
+                                    new Date(feedback.created_at),
+                                    'd MMM yyyy, HH:mm',
+                                )}
+                            </span>
+                        </div>
+
+                        <div className="grid gap-1">
+                            <Label className="text-muted-foreground">
+                                Subjek
+                            </Label>
+                            <p className="font-medium">{feedback.subject}</p>
+                        </div>
+
+                        <div className="grid gap-1">
+                            <Label className="text-muted-foreground">
+                                Ditindaklanjuti Oleh
+                            </Label>
+                            <p>
+                                {feedback.handler?.profile?.full_name ??
+                                    'Belum ditindaklanjuti'}
+                            </p>
+                        </div>
+
+                        <div className="grid gap-1">
+                            <Label className="text-muted-foreground">
+                                Pesan
+                            </Label>
+                            <div
+                                className="rounded-md border p-3 text-sm [&_a]:text-primary [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_blockquote]:italic [&_h2]:text-base [&_h2]:font-semibold [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:mb-2 last:[&_p]:mb-0 [&_ul]:list-disc [&_ul]:pl-5"
+                                dangerouslySetInnerHTML={{
+                                    __html: feedback.message,
+                                }}
+                            />
+                        </div>
+
+                        {feedback.admin_notes && (
+                            <div className="grid gap-1">
+                                <Label className="text-muted-foreground">
+                                    Catatan Admin
+                                </Label>
+                                <p className="rounded-md border bg-muted/50 p-3 text-sm whitespace-pre-line">
+                                    {feedback.admin_notes}
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}

resources/js/pages/admin/users/students/columns.tsx

@@ -3,7 +3,17 @@ import { Key, Pencil, Trash2 } from 'lucide-react';
 import { ActiveStatusSwitch } from '@/components/active-status-switch';
 import { GenderBadge } from '@/components/gender-badge';
 import { RowActions } from '@/components/row-actions';
-import { StudentStatusBadge } from '@/components/student-status-badge';
+import { StatusBadge } from '@/components/status-badge';
+
+const StudentStatusVariants: Record<
+    string,
+    'default' | 'secondary' | 'destructive' | 'outline'
+> = {
+    active: 'default',
+    on_leave: 'secondary',
+    graduated: 'outline',
+    dropped_out: 'destructive',
+};
 
 export type Student = {
     id: number;
@@ -97,9 +107,10 @@ export function createStudentColumns(
             accessorKey: 'student.status',
             header: () => <span>Status</span>,
             cell: ({ row }) => (
-                <StudentStatusBadge
+                <StatusBadge
                     status={row.original.student?.status}
                     statuses={statuses}
+                    variants={StudentStatusVariants}
                     onChange={(status) =>
                         handleStatusChange(row.original, status)
                     }

resources/js/types/feedback.ts

@@ -18,6 +18,11 @@ export const FeedbackStatusLabels: Record<FeedbackStatusValue, string> = {
     resolved: 'Selesai',
 };
 
+export type FeedbackHandler = {
+    id: number;
+    profile: { full_name: string } | null;
+};
+
 export type Feedback = {
     id: number;
     type: FeedbackTypeValue;
@@ -25,6 +30,8 @@ export type Feedback = {
     message: string;
     status: FeedbackStatusValue;
     admin_notes: string | null;
+    handled_by: number | null;
+    handler: FeedbackHandler | null;
     created_at: string;
     updated_at: string;
 };

resources/js/types/global.d.ts

@@ -14,6 +14,7 @@ declare module '@inertiajs/core' {
             auth: Auth;
             sidebarOpen: boolean;
             unreadNotificationsCount: number;
+            pendingFeedbackCount: number;
             [key: string]: unknown;
         };
     }

routes/admin.php

@@ -202,7 +202,12 @@
 
     Route::resource('admin/feedback', FeedbackController::class)
         ->except(['create', 'edit', 'show'])
-        ->names('admin.feedback');
+        ->names('admin.feedback')
+        ->middlewareFor(['index'], 'permission:view-feedback')
+        ->middlewareFor(['store'], 'permission:create-feedback')
+        ->middlewareFor(['update'], 'permission:update-feedback')
+        ->middlewareFor(['destroy'], 'permission:delete-feedback');
+    Route::patch('admin/feedback/{feedback}/status', [FeedbackController::class, 'updateStatus'])->name('admin.feedback.update_status')->middleware('permission:update-feedback-status');
 
     Route::prefix('admin/users')->name('admin.users.')->group(function () {
         Route::resource('lecturers', LecturerController::class)