feat: initial NFC Attendance Hub implementation
- Multi-tenant client management with unique API keys - Semaphore SMS integration (per-client key + sender name + credit balance) - DB-based SMS queue with 3-attempt retry and exponential backoff - Failed SMS dashboard with manual retry button - Reports page with date/client filter and CSV export - Admin auth via NextAuth (email/password) - Docker Compose setup (app + PostgreSQL 16) - Prisma 5 schema with SmsQueue, SmsLog, Client, User models Tech: Next.js 14 App Router + TypeScript + Tailwind CSS + Prisma + PostgreSQL
This commit is contained in:
Nemo
164
app/dashboard/clients/[id]/page.tsx
Normal file
164
app/dashboard/clients/[id]/page.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
'use client'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import Link from 'next/link'
|
||||
import { ArrowLeft, RefreshCw, Copy, Check } from 'lucide-react'
|
||||
|
||||
export default function ClientSettingsPage() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const [client, setClient] = useState<any>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState('')
|
||||
const [form, setForm] = useState({ name: '', semaphoreKey: '', senderName: '', isActive: true })
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/clients/${params.id}`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
setClient(data)
|
||||
setForm({
|
||||
name: data.name,
|
||||
semaphoreKey: data.semaphoreKey || '',
|
||||
senderName: data.senderName || 'NFC-HUB',
|
||||
isActive: data.isActive,
|
||||
})
|
||||
setLoading(false)
|
||||
})
|
||||
}, [params.id])
|
||||
|
||||
async function handleSave(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setSaving(true)
|
||||
setError('')
|
||||
setSuccess('')
|
||||
|
||||
const res = await fetch(`/api/clients/${params.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
setSuccess('Settings saved successfully')
|
||||
const updated = await res.json()
|
||||
setClient((prev: any) => ({ ...prev, ...updated }))
|
||||
} else {
|
||||
const data = await res.json()
|
||||
setError(data.error || 'Save failed')
|
||||
}
|
||||
setSaving(false)
|
||||
}
|
||||
|
||||
async function copyApiKey() {
|
||||
await navigator.clipboard.writeText(client.apiKey)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
if (loading) return <div className="text-gray-500">Loading...</div>
|
||||
if (!client) return <div className="text-red-500">Client not found</div>
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/dashboard/clients">
|
||||
<Button variant="ghost" size="sm">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">{client.name}</h1>
|
||||
<p className="text-gray-500">Client settings and API configuration</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* API Key Card */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>API Key</CardTitle>
|
||||
<CardDescription>Use this key in the X-API-Key header for SMS submissions.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 bg-gray-100 px-4 py-2 rounded-md text-sm font-mono">{client.apiKey}</code>
|
||||
<Button variant="outline" size="sm" onClick={copyApiKey}>
|
||||
{copied ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Credit Balance */}
|
||||
{client.semaphoreKey && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Semaphore Credits</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-green-600">
|
||||
{client.balance !== null ? client.balance.toLocaleString() : 'N/A'}
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">Available SMS credits</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Settings Form */}
|
||||
<Card className="max-w-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle>Settings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSave} className="space-y-4">
|
||||
{error && <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm">{error}</div>}
|
||||
{success && <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md text-sm">{success}</div>}
|
||||
<div className="space-y-2">
|
||||
<Label>Organization Name</Label>
|
||||
<Input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Semaphore API Key</Label>
|
||||
<Input
|
||||
value={form.semaphoreKey}
|
||||
onChange={e => setForm(f => ({ ...f, semaphoreKey: e.target.value }))}
|
||||
placeholder="Enter Semaphore API key"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>SMS Sender Name</Label>
|
||||
<Input
|
||||
value={form.senderName}
|
||||
onChange={e => setForm(f => ({ ...f, senderName: e.target.value }))}
|
||||
maxLength={11}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="isActive"
|
||||
checked={form.isActive}
|
||||
onChange={e => setForm(f => ({ ...f, isActive: e.target.checked }))}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<Label htmlFor="isActive">Client is active</Label>
|
||||
</div>
|
||||
<Button type="submit" disabled={saving}>
|
||||
{saving ? 'Saving...' : 'Save Settings'}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
112
app/dashboard/clients/new/page.tsx
Normal file
112
app/dashboard/clients/new/page.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import Link from 'next/link'
|
||||
import { ArrowLeft } from 'lucide-react'
|
||||
|
||||
export default function NewClientPage() {
|
||||
const router = useRouter()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
semaphoreKey: '',
|
||||
senderName: 'NFC-HUB',
|
||||
})
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
setError('')
|
||||
|
||||
const res = await fetch('/api/clients', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
router.push('/dashboard/clients')
|
||||
} else {
|
||||
const data = await res.json()
|
||||
setError(data.error || 'Failed to create client')
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/dashboard/clients">
|
||||
<Button variant="ghost" size="sm">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Add Client</h1>
|
||||
<p className="text-gray-500">Register a new school or organization</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="max-w-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle>Client Details</CardTitle>
|
||||
<CardDescription>
|
||||
Each client gets a unique API key for their on-premise NFC attendance app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm">{error}</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Organization Name *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={form.name}
|
||||
onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
||||
placeholder="e.g. San Jose Elementary School"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="semaphoreKey">Semaphore API Key</Label>
|
||||
<Input
|
||||
id="semaphoreKey"
|
||||
value={form.semaphoreKey}
|
||||
onChange={e => setForm(f => ({ ...f, semaphoreKey: e.target.value }))}
|
||||
placeholder="Your Semaphore API key"
|
||||
/>
|
||||
<p className="text-xs text-gray-500">You can add this later in client settings.</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="senderName">SMS Sender Name</Label>
|
||||
<Input
|
||||
id="senderName"
|
||||
value={form.senderName}
|
||||
onChange={e => setForm(f => ({ ...f, senderName: e.target.value }))}
|
||||
placeholder="NFC-HUB"
|
||||
maxLength={11}
|
||||
/>
|
||||
<p className="text-xs text-gray-500">Max 11 characters. Must be registered with Semaphore.</p>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-2">
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Creating...' : 'Create Client'}
|
||||
</Button>
|
||||
<Link href="/dashboard/clients">
|
||||
<Button type="button" variant="outline">Cancel</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
86
app/dashboard/clients/page.tsx
Normal file
86
app/dashboard/clients/page.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import Link from 'next/link'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Plus, Settings } from 'lucide-react'
|
||||
|
||||
export default async function ClientsPage() {
|
||||
const clients = await prisma.client.findMany({
|
||||
orderBy: { createdAt: 'desc' },
|
||||
include: {
|
||||
_count: { select: { smsQueue: true, smsLogs: true } },
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Clients</h1>
|
||||
<p className="text-gray-500 mt-1">Manage schools and organizations</p>
|
||||
</div>
|
||||
<Link href="/dashboard/clients/new">
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Client
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{clients.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="text-center py-16">
|
||||
<p className="text-gray-500 mb-4">No clients yet</p>
|
||||
<Link href="/dashboard/clients/new">
|
||||
<Button>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Your First Client
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{clients.map(client => (
|
||||
<Card key={client.id}>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="font-semibold text-lg">{client.name}</h3>
|
||||
<Badge variant={client.isActive ? 'success' : 'secondary'}>
|
||||
{client.isActive ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
{client.semaphoreKey ? (
|
||||
<Badge variant="outline" className="text-xs">SMS Configured</Badge>
|
||||
) : (
|
||||
<Badge variant="warning" className="text-xs">⚠ No SMS Key</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
<p className="text-sm text-gray-500">
|
||||
<span className="font-medium">API Key:</span>{' '}
|
||||
<code className="bg-gray-100 px-2 py-0.5 rounded text-xs">{client.apiKey}</code>
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
<span className="font-medium">Sender:</span> {client.senderName || 'NFC-HUB'} ·{' '}
|
||||
<span className="font-medium">SMS sent:</span> {client._count.smsLogs}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href={`/dashboard/clients/${client.id}`}>
|
||||
<Button variant="outline" size="sm">
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user