+
+
diff --git a/resources/js/components/notification-bell.tsx b/resources/js/components/notification-bell.tsx
new file mode 100644
index 0000000..421e4e8
--- /dev/null
+++ b/resources/js/components/notification-bell.tsx
@@ -0,0 +1,266 @@
+import { Bell, Check, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+interface Notification {
+ id: number;
+ title: string;
+ body: string | null;
+ url: string | null;
+ is_read: boolean;
+ created_at: string;
+}
+
+export function NotificationBell() {
+ const [notifications, setNotifications] = useState
([]);
+ const [unreadCount, setUnreadCount] = useState(0);
+ const [isOpen, setIsOpen] = useState(false);
+ const intervalRef = useRef | null>(null);
+ const mountedRef = useRef(true);
+
+ useEffect(() => {
+ mountedRef.current = true;
+
+ return () => {
+ mountedRef.current = false;
+ };
+ }, []);
+
+ const fetchUnreadCount = useCallback(async () => {
+ try {
+ const response = await fetch('/api/notifications/unread-count', {
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ },
+ });
+
+ if (response.ok && mountedRef.current) {
+ const data = await response.json();
+ setUnreadCount(data.count);
+ }
+ } catch {
+ // Silently fail
+ }
+ }, []);
+
+ const fetchNotifications = useCallback(async () => {
+ try {
+ const response = await fetch('/api/notifications', {
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ },
+ });
+
+ if (response.ok && mountedRef.current) {
+ const data = await response.json();
+ setNotifications(data);
+ }
+ } catch {
+ // Silently fail
+ }
+ }, []);
+
+ const markAsRead = useCallback(async (id: number) => {
+ try {
+ await fetch(`/api/notifications/${id}/read`, {
+ method: 'PATCH',
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ },
+ });
+
+ setNotifications((prev) =>
+ prev.map((n) => (n.id === id ? { ...n, is_read: true } : n)),
+ );
+ setUnreadCount((prev) => Math.max(0, prev - 1));
+ } catch {
+ // Silently fail
+ }
+ }, []);
+
+ const deleteNotification = useCallback(async (id: number) => {
+ try {
+ await fetch(`/api/notifications/${id}`, {
+ method: 'DELETE',
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ },
+ });
+
+ setNotifications((prev) => prev.filter((n) => n.id !== id));
+ setUnreadCount((prev) => Math.max(0, prev - 1));
+ } catch {
+ // Silently fail
+ }
+ }, []);
+
+ const markAllAsRead = useCallback(async () => {
+ try {
+ await fetch('/api/notifications/read-all', {
+ method: 'PATCH',
+ headers: {
+ 'X-Requested-With': 'XMLHttpRequest',
+ },
+ });
+
+ setNotifications((prev) =>
+ prev.map((n) => ({ ...n, is_read: true })),
+ );
+ setUnreadCount(0);
+ } catch {
+ // Silently fail
+ }
+ }, []);
+
+ useEffect(() => {
+ // eslint-disable-next-line react-hooks/set-state-in-effect -- initial data fetch is safe
+ void fetchUnreadCount();
+ intervalRef.current = setInterval(() => {
+ void fetchUnreadCount();
+ }, 30000);
+
+ return () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ }
+ };
+ }, [fetchUnreadCount]);
+
+ useEffect(() => {
+ if (isOpen) {
+ // eslint-disable-next-line react-hooks/set-state-in-effect -- fetch on dropdown open is safe
+ void fetchNotifications();
+ }
+ }, [isOpen, fetchNotifications]);
+
+ return (
+
+
+
+
+
+
+ Notifikasi
+ {unreadCount > 0 && (
+
+ )}
+
+ {notifications.length === 0 ? (
+
+ Tidak ada notifikasi
+
+ ) : (
+ notifications.map((notification) => (
+
+ ))
+ )}
+
+
+ );
+}
diff --git a/resources/js/hooks/use-push-notification.ts b/resources/js/hooks/use-push-notification.ts
new file mode 100644
index 0000000..320e9b4
--- /dev/null
+++ b/resources/js/hooks/use-push-notification.ts
@@ -0,0 +1,149 @@
+import { useCallback, useState } from 'react';
+
+type PermissionStatus = 'granted' | 'denied' | 'prompt' | 'unknown';
+
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+ const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+ const base64 = (base64String + padding)
+ .replace(/-/g, '+')
+ .replace(/_/g, '/');
+ const rawData = window.atob(base64);
+ const outputArray = new Uint8Array(rawData.length);
+
+ for (let i = 0; i < rawData.length; i++) {
+ outputArray[i] = rawData.charCodeAt(i);
+ }
+
+ return outputArray;
+}
+
+function getInitialPermission(): PermissionStatus {
+ if (!('Notification' in window)) {
+ return 'denied';
+ }
+
+ return Notification.permission as PermissionStatus;
+}
+
+function getIsSupported(): boolean {
+ return (
+ 'Notification' in window &&
+ 'serviceWorker' in navigator &&
+ 'PushManager' in window
+ );
+}
+
+export function usePushNotification() {
+ const [permission, setPermission] =
+ useState(getInitialPermission);
+ const [isSupported] = useState(getIsSupported);
+
+ const requestPermission =
+ useCallback(async (): Promise => {
+ if (!('Notification' in window)) {
+ return 'denied';
+ }
+
+ const result = await Notification.requestPermission();
+ setPermission(result as PermissionStatus);
+
+ return result as PermissionStatus;
+ }, []);
+
+ const subscribe = useCallback(
+ async (vapidPublicKey: string): Promise => {
+ try {
+ const registration = await navigator.serviceWorker.ready;
+ const subscription = await registration.pushManager.subscribe({
+ userVisibleOnly: true,
+ applicationServerKey: urlBase64ToUint8Array(
+ vapidPublicKey,
+ ) as BufferSource,
+ });
+
+ const { endpoint } = subscription;
+ const key = subscription.getKey('p256dh');
+ const auth = subscription.getKey('auth');
+
+ const response = await fetch('/api/push/subscribe', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-Requested-With': 'XMLHttpRequest',
+ 'X-XSRF-TOKEN': decodeURIComponent(
+ document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ??
+ '',
+ ),
+ },
+ body: JSON.stringify({
+ endpoint,
+ public_key: key
+ ? btoa(String.fromCharCode(...new Uint8Array(key)))
+ : null,
+ auth_token: auth
+ ? btoa(String.fromCharCode(...new Uint8Array(auth)))
+ : null,
+ content_encoding: 'aes128gcm',
+ }),
+ });
+
+ return response.ok;
+ } catch (error) {
+ console.error(
+ 'Failed to subscribe to push notifications:',
+ error,
+ );
+
+ return false;
+ }
+ },
+ [],
+ );
+
+ const unsubscribe = useCallback(async (): Promise => {
+ try {
+ const registration = await navigator.serviceWorker.ready;
+ const subscription =
+ await registration.pushManager.getSubscription();
+
+ if (!subscription) {
+ return true;
+ }
+
+ const response = await fetch('/api/push/unsubscribe', {
+ method: 'DELETE',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-Requested-With': 'XMLHttpRequest',
+ 'X-XSRF-TOKEN': decodeURIComponent(
+ document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? '',
+ ),
+ },
+ body: JSON.stringify({
+ endpoint: subscription.endpoint,
+ }),
+ });
+
+ if (response.ok) {
+ await subscription.unsubscribe();
+ }
+
+ return response.ok;
+ } catch (error) {
+ console.error(
+ 'Failed to unsubscribe from push notifications:',
+ error,
+ );
+
+ return false;
+ }
+ }, []);
+
+ return {
+ permission,
+ isSupported,
+ requestPermission,
+ subscribe,
+ unsubscribe,
+ };
+}
diff --git a/resources/js/pages/admin/master/category/index.tsx b/resources/js/pages/admin/master/category/index.tsx
index ced2424..60e533f 100644
--- a/resources/js/pages/admin/master/category/index.tsx
+++ b/resources/js/pages/admin/master/category/index.tsx
@@ -32,9 +32,10 @@ type Props = {
per_page: number;
total: number;
};
+ highlight?: number;
};
-export default function CategoryIndex({ categories }: Props) {
+export default function CategoryIndex({ categories, highlight }: Props) {
const [createOpen, setCreateOpen] = useState(false);
const [editing, setEditing] = useState(null);
const [deleting, setDeleting] = useState(null);
@@ -149,6 +150,26 @@ export default function CategoryIndex({ categories }: Props) {
Kategori
+ {highlight && (
+
+ Menampilkan kategori dari notifikasi.
+
+
+ )}