feat: inisialisasi project kit v2
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
import React, { useState } from 'react';
|
||||
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
|
||||
import { Head, useForm, router } from '@inertiajs/react';
|
||||
import { PageProps } from '@/types';
|
||||
import { swal } from '@/lib/swal';
|
||||
|
||||
interface NotificationLog {
|
||||
id: number;
|
||||
title: string;
|
||||
body: string;
|
||||
target_type: string;
|
||||
target_user?: { first_name: string, last_name: string, email: string };
|
||||
sender?: { first_name: string, last_name: string };
|
||||
status: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface NotificationsProps extends PageProps {
|
||||
logs: {
|
||||
data: NotificationLog[];
|
||||
links: any[];
|
||||
meta: { current_page: number; last_page: number; total: number; per_page: number };
|
||||
};
|
||||
users: { id: number, first_name: string, last_name: string, email: string }[];
|
||||
}
|
||||
|
||||
export default function NotificationsIndex({ logs, users }: NotificationsProps) {
|
||||
const { data, setData, post, processing, reset, errors } = useForm<{
|
||||
title: string;
|
||||
body: string;
|
||||
image_url: string;
|
||||
deep_link: string;
|
||||
target_type: string;
|
||||
target_user_id: string;
|
||||
}>({
|
||||
title: '',
|
||||
body: '',
|
||||
image_url: '',
|
||||
deep_link: '',
|
||||
target_type: 'all',
|
||||
target_user_id: '',
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
post(route('notifications.store'), {
|
||||
onSuccess: () => {
|
||||
reset();
|
||||
swal.success('Dispatched', 'Notification has been sent to devices.');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthenticatedLayout>
|
||||
<Head title="Push Notifications" />
|
||||
|
||||
<div className="flex items-center justify-between mb-8 anim-down">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-[#3D4E4B] tracking-tight leading-none">Notification Center</h1>
|
||||
<p className="text-sm font-semibold text-gray-400 tracking-tight mt-2">Broadcast messages and alerts to Android devices</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
{/* Composer Form */}
|
||||
<div className="lg:col-span-5">
|
||||
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden anim-up">
|
||||
<div className="px-6 py-4 border-b border-gray-50 bg-gray-50/30">
|
||||
<h2 className="text-sm font-bold text-[#3D4E4B] tracking-tight">Compose Broadcast</h2>
|
||||
<p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-1">New FCM Message</p>
|
||||
</div>
|
||||
<div className="p-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold text-gray-500 ml-1">Message Title</label>
|
||||
<input value={data.title} onChange={e => setData('title', e.target.value)} placeholder="e.g. Flash Sale Alert!" className={`input-field ${errors.title ? 'is-error' : ''}`} />
|
||||
{errors.title && <p className="text-[10px] text-red-500 font-bold ml-1">{errors.title}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold text-gray-500 ml-1">Message Body</label>
|
||||
<textarea value={data.body} onChange={e => setData('body', e.target.value)} rows={3} placeholder="Write your notification message here..." className={`input-field py-3 resize-none ${errors.body ? 'is-error' : ''}`} />
|
||||
{errors.body && <p className="text-[10px] text-red-500 font-bold ml-1">{errors.body}</p>}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5 text-xs font-bold text-gray-500 ml-1">
|
||||
<label>Target Audience</label>
|
||||
<select value={data.target_type} onChange={e => setData('target_type', e.target.value)} className="input-field mt-1.5 h-10">
|
||||
<option value="all">All Users</option>
|
||||
<option value="individual">Specific User</option>
|
||||
</select>
|
||||
</div>
|
||||
{data.target_type === 'individual' && (
|
||||
<div className="space-y-1.5 text-xs font-bold text-gray-500 ml-1">
|
||||
<label>Select User</label>
|
||||
<select value={data.target_user_id} onChange={e => setData('target_user_id', e.target.value)} className="input-field mt-1.5 h-10">
|
||||
<option value="">Choose User...</option>
|
||||
{users.map(u => <option key={u.id} value={u.id}>{u.first_name} {u.last_name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold text-gray-500 ml-1">Deep Link (Optional)</label>
|
||||
<input value={data.deep_link} onChange={e => setData('deep_link', e.target.value)} placeholder="app://screen/profile" className="input-field" />
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-gray-50">
|
||||
<button type="submit" disabled={processing} className="w-full h-11 bg-[#3D4E4B] text-white text-xs font-black uppercase tracking-widest rounded-xl hover:bg-[#2D3A38] transition-all shadow-lg shadow-[#3D4E4B]/20 disabled:opacity-60">
|
||||
{processing ? 'Sending...' : 'Send Notification'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* History Table */}
|
||||
<div className="lg:col-span-7">
|
||||
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden anim-up" style={{ animationDelay: '0.1s' }}>
|
||||
<div className="px-6 py-4 border-b border-gray-50">
|
||||
<h2 className="text-sm font-bold text-[#3D4E4B] tracking-tight">Recent Broadcasts</h2>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-50/50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest">Message</th>
|
||||
<th className="px-6 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest">Target</th>
|
||||
<th className="px-6 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest">Status</th>
|
||||
<th className="px-6 py-3 text-[10px] font-black text-gray-400 uppercase tracking-widest">Sent At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{logs.data.map(log => (
|
||||
<tr key={log.id} className="hover:bg-gray-50/30 transition-colors group">
|
||||
<td className="px-6 py-4">
|
||||
<div className="text-sm font-bold text-[#3D4E4B] tracking-tight">{log.title}</div>
|
||||
<div className="text-[10px] text-gray-400 font-medium truncate max-w-[200px] mt-0.5">{log.body}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`text-[10px] font-black uppercase tracking-widest ${log.target_type === 'all' ? 'text-[#D4A017]' : 'text-blue-600'}`}>
|
||||
{log.target_type === 'all' ? 'All Devices' : (log.target_user?.first_name || 'Individual')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`px-2 py-0.5 rounded-md text-[9px] font-black uppercase tracking-widest border ${log.status === 'sent' ? 'bg-emerald-50 text-emerald-600 border-emerald-100' : 'bg-red-50 text-red-500 border-red-100'}`}>
|
||||
{log.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-[10px] font-bold text-gray-400">
|
||||
{new Date(log.created_at).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{logs.data.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-6 py-16 text-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gray-50 border border-gray-100 flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
|
||||
</div>
|
||||
<p className="text-xs font-bold text-gray-300">No broadcasts sent yet</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{logs.meta && logs.meta.last_page > 1 && (
|
||||
<div className="px-6 py-4 border-t border-gray-50 flex items-center justify-between">
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
|
||||
{logs.meta.total} total — page {logs.meta.current_page} of {logs.meta.last_page}
|
||||
</p>
|
||||
<div className="flex items-center gap-1">
|
||||
{logs.links.map((link: any, i: number) => (
|
||||
<button
|
||||
key={i}
|
||||
disabled={!link.url || link.active}
|
||||
onClick={() => link.url && router.get(link.url, {}, { preserveScroll: true })}
|
||||
className={`h-8 min-w-[2rem] px-2 rounded-lg text-xs font-bold transition-all border
|
||||
${link.active ? 'bg-[#3D4E4B] text-white border-[#3D4E4B]' : 'bg-white text-gray-400 border-gray-100 hover:border-gray-200 hover:text-[#3D4E4B]'}
|
||||
${!link.url ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
dangerouslySetInnerHTML={{ __html: link.label }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user