add: page /dosen, /dosen/{id}

resources/css/app.css

@@ -109,6 +109,7 @@ :root {
     --app-primary-soft: #ccdcff;
     --app-primary-foreground: #ffffff;
     --app-danger: #ef4444;
+    --app-success: #16a34a;
     --app-placeholder: rgba(115, 115, 115, 0.42);
     --app-toggle-bg: rgba(255, 255, 255, 0.9);
     --app-shadow: 1px 1px 4.5px rgba(39, 100, 235, 0.36);
@@ -161,6 +162,22 @@ :root {
     --student-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
     --student-sidebar-shadow: 1px 0 0 rgba(15, 23, 42, 0.08);
     --student-composer-shadow: var(--app-composer-shadow);
+    --lecturer-bg: var(--app-bg);
+    --lecturer-sidebar-bg: var(--app-sidebar-bg);
+    --lecturer-surface: var(--app-surface);
+    --lecturer-surface-soft: var(--app-surface-soft);
+    --lecturer-border: var(--app-border);
+    --lecturer-border-soft: var(--app-border-soft);
+    --lecturer-border-strong: var(--app-border-strong);
+    --lecturer-text: var(--app-text);
+    --lecturer-muted: var(--app-muted);
+    --lecturer-primary: var(--app-primary);
+    --lecturer-primary-soft: var(--app-primary-soft);
+    --lecturer-primary-foreground: var(--app-primary-foreground);
+    --lecturer-danger: var(--app-danger);
+    --lecturer-success: var(--app-success);
+    --lecturer-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
+    --lecturer-sidebar-shadow: 1px 0 0 rgba(15, 23, 42, 0.08);
 }
 
 .dark {
@@ -211,6 +228,7 @@ .dark {
     --app-primary-soft: #c8d7ff;
     --app-primary-foreground: #ffffff;
     --app-danger: #ff4545;
+    --app-success: #22c55e;
     --app-placeholder: rgba(244, 244, 245, 0.42);
     --app-toggle-bg: #171717;
     --app-shadow: 0 0 20px rgba(52, 120, 255, 0.34);
@@ -259,6 +277,26 @@ .dark {
     --student-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
     --student-sidebar-shadow: 1px 0 0 var(--app-border);
     --student-composer-shadow: var(--app-composer-shadow);
+    --lecturer-bg: var(--app-bg);
+    --lecturer-sidebar-bg: var(--app-sidebar-bg);
+    --lecturer-surface: var(--app-surface);
+    --lecturer-surface-soft: var(--app-surface-soft);
+    --lecturer-border: var(--app-border);
+    --lecturer-border-soft: var(--app-border-soft);
+    --lecturer-border-strong: var(--app-border-strong);
+    --lecturer-text: var(--app-text);
+    --lecturer-muted: var(--app-muted);
+    --lecturer-primary: var(--app-primary);
+    --lecturer-primary-soft: color-mix(
+        in oklab,
+        var(--app-primary) 22%,
+        var(--app-surface)
+    );
+    --lecturer-primary-foreground: var(--app-primary-foreground);
+    --lecturer-danger: var(--app-danger);
+    --lecturer-success: var(--app-success);
+    --lecturer-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
+    --lecturer-sidebar-shadow: 1px 0 0 var(--app-border);
 }
 
 @layer base {
@@ -269,6 +307,17 @@ @layer base {
     body {
         @apply bg-background text-foreground;
     }
+
+    button:not(:disabled),
+    [role='button']:not([aria-disabled='true']),
+    [data-slot='button']:not([aria-disabled='true']) {
+        @apply cursor-pointer;
+    }
+
+    button:disabled,
+    [aria-disabled='true'] {
+        @apply cursor-not-allowed;
+    }
 }
 
 @layer components {
@@ -282,7 +331,7 @@ @layer components {
     }
 
     .welcome-theme-toggle {
-        @apply absolute top-4 right-4 h-10 w-10 rounded-[10px] shadow-none backdrop-blur sm:top-8 sm:right-8;
+        @apply absolute right-4 top-4 h-10 w-10 rounded-[10px] shadow-none backdrop-blur sm:right-8 sm:top-8;
         background-color: var(--welcome-toggle-bg);
         border-color: var(--welcome-card-active-border);
         color: var(--welcome-accent);
@@ -295,7 +344,7 @@ @layer components {
     }
 
     .welcome-title {
-        @apply text-center text-[34px] leading-tight font-bold tracking-[0.01em] sm:text-[40px];
+        @apply text-center text-[34px] font-bold leading-tight tracking-[0.01em] sm:text-[40px];
         color: var(--welcome-title);
     }
 
@@ -345,7 +394,7 @@ @layer components {
     }
 
     .welcome-entry-title {
-        @apply truncate text-left text-lg leading-tight font-semibold;
+        @apply truncate text-left text-lg font-semibold leading-tight;
         color: var(--welcome-title);
     }
 
@@ -365,7 +414,7 @@ @layer components {
     }
 
     .welcome-register-link {
-        @apply font-medium underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:outline-none;
+        @apply font-medium underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2;
         color: var(--welcome-accent);
         --tw-ring-color: color-mix(
             in oklab,
@@ -414,7 +463,7 @@ @layer components {
     }
 
     .register-back-link {
-        @apply inline-flex text-sm font-semibold underline-offset-4 transition-colors hover:underline focus-visible:ring-2 focus-visible:outline-none;
+        @apply inline-flex text-sm font-semibold underline-offset-4 transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2;
         color: var(--welcome-subtitle);
         --tw-ring-color: color-mix(
             in oklab,
@@ -424,7 +473,7 @@ @layer components {
     }
 
     .register-heading {
-        @apply mt-2 text-center text-2xl leading-tight font-semibold;
+        @apply mt-2 text-center text-2xl font-semibold leading-tight;
         color: var(--welcome-title);
     }
 
@@ -437,7 +486,7 @@ @layer components {
     }
 
     .register-label {
-        @apply text-base leading-none font-medium;
+        @apply text-base font-medium leading-none;
         color: var(--welcome-title);
     }
 
@@ -462,6 +511,20 @@ @layer components {
         );
     }
 
+    .register-input[aria-invalid='true'] {
+        border-color: var(--register-danger) !important;
+        --tw-ring-color: color-mix(
+            in oklab,
+            var(--register-danger) 28%,
+            transparent
+        );
+    }
+
+    .register-error {
+        @apply text-sm font-medium leading-snug;
+        color: var(--register-danger);
+    }
+
     .register-submit {
         @apply mt-1 h-[43px] w-full rounded-[6px] border text-base font-semibold shadow-none;
         background-color: var(--welcome-accent) !important;
@@ -498,7 +561,7 @@ @layer components {
     }
 
     .login-remember-label {
-        @apply text-sm leading-none font-normal;
+        @apply text-sm font-normal leading-none;
         color: var(--welcome-subtitle);
     }
 
@@ -520,7 +583,7 @@ @layer components {
     }
 
     .student-dashboard-shell {
-        @apply min-h-svh;
+        @apply h-svh min-h-svh overflow-hidden;
         background-color: var(--student-bg);
         color: var(--student-text);
     }
@@ -548,7 +611,7 @@ @layer components {
     }
 
     .student-logo-action {
-        @apply flex size-8 shrink-0 items-center justify-center rounded-[8px] transition-transform outline-none focus-visible:ring-2;
+        @apply flex size-8 shrink-0 items-center justify-center rounded-[8px] outline-none transition-transform focus-visible:ring-2;
         --tw-ring-color: color-mix(
             in oklab,
             var(--student-primary) 45%,
@@ -639,7 +702,7 @@ @layer components {
     }
 
     .student-history-delete {
-        @apply absolute top-1/2 right-2 flex size-6 -translate-y-1/2 items-center justify-center rounded-[6px] opacity-0 transition-opacity;
+        @apply absolute right-2 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center rounded-[6px] opacity-0 transition-opacity;
         color: var(--student-danger);
     }
 
@@ -656,6 +719,71 @@ @layer components {
         );
     }
 
+    .student-delete-dialog {
+        @apply gap-5 rounded-[16px] border p-6 shadow-none sm:max-w-[440px];
+        background-color: var(--student-surface);
+        border-color: var(--student-border);
+        box-shadow: var(--student-shadow);
+        color: var(--student-text);
+    }
+
+    .student-delete-dialog-body {
+        @apply flex flex-col gap-3;
+    }
+
+    .student-delete-copy {
+        @apply text-sm leading-relaxed;
+        color: var(--student-muted);
+    }
+
+    .student-delete-copy strong {
+        color: var(--student-text);
+    }
+
+    .student-delete-error {
+        @apply rounded-[10px] border px-4 py-3 text-sm font-medium;
+        background-color: color-mix(
+            in oklab,
+            var(--student-danger) 8%,
+            var(--student-surface)
+        );
+        border-color: color-mix(
+            in oklab,
+            var(--student-danger) 24%,
+            transparent
+        );
+        color: var(--student-danger);
+    }
+
+    .student-delete-dialog-footer {
+        @apply gap-3 pt-1;
+    }
+
+    .student-delete-cancel {
+        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
+        background-color: var(--student-surface) !important;
+        border-color: var(--student-border) !important;
+        color: var(--student-text) !important;
+    }
+
+    .student-delete-cancel:hover {
+        background-color: var(--student-surface-soft) !important;
+    }
+
+    .student-delete-confirm {
+        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
+        background-color: var(--student-danger) !important;
+        color: var(--student-primary-foreground) !important;
+    }
+
+    .student-delete-confirm:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--student-danger) 86%,
+            #000
+        ) !important;
+    }
+
     .student-history-menu-icon {
         @apply hidden;
         color: var(--student-text);
@@ -667,7 +795,7 @@ @layer components {
     }
 
     .student-history-title {
-        @apply block truncate text-[11px] leading-tight font-medium;
+        @apply block truncate text-[11px] font-medium leading-tight;
         color: var(--student-text);
     }
 
@@ -702,7 +830,7 @@ @layer components {
     }
 
     .student-user-name {
-        @apply block truncate text-[11px] leading-tight font-semibold;
+        @apply block truncate text-[11px] font-semibold leading-tight;
         color: var(--student-text);
     }
 
@@ -766,13 +894,13 @@ @layer components {
     }
 
     .student-workspace {
-        @apply flex min-w-0 flex-1 flex-col;
+        @apply flex h-svh min-w-0 flex-1 flex-col overflow-hidden;
         background-color: var(--student-bg);
         color: var(--student-text);
     }
 
     .student-topbar {
-        @apply flex h-[72px] shrink-0 items-center justify-between border-b px-5 sm:px-6;
+        @apply sticky top-0 z-20 flex h-[72px] shrink-0 items-center justify-between border-b px-5 sm:px-6;
         background-color: var(--student-surface);
         border-color: var(--student-border);
     }
@@ -800,7 +928,7 @@ @layer components {
     }
 
     .student-chat-stage {
-        @apply flex flex-1 items-center justify-center px-4 py-10;
+        @apply flex min-h-0 flex-1 items-center justify-center px-4 py-10;
     }
 
     .student-empty-state {
@@ -818,7 +946,7 @@ @layer components {
     }
 
     .student-greeting h2 {
-        @apply text-3xl leading-tight font-bold tracking-[-0.02em];
+        @apply text-3xl font-bold leading-tight tracking-[-0.02em];
         color: var(--student-text);
     }
 
@@ -891,17 +1019,17 @@ @layer components {
     }
 
     .student-floating-send {
-        @apply absolute right-5 bottom-4 size-8 rounded-[8px] shadow-none;
+        @apply absolute bottom-4 right-5 size-8 rounded-[8px] shadow-none;
         background-color: var(--student-primary) !important;
         color: var(--student-primary-foreground) !important;
     }
 
     .student-chat-stage--session {
-        @apply flex-col items-stretch justify-between overflow-hidden px-5 py-0;
+        @apply min-h-0 flex-col items-stretch justify-between overflow-hidden px-5 py-0;
     }
 
     .student-chat-thread {
-        @apply min-h-0 w-full flex-1 overflow-y-auto py-8;
+        @apply min-h-0 w-full flex-1 overflow-y-auto overscroll-contain py-8;
     }
 
     .student-chat-messages {
@@ -914,7 +1042,7 @@ @layer components {
     }
 
     .student-chat-status {
-        @apply mt-0 mb-4;
+        @apply mb-4 mt-0;
     }
 
     .student-message {
@@ -957,7 +1085,7 @@ @layer components {
     }
 
     .student-message-content {
-        @apply leading-relaxed whitespace-pre-wrap;
+        @apply whitespace-pre-wrap leading-relaxed;
     }
 
     .student-message-time {
@@ -1005,6 +1133,775 @@ @layer components {
         color: var(--student-muted);
     }
 
+    .lecturer-dashboard-shell {
+        @apply min-h-svh;
+        background-color: var(--lecturer-bg);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-sidebar {
+        border-color: var(--lecturer-border) !important;
+    }
+
+    .lecturer-sidebar [data-sidebar='sidebar'] {
+        background-color: var(--lecturer-sidebar-bg);
+        border-color: var(--lecturer-border);
+        box-shadow: var(--lecturer-sidebar-shadow);
+    }
+
+    .lecturer-sidebar-header {
+        @apply border-b;
+        border-color: var(--lecturer-border);
+        display: flex !important;
+        height: 72px !important;
+        flex-direction: row !important;
+        align-items: center !important;
+        justify-content: space-between !important;
+        gap: 0 !important;
+        padding: 0 20px !important;
+    }
+
+    .lecturer-brand {
+        @apply flex min-w-0 items-center gap-3 rounded-[10px] text-left outline-none focus-visible:ring-2;
+        color: var(--lecturer-text);
+        flex: 1 1 auto;
+        --tw-ring-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 45%,
+            transparent
+        );
+    }
+
+    .lecturer-brand-mark {
+        @apply flex size-8 shrink-0 items-center justify-center rounded-[8px];
+        background-color: var(--lecturer-primary);
+        color: var(--lecturer-primary-foreground);
+    }
+
+    .lecturer-brand-copy {
+        @apply truncate text-base font-bold;
+    }
+
+    .lecturer-sidebar-trigger {
+        @apply rounded-[8px] shadow-none;
+        color: var(--lecturer-text);
+        width: 32px !important;
+        height: 32px !important;
+    }
+
+    .lecturer-sidebar-trigger:hover {
+        background-color: var(--lecturer-surface-soft);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-sidebar-content {
+        gap: 0 !important;
+    }
+
+    .lecturer-nav-group {
+        padding: 16px 20px !important;
+    }
+
+    .lecturer-nav-list {
+        gap: 8px !important;
+    }
+
+    .lecturer-nav-button {
+        @apply justify-start gap-2 rounded-[8px] text-xs font-semibold shadow-none;
+        color: var(--lecturer-muted);
+        height: 34px !important;
+        padding: 0 10px !important;
+    }
+
+    .lecturer-nav-button:hover,
+    .lecturer-nav-button[data-active='true'] {
+        background-color: var(--lecturer-primary-soft);
+        color: var(--lecturer-primary);
+    }
+
+    .lecturer-sidebar-footer {
+        @apply mt-auto border-t;
+        border-color: var(--lecturer-border);
+        padding: 16px 20px !important;
+    }
+
+    .lecturer-user-button {
+        @apply mb-3 w-fit gap-2 rounded-[6px] shadow-none;
+        background-color: var(--lecturer-surface-soft);
+        color: var(--lecturer-text);
+        height: auto !important;
+        padding: 6px 8px !important;
+    }
+
+    .lecturer-user-button:hover {
+        background-color: var(--lecturer-surface-soft);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-user-avatar {
+        @apply size-6 text-[8px];
+        background-color: var(--lecturer-surface);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-user-copy {
+        @apply min-w-0;
+    }
+
+    .lecturer-user-name {
+        @apply block truncate text-[11px] font-semibold leading-tight;
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-user-role {
+        @apply block truncate text-[10px] leading-tight;
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-logout-button {
+        @apply justify-start gap-1 rounded-none text-[11px] font-normal shadow-none;
+        color: var(--lecturer-danger);
+        height: auto !important;
+        padding: 0 !important;
+    }
+
+    .lecturer-logout-button:hover {
+        background-color: transparent;
+        color: var(--lecturer-danger);
+    }
+
+    .group[data-collapsible='icon'] .lecturer-sidebar-header {
+        justify-content: center !important;
+        padding: 0 !important;
+    }
+
+    .group[data-collapsible='icon'] .lecturer-brand-copy,
+    .group[data-collapsible='icon'] .lecturer-nav-button span,
+    .group[data-collapsible='icon'] .lecturer-user-copy,
+    .group[data-collapsible='icon'] .lecturer-logout-button span {
+        @apply hidden;
+    }
+
+    .group[data-collapsible='icon'] .lecturer-brand {
+        flex: 0 0 auto;
+        justify-content: center;
+    }
+
+    .group[data-collapsible='icon'] .lecturer-sidebar-trigger {
+        display: none !important;
+    }
+
+    .group[data-collapsible='icon'] .lecturer-nav-group {
+        padding: 20px 12px !important;
+    }
+
+    .group[data-collapsible='icon'] .lecturer-nav-button,
+    .group[data-collapsible='icon'] .lecturer-user-button,
+    .group[data-collapsible='icon'] .lecturer-logout-button {
+        @apply mx-auto flex items-center justify-center rounded-[9px];
+        width: 32px !important;
+        height: 32px !important;
+        padding: 0 !important;
+    }
+
+    .group[data-collapsible='icon'] .lecturer-sidebar-footer {
+        @apply px-3;
+    }
+
+    .lecturer-workspace {
+        @apply flex min-w-0 flex-1 flex-col;
+        background-color: var(--lecturer-bg);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-page {
+        @apply w-full px-5 py-8 sm:px-8 lg:px-10;
+    }
+
+    .lecturer-page-header {
+        @apply flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between;
+    }
+
+    .lecturer-page-header h1 {
+        @apply text-3xl font-bold leading-tight tracking-[-0.03em];
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-page-header p {
+        @apply mt-1 text-sm leading-relaxed;
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-header-actions {
+        @apply flex items-center gap-3;
+    }
+
+    .lecturer-theme-toggle {
+        @apply static size-9 rounded-[9px] shadow-none sm:static;
+        background-color: var(--lecturer-surface) !important;
+        border-color: var(--lecturer-border-strong) !important;
+        color: var(--lecturer-primary) !important;
+    }
+
+    .lecturer-create-button {
+        @apply h-9 rounded-[8px] px-4 text-xs font-semibold shadow-none;
+        background-color: var(--lecturer-primary) !important;
+        color: var(--lecturer-primary-foreground) !important;
+    }
+
+    .lecturer-cancel-button {
+        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
+        background-color: var(--lecturer-surface) !important;
+        border-color: var(--lecturer-border) !important;
+        color: var(--lecturer-text) !important;
+    }
+
+    .lecturer-cancel-button:hover {
+        background-color: var(--lecturer-surface-soft) !important;
+    }
+
+    .lecturer-course-dialog {
+        @apply gap-6 rounded-[16px] border p-6 shadow-none sm:max-w-[460px];
+        background-color: var(--lecturer-surface);
+        border-color: var(--lecturer-border-strong);
+        box-shadow: var(--lecturer-shadow);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-course-form {
+        @apply flex flex-col gap-5;
+    }
+
+    .lecturer-form-field {
+        @apply flex flex-col gap-2;
+    }
+
+    .lecturer-form-label {
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-form-input,
+    .lecturer-form-textarea {
+        @apply w-full rounded-[8px] border px-4 text-sm shadow-none outline-none transition-[border-color,box-shadow];
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 6%,
+            var(--lecturer-surface)
+        );
+        border-color: var(--lecturer-border);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-form-input {
+        @apply h-11;
+    }
+
+    .lecturer-form-textarea {
+        @apply min-h-28 resize-none py-3;
+    }
+
+    .lecturer-form-input::placeholder,
+    .lecturer-form-textarea::placeholder {
+        color: var(--app-placeholder);
+    }
+
+    .lecturer-form-input:focus,
+    .lecturer-form-textarea:focus {
+        border-color: var(--lecturer-primary);
+        box-shadow: 0 0 0 3px
+            color-mix(in oklab, var(--lecturer-primary) 18%, transparent);
+    }
+
+    .lecturer-course-form .lecturer-status {
+        @apply mx-0 mt-0;
+    }
+
+    .lecturer-course-footer {
+        @apply gap-3 pt-1;
+    }
+
+    .lecturer-metric-grid {
+        @apply mt-8 grid grid-cols-1 gap-5 md:grid-cols-3;
+    }
+
+    .lecturer-metric-card {
+        @apply gap-0 rounded-[14px] border py-0 shadow-none;
+        background-color: var(--lecturer-surface);
+        border-color: var(--lecturer-border-soft);
+        box-shadow: var(--lecturer-shadow);
+    }
+
+    .lecturer-metric-content {
+        @apply flex items-center gap-5 px-6 py-6;
+    }
+
+    .lecturer-metric-icon {
+        @apply flex size-12 shrink-0 items-center justify-center rounded-[12px];
+        background-color: var(--lecturer-primary-soft);
+        color: var(--lecturer-primary);
+    }
+
+    .lecturer-metric-icon[data-tone='danger'] {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 12%,
+            var(--lecturer-surface)
+        );
+        color: var(--lecturer-danger);
+    }
+
+    .lecturer-metric-copy p {
+        @apply text-sm;
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-metric-value-row {
+        @apply mt-1 flex items-end gap-2;
+    }
+
+    .lecturer-metric-value-row strong {
+        @apply text-3xl font-bold leading-none;
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-metric-icon[data-tone='danger']
+        + .lecturer-metric-copy
+        .lecturer-metric-value-row
+        strong {
+        color: var(--lecturer-danger);
+    }
+
+    .lecturer-metric-value-row span {
+        @apply pb-1 text-xs;
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-table-card {
+        @apply mt-8 gap-0 overflow-hidden rounded-[14px] border py-0 shadow-none;
+        background-color: var(--lecturer-surface);
+        border-color: var(--lecturer-border);
+        box-shadow: var(--lecturer-shadow);
+    }
+
+    .lecturer-table-content {
+        @apply px-0;
+    }
+
+    .lecturer-table-heading {
+        @apply flex flex-col gap-4 border-b px-6 py-5 sm:flex-row sm:items-center sm:justify-between;
+        border-color: var(--lecturer-border);
+    }
+
+    .lecturer-table-heading h2 {
+        @apply text-base font-semibold;
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-search-field {
+        @apply relative w-full sm:max-w-[320px];
+    }
+
+    .lecturer-search-field svg {
+        @apply pointer-events-none absolute left-3 top-1/2 -translate-y-1/2;
+        color: var(--lecturer-muted);
+        z-index: 1;
+    }
+
+    .lecturer-search-input {
+        @apply h-10 rounded-[9px] border text-sm shadow-none outline-none transition-[border-color,box-shadow];
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 5%,
+            var(--lecturer-surface)
+        );
+        border-color: var(--lecturer-border);
+        color: var(--lecturer-text);
+        padding-right: 0.75rem !important;
+        padding-left: 2.5rem !important;
+    }
+
+    .lecturer-search-input::placeholder {
+        color: var(--app-placeholder);
+    }
+
+    .lecturer-search-input:focus {
+        border-color: var(--lecturer-primary);
+        box-shadow: 0 0 0 3px
+            color-mix(in oklab, var(--lecturer-primary) 16%, transparent);
+    }
+
+    .lecturer-status {
+        @apply mx-6 mt-4 rounded-[10px] border px-4 py-3 text-sm font-medium;
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 8%,
+            var(--lecturer-surface)
+        );
+        border-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 24%,
+            transparent
+        );
+        color: var(--lecturer-danger);
+    }
+
+    .lecturer-table-wrap {
+        @apply w-full overflow-x-auto;
+    }
+
+    .lecturer-table {
+        @apply w-full min-w-[620px] border-collapse text-left;
+    }
+
+    .lecturer-table th {
+        @apply px-6 py-4 text-xs font-semibold;
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-table td {
+        @apply border-t px-6 py-4 text-sm;
+        border-color: var(--lecturer-border);
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-table tbody tr:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 5%,
+            transparent
+        );
+    }
+
+    .lecturer-kb-name {
+        @apply block max-w-[260px] font-semibold;
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-doc-pill {
+        @apply inline-flex items-center gap-1.5 rounded-[7px] px-2.5 py-1 text-xs font-semibold;
+        background-color: var(--lecturer-surface-soft);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-doc-pill svg {
+        color: var(--lecturer-primary);
+    }
+
+    .lecturer-doc-error {
+        @apply size-1.5 rounded-full;
+        background-color: var(--lecturer-danger);
+    }
+
+    .lecturer-table-empty {
+        @apply py-10 text-center text-sm;
+        color: var(--lecturer-muted) !important;
+    }
+
+    .lecturer-manage-button {
+        @apply inline-flex items-center justify-center gap-1 rounded-[7px] px-3 py-1.5 text-sm font-semibold outline-none transition-colors focus-visible:ring-2;
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 10%,
+            var(--lecturer-surface)
+        );
+        color: var(--lecturer-primary);
+        --tw-ring-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 45%,
+            transparent
+        );
+    }
+
+    .lecturer-manage-button:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 16%,
+            var(--lecturer-surface)
+        );
+    }
+
+    .lecturer-detail-page {
+        @apply min-h-svh w-full;
+        background-color: var(--lecturer-bg);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-detail-header {
+        @apply flex flex-col gap-5 px-5 py-8 sm:flex-row sm:items-start sm:px-8 lg:px-10;
+        background-color: var(--lecturer-surface-soft);
+        border-bottom: 1px solid var(--lecturer-border-soft);
+    }
+
+    .lecturer-detail-back {
+        @apply mt-1 inline-flex size-9 shrink-0 items-center justify-center rounded-full outline-none transition-colors focus-visible:ring-2;
+        color: var(--lecturer-muted);
+        --tw-ring-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 45%,
+            transparent
+        );
+    }
+
+    .lecturer-detail-back:hover {
+        background-color: var(--lecturer-surface);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-detail-heading {
+        @apply min-w-0 flex-1;
+    }
+
+    .lecturer-detail-title-row {
+        @apply flex flex-wrap items-center gap-4;
+    }
+
+    .lecturer-detail-title-row h1 {
+        @apply text-3xl font-bold leading-tight tracking-[-0.03em];
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-detail-heading p {
+        @apply mt-1 text-base italic leading-relaxed;
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-detail-actions {
+        @apply flex items-center gap-3 sm:ml-auto;
+    }
+
+    .lecturer-edit-button {
+        @apply h-12 rounded-[8px] px-5 text-base font-semibold shadow-none;
+        background-color: var(--lecturer-surface) !important;
+        border-color: var(--lecturer-border) !important;
+        color: var(--lecturer-text) !important;
+    }
+
+    .lecturer-edit-button:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 8%,
+            var(--lecturer-surface)
+        ) !important;
+    }
+
+    .lecturer-delete-button {
+        @apply size-12 rounded-[8px] shadow-none;
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 10%,
+            var(--lecturer-surface)
+        ) !important;
+        color: var(--lecturer-danger) !important;
+    }
+
+    .lecturer-delete-button:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 16%,
+            var(--lecturer-surface)
+        ) !important;
+    }
+
+    .lecturer-delete-copy {
+        @apply text-sm leading-relaxed;
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-delete-copy strong {
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-danger-action-button {
+        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
+        background-color: var(--lecturer-danger) !important;
+        color: var(--lecturer-primary-foreground) !important;
+    }
+
+    .lecturer-danger-action-button:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 86%,
+            #000
+        ) !important;
+    }
+
+    .lecturer-detail-content {
+        @apply mx-auto flex w-full max-w-[920px] flex-col gap-6 px-5 py-10 sm:px-8;
+    }
+
+    .lecturer-upload-input {
+        @apply sr-only;
+    }
+
+    .lecturer-upload-card {
+        @apply flex min-h-[185px] w-full flex-col items-center justify-center gap-3 rounded-[14px] border border-dashed px-6 py-8 text-center outline-none transition-colors focus-visible:ring-2;
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 6%,
+            var(--lecturer-surface)
+        );
+        border-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 28%,
+            var(--lecturer-border)
+        );
+        color: var(--lecturer-text);
+        --tw-ring-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 45%,
+            transparent
+        );
+    }
+
+    .lecturer-upload-card:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 10%,
+            var(--lecturer-surface)
+        );
+        border-color: var(--lecturer-primary);
+    }
+
+    .lecturer-upload-card[data-uploading='true'] {
+        opacity: 0.78;
+    }
+
+    .lecturer-upload-icon {
+        @apply flex size-12 items-center justify-center rounded-full;
+        background-color: var(--lecturer-surface);
+        color: var(--lecturer-primary);
+    }
+
+    .lecturer-upload-title {
+        @apply text-base font-medium;
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-upload-description {
+        @apply max-w-[560px] text-sm leading-relaxed;
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-document-section {
+        @apply mt-1;
+    }
+
+    .lecturer-document-heading {
+        @apply flex items-center gap-2 text-sm font-bold;
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-document-list {
+        @apply mt-5 flex flex-col gap-3;
+    }
+
+    .lecturer-document-card {
+        @apply gap-0 rounded-[10px] border py-0 shadow-none;
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 3%,
+            var(--lecturer-surface)
+        );
+        border-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 18%,
+            var(--lecturer-border)
+        );
+    }
+
+    .lecturer-document-card[data-status='failed'] {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 5%,
+            var(--lecturer-surface)
+        );
+        border-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 25%,
+            var(--lecturer-border)
+        );
+    }
+
+    .lecturer-document-content {
+        @apply flex items-start gap-4 px-5 py-5;
+    }
+
+    .lecturer-document-icon {
+        @apply flex size-10 shrink-0 items-center justify-center rounded-[8px];
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 12%,
+            var(--lecturer-surface)
+        );
+        color: var(--lecturer-primary);
+    }
+
+    .lecturer-document-icon[data-status='failed'] {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 12%,
+            var(--lecturer-surface)
+        );
+        color: var(--lecturer-danger);
+    }
+
+    .lecturer-document-copy {
+        @apply min-w-0 flex-1;
+    }
+
+    .lecturer-document-copy h3 {
+        @apply truncate text-sm font-bold;
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-document-meta {
+        @apply mt-2 flex flex-wrap items-center gap-3 text-xs;
+        color: var(--lecturer-muted);
+    }
+
+    .lecturer-document-status {
+        @apply mt-3 flex items-center gap-1.5 text-xs font-semibold;
+        color: var(--lecturer-success);
+    }
+
+    .lecturer-document-status[data-status='failed'] {
+        color: var(--lecturer-danger);
+    }
+
+    .lecturer-document-status[data-status='processing'] {
+        color: var(--lecturer-primary);
+    }
+
+    .lecturer-document-actions {
+        @apply ml-auto flex shrink-0 items-center gap-3;
+    }
+
+    .lecturer-document-delete {
+        @apply inline-flex size-8 items-center justify-center rounded-[7px] outline-none transition-colors focus-visible:ring-2;
+        color: var(--lecturer-muted);
+        --tw-ring-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 45%,
+            transparent
+        );
+    }
+
+    .lecturer-document-delete:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 10%,
+            var(--lecturer-surface)
+        );
+        color: var(--lecturer-danger);
+    }
+
+    .lecturer-detail-empty {
+        @apply rounded-[10px] border px-5 py-8 text-center text-sm;
+        background-color: var(--lecturer-surface);
+        border-color: var(--lecturer-border);
+        color: var(--lecturer-muted);
+    }
+
     @media (max-width: 640px) {
         .student-chat-stage--session {
             @apply px-3;
@@ -1017,5 +1914,45 @@ @layer components {
         .student-chat-composer {
             @apply pb-4;
         }
+
+        .lecturer-page {
+            @apply px-4 py-6;
+        }
+
+        .lecturer-page-header h1 {
+            @apply text-2xl;
+        }
+
+        .lecturer-header-actions {
+            @apply w-full;
+        }
+
+        .lecturer-create-button {
+            @apply flex-1;
+        }
+
+        .lecturer-detail-title-row h1 {
+            @apply text-2xl;
+        }
+
+        .lecturer-detail-actions {
+            @apply w-full;
+        }
+
+        .lecturer-edit-button {
+            @apply flex-1;
+        }
+
+        .lecturer-detail-content {
+            @apply px-4 py-6;
+        }
+
+        .lecturer-document-content {
+            @apply flex-col;
+        }
+
+        .lecturer-document-actions {
+            @apply ml-0 w-full justify-between;
+        }
     }
 }

resources/js/components/auth/register-role-form.tsx

@@ -1,6 +1,7 @@
 import { Head, Link } from '@inertiajs/react';
 import type { FormEvent } from 'react';
 import { useState } from 'react';
+
 import AppearanceToggle from '@/components/appearance-toggle';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -30,26 +31,113 @@ type RegisterRoleFormProps = {
     role: RegisterRole;
 };
 
+type RegisterFormValues = {
+    email: string;
+    identity_number: string;
+    name: string;
+    password: string;
+};
+
+type RegisterFormErrors = Partial<Record<keyof RegisterFormValues, string>>;
+type RegisterTouchedFields = Partial<Record<keyof RegisterFormValues, boolean>>;
+
 type RegisterFieldProps = {
     autoComplete?: string;
     autoFocus?: boolean;
+    error?: string;
+    inputMode?: 'email' | 'numeric' | 'text';
     label: string;
     name: string;
+    onBlur?: () => void;
+    onChange: (value: string) => void;
+    pattern?: string;
     placeholder: string;
     required?: boolean;
     tabIndex: number;
     type?: string;
+    value: string;
 };
 
+const emptyFormValues: RegisterFormValues = {
+    email: '',
+    identity_number: '',
+    name: '',
+    password: '',
+};
+
+const namePattern = /^[\p{L}\s.'-]+$/u;
+const identityNumberPattern = /^(?:\d{5,30}|[A-Z]{2,10}\d{3,30})$/;
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function validateRegisterForm(
+    values: RegisterFormValues,
+    identifierLabel: string,
+): RegisterFormErrors {
+    const errors: RegisterFormErrors = {};
+    const normalizedName = values.name.trim().replace(/\s+/g, ' ');
+    const normalizedEmail = values.email.trim();
+    const normalizedIdentityNumber = values.identity_number.trim();
+
+    if (!normalizedName) {
+        errors.name = 'Nama lengkap wajib diisi.';
+    } else if (normalizedName.length < 3) {
+        errors.name = 'Nama lengkap minimal 3 karakter.';
+    } else if (!namePattern.test(normalizedName)) {
+        errors.name = 'Nama hanya boleh berisi huruf dan tanda nama.';
+    }
+
+    if (!normalizedIdentityNumber) {
+        errors.identity_number = `${identifierLabel} wajib diisi.`;
+    } else if (!identityNumberPattern.test(normalizedIdentityNumber)) {
+        errors.identity_number = `${identifierLabel} hanya boleh angka, atau kode huruf besar diikuti angka.`;
+    }
+
+    if (!normalizedEmail) {
+        errors.email = 'Email wajib diisi.';
+    } else if (
+        normalizedEmail.includes(' ') ||
+        !emailPattern.test(normalizedEmail)
+    ) {
+        errors.email = 'Format email tidak valid.';
+    }
+
+    if (!values.password) {
+        errors.password = 'Password wajib diisi.';
+    } else if (values.password.length < 6) {
+        errors.password = 'Password minimal 6 karakter.';
+    } else if (/\s/.test(values.password)) {
+        errors.password = 'Password tidak boleh mengandung spasi.';
+    }
+
+    return errors;
+}
+
+function normalizeRegisterValues(
+    values: RegisterFormValues,
+): RegisterFormValues {
+    return {
+        email: values.email.trim(),
+        identity_number: values.identity_number.trim(),
+        name: values.name.trim().replace(/\s+/g, ' '),
+        password: values.password,
+    };
+}
+
 function RegisterField({
     autoComplete,
     autoFocus = false,
+    error,
+    inputMode = 'text',
     label,
     name,
+    onBlur,
+    onChange,
+    pattern,
     placeholder,
     required = false,
     tabIndex,
     type = 'text',
+    value,
 }: RegisterFieldProps) {
     return (
         <div className="register-field">
@@ -62,11 +150,22 @@ function RegisterField({
                 type={type}
                 autoComplete={autoComplete}
                 autoFocus={autoFocus}
+                aria-invalid={Boolean(error)}
                 placeholder={placeholder}
+                inputMode={inputMode}
+                onBlur={onBlur}
+                onChange={(event) => onChange(event.target.value)}
+                pattern={pattern}
                 required={required}
                 tabIndex={tabIndex}
+                value={value}
                 className="register-input"
             />
+            {error && (
+                <p className="register-error" role="alert">
+                    {error}
+                </p>
+            )}
         </div>
     );
 }
@@ -75,7 +174,55 @@ export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
     const content = roleContent[role];
     const [backendError, setBackendError] = useState<string>();
     const [backendStatus, setBackendStatus] = useState<string>();
+    const [fieldErrors, setFieldErrors] = useState<RegisterFormErrors>({});
+    const [formValues, setFormValues] =
+        useState<RegisterFormValues>(emptyFormValues);
     const [isProcessing, setIsProcessing] = useState(false);
+    const [submittedOnce, setSubmittedOnce] = useState(false);
+    const [touchedFields, setTouchedFields] = useState<RegisterTouchedFields>(
+        {},
+    );
+
+    function validateCurrentForm(
+        values: RegisterFormValues = formValues,
+    ): RegisterFormErrors {
+        return validateRegisterForm(values, content.identifierLabel);
+    }
+
+    function setSingleFieldError(
+        field: keyof RegisterFormValues,
+        errors: RegisterFormErrors,
+    ): void {
+        setFieldErrors((currentErrors) => {
+            const nextErrors = { ...currentErrors };
+            const message = errors[field];
+
+            if (message) {
+                nextErrors[field] = message;
+            } else {
+                delete nextErrors[field];
+            }
+
+            return nextErrors;
+        });
+    }
+
+    function updateField(field: keyof RegisterFormValues, value: string): void {
+        const nextValues = { ...formValues, [field]: value };
+        setFormValues(nextValues);
+
+        if (submittedOnce || touchedFields[field]) {
+            setSingleFieldError(field, validateCurrentForm(nextValues));
+        }
+    }
+
+    function validateFieldOnBlur(field: keyof RegisterFormValues): void {
+        setTouchedFields((currentFields) => ({
+            ...currentFields,
+            [field]: true,
+        }));
+        setSingleFieldError(field, validateCurrentForm());
+    }
 
     const handleSubmit = async (
         event: FormEvent<HTMLFormElement>,
@@ -83,17 +230,27 @@ export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
         event.preventDefault();
         setBackendError(undefined);
         setBackendStatus(undefined);
-        setIsProcessing(true);
+        setSubmittedOnce(true);
+
+        const normalizedValues = normalizeRegisterValues(formValues);
+        const nextFieldErrors = validateCurrentForm(normalizedValues);
 
-        const formData = new FormData(event.currentTarget);
+        setFormValues(normalizedValues);
+        setFieldErrors(nextFieldErrors);
+
+        if (Object.keys(nextFieldErrors).length > 0) {
+            return;
+        }
+
+        setIsProcessing(true);
 
         try {
             const response = await authApi.register({
-                email: String(formData.get('email') ?? ''),
-                password: String(formData.get('password') ?? ''),
-                name: String(formData.get('name') ?? ''),
+                email: normalizedValues.email,
+                password: normalizedValues.password,
+                name: normalizedValues.name,
                 role: content.apiRole,
-                identity_number: String(formData.get('identity_number') ?? ''),
+                identity_number: normalizedValues.identity_number,
             });
 
             setBackendStatus(response.message);
@@ -119,7 +276,11 @@ export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
 
                         <h1 className="register-heading">{content.heading}</h1>
 
-                        <form className="register-form" onSubmit={handleSubmit}>
+                        <form
+                            className="register-form"
+                            noValidate
+                            onSubmit={handleSubmit}
+                        >
                             <input type="hidden" name="role" value={role} />
 
                             <RegisterField
@@ -128,15 +289,34 @@ export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
                                 placeholder="Masukkan nama lengkap"
                                 autoComplete="name"
                                 autoFocus
+                                error={fieldErrors.name}
+                                onBlur={() => validateFieldOnBlur('name')}
+                                onChange={(value) => updateField('name', value)}
+                                pattern="[\p{L}\s.'-]+"
                                 required
                                 tabIndex={1}
+                                value={formValues.name}
                             />
                             <RegisterField
                                 name="identity_number"
                                 label={content.identifierLabel}
                                 placeholder={content.identifierPlaceholder}
+                                autoComplete="off"
+                                error={fieldErrors.identity_number}
+                                inputMode="text"
+                                onBlur={() =>
+                                    validateFieldOnBlur('identity_number')
+                                }
+                                onChange={(value) =>
+                                    updateField(
+                                        'identity_number',
+                                        value.toUpperCase(),
+                                    )
+                                }
+                                pattern="(?:\d{5,30}|[A-Z]{2,10}\d{3,30})"
                                 required
                                 tabIndex={2}
+                                value={formValues.identity_number}
                             />
                             <RegisterField
                                 name="email"
@@ -144,8 +324,15 @@ export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
                                 label="Email"
                                 placeholder="contoh@kampus.ac.id"
                                 autoComplete="email"
+                                error={fieldErrors.email}
+                                inputMode="email"
+                                onBlur={() => validateFieldOnBlur('email')}
+                                onChange={(value) =>
+                                    updateField('email', value)
+                                }
                                 required
                                 tabIndex={3}
+                                value={formValues.email}
                             />
                             <RegisterField
                                 name="password"
@@ -153,8 +340,14 @@ export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
                                 label="Password"
                                 placeholder="Minimal 6 karakter"
                                 autoComplete="new-password"
+                                error={fieldErrors.password}
+                                onBlur={() => validateFieldOnBlur('password')}
+                                onChange={(value) =>
+                                    updateField('password', value)
+                                }
                                 required
                                 tabIndex={4}
+                                value={formValues.password}
                             />
 
                             <Button

resources/js/components/dosen/dosen-shell.tsx

@@ -0,0 +1,200 @@
+import { router } from '@inertiajs/react';
+import { LayoutDashboard, LogOut, MessageSquare, Settings } from 'lucide-react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useSyncExternalStore } from 'react';
+
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarHeader,
+    SidebarInset,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarProvider,
+    SidebarRail,
+    SidebarTrigger,
+    useSidebar,
+} from '@/components/ui/sidebar';
+import { clearAuthSession, getStoredAuthUser } from '@/lib/auth';
+import { dosen, login } from '@/routes';
+import { pengaturan as dosenPengaturan } from '@/routes/dosen';
+
+type DosenMenu = 'dashboard' | 'settings';
+
+const lecturerSidebarStyle = {
+    '--sidebar-width': '212px',
+    '--sidebar-width-icon': '64px',
+} as CSSProperties;
+
+function getStoredLecturerName(): string {
+    return getStoredAuthUser()?.name ?? 'Dosen';
+}
+
+function subscribeToAuthStorage(onStoreChange: () => void): () => void {
+    if (typeof window === 'undefined') {
+        return () => {};
+    }
+
+    window.addEventListener('storage', onStoreChange);
+
+    return () => window.removeEventListener('storage', onStoreChange);
+}
+
+function useStoredLecturerName(): string {
+    return useSyncExternalStore(
+        subscribeToAuthStorage,
+        getStoredLecturerName,
+        () => 'Dosen',
+    );
+}
+
+function getInitials(name: string): string {
+    return name
+        .split(' ')
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase())
+        .join('');
+}
+
+function handleLogout(): void {
+    clearAuthSession();
+    router.visit(login());
+}
+
+function DosenSidebarBrand() {
+    const { state, toggleSidebar } = useSidebar();
+
+    const handleBrandClick = (): void => {
+        if (state === 'collapsed') {
+            toggleSidebar();
+        }
+    };
+
+    return (
+        <button
+            aria-label="Buka sidebar"
+            className="lecturer-brand"
+            onClick={handleBrandClick}
+            type="button"
+        >
+            <span className="lecturer-brand-mark">
+                <MessageSquare className="size-4" />
+            </span>
+            <span className="lecturer-brand-copy">RAG Hub</span>
+        </button>
+    );
+}
+
+function DosenSidebar({ activeMenu }: { activeMenu: DosenMenu }) {
+    const lecturerName = useStoredLecturerName();
+
+    return (
+        <Sidebar className="lecturer-sidebar" collapsible="icon">
+            <SidebarHeader className="lecturer-sidebar-header">
+                <DosenSidebarBrand />
+
+                <SidebarTrigger className="lecturer-sidebar-trigger" />
+            </SidebarHeader>
+
+            <SidebarContent className="lecturer-sidebar-content">
+                <SidebarGroup className="lecturer-nav-group">
+                    <SidebarGroupContent>
+                        <SidebarMenu className="lecturer-nav-list">
+                            <SidebarMenuItem>
+                                <SidebarMenuButton
+                                    className="lecturer-nav-button"
+                                    isActive={activeMenu === 'dashboard'}
+                                    onClick={() => router.visit(dosen())}
+                                    tooltip="Dashboard KB"
+                                >
+                                    <LayoutDashboard className="size-4" />
+                                    <span>Dashboard KB</span>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+
+                            <SidebarMenuItem>
+                                <SidebarMenuButton
+                                    className="lecturer-nav-button"
+                                    isActive={activeMenu === 'settings'}
+                                    onClick={() =>
+                                        router.visit(dosenPengaturan())
+                                    }
+                                    tooltip="Pengaturan"
+                                >
+                                    <Settings className="size-4" />
+                                    <span>Pengaturan</span>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+            </SidebarContent>
+
+            <SidebarFooter className="lecturer-sidebar-footer">
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            className="lecturer-user-button"
+                            tooltip={lecturerName}
+                        >
+                            <Avatar className="lecturer-user-avatar">
+                                <AvatarFallback>
+                                    {getInitials(lecturerName) || 'DS'}
+                                </AvatarFallback>
+                            </Avatar>
+                            <span className="lecturer-user-copy">
+                                <span className="lecturer-user-name">
+                                    {lecturerName}
+                                </span>
+                                <span className="lecturer-user-role">
+                                    Dosen
+                                </span>
+                            </span>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            className="lecturer-logout-button"
+                            onClick={handleLogout}
+                            tooltip="Logout"
+                        >
+                            <LogOut className="size-4" />
+                            <span>Logout</span>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarFooter>
+
+            <SidebarRail />
+        </Sidebar>
+    );
+}
+
+export function DosenShell({
+    activeMenu = 'dashboard',
+    children,
+}: {
+    activeMenu?: DosenMenu;
+    children: ReactNode;
+}) {
+    return (
+        <SidebarProvider
+            className="lecturer-dashboard-shell"
+            defaultOpen
+            style={lecturerSidebarStyle}
+        >
+            <DosenSidebar activeMenu={activeMenu} />
+
+            <SidebarInset className="lecturer-workspace">
+                {children}
+            </SidebarInset>
+        </SidebarProvider>
+    );
+}

resources/js/components/student/question-composer.tsx

@@ -1,5 +1,5 @@
 import { BookOpen, Send, Sparkles } from 'lucide-react';
-import type { FormEvent } from 'react';
+import type { FormEvent, KeyboardEvent } from 'react';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -15,7 +15,6 @@ import { cn } from '@/lib/utils';
 
 export function QuestionComposer({
     courses,
-    isCourseLocked = false,
     isLoadingCourses,
     isProcessing,
     onCourseChange,
@@ -26,7 +25,6 @@ export function QuestionComposer({
     variant = 'empty',
 }: {
     courses: CourseResponse[];
-    isCourseLocked?: boolean;
     isLoadingCourses: boolean;
     isProcessing: boolean;
     onCourseChange: (courseId: string) => void;
@@ -36,6 +34,29 @@ export function QuestionComposer({
     selectedCourseId: string;
     variant?: 'dock' | 'empty';
 }) {
+    const canSubmit =
+        !isProcessing &&
+        selectedCourseId.length > 0 &&
+        question.trim().length > 0;
+
+    function handleQuestionKeyDown(
+        event: KeyboardEvent<HTMLTextAreaElement>,
+    ): void {
+        if (
+            event.key !== 'Enter' ||
+            event.shiftKey ||
+            event.nativeEvent.isComposing
+        ) {
+            return;
+        }
+
+        event.preventDefault();
+
+        if (canSubmit) {
+            event.currentTarget.form?.requestSubmit();
+        }
+    }
+
     return (
         <Card
             className={cn(
@@ -52,11 +73,7 @@ export function QuestionComposer({
                         </span>
 
                         <Select
-                            disabled={
-                                isCourseLocked ||
-                                isLoadingCourses ||
-                                courses.length === 0
-                            }
+                            disabled={isLoadingCourses || courses.length === 0}
                             onValueChange={onCourseChange}
                             value={selectedCourseId}
                         >
@@ -86,6 +103,7 @@ export function QuestionComposer({
                         <textarea
                             aria-label="Pertanyaan"
                             className="text-base"
+                            onKeyDown={handleQuestionKeyDown}
                             onChange={(event) =>
                                 onQuestionChange(event.target.value)
                             }
@@ -96,11 +114,7 @@ export function QuestionComposer({
 
                     <Button
                         className="student-floating-send"
-                        disabled={
-                            isProcessing ||
-                            selectedCourseId.length === 0 ||
-                            question.trim().length === 0
-                        }
+                        disabled={!canSubmit}
                         size="icon"
                         type="submit"
                     >

resources/js/components/student/student-shell.tsx

@@ -12,6 +12,14 @@ import { useState, useSyncExternalStore } from 'react';
 import AppearanceToggle from '@/components/appearance-toggle';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
 import {
     Sidebar,
     SidebarContent,
@@ -39,6 +47,11 @@ const sidebarStyle = {
     '--sidebar-width-icon': '64px',
 } as CSSProperties;
 
+export type DeleteSessionResult = {
+    ok: boolean;
+    message?: string;
+};
+
 export function getStoredStudentName(): string {
     return getStoredAuthUser()?.name ?? 'Mahasiswa';
 }
@@ -131,188 +144,289 @@ function StudentSidebar({
     activeSessionId?: string;
     chatSessions: ChatSessionResponse[];
     isLoading: boolean;
-    onDeleteSession?: (sessionId: string) => void;
+    onDeleteSession?: (
+        sessionId: string,
+    ) => DeleteSessionResult | Promise<DeleteSessionResult>;
     studentName: string;
 }) {
     const [isHistoryOpen, setIsHistoryOpen] = useState(true);
+    const [deleteDialogMessage, setDeleteDialogMessage] = useState<string>();
+    const [isDeletingSession, setIsDeletingSession] = useState(false);
+    const [sessionToDelete, setSessionToDelete] =
+        useState<ChatSessionResponse>();
     const { state } = useSidebar();
     const isSidebarCollapsed = state === 'collapsed';
 
+    function handleDeleteDialogOpenChange(open: boolean): void {
+        if (isDeletingSession) {
+            return;
+        }
+
+        if (!open) {
+            setSessionToDelete(undefined);
+            setDeleteDialogMessage(undefined);
+        }
+    }
+
+    async function handleConfirmDeleteSession(): Promise<void> {
+        if (!sessionToDelete || !onDeleteSession) {
+            return;
+        }
+
+        setIsDeletingSession(true);
+        setDeleteDialogMessage(undefined);
+
+        try {
+            const result = await onDeleteSession(sessionToDelete.uuid_id);
+
+            if (result.ok) {
+                setSessionToDelete(undefined);
+
+                return;
+            }
+
+            setDeleteDialogMessage(result.message);
+        } finally {
+            setIsDeletingSession(false);
+        }
+    }
+
     return (
-        <Sidebar className="student-sidebar" collapsible="icon">
-            <SidebarHeader className="student-sidebar-top">
-                <StudentSidebarLogo />
-                <SidebarTrigger className="student-sidebar-trigger" />
-            </SidebarHeader>
-
-            <SidebarContent className="student-sidebar-content">
-                <SidebarGroup className="student-history-group">
-                    {isSidebarCollapsed ? (
-                        <SidebarGroupContent>
-                            <SidebarMenu className="student-history-list">
-                                <SidebarMenuItem>
-                                    <SidebarMenuButton
-                                        className="student-history-menu-button"
-                                        tooltip="Riwayat Chat"
-                                    >
-                                        <Clock3 className="student-history-menu-icon size-4" />
-                                        <span className="student-history-copy">
-                                            <span className="student-history-title">
-                                                Riwayat Chat
+        <>
+            <Sidebar className="student-sidebar" collapsible="icon">
+                <SidebarHeader className="student-sidebar-top">
+                    <StudentSidebarLogo />
+                    <SidebarTrigger className="student-sidebar-trigger" />
+                </SidebarHeader>
+
+                <SidebarContent className="student-sidebar-content">
+                    <SidebarGroup className="student-history-group">
+                        {isSidebarCollapsed ? (
+                            <SidebarGroupContent>
+                                <SidebarMenu className="student-history-list">
+                                    <SidebarMenuItem>
+                                        <SidebarMenuButton
+                                            className="student-history-menu-button"
+                                            tooltip="Riwayat Chat"
+                                        >
+                                            <Clock3 className="student-history-menu-icon size-4" />
+                                            <span className="student-history-copy">
+                                                <span className="student-history-title">
+                                                    Riwayat Chat
+                                                </span>
                                             </span>
-                                        </span>
-                                    </SidebarMenuButton>
-                                </SidebarMenuItem>
-                            </SidebarMenu>
-                        </SidebarGroupContent>
-                    ) : (
-                        <>
-                            <SidebarGroupLabel asChild>
-                                <button
-                                    aria-expanded={isHistoryOpen}
-                                    className="student-history-label"
-                                    onClick={() =>
-                                        setIsHistoryOpen(
-                                            (currentState) => !currentState,
-                                        )
-                                    }
-                                    type="button"
-                                >
-                                    <Clock3 className="size-4" />
-                                    <span>Riwayat Chat</span>
-                                    <ChevronDown className="student-history-chevron" />
-                                </button>
-                            </SidebarGroupLabel>
-
-                            {isHistoryOpen && (
-                                <SidebarGroupContent>
-                                    <SidebarMenu className="student-history-list">
-                                        {isLoading && (
-                                            <SidebarMenuItem>
-                                                <SidebarMenuButton
-                                                    className="student-history-menu-button"
-                                                    disabled
-                                                >
-                                                    <Clock3 className="student-history-menu-icon size-4" />
-                                                    <span className="student-history-copy">
-                                                        <span className="student-history-title">
-                                                            Memuat riwayat
-                                                        </span>
-                                                    </span>
-                                                </SidebarMenuButton>
-                                            </SidebarMenuItem>
-                                        )}
-
-                                        {chatSessions.map((session) => {
-                                            const sessionTime =
-                                                formatSessionTime(
-                                                    session.last_message_at ??
-                                                        session.updated_at ??
-                                                        session.created_at,
-                                                );
+                                        </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                </SidebarMenu>
+                            </SidebarGroupContent>
+                        ) : (
+                            <>
+                                <SidebarGroupLabel asChild>
+                                    <button
+                                        aria-expanded={isHistoryOpen}
+                                        className="student-history-label"
+                                        onClick={() =>
+                                            setIsHistoryOpen(
+                                                (currentState) => !currentState,
+                                            )
+                                        }
+                                        type="button"
+                                    >
+                                        <Clock3 className="size-4" />
+                                        <span>Riwayat Chat</span>
+                                        <ChevronDown className="student-history-chevron" />
+                                    </button>
+                                </SidebarGroupLabel>
 
-                                            return (
-                                                <SidebarMenuItem
-                                                    className="student-history-menu-item"
-                                                    key={session.uuid_id}
-                                                >
+                                {isHistoryOpen && (
+                                    <SidebarGroupContent>
+                                        <SidebarMenu className="student-history-list">
+                                            {isLoading && (
+                                                <SidebarMenuItem>
                                                     <SidebarMenuButton
                                                         className="student-history-menu-button"
-                                                        isActive={
-                                                            session.uuid_id ===
-                                                            activeSessionId
-                                                        }
-                                                        onClick={() =>
-                                                            router.visit(
-                                                                showMahasiswaSession(
-                                                                    session.uuid_id,
-                                                                ),
-                                                            )
-                                                        }
-                                                        tooltip={session.title}
-                                                        type="button"
+                                                        disabled
                                                     >
                                                         <Clock3 className="student-history-menu-icon size-4" />
                                                         <span className="student-history-copy">
                                                             <span className="student-history-title">
-                                                                {session.title}
+                                                                Memuat riwayat
                                                             </span>
-                                                            {sessionTime && (
-                                                                <span className="student-history-meta">
-                                                                    {
-                                                                        sessionTime
-                                                                    }
-                                                                </span>
-                                                            )}
                                                         </span>
                                                     </SidebarMenuButton>
+                                                </SidebarMenuItem>
+                                            )}
+
+                                            {chatSessions.map((session) => {
+                                                const sessionTime =
+                                                    formatSessionTime(
+                                                        session.last_message_at ??
+                                                            session.updated_at ??
+                                                            session.created_at,
+                                                    );
 
-                                                    {onDeleteSession && (
-                                                        <button
-                                                            aria-label={`Hapus sesi ${session.title}`}
-                                                            className="student-history-delete"
-                                                            onClick={(
-                                                                event,
-                                                            ) => {
-                                                                event.stopPropagation();
-                                                                onDeleteSession(
-                                                                    session.uuid_id,
-                                                                );
-                                                            }}
+                                                return (
+                                                    <SidebarMenuItem
+                                                        className="student-history-menu-item"
+                                                        key={session.uuid_id}
+                                                    >
+                                                        <SidebarMenuButton
+                                                            className="student-history-menu-button"
+                                                            isActive={
+                                                                session.uuid_id ===
+                                                                activeSessionId
+                                                            }
+                                                            onClick={() =>
+                                                                router.visit(
+                                                                    showMahasiswaSession(
+                                                                        session.uuid_id,
+                                                                    ),
+                                                                )
+                                                            }
+                                                            tooltip={
+                                                                session.title
+                                                            }
                                                             type="button"
                                                         >
-                                                            <Trash2 className="size-3" />
-                                                        </button>
-                                                    )}
-                                                </SidebarMenuItem>
-                                            );
-                                        })}
-                                    </SidebarMenu>
-                                </SidebarGroupContent>
-                            )}
-                        </>
-                    )}
-                </SidebarGroup>
-            </SidebarContent>
-
-            <SidebarFooter className="student-sidebar-footer">
-                <SidebarMenu>
-                    <SidebarMenuItem>
-                        <SidebarMenuButton
-                            className="student-user-menu-button"
-                            tooltip={studentName}
-                        >
-                            <Avatar className="student-user-avatar">
-                                <AvatarFallback>
-                                    {getInitials(studentName) || 'AK'}
-                                </AvatarFallback>
-                            </Avatar>
-                            <span className="student-user-copy">
-                                <span className="student-user-name">
-                                    {studentName}
-                                </span>
-                                <span className="student-user-role">
-                                    Mahasiswa
+                                                            <Clock3 className="student-history-menu-icon size-4" />
+                                                            <span className="student-history-copy">
+                                                                <span className="student-history-title">
+                                                                    {
+                                                                        session.title
+                                                                    }
+                                                                </span>
+                                                                {sessionTime && (
+                                                                    <span className="student-history-meta">
+                                                                        {
+                                                                            sessionTime
+                                                                        }
+                                                                    </span>
+                                                                )}
+                                                            </span>
+                                                        </SidebarMenuButton>
+
+                                                        {onDeleteSession && (
+                                                            <button
+                                                                aria-label={`Hapus sesi ${session.title}`}
+                                                                className="student-history-delete"
+                                                                onClick={(
+                                                                    event,
+                                                                ) => {
+                                                                    event.stopPropagation();
+                                                                    setSessionToDelete(
+                                                                        session,
+                                                                    );
+                                                                    setDeleteDialogMessage(
+                                                                        undefined,
+                                                                    );
+                                                                }}
+                                                                type="button"
+                                                            >
+                                                                <Trash2 className="size-3" />
+                                                            </button>
+                                                        )}
+                                                    </SidebarMenuItem>
+                                                );
+                                            })}
+                                        </SidebarMenu>
+                                    </SidebarGroupContent>
+                                )}
+                            </>
+                        )}
+                    </SidebarGroup>
+                </SidebarContent>
+
+                <SidebarFooter className="student-sidebar-footer">
+                    <SidebarMenu>
+                        <SidebarMenuItem>
+                            <SidebarMenuButton
+                                className="student-user-menu-button"
+                                tooltip={studentName}
+                            >
+                                <Avatar className="student-user-avatar">
+                                    <AvatarFallback>
+                                        {getInitials(studentName) || 'AK'}
+                                    </AvatarFallback>
+                                </Avatar>
+                                <span className="student-user-copy">
+                                    <span className="student-user-name">
+                                        {studentName}
+                                    </span>
+                                    <span className="student-user-role">
+                                        Mahasiswa
+                                    </span>
                                 </span>
-                            </span>
-                        </SidebarMenuButton>
-                    </SidebarMenuItem>
-
-                    <SidebarMenuItem>
-                        <SidebarMenuButton
-                            className="student-logout-button"
-                            onClick={handleLogout}
-                            tooltip="Logout"
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+
+                        <SidebarMenuItem>
+                            <SidebarMenuButton
+                                className="student-logout-button"
+                                onClick={handleLogout}
+                                tooltip="Logout"
+                            >
+                                <LogOut className="size-4" />
+                                <span>Logout</span>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                </SidebarFooter>
+
+                <SidebarRail />
+            </Sidebar>
+
+            <Dialog
+                onOpenChange={handleDeleteDialogOpenChange}
+                open={Boolean(sessionToDelete)}
+            >
+                <DialogContent className="student-delete-dialog">
+                    <DialogHeader>
+                        <DialogTitle>Hapus Riwayat Chat</DialogTitle>
+                        <DialogDescription>
+                            Sesi chat ini akan dihapus dari riwayat.
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="student-delete-dialog-body">
+                        <p className="student-delete-copy">
+                            Hapus sesi{' '}
+                            <strong>
+                                {sessionToDelete?.title ?? 'chat ini'}
+                            </strong>
+                            ?
+                        </p>
+
+                        {deleteDialogMessage && (
+                            <p className="student-delete-error" role="alert">
+                                {deleteDialogMessage}
+                            </p>
+                        )}
+                    </div>
+
+                    <DialogFooter className="student-delete-dialog-footer">
+                        <Button
+                            className="student-delete-cancel"
+                            disabled={isDeletingSession}
+                            onClick={() => handleDeleteDialogOpenChange(false)}
+                            type="button"
+                            variant="outline"
+                        >
+                            Batal
+                        </Button>
+                        <Button
+                            className="student-delete-confirm"
+                            disabled={isDeletingSession}
+                            onClick={() => {
+                                void handleConfirmDeleteSession();
+                            }}
+                            type="button"
                         >
-                            <LogOut className="size-4" />
-                            <span>Logout</span>
-                        </SidebarMenuButton>
-                    </SidebarMenuItem>
-                </SidebarMenu>
-            </SidebarFooter>
-
-            <SidebarRail />
-        </Sidebar>
+                            {isDeletingSession ? 'Menghapus...' : 'Hapus'}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
     );
 }
 
@@ -328,7 +442,9 @@ export function StudentShell({
     chatSessions: ChatSessionResponse[];
     children: ReactNode;
     isLoadingSessions: boolean;
-    onDeleteSession?: (sessionId: string) => void;
+    onDeleteSession?: (
+        sessionId: string,
+    ) => DeleteSessionResult | Promise<DeleteSessionResult>;
     studentName: string;
 }) {
     return (

resources/js/lib/rag.ts

@@ -24,6 +24,46 @@ export type CourseListResponse = {
     limit: number;
 };
 
+export type CreateCourseRequest = {
+    title: string;
+    description?: string;
+};
+
+export type UpdateCourseRequest = {
+    title?: string;
+    description?: string;
+};
+
+export type DocumentStatus = 'processing' | 'ready' | 'failed';
+
+export type DocumentResponse = {
+    id: string;
+    filename: string;
+    file_type: string;
+    file_size: number;
+    status: DocumentStatus;
+    course_id: string;
+    course_name?: string;
+    uploaded_by: string;
+    uploader_name?: string;
+    summary?: string;
+    chunk_count?: number;
+    error?: string;
+    created_at: string;
+    updated_at: string;
+};
+
+export type DocumentListResponse = {
+    data: DocumentResponse[];
+};
+
+export type UploadDocumentResponse = {
+    document_id: string;
+    filename: string;
+    status: DocumentStatus;
+    message: string;
+};
+
 export type ChatSessionResponse = {
     uuid_id: string;
     user_id: string;
@@ -74,6 +114,12 @@ export type ChatMessageResponse = {
     created_at: string;
 };
 
+export type PendingInitialChat = {
+    content: string;
+    courseId: string;
+    userMessage: ChatMessageResponse;
+};
+
 export type ChatQueryResponse = {
     message_id: string;
     role?: string;
@@ -106,11 +152,17 @@ type SendConfiguredChatMessagePayload = {
 };
 
 const DIRECT_CHAT_STORAGE_PREFIX = 'sevima_raghub_direct_messages';
+const PENDING_INITIAL_CHAT_STORAGE_PREFIX =
+    'sevima_raghub_pending_initial_chat';
 
 function getDirectChatStorageKey(sessionId: string): string {
     return `${DIRECT_CHAT_STORAGE_PREFIX}:${sessionId}`;
 }
 
+function getPendingInitialChatStorageKey(sessionId: string): string {
+    return `${PENDING_INITIAL_CHAT_STORAGE_PREFIX}:${sessionId}`;
+}
+
 function getBrowserSessionStorage(): Storage | null {
     if (typeof window === 'undefined') {
         return null;
@@ -197,6 +249,50 @@ export function clearDirectChatMessages(sessionId: string): void {
     getBrowserSessionStorage()?.removeItem(getDirectChatStorageKey(sessionId));
 }
 
+export function getPendingInitialChat(
+    sessionId: string,
+): PendingInitialChat | undefined {
+    const rawPendingChat = getBrowserSessionStorage()?.getItem(
+        getPendingInitialChatStorageKey(sessionId),
+    );
+
+    if (!rawPendingChat) {
+        return undefined;
+    }
+
+    try {
+        const pendingChat = JSON.parse(rawPendingChat) as PendingInitialChat;
+
+        if (
+            typeof pendingChat.content === 'string' &&
+            typeof pendingChat.courseId === 'string' &&
+            typeof pendingChat.userMessage?.uuid_id === 'string'
+        ) {
+            return pendingChat;
+        }
+    } catch {
+        return undefined;
+    }
+
+    return undefined;
+}
+
+export function savePendingInitialChat(
+    sessionId: string,
+    pendingChat: PendingInitialChat,
+): void {
+    getBrowserSessionStorage()?.setItem(
+        getPendingInitialChatStorageKey(sessionId),
+        JSON.stringify(pendingChat),
+    );
+}
+
+export function clearPendingInitialChat(sessionId: string): void {
+    getBrowserSessionStorage()?.removeItem(
+        getPendingInitialChatStorageKey(sessionId),
+    );
+}
+
 export const ragApi = {
     listCourses({ page = 1, limit = 100, signal }: ListCoursesOptions = {}) {
         return api.get<CourseListResponse>('/courses', {
@@ -205,6 +301,38 @@ export const ragApi = {
         });
     },
 
+    getCourse(
+        courseId: string,
+        { signal, token }: AuthenticatedRequestOptions = {},
+    ) {
+        return api.get<CourseResponse>(`/courses/${courseId}`, {
+            signal,
+            token,
+        });
+    },
+
+    createCourse(payload: CreateCourseRequest, token?: string) {
+        return api.post<CourseResponse>('/courses', payload, {
+            token,
+        });
+    },
+
+    updateCourse(
+        courseId: string,
+        payload: UpdateCourseRequest,
+        token?: string,
+    ) {
+        return api.put<CourseResponse>(`/courses/${courseId}`, payload, {
+            token,
+        });
+    },
+
+    deleteCourse(courseId: string, token?: string) {
+        return api.delete<unknown>(`/courses/${courseId}`, {
+            token,
+        });
+    },
+
     listChatSessions({
         page = 1,
         limit = 20,
@@ -225,6 +353,26 @@ export const ragApi = {
         });
     },
 
+    listCourseDocuments(
+        courseId: string,
+        { signal, token }: AuthenticatedRequestOptions = {},
+    ) {
+        return api.get<DocumentListResponse>(`/courses/${courseId}/documents`, {
+            signal,
+            token,
+        });
+    },
+
+    uploadDocument(courseId: string, file: File, token?: string) {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('course_id', courseId);
+
+        return api.post<UploadDocumentResponse>('/documents/upload', formData, {
+            token,
+        });
+    },
+
     getChatSession(
         sessionId: string,
         { signal, token }: AuthenticatedRequestOptions = {},

resources/js/pages/auth/login.tsx

@@ -8,7 +8,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { authApi, getAuthErrorMessage, saveAuthSession } from '@/lib/auth';
-import { dashboard, home, mahasiswa, register } from '@/routes';
+import { dashboard, dosen, home, mahasiswa, register } from '@/routes';
 
 type LoginProps = {
     canRegister?: boolean;
@@ -37,9 +37,19 @@ export default function Login({ canRegister = true, status }: LoginProps) {
 
             saveAuthSession(response, remember);
 
-            router.visit(
-                response.user.role === 'student' ? mahasiswa() : dashboard(),
-            );
+            if (response.user.role === 'student') {
+                router.visit(mahasiswa());
+
+                return;
+            }
+
+            if (response.user.role === 'lecturer') {
+                router.visit(dosen());
+
+                return;
+            }
+
+            router.visit(dashboard());
         } catch (error) {
             setBackendError(getAuthErrorMessage(error));
         } finally {

resources/js/pages/dosen-detail.tsx

@@ -0,0 +1,618 @@
+import { Head, router } from '@inertiajs/react';
+import {
+    AlertCircle,
+    ArrowLeft,
+    CheckCircle2,
+    FileText,
+    LoaderCircle,
+    Pencil,
+    Trash2,
+    Upload,
+} from 'lucide-react';
+import type { ChangeEvent, DragEvent, FormEvent } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { DosenShell } from '@/components/dosen/dosen-shell';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { getStoredAuthToken } from '@/lib/auth';
+import type {
+    CourseResponse,
+    DocumentResponse,
+    DocumentStatus,
+} from '@/lib/rag';
+import { getRagErrorMessage, ragApi } from '@/lib/rag';
+import { dosen } from '@/routes';
+
+type DosenDetailProps = {
+    courseId: string;
+};
+
+type CourseForm = {
+    title: string;
+    description: string;
+};
+
+const emptyCourseForm: CourseForm = {
+    description: '',
+    title: '',
+};
+
+const acceptedDocumentTypes = [
+    '.pdf',
+    '.ppt',
+    '.pptx',
+    '.txt',
+    'application/pdf',
+    'application/vnd.ms-powerpoint',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    'text/plain',
+].join(',');
+
+function formatDate(value?: string): string {
+    if (!value) {
+        return '-';
+    }
+
+    const datePart = value.split('T')[0];
+
+    return datePart || value;
+}
+
+function formatFileSize(bytes: number): string {
+    if (!Number.isFinite(bytes) || bytes <= 0) {
+        return '-';
+    }
+
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex += 1;
+    }
+
+    return `${size.toFixed(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+}
+
+function getStatusLabel(status: DocumentStatus): string {
+    if (status === 'failed') {
+        return 'Gagal diproses';
+    }
+
+    if (status === 'processing') {
+        return 'Sedang diproses';
+    }
+
+    return 'Tersedia untuk Q&A';
+}
+
+function DocumentStatusIcon({ status }: { status: DocumentStatus }) {
+    if (status === 'failed') {
+        return <AlertCircle className="size-4" />;
+    }
+
+    if (status === 'processing') {
+        return <LoaderCircle className="size-4 animate-spin" />;
+    }
+
+    return <CheckCircle2 className="size-4" />;
+}
+
+function DocumentCard({ document }: { document: DocumentResponse }) {
+    const statusTone = document.status;
+
+    return (
+        <Card className="lecturer-document-card" data-status={statusTone}>
+            <CardContent className="lecturer-document-content">
+                <span
+                    className="lecturer-document-icon"
+                    data-status={statusTone}
+                >
+                    <FileText className="size-5" />
+                </span>
+
+                <div className="lecturer-document-copy">
+                    <h3>{document.filename}</h3>
+                    <p className="lecturer-document-meta">
+                        <span>{formatFileSize(document.file_size)}</span>
+                        <span aria-hidden="true">&middot;</span>
+                        <span>{formatDate(document.created_at)}</span>
+                        {document.chunk_count !== undefined && (
+                            <>
+                                <span aria-hidden="true">&middot;</span>
+                                <span>{document.chunk_count} chunks</span>
+                            </>
+                        )}
+                    </p>
+
+                    <p
+                        className="lecturer-document-status"
+                        data-status={statusTone}
+                    >
+                        <DocumentStatusIcon status={document.status} />
+                        {getStatusLabel(document.status)}
+                    </p>
+                </div>
+
+                <div className="lecturer-document-actions">
+                    <button
+                        aria-label={`Hapus ${document.filename}`}
+                        className="lecturer-document-delete"
+                        type="button"
+                    >
+                        <Trash2 className="size-4" />
+                    </button>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+
+export default function DosenDetail({ courseId }: DosenDetailProps) {
+    const [course, setCourse] = useState<CourseResponse>();
+    const [documents, setDocuments] = useState<DocumentResponse[]>([]);
+    const [deleteCourseMessage, setDeleteCourseMessage] = useState<string>();
+    const [editCourseMessage, setEditCourseMessage] = useState<string>();
+    const [editForm, setEditForm] = useState<CourseForm>(emptyCourseForm);
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+    const [isDeletingCourse, setIsDeletingCourse] = useState(false);
+    const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isUpdatingCourse, setIsUpdatingCourse] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const loadCourseDetail = useCallback(
+        async (signal?: AbortSignal): Promise<void> => {
+            setIsLoading(true);
+
+            const token = getStoredAuthToken() ?? undefined;
+
+            const [courseResult, documentsResult] = await Promise.allSettled([
+                ragApi.getCourse(courseId, {
+                    signal,
+                    token,
+                }),
+                ragApi.listCourseDocuments(courseId, {
+                    signal,
+                    token,
+                }),
+            ]);
+
+            if (signal?.aborted) {
+                return;
+            }
+
+            if (courseResult.status === 'fulfilled') {
+                setCourse(courseResult.value);
+            }
+
+            if (documentsResult.status === 'fulfilled') {
+                setDocuments(documentsResult.value.data);
+            } else {
+                setDocuments([]);
+            }
+
+            setIsLoading(false);
+        },
+        [courseId],
+    );
+
+    useEffect(() => {
+        const controller = new AbortController();
+
+        void Promise.resolve().then(() => loadCourseDetail(controller.signal));
+
+        return () => {
+            controller.abort();
+        };
+    }, [loadCourseDetail]);
+
+    async function handleUploadDocument(file: File): Promise<void> {
+        setIsUploading(true);
+
+        try {
+            await ragApi.uploadDocument(
+                courseId,
+                file,
+                getStoredAuthToken() ?? undefined,
+            );
+
+            await loadCourseDetail();
+        } catch {
+            // Backend upload messages are intentionally hidden in this view.
+        } finally {
+            setIsUploading(false);
+        }
+    }
+
+    function handleEditDialogOpenChange(open: boolean): void {
+        if (isUpdatingCourse) {
+            return;
+        }
+
+        setIsEditDialogOpen(open);
+        setEditCourseMessage(undefined);
+
+        if (open) {
+            setEditForm({
+                description: course?.description ?? '',
+                title: course?.title ?? '',
+            });
+        }
+    }
+
+    async function handleUpdateCourseSubmit(
+        event: FormEvent<HTMLFormElement>,
+    ): Promise<void> {
+        event.preventDefault();
+        setEditCourseMessage(undefined);
+        setIsUpdatingCourse(true);
+
+        try {
+            const updatedCourse = await ragApi.updateCourse(
+                courseId,
+                {
+                    description: editForm.description.trim(),
+                    title: editForm.title.trim(),
+                },
+                getStoredAuthToken() ?? undefined,
+            );
+
+            setCourse(updatedCourse);
+            setIsEditDialogOpen(false);
+        } catch (error) {
+            setEditCourseMessage(getRagErrorMessage(error));
+        } finally {
+            setIsUpdatingCourse(false);
+        }
+    }
+
+    function handleDeleteDialogOpenChange(open: boolean): void {
+        if (isDeletingCourse) {
+            return;
+        }
+
+        setIsDeleteDialogOpen(open);
+        setDeleteCourseMessage(undefined);
+    }
+
+    async function handleDeleteCourse(): Promise<void> {
+        setDeleteCourseMessage(undefined);
+        setIsDeletingCourse(true);
+
+        try {
+            await ragApi.deleteCourse(
+                courseId,
+                getStoredAuthToken() ?? undefined,
+            );
+            router.visit(dosen());
+        } catch (error) {
+            setDeleteCourseMessage(getRagErrorMessage(error));
+        } finally {
+            setIsDeletingCourse(false);
+        }
+    }
+
+    function handleFileInputChange(event: ChangeEvent<HTMLInputElement>): void {
+        const file = event.target.files?.[0];
+        event.target.value = '';
+
+        if (file) {
+            void handleUploadDocument(file);
+        }
+    }
+
+    function handleUploadCardClick(): void {
+        if (!isUploading) {
+            fileInputRef.current?.click();
+        }
+    }
+
+    function handleUploadCardDrop(event: DragEvent<HTMLButtonElement>): void {
+        event.preventDefault();
+
+        if (isUploading) {
+            return;
+        }
+
+        const file = event.dataTransfer.files[0];
+
+        if (file) {
+            void handleUploadDocument(file);
+        }
+    }
+
+    const title =
+        course?.title ??
+        (isLoading ? 'Memuat mata kuliah...' : 'Detail mata kuliah');
+    const description =
+        course?.description ??
+        (isLoading
+            ? 'Mengambil detail mata kuliah dari backend.'
+            : 'Tidak ada deskripsi mata kuliah.');
+
+    return (
+        <>
+            <Head title={course ? course.title : 'Detail Mata Kuliah'} />
+
+            <DosenShell>
+                <main className="lecturer-detail-page">
+                    <section className="lecturer-detail-header">
+                        <button
+                            aria-label="Kembali ke dashboard dosen"
+                            className="lecturer-detail-back"
+                            onClick={() => router.visit(dosen())}
+                            type="button"
+                        >
+                            <ArrowLeft className="size-6" />
+                        </button>
+
+                        <div className="lecturer-detail-heading">
+                            <div className="lecturer-detail-title-row">
+                                <h1>{title}</h1>
+                            </div>
+                            <p>{description}</p>
+                        </div>
+
+                        <div className="lecturer-detail-actions">
+                            <Button
+                                className="lecturer-edit-button"
+                                disabled={!course || isLoading}
+                                onClick={() => handleEditDialogOpenChange(true)}
+                                variant="outline"
+                            >
+                                <Pencil className="size-5" />
+                                Edit
+                            </Button>
+                            <Button
+                                className="lecturer-delete-button"
+                                disabled={!course || isLoading}
+                                onClick={() =>
+                                    handleDeleteDialogOpenChange(true)
+                                }
+                                variant="ghost"
+                            >
+                                <Trash2 className="size-5" />
+                            </Button>
+                        </div>
+                    </section>
+
+                    <section className="lecturer-detail-content">
+                        <input
+                            accept={acceptedDocumentTypes}
+                            className="lecturer-upload-input"
+                            disabled={isUploading}
+                            onChange={handleFileInputChange}
+                            ref={fileInputRef}
+                            type="file"
+                        />
+
+                        <button
+                            className="lecturer-upload-card"
+                            data-uploading={isUploading}
+                            disabled={isUploading}
+                            onClick={handleUploadCardClick}
+                            onDragOver={(event) => event.preventDefault()}
+                            onDrop={handleUploadCardDrop}
+                            type="button"
+                        >
+                            <span className="lecturer-upload-icon">
+                                {isUploading ? (
+                                    <LoaderCircle className="size-7 animate-spin" />
+                                ) : (
+                                    <Upload className="size-7" />
+                                )}
+                            </span>
+                            <span className="lecturer-upload-title">
+                                {isUploading
+                                    ? 'Mengupload dokumen...'
+                                    : 'Upload Dokumen Baru'}
+                            </span>
+                            <span className="lecturer-upload-description">
+                                Drag & drop file PDF, PPT, atau TXT di sini.
+                                Maks 100MB per file. Sistem otomatis mengekstrak
+                                teks dan membuat embedding.
+                            </span>
+                        </button>
+
+                        <section className="lecturer-document-section">
+                            <h2 className="lecturer-document-heading">
+                                <FileText className="size-5" />
+                                <span>
+                                    Dokumen dalam Knowledge Base (
+                                    {documents.length})
+                                </span>
+                            </h2>
+
+                            <div className="lecturer-document-list">
+                                {isLoading && (
+                                    <p className="lecturer-detail-empty">
+                                        Memuat dokumen...
+                                    </p>
+                                )}
+
+                                {!isLoading && documents.length === 0 && (
+                                    <p className="lecturer-detail-empty">
+                                        Belum ada dokumen pada knowledge base
+                                        ini.
+                                    </p>
+                                )}
+
+                                {!isLoading &&
+                                    documents.map((document) => (
+                                        <DocumentCard
+                                            document={document}
+                                            key={document.id}
+                                        />
+                                    ))}
+                            </div>
+                        </section>
+                    </section>
+                </main>
+
+                <Dialog
+                    onOpenChange={handleEditDialogOpenChange}
+                    open={isEditDialogOpen}
+                >
+                    <DialogContent className="lecturer-course-dialog">
+                        <DialogHeader>
+                            <DialogTitle>Edit Mata Kuliah</DialogTitle>
+                            <DialogDescription>
+                                Perbarui nama dan deskripsi knowledge base.
+                            </DialogDescription>
+                        </DialogHeader>
+
+                        <form
+                            className="lecturer-course-form"
+                            onSubmit={(event) => {
+                                void handleUpdateCourseSubmit(event);
+                            }}
+                        >
+                            <div className="lecturer-form-field">
+                                <Label
+                                    className="lecturer-form-label"
+                                    htmlFor="edit-course-title"
+                                >
+                                    Nama Mata Kuliah
+                                </Label>
+                                <Input
+                                    className="lecturer-form-input"
+                                    disabled={isUpdatingCourse}
+                                    id="edit-course-title"
+                                    onChange={(event) =>
+                                        setEditForm((current) => ({
+                                            ...current,
+                                            title: event.target.value,
+                                        }))
+                                    }
+                                    placeholder="Masukkan nama mata kuliah"
+                                    value={editForm.title}
+                                />
+                            </div>
+
+                            <div className="lecturer-form-field">
+                                <Label
+                                    className="lecturer-form-label"
+                                    htmlFor="edit-course-description"
+                                >
+                                    Deskripsi
+                                </Label>
+                                <textarea
+                                    className="lecturer-form-textarea"
+                                    disabled={isUpdatingCourse}
+                                    id="edit-course-description"
+                                    onChange={(event) =>
+                                        setEditForm((current) => ({
+                                            ...current,
+                                            description: event.target.value,
+                                        }))
+                                    }
+                                    placeholder="Masukkan deskripsi mata kuliah"
+                                    value={editForm.description}
+                                />
+                            </div>
+
+                            {editCourseMessage && (
+                                <p className="lecturer-status" role="alert">
+                                    {editCourseMessage}
+                                </p>
+                            )}
+
+                            <DialogFooter className="lecturer-course-footer">
+                                <Button
+                                    className="lecturer-cancel-button"
+                                    disabled={isUpdatingCourse}
+                                    onClick={() =>
+                                        handleEditDialogOpenChange(false)
+                                    }
+                                    type="button"
+                                    variant="outline"
+                                >
+                                    Batal
+                                </Button>
+                                <Button
+                                    className="lecturer-create-button"
+                                    disabled={isUpdatingCourse}
+                                    type="submit"
+                                >
+                                    {isUpdatingCourse
+                                        ? 'Menyimpan...'
+                                        : 'Simpan'}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </DialogContent>
+                </Dialog>
+
+                <Dialog
+                    onOpenChange={handleDeleteDialogOpenChange}
+                    open={isDeleteDialogOpen}
+                >
+                    <DialogContent className="lecturer-course-dialog">
+                        <DialogHeader>
+                            <DialogTitle>Hapus Mata Kuliah</DialogTitle>
+                            <DialogDescription>
+                                Tindakan ini akan menghapus knowledge base dari
+                                backend.
+                            </DialogDescription>
+                        </DialogHeader>
+
+                        <div className="lecturer-course-form">
+                            <p className="lecturer-delete-copy">
+                                Mata kuliah{' '}
+                                <strong>{course?.title ?? title}</strong> akan
+                                dihapus. Pastikan data ini memang sudah tidak
+                                dipakai.
+                            </p>
+
+                            {deleteCourseMessage && (
+                                <p className="lecturer-status" role="alert">
+                                    {deleteCourseMessage}
+                                </p>
+                            )}
+
+                            <DialogFooter className="lecturer-course-footer">
+                                <Button
+                                    className="lecturer-cancel-button"
+                                    disabled={isDeletingCourse}
+                                    onClick={() =>
+                                        handleDeleteDialogOpenChange(false)
+                                    }
+                                    type="button"
+                                    variant="outline"
+                                >
+                                    Batal
+                                </Button>
+                                <Button
+                                    className="lecturer-danger-action-button"
+                                    disabled={isDeletingCourse}
+                                    onClick={() => {
+                                        void handleDeleteCourse();
+                                    }}
+                                    type="button"
+                                >
+                                    {isDeletingCourse
+                                        ? 'Menghapus...'
+                                        : 'Hapus'}
+                                </Button>
+                            </DialogFooter>
+                        </div>
+                    </DialogContent>
+                </Dialog>
+            </DosenShell>
+        </>
+    );
+}

resources/js/pages/dosen.tsx

@@ -0,0 +1,541 @@
+import { Head, router } from '@inertiajs/react';
+import type { LucideIcon } from 'lucide-react';
+import { AlertTriangle, Database, FileText, Plus, Search } from 'lucide-react';
+import type { FormEvent } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import AppearanceToggle from '@/components/appearance-toggle';
+import { DosenShell } from '@/components/dosen/dosen-shell';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { getStoredAuthToken } from '@/lib/auth';
+import type { CourseResponse, DocumentResponse } from '@/lib/rag';
+import { getRagErrorMessage, ragApi } from '@/lib/rag';
+import { show as showDosenCourse } from '@/routes/dosen';
+
+type KnowledgeBaseRow = {
+    id: string;
+    name: string;
+    documentCount: number;
+    failedDocumentCount: number;
+    hasError?: boolean;
+    updatedAt: string;
+};
+
+type Metric = {
+    label: string;
+    value: string;
+    description?: string;
+    icon: LucideIcon;
+    tone: 'primary' | 'danger';
+};
+
+type CourseForm = {
+    title: string;
+    description: string;
+};
+
+const emptyCourseForm: CourseForm = {
+    description: '',
+    title: '',
+};
+
+function isAbortError(error: unknown): boolean {
+    return error instanceof DOMException && error.name === 'AbortError';
+}
+
+function formatUpdatedAt(value?: string): string {
+    if (!value) {
+        return '-';
+    }
+
+    const datePart = value.split('T')[0];
+
+    return datePart || value;
+}
+
+function getLatestUpdatedAt(documents: DocumentResponse[]): string | undefined {
+    return documents
+        .map((document) => document.updated_at)
+        .filter(Boolean)
+        .sort()
+        .at(-1);
+}
+
+function buildKnowledgeBaseRow(
+    course: CourseResponse,
+    documents: DocumentResponse[],
+): KnowledgeBaseRow {
+    const failedDocumentCount = documents.filter(
+        (document) => document.status === 'failed' || Boolean(document.error),
+    ).length;
+
+    return {
+        documentCount: documents.length,
+        failedDocumentCount,
+        hasError: failedDocumentCount > 0,
+        id: String(course.id),
+        name: course.title,
+        updatedAt: formatUpdatedAt(getLatestUpdatedAt(documents)),
+    };
+}
+
+function MetricCard({ metric }: { metric: Metric }) {
+    const Icon = metric.icon;
+
+    return (
+        <Card className="lecturer-metric-card">
+            <CardContent className="lecturer-metric-content">
+                <span className="lecturer-metric-icon" data-tone={metric.tone}>
+                    <Icon className="size-6" />
+                </span>
+
+                <div className="lecturer-metric-copy">
+                    <p>{metric.label}</p>
+                    <div className="lecturer-metric-value-row">
+                        <strong>{metric.value}</strong>
+                        {metric.description && (
+                            <span>{metric.description}</span>
+                        )}
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+
+export default function Dosen() {
+    const [backendMessage, setBackendMessage] = useState<string>();
+    const [courseForm, setCourseForm] = useState<CourseForm>(emptyCourseForm);
+    const [createCourseMessage, setCreateCourseMessage] = useState<string>();
+    const [isCourseDialogOpen, setIsCourseDialogOpen] = useState(false);
+    const [isCreatingCourse, setIsCreatingCourse] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [knowledgeBases, setKnowledgeBases] = useState<KnowledgeBaseRow[]>(
+        [],
+    );
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const loadKnowledgeBases = useCallback(async (signal?: AbortSignal) => {
+        setIsLoading(true);
+        setBackendMessage(undefined);
+
+        try {
+            const token = getStoredAuthToken() ?? undefined;
+            const coursesResponse = await ragApi.listCourses({
+                limit: 100,
+                signal,
+            });
+
+            if (signal?.aborted) {
+                return;
+            }
+
+            const documentResults = await Promise.allSettled(
+                coursesResponse.data.map((course) =>
+                    ragApi.listCourseDocuments(String(course.id), {
+                        signal,
+                        token,
+                    }),
+                ),
+            );
+
+            if (signal?.aborted) {
+                return;
+            }
+
+            let documentErrorMessage: string | undefined;
+
+            const rows = coursesResponse.data.map((course, index) => {
+                const documentResult = documentResults[index];
+
+                if (documentResult?.status === 'fulfilled') {
+                    return buildKnowledgeBaseRow(
+                        course,
+                        documentResult.value.data,
+                    );
+                }
+
+                if (documentResult && !isAbortError(documentResult.reason)) {
+                    documentErrorMessage ??= getRagErrorMessage(
+                        documentResult.reason,
+                    );
+                }
+
+                return buildKnowledgeBaseRow(course, []);
+            });
+
+            setKnowledgeBases(rows);
+            setBackendMessage(documentErrorMessage);
+        } catch (error) {
+            if (!isAbortError(error)) {
+                setKnowledgeBases([]);
+                setBackendMessage(getRagErrorMessage(error));
+            }
+        } finally {
+            if (!signal?.aborted) {
+                setIsLoading(false);
+            }
+        }
+    }, []);
+
+    useEffect(() => {
+        const controller = new AbortController();
+
+        void Promise.resolve().then(() =>
+            loadKnowledgeBases(controller.signal),
+        );
+
+        return () => {
+            controller.abort();
+        };
+    }, [loadKnowledgeBases]);
+
+    function handleCourseDialogOpenChange(open: boolean): void {
+        setIsCourseDialogOpen(open);
+
+        if (!open) {
+            setCourseForm(emptyCourseForm);
+            setCreateCourseMessage(undefined);
+        }
+    }
+
+    async function handleCreateCourseSubmit(
+        event: FormEvent<HTMLFormElement>,
+    ): Promise<void> {
+        event.preventDefault();
+        setCreateCourseMessage(undefined);
+        setIsCreatingCourse(true);
+
+        try {
+            const token = getStoredAuthToken() ?? undefined;
+
+            await ragApi.createCourse(
+                {
+                    description: courseForm.description || undefined,
+                    title: courseForm.title,
+                },
+                token,
+            );
+
+            handleCourseDialogOpenChange(false);
+            await loadKnowledgeBases();
+        } catch (error) {
+            setCreateCourseMessage(getRagErrorMessage(error));
+        } finally {
+            setIsCreatingCourse(false);
+        }
+    }
+
+    const metrics = useMemo<Metric[]>(() => {
+        const failedDocumentCount = knowledgeBases.reduce(
+            (total, item) => total + item.failedDocumentCount,
+            0,
+        );
+        const documentCount = knowledgeBases.reduce(
+            (total, item) => total + item.documentCount,
+            0,
+        );
+
+        return [
+            {
+                icon: Database,
+                label: 'Total Knowledge Base',
+                tone: 'primary',
+                value: isLoading ? '...' : String(knowledgeBases.length),
+            },
+            {
+                icon: FileText,
+                label: 'Total Dokumen',
+                description: 'Chunked',
+                tone: 'primary',
+                value: isLoading ? '...' : String(documentCount),
+            },
+            {
+                icon: AlertTriangle,
+                label: 'Processing Error',
+                description: 'dokumen',
+                tone: 'danger',
+                value: isLoading ? '...' : String(failedDocumentCount),
+            },
+        ];
+    }, [isLoading, knowledgeBases]);
+
+    const filteredKnowledgeBases = useMemo(() => {
+        const normalizedQuery = searchQuery.trim().toLowerCase();
+
+        if (!normalizedQuery) {
+            return knowledgeBases;
+        }
+
+        return knowledgeBases.filter((item) =>
+            item.name.toLowerCase().includes(normalizedQuery),
+        );
+    }, [knowledgeBases, searchQuery]);
+
+    return (
+        <>
+            <Head title="Dashboard Knowledge Base" />
+
+            <DosenShell>
+                <main className="lecturer-page">
+                    <section className="lecturer-page-header">
+                        <div>
+                            <h1>Dashboard Knowledge Base</h1>
+                            <p>
+                                Kelola sumber dokumen RAG untuk berbagai mata
+                                kuliah Anda.
+                            </p>
+                        </div>
+
+                        <div className="lecturer-header-actions">
+                            <AppearanceToggle className="lecturer-theme-toggle" />
+                            <Button
+                                className="lecturer-create-button"
+                                onClick={() =>
+                                    handleCourseDialogOpenChange(true)
+                                }
+                            >
+                                <Plus className="size-4" />
+                                Buat KB Baru
+                            </Button>
+                        </div>
+                    </section>
+
+                    <section className="lecturer-metric-grid">
+                        {metrics.map((metric) => (
+                            <MetricCard key={metric.label} metric={metric} />
+                        ))}
+                    </section>
+
+                    <Card className="lecturer-table-card">
+                        <CardContent className="lecturer-table-content">
+                            <div className="lecturer-table-heading">
+                                <h2>Daftar Mata Kuliah / Topik</h2>
+                                <div className="lecturer-search-field">
+                                    <Search aria-hidden className="size-4" />
+                                    <Input
+                                        aria-label="Cari mata kuliah"
+                                        className="lecturer-search-input"
+                                        onChange={(event) =>
+                                            setSearchQuery(event.target.value)
+                                        }
+                                        placeholder="Cari mata kuliah..."
+                                        type="search"
+                                        value={searchQuery}
+                                    />
+                                </div>
+                            </div>
+
+                            {backendMessage && (
+                                <p className="lecturer-status" role="alert">
+                                    {backendMessage}
+                                </p>
+                            )}
+
+                            <div className="lecturer-table-wrap">
+                                <table className="lecturer-table">
+                                    <thead>
+                                        <tr>
+                                            <th>Nama Knowledge Base</th>
+                                            <th>Dokumen</th>
+                                            <th>Update Terakhir</th>
+                                            <th>Aksi</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {isLoading && (
+                                            <tr>
+                                                <td
+                                                    className="lecturer-table-empty"
+                                                    colSpan={4}
+                                                >
+                                                    Memuat knowledge base...
+                                                </td>
+                                            </tr>
+                                        )}
+
+                                        {!isLoading &&
+                                            knowledgeBases.length === 0 && (
+                                                <tr>
+                                                    <td
+                                                        className="lecturer-table-empty"
+                                                        colSpan={4}
+                                                    >
+                                                        Belum ada knowledge
+                                                        base.
+                                                    </td>
+                                                </tr>
+                                            )}
+
+                                        {!isLoading &&
+                                            knowledgeBases.length > 0 &&
+                                            filteredKnowledgeBases.length ===
+                                                0 && (
+                                                <tr>
+                                                    <td
+                                                        className="lecturer-table-empty"
+                                                        colSpan={4}
+                                                    >
+                                                        Mata kuliah tidak
+                                                        ditemukan.
+                                                    </td>
+                                                </tr>
+                                            )}
+
+                                        {!isLoading &&
+                                            filteredKnowledgeBases.map(
+                                                (item) => (
+                                                    <tr key={item.id}>
+                                                        <td>
+                                                            <span className="lecturer-kb-name">
+                                                                {item.name}
+                                                            </span>
+                                                        </td>
+                                                        <td>
+                                                            <span className="lecturer-doc-pill">
+                                                                <FileText className="size-3.5" />
+                                                                {
+                                                                    item.documentCount
+                                                                }
+                                                                {item.hasError && (
+                                                                    <span className="lecturer-doc-error" />
+                                                                )}
+                                                            </span>
+                                                        </td>
+                                                        <td>
+                                                            {item.updatedAt}
+                                                        </td>
+                                                        <td>
+                                                            <button
+                                                                className="lecturer-manage-button"
+                                                                onClick={() =>
+                                                                    router.visit(
+                                                                        showDosenCourse(
+                                                                            item.id,
+                                                                        ),
+                                                                    )
+                                                                }
+                                                                type="button"
+                                                            >
+                                                                Kelola
+                                                            </button>
+                                                        </td>
+                                                    </tr>
+                                                ),
+                                            )}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </main>
+
+                <Dialog
+                    onOpenChange={handleCourseDialogOpenChange}
+                    open={isCourseDialogOpen}
+                >
+                    <DialogContent className="lecturer-course-dialog">
+                        <DialogHeader>
+                            <DialogTitle>Tambah Mata Kuliah</DialogTitle>
+                            <DialogDescription>
+                                Buat knowledge base baru untuk dokumen RAG mata
+                                kuliah.
+                            </DialogDescription>
+                        </DialogHeader>
+
+                        <form
+                            className="lecturer-course-form"
+                            onSubmit={(event) => {
+                                void handleCreateCourseSubmit(event);
+                            }}
+                        >
+                            <div className="lecturer-form-field">
+                                <Label
+                                    className="lecturer-form-label"
+                                    htmlFor="course-title"
+                                >
+                                    Nama Mata Kuliah
+                                </Label>
+                                <Input
+                                    className="lecturer-form-input"
+                                    disabled={isCreatingCourse}
+                                    id="course-title"
+                                    onChange={(event) =>
+                                        setCourseForm((current) => ({
+                                            ...current,
+                                            title: event.target.value,
+                                        }))
+                                    }
+                                    placeholder="Masukkan nama mata kuliah"
+                                    value={courseForm.title}
+                                />
+                            </div>
+
+                            <div className="lecturer-form-field">
+                                <Label
+                                    className="lecturer-form-label"
+                                    htmlFor="course-description"
+                                >
+                                    Deskripsi
+                                </Label>
+                                <textarea
+                                    className="lecturer-form-textarea"
+                                    disabled={isCreatingCourse}
+                                    id="course-description"
+                                    onChange={(event) =>
+                                        setCourseForm((current) => ({
+                                            ...current,
+                                            description: event.target.value,
+                                        }))
+                                    }
+                                    placeholder="Masukkan deskripsi mata kuliah"
+                                    value={courseForm.description}
+                                />
+                            </div>
+
+                            {createCourseMessage && (
+                                <p className="lecturer-status" role="alert">
+                                    {createCourseMessage}
+                                </p>
+                            )}
+
+                            <DialogFooter className="lecturer-course-footer">
+                                <Button
+                                    className="lecturer-cancel-button"
+                                    disabled={isCreatingCourse}
+                                    onClick={() =>
+                                        handleCourseDialogOpenChange(false)
+                                    }
+                                    type="button"
+                                    variant="outline"
+                                >
+                                    Batal
+                                </Button>
+                                <Button
+                                    className="lecturer-create-button"
+                                    disabled={isCreatingCourse}
+                                    type="submit"
+                                >
+                                    {isCreatingCourse
+                                        ? 'Menyimpan...'
+                                        : 'Simpan'}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </DialogContent>
+                </Dialog>
+            </DosenShell>
+        </>
+    );
+}

resources/js/pages/dosen/pengaturan.tsx

@@ -0,0 +1,22 @@
+import { Head } from '@inertiajs/react';
+
+import { DosenShell } from '@/components/dosen/dosen-shell';
+
+export default function PengaturanDosen() {
+    return (
+        <>
+            <Head title="Pengaturan" />
+
+            <DosenShell activeMenu="settings">
+                <main className="lecturer-page">
+                    <section className="lecturer-page-header">
+                        <div>
+                            <h1>Pengaturan</h1>
+                            <p>Halaman ini masih kosong.</p>
+                        </div>
+                    </section>
+                </main>
+            </DosenShell>
+        </>
+    );
+}

resources/js/pages/mahasiswa-chat.tsx

@@ -4,6 +4,7 @@ import type { FormEvent } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { QuestionComposer } from '@/components/student/question-composer';
+import type { DeleteSessionResult } from '@/components/student/student-shell';
 import {
     formatSessionTime,
     isAbortError,
@@ -20,7 +21,9 @@ import type {
 import {
     appendDirectChatMessages,
     clearDirectChatMessages,
+    clearPendingInitialChat,
     createLocalUserMessage,
+    getPendingInitialChat,
     getRagErrorMessage,
     getStoredDirectChatMessages,
     isDirectChatMode,
@@ -95,16 +98,41 @@ function ChatMessage({ message }: { message: ChatMessageResponse }) {
     );
 }
 
+function appendUniqueMessages(
+    currentMessages: ChatMessageResponse[],
+    nextMessages: ChatMessageResponse[],
+): ChatMessageResponse[] {
+    const existingIds = new Set(
+        currentMessages.map((message) => message.uuid_id),
+    );
+
+    return [
+        ...currentMessages,
+        ...nextMessages.filter((message) => !existingIds.has(message.uuid_id)),
+    ];
+}
+
 export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
+    const [initialPendingChat] = useState(() =>
+        getPendingInitialChat(sessionId),
+    );
+    const pendingInitialChatRef = useRef(initialPendingChat);
+    const hasStartedPendingInitialChatRef = useRef(false);
     const [backendMessage, setBackendMessage] = useState<string>();
     const [chatSessions, setChatSessions] = useState<ChatSessionResponse[]>([]);
     const [courses, setCourses] = useState<CourseResponse[]>([]);
     const [currentSession, setCurrentSession] = useState<ChatSessionResponse>();
     const [isLoading, setIsLoading] = useState(true);
-    const [isProcessing, setIsProcessing] = useState(false);
-    const [messages, setMessages] = useState<ChatMessageResponse[]>([]);
+    const [isProcessing, setIsProcessing] = useState(
+        Boolean(initialPendingChat),
+    );
+    const [messages, setMessages] = useState<ChatMessageResponse[]>(() =>
+        initialPendingChat ? [initialPendingChat.userMessage] : [],
+    );
     const [question, setQuestion] = useState('');
-    const [selectedCourseId, setSelectedCourseId] = useState('');
+    const [selectedCourseId, setSelectedCourseId] = useState(
+        initialPendingChat?.courseId ?? '',
+    );
     const studentName = useStoredStudentName();
     const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -130,22 +158,27 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
         messagesEndRef.current?.scrollIntoView({ block: 'end' });
     }, [messages, isProcessing]);
 
-    const applyHistoryResponse = useCallback(
-        (response: ChatHistoryResponse): void => {
+    const getHistoryMessages = useCallback(
+        (response: ChatHistoryResponse): ChatMessageResponse[] => {
             if (isDirectChatMode()) {
-                setMessages([
+                return [
                     ...response.data,
                     ...getStoredDirectChatMessages(sessionId),
-                ]);
-
-                return;
+                ];
             }
 
-            setMessages(response.data);
+            return response.data;
         },
         [sessionId],
     );
 
+    const applyHistoryResponse = useCallback(
+        (response: ChatHistoryResponse): void => {
+            setMessages(getHistoryMessages(response));
+        },
+        [getHistoryMessages],
+    );
+
     useEffect(() => {
         const controller = new AbortController();
 
@@ -196,7 +229,16 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
             }
 
             if (historyResult.status === 'fulfilled') {
-                applyHistoryResponse(historyResult.value);
+                const historyMessages = getHistoryMessages(historyResult.value);
+                const pendingInitialChat = pendingInitialChatRef.current;
+
+                setMessages(
+                    pendingInitialChat
+                        ? appendUniqueMessages(historyMessages, [
+                              pendingInitialChat.userMessage,
+                          ])
+                        : historyMessages,
+                );
             } else if (!isAbortError(historyResult.reason)) {
                 setBackendMessage(getRagErrorMessage(historyResult.reason));
             }
@@ -209,9 +251,98 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
         return () => {
             controller.abort();
         };
+    }, [getHistoryMessages, sessionId]);
+
+    useEffect(() => {
+        const pendingInitialChat = pendingInitialChatRef.current;
+
+        if (!pendingInitialChat || hasStartedPendingInitialChatRef.current) {
+            return;
+        }
+
+        const activePendingInitialChat = pendingInitialChat;
+        let isCancelled = false;
+        hasStartedPendingInitialChatRef.current = true;
+        setIsProcessing(true);
+        setQuestion('');
+        setSelectedCourseId(activePendingInitialChat.courseId);
+        setMessages((currentMessages) =>
+            appendUniqueMessages(currentMessages, [
+                activePendingInitialChat.userMessage,
+            ]),
+        );
+
+        async function sendPendingInitialChat(): Promise<void> {
+            try {
+                const token = getStoredAuthToken() ?? undefined;
+                const assistantMessage = await ragApi.sendConfiguredChatMessage(
+                    {
+                        content: activePendingInitialChat.content,
+                        courseId: activePendingInitialChat.courseId,
+                        sessionId,
+                        token,
+                    },
+                );
+
+                if (isCancelled) {
+                    return;
+                }
+
+                clearPendingInitialChat(sessionId);
+                pendingInitialChatRef.current = undefined;
+
+                if (isDirectChatMode()) {
+                    appendDirectChatMessages(sessionId, [
+                        activePendingInitialChat.userMessage,
+                        assistantMessage,
+                    ]);
+                    setMessages((currentMessages) =>
+                        appendUniqueMessages(currentMessages, [
+                            assistantMessage,
+                        ]),
+                    );
+
+                    return;
+                }
+
+                const history = await ragApi.getChatHistory(sessionId, {
+                    token,
+                });
+
+                if (!isCancelled) {
+                    applyHistoryResponse(history);
+                }
+            } catch (error) {
+                if (!isCancelled) {
+                    clearPendingInitialChat(sessionId);
+                    pendingInitialChatRef.current = undefined;
+                    setMessages((currentMessages) =>
+                        currentMessages.filter(
+                            (message) =>
+                                message.uuid_id !==
+                                activePendingInitialChat.userMessage.uuid_id,
+                        ),
+                    );
+                    setQuestion(activePendingInitialChat.content);
+                    setBackendMessage(getRagErrorMessage(error));
+                }
+            } finally {
+                if (!isCancelled) {
+                    setIsProcessing(false);
+                }
+            }
+        }
+
+        void sendPendingInitialChat();
+
+        return () => {
+            isCancelled = true;
+        };
     }, [applyHistoryResponse, sessionId]);
 
-    const handleDeleteSession = async (targetSessionId: string) => {
+    const handleDeleteSession = async (
+        targetSessionId: string,
+    ): Promise<DeleteSessionResult> => {
         try {
             const token = getStoredAuthToken() ?? undefined;
             await ragApi.deleteChatSession(targetSessionId, token);
@@ -226,8 +357,13 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
             if (targetSessionId === sessionId) {
                 router.visit(mahasiswa());
             }
+
+            return { ok: true };
         } catch (error) {
-            setBackendMessage(getRagErrorMessage(error));
+            const message = getRagErrorMessage(error);
+            setBackendMessage(message);
+
+            return { message, ok: false };
         }
     };
 
@@ -300,9 +436,7 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
                 activeSessionId={sessionId}
                 chatSessions={chatSessions}
                 isLoadingSessions={isLoading}
-                onDeleteSession={(targetSessionId) => {
-                    void handleDeleteSession(targetSessionId);
-                }}
+                onDeleteSession={handleDeleteSession}
                 studentName={studentName}
             >
                 <div className="student-chat-stage student-chat-stage--session">
@@ -313,7 +447,7 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
                             </p>
                         )}
 
-                        {isLoading ? (
+                        {isLoading && messages.length === 0 && !isProcessing ? (
                             <p className="student-chat-loading">
                                 Memuat percakapan...
                             </p>
@@ -332,7 +466,7 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
                                             <Bot className="size-4" />
                                         </span>
                                         <div className="student-message-bubble student-message-bubble--typing">
-                                            Menyiapkan jawaban...
+                                            Thinking...
                                         </div>
                                     </article>
                                 )}
@@ -345,7 +479,6 @@ export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
                     <div className="student-chat-composer">
                         <QuestionComposer
                             courses={composerCourses}
-                            isCourseLocked
                             isLoadingCourses={isLoading}
                             isProcessing={isProcessing}
                             onCourseChange={setSelectedCourseId}

resources/js/pages/mahasiswa.tsx

@@ -4,6 +4,7 @@ import type { FormEvent } from 'react';
 import { useEffect, useState } from 'react';
 
 import { QuestionComposer } from '@/components/student/question-composer';
+import type { DeleteSessionResult } from '@/components/student/student-shell';
 import {
     isAbortError,
     StudentShell,
@@ -12,11 +13,11 @@ import {
 import { getStoredAuthToken } from '@/lib/auth';
 import type { ChatSessionResponse, CourseResponse } from '@/lib/rag';
 import {
-    appendDirectChatMessages,
+    clearDirectChatMessages,
     createLocalUserMessage,
     getRagErrorMessage,
-    isDirectChatMode,
     ragApi,
+    savePendingInitialChat,
 } from '@/lib/rag';
 import { show as showMahasiswaSession } from '@/routes/mahasiswa';
 
@@ -75,6 +76,29 @@ export default function Mahasiswa() {
         };
     }, []);
 
+    const handleDeleteSession = async (
+        targetSessionId: string,
+    ): Promise<DeleteSessionResult> => {
+        try {
+            const token = getStoredAuthToken() ?? undefined;
+
+            await ragApi.deleteChatSession(targetSessionId, token);
+            clearDirectChatMessages(targetSessionId);
+            setChatSessions((currentSessions) =>
+                currentSessions.filter(
+                    (session) => session.uuid_id !== targetSessionId,
+                ),
+            );
+
+            return { ok: true };
+        } catch (error) {
+            const message = getRagErrorMessage(error);
+            setBackendMessage(message);
+
+            return { message, ok: false };
+        }
+    };
+
     const handleQuestionSubmit = async (
         event: FormEvent<HTMLFormElement>,
     ): Promise<void> => {
@@ -100,20 +124,12 @@ export default function Mahasiswa() {
             );
 
             const userMessage = createLocalUserMessage(trimmedQuestion);
-            const assistantMessage = await ragApi.sendConfiguredChatMessage({
+            savePendingInitialChat(session.uuid_id, {
                 content: trimmedQuestion,
                 courseId: selectedCourseId,
-                sessionId: session.uuid_id,
-                token,
+                userMessage,
             });
 
-            if (isDirectChatMode()) {
-                appendDirectChatMessages(session.uuid_id, [
-                    userMessage,
-                    assistantMessage,
-                ]);
-            }
-
             router.visit(showMahasiswaSession(session.uuid_id));
         } catch (error) {
             setBackendMessage(getRagErrorMessage(error));
@@ -129,6 +145,7 @@ export default function Mahasiswa() {
             <StudentShell
                 chatSessions={chatSessions}
                 isLoadingSessions={isLoading}
+                onDeleteSession={handleDeleteSession}
                 studentName={studentName}
             >
                 <div className="student-chat-stage">

routes/web.php

@@ -20,4 +20,12 @@
     'sessionId' => $uuid,
 ]))->name('mahasiswa.show');
 
+Route::inertia('dosen', 'dosen')->name('dosen');
+
+Route::inertia('dosen/pengaturan', 'dosen/pengaturan')->name('dosen.pengaturan');
+
+Route::get('dosen/{courseId}', fn (string $courseId) => Inertia::render('dosen-detail', [
+    'courseId' => $courseId,
+]))->name('dosen.show');
+
 require __DIR__.'/settings.php';

tests/Feature/DosenDashboardTest.php

@@ -0,0 +1,23 @@
+<?php
+
+use Inertia\Testing\AssertableInertia as Assert;
+
+test('dosen dashboard page can be rendered', function () {
+    $this->get(route('dosen'))
+        ->assertOk()
+        ->assertInertia(fn (Assert $page) => $page->component('dosen'));
+});
+
+test('dosen settings page can be rendered', function () {
+    $this->get(route('dosen.pengaturan'))
+        ->assertOk()
+        ->assertInertia(fn (Assert $page) => $page->component('dosen/pengaturan'));
+});
+
+test('dosen course detail page can be rendered', function () {
+    $this->get(route('dosen.show', ['courseId' => '101']))
+        ->assertOk()
+        ->assertInertia(fn (Assert $page) => $page
+            ->component('dosen-detail')
+            ->where('courseId', '101'));
+});