refactor(ui): apply design system components across all pages
Replace raw <input>/<button>/<select> elements with Button, Card, Input, Select, Modal, Badge, and ConfirmDialog from @/components/ui in all non-admin and admin pages. Removes ~550 lines of inline Tailwind utility classes from form elements while keeping all business logic intact. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
291eb4793b
commit
7189fc766c
14 changed files with 321 additions and 549 deletions
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button, Input } from "@/components/ui";
|
||||
|
||||
export default function AdminLoginPage() {
|
||||
const router = useRouter();
|
||||
|
|
@ -34,16 +35,13 @@ export default function AdminLoginPage() {
|
|||
const data = await res.json();
|
||||
|
||||
if (res.ok && data.success) {
|
||||
// Verify session server-side before redirect
|
||||
const sessionRes = await fetch("/api/admin/auth");
|
||||
const sessionData = await sessionRes.json();
|
||||
if (sessionData.authenticated) {
|
||||
router.push("/admin");
|
||||
}
|
||||
if (sessionData.authenticated) router.push("/admin");
|
||||
} else {
|
||||
setError(data.error || "Invalid credentials");
|
||||
}
|
||||
} catch (err) {
|
||||
} catch {
|
||||
setError("Login failed");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
|
|
@ -56,37 +54,28 @@ export default function AdminLoginPage() {
|
|||
<h1 className="text-2xl font-bold text-center mb-6 text-white">Admin Login</h1>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-300">Username</label>
|
||||
<input
|
||||
<Input
|
||||
label="Username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full p-3 bg-gray-700 border border-gray-600 rounded-xl text-white"
|
||||
required
|
||||
className="bg-gray-700 border-gray-600 text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-300">Password</label>
|
||||
<input
|
||||
<Input
|
||||
label="Password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full p-3 bg-gray-700 border border-gray-600 rounded-xl text-white"
|
||||
required
|
||||
error={error || undefined}
|
||||
className="bg-gray-700 border-gray-600 text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-400 text-sm">{error}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3 bg-rose-500 text-white rounded-xl font-medium disabled:opacity-50"
|
||||
>
|
||||
{loading ? "..." : "Login"}
|
||||
</button>
|
||||
<Button type="submit" fullWidth size="lg" loading={loading}>
|
||||
Login
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button, Input } from "@/components/ui";
|
||||
|
||||
interface Child {
|
||||
id: string;
|
||||
|
|
@ -59,17 +60,14 @@ export default function AdminChildren() {
|
|||
<h1 className="text-2xl font-bold">Children</h1>
|
||||
<p className="text-gray-400">{children.length} total children</p>
|
||||
</div>
|
||||
<button onClick={exportCSV} className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 rounded-lg">
|
||||
Export CSV
|
||||
</button>
|
||||
<Button variant="secondary" onClick={exportCSV}>Export CSV</Button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search children..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"
|
||||
/>
|
||||
|
||||
<div className="bg-gray-800 rounded-xl overflow-hidden">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button, Input, Select, Badge } from "@/components/ui";
|
||||
|
||||
interface Member {
|
||||
id: string;
|
||||
|
|
@ -135,39 +136,28 @@ export default function AdminFamilies() {
|
|||
<p className="text-gray-400">{families.length} total families</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleCreateFamily}
|
||||
className="px-4 py-2 bg-rose-500 hover:bg-rose-600 rounded-lg"
|
||||
>
|
||||
+ New Family
|
||||
</button>
|
||||
<button
|
||||
onClick={exportCSV}
|
||||
className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 rounded-lg"
|
||||
>
|
||||
Export CSV
|
||||
</button>
|
||||
<Button onClick={handleCreateFamily}>+ New Family</Button>
|
||||
<Button variant="secondary" onClick={exportCSV}>Export CSV</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex gap-4">
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search families..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"
|
||||
className="flex-1"
|
||||
/>
|
||||
<select
|
||||
<Select
|
||||
value={tierFilter}
|
||||
onChange={(e) => setTierFilter(e.target.value)}
|
||||
className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"
|
||||
>
|
||||
<option value="all">All Tiers</option>
|
||||
<option value="free">Free</option>
|
||||
<option value="pro">Pro</option>
|
||||
</select>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
|
|
@ -192,19 +182,12 @@ export default function AdminFamilies() {
|
|||
<div className="text-xs text-gray-500">{family.id}</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`px-2 py-1 rounded text-xs ${
|
||||
family.tier === "pro" ? "bg-emerald-900 text-emerald-400" : "bg-gray-600"
|
||||
}`}>
|
||||
{family.tier}
|
||||
</span>
|
||||
<Badge variant={family.tier === "pro" ? "rose" : "default"}>{family.tier}</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => setShowMembers(showMembers === family.id ? null : family.id)}
|
||||
className="text-rose-400 underline"
|
||||
>
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowMembers(showMembers === family.id ? null : family.id)}>
|
||||
{family.userCount} users
|
||||
</button>
|
||||
</Button>
|
||||
</td>
|
||||
<td className="px-4 py-3">{family.childCount}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-400">
|
||||
|
|
@ -219,25 +202,24 @@ export default function AdminFamilies() {
|
|||
<td colSpan={6} className="bg-gray-800 p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex gap-2 items-center">
|
||||
<input
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="New member email"
|
||||
onChange={(e) => setAddMember({familyId: family.id, email: e.target.value, role: "caregiver", name: ""})}
|
||||
className="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
|
||||
className="flex-1"
|
||||
/>
|
||||
<select
|
||||
<Select
|
||||
onChange={(e) => setAddMember(addMember ? {...addMember, role: e.target.value} : null)}
|
||||
className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
|
||||
>
|
||||
<option value="caregiver">Caregiver</option>
|
||||
<option value="owner">Owner</option>
|
||||
</select>
|
||||
<button onClick={handleAddMember} className="px-3 py-2 bg-rose-500 rounded text-white">Add</button>
|
||||
</Select>
|
||||
<Button size="sm" onClick={handleAddMember}>Add</Button>
|
||||
</div>
|
||||
{(family.members || []).map((m) => (
|
||||
<div key={m.id} className="flex justify-between items-center bg-gray-700 p-2 rounded">
|
||||
<span>{m.email} ({m.role})</span>
|
||||
<button onClick={() => handleRemoveMember(m.id)} className="text-red-400 text-sm">Remove</button>
|
||||
<Button variant="danger" size="sm" onClick={() => handleRemoveMember(m.id)}>Remove</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Select } from "@/components/ui";
|
||||
|
||||
interface Stats {
|
||||
overview: {
|
||||
|
|
@ -59,15 +60,11 @@ export default function AdminDashboard() {
|
|||
<h1 className="text-2xl font-bold">Dashboard</h1>
|
||||
<p className="text-gray-400">Platform overview and analytics</p>
|
||||
</div>
|
||||
<select
|
||||
value={period}
|
||||
onChange={(e) => setPeriod(e.target.value)}
|
||||
className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white"
|
||||
>
|
||||
<Select value={period} onChange={(e) => setPeriod(e.target.value)}>
|
||||
<option value="7">Last 7 days</option>
|
||||
<option value="30">Last 30 days</option>
|
||||
<option value="90">Last 90 days</option>
|
||||
</select>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Overview Cards */}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button, Input } from "@/components/ui";
|
||||
|
||||
interface Settings {
|
||||
proPrice: number;
|
||||
|
|
@ -40,12 +41,12 @@ export default function AdminSettings() {
|
|||
<label className="block text-sm text-gray-400 mb-1">Pro Monthly Price</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400">$</span>
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={settings.proPrice}
|
||||
onChange={(e) => setSettings({ ...settings, proPrice: Number(e.target.value) })}
|
||||
className="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -58,20 +59,18 @@ export default function AdminSettings() {
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Max Children</label>
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
value={settings.freeMaxChildren}
|
||||
onChange={(e) => setSettings({ ...settings, freeMaxChildren: Number(e.target.value) })}
|
||||
className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Max Family Members</label>
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
value={settings.freeMaxMembers}
|
||||
onChange={(e) => setSettings({ ...settings, freeMaxMembers: Number(e.target.value) })}
|
||||
className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,32 +82,27 @@ export default function AdminSettings() {
|
|||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Model</label>
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
value={settings.aiModel}
|
||||
onChange={(e) => setSettings({ ...settings, aiModel: e.target.value })}
|
||||
className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Base URL</label>
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
value={settings.aiBaseUrl}
|
||||
onChange={(e) => setSettings({ ...settings, aiBaseUrl: e.target.value })}
|
||||
className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save */}
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="w-full py-3 bg-rose-500 hover:bg-rose-600 rounded-xl font-medium"
|
||||
>
|
||||
<Button fullWidth size="lg" onClick={handleSave}>
|
||||
{saved ? "Saved!" : "Save Settings"}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button, Badge } from "@/components/ui";
|
||||
|
||||
interface Ticket {
|
||||
id: string;
|
||||
|
|
@ -18,7 +19,6 @@ export default function AdminSupport() {
|
|||
const [loading, setLoading] = useState(true);
|
||||
const [statusFilter, setStatusFilter] = useState("all");
|
||||
const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null);
|
||||
const [replyMessage, setReplyMessage] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
fetchTickets();
|
||||
|
|
@ -49,6 +49,12 @@ export default function AdminSupport() {
|
|||
}
|
||||
};
|
||||
|
||||
const priorityVariant = (p: string): "rose" | "warning" | "default" =>
|
||||
p === "urgent" ? "rose" : p === "high" ? "warning" : "default";
|
||||
|
||||
const statusVariant = (s: string): "rose" | "warning" | "default" =>
|
||||
s === "open" ? "rose" : s === "in_progress" ? "warning" : "default";
|
||||
|
||||
if (loading) {
|
||||
return <div className="p-6 text-white">Loading...</div>;
|
||||
}
|
||||
|
|
@ -65,15 +71,14 @@ export default function AdminSupport() {
|
|||
{/* Filters */}
|
||||
<div className="flex gap-2">
|
||||
{["all", "open", "in_progress", "resolved", "closed"].map((status) => (
|
||||
<button
|
||||
<Button
|
||||
key={status}
|
||||
size="sm"
|
||||
variant={statusFilter === status ? "primary" : "secondary"}
|
||||
onClick={() => setStatusFilter(status)}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm ${
|
||||
statusFilter === status ? "bg-rose-500" : "bg-gray-800"
|
||||
}`}
|
||||
>
|
||||
{status.replace("_", " ")}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
|
@ -89,20 +94,8 @@ export default function AdminSupport() {
|
|||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${
|
||||
ticket.priority === "urgent" ? "bg-red-900 text-red-400" :
|
||||
ticket.priority === "high" ? "bg-orange-900 text-orange-400" :
|
||||
"bg-gray-700"
|
||||
}`}>
|
||||
{ticket.priority}
|
||||
</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${
|
||||
ticket.status === "open" ? "bg-emerald-900 text-emerald-400" :
|
||||
ticket.status === "in_progress" ? "bg-amber-900 text-amber-400" :
|
||||
"bg-gray-700"
|
||||
}`}>
|
||||
{ticket.status.replace("_", " ")}
|
||||
</span>
|
||||
<Badge variant={priorityVariant(ticket.priority)}>{ticket.priority}</Badge>
|
||||
<Badge variant={statusVariant(ticket.status)}>{ticket.status.replace("_", " ")}</Badge>
|
||||
</div>
|
||||
<div className="font-medium">{ticket.subject}</div>
|
||||
<div className="text-sm text-gray-400">{ticket.email}</div>
|
||||
|
|
@ -132,28 +125,19 @@ export default function AdminSupport() {
|
|||
</div>
|
||||
<div className="flex gap-2">
|
||||
{selectedTicket.status === "open" && (
|
||||
<button
|
||||
onClick={() => updateStatus(selectedTicket.id, "in_progress")}
|
||||
className="px-3 py-1.5 bg-amber-600 rounded-lg text-sm"
|
||||
>
|
||||
<Button size="sm" variant="secondary" onClick={() => updateStatus(selectedTicket.id, "in_progress")}>
|
||||
Start
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{selectedTicket.status === "in_progress" && (
|
||||
<button
|
||||
onClick={() => updateStatus(selectedTicket.id, "resolved")}
|
||||
className="px-3 py-1.5 bg-emerald-600 rounded-lg text-sm"
|
||||
>
|
||||
<Button size="sm" onClick={() => updateStatus(selectedTicket.id, "resolved")}>
|
||||
Resolve
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
{selectedTicket.status === "resolved" && (
|
||||
<button
|
||||
onClick={() => updateStatus(selectedTicket.id, "closed")}
|
||||
className="px-3 py-1.5 bg-gray-600 rounded-lg text-sm"
|
||||
>
|
||||
<Button size="sm" variant="secondary" onClick={() => updateStatus(selectedTicket.id, "closed")}>
|
||||
Close
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button, Input, Select, Modal } from "@/components/ui";
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
|
|
@ -25,6 +26,7 @@ export default function AdminUsers() {
|
|||
const [search, setSearch] = useState("");
|
||||
const [showAdd, setShowAdd] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState<string | null>(null);
|
||||
const [passwordValue, setPasswordValue] = useState("");
|
||||
const [newUser, setNewUser] = useState({ email: "", name: "", familyId: "", role: "caregiver" });
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -98,6 +100,7 @@ export default function AdminUsers() {
|
|||
if (res.ok) {
|
||||
fetchUsers();
|
||||
setShowPassword(null);
|
||||
setPasswordValue("");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to set password:", err);
|
||||
|
|
@ -132,47 +135,45 @@ export default function AdminUsers() {
|
|||
<h1 className="text-2xl font-bold">Users</h1>
|
||||
<p className="text-gray-400">{users.length} total users</p>
|
||||
</div>
|
||||
<button onClick={() => setShowAdd(!showAdd)} className="px-4 py-2 bg-rose-500 hover:bg-rose-600 rounded-lg">
|
||||
+ Add User
|
||||
</button>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="secondary" onClick={exportCSV}>Export CSV</Button>
|
||||
<Button onClick={() => setShowAdd(!showAdd)}>+ Add User</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showAdd && (
|
||||
<div className="bg-gray-800 p-4 rounded-lg flex gap-2 flex-wrap">
|
||||
<input
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={newUser.email}
|
||||
onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
|
||||
className="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white min-w-[200px]"
|
||||
className="flex-1 min-w-[200px]"
|
||||
/>
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Name (optional)"
|
||||
value={newUser.name}
|
||||
onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
|
||||
className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
|
||||
/>
|
||||
<select
|
||||
<Select
|
||||
value={newUser.familyId}
|
||||
onChange={(e) => setNewUser({ ...newUser, familyId: e.target.value })}
|
||||
className="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
|
||||
>
|
||||
<option value="">Select Family</option>
|
||||
{families.map((f) => (
|
||||
<option key={f.id} value={f.id}>{f.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={handleAddUser} className="px-4 py-2 bg-rose-500 rounded text-white">Create</button>
|
||||
</Select>
|
||||
<Button onClick={handleAddUser}>Create</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search users..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white"
|
||||
/>
|
||||
|
||||
<div className="bg-gray-800 rounded-xl overflow-hidden">
|
||||
|
|
@ -195,32 +196,20 @@ export default function AdminUsers() {
|
|||
</td>
|
||||
<td className="px-4 py-3">{user.familyName || "-"}</td>
|
||||
<td className="px-4 py-3">
|
||||
{user.hasPassword ? (
|
||||
<button
|
||||
onClick={() => setShowPassword(user.id)}
|
||||
className="text-emerald-400 text-sm hover:underline"
|
||||
className={`text-sm hover:underline ${user.hasPassword ? "text-emerald-400" : "text-amber-400"}`}
|
||||
>
|
||||
✓ Set
|
||||
{user.hasPassword ? "✓ Set" : "Not set"}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowPassword(user.id)}
|
||||
className="text-amber-400 text-sm hover:underline"
|
||||
>
|
||||
Not set
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-400">
|
||||
{user.createdAt?.slice(0, 10)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => handleRemoveUser(user.id, user.memberId)}
|
||||
className="text-red-400 text-sm hover:underline"
|
||||
>
|
||||
<Button variant="danger" size="sm" onClick={() => handleRemoveUser(user.id, user.memberId)}>
|
||||
Delete
|
||||
</button>
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
|
@ -231,37 +220,35 @@ export default function AdminUsers() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Password Modal */}
|
||||
{showPassword && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-gray-800 p-6 rounded-xl w-80">
|
||||
<h3 className="text-lg font-semibold mb-4">Set Password</h3>
|
||||
<input
|
||||
<Modal
|
||||
open={!!showPassword}
|
||||
onClose={() => { setShowPassword(null); setPasswordValue(""); }}
|
||||
title="Set Password"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter password"
|
||||
id="passwordInput"
|
||||
className="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white mb-4"
|
||||
value={passwordValue}
|
||||
onChange={(e) => setPasswordValue(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
const pwd = (document.getElementById("passwordInput") as HTMLInputElement).value;
|
||||
handleSetPassword(showPassword, pwd);
|
||||
}}
|
||||
className="flex-1 px-4 py-2 bg-rose-500 rounded text-white"
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={() => showPassword && handleSetPassword(showPassword, passwordValue)}
|
||||
>
|
||||
Set
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowPassword(null)}
|
||||
className="px-4 py-2 bg-gray-600 rounded text-white"
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
fullWidth
|
||||
onClick={() => { setShowPassword(null); setPasswordValue(""); }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useFamily } from "../FamilyProvider";
|
||||
import { Button, Input, ConfirmDialog } from "@/components/ui";
|
||||
|
||||
interface AIChat {
|
||||
id: string;
|
||||
|
|
@ -182,7 +183,7 @@ export default function AIChatPage() {
|
|||
<a href="/menu" className="text-rose-500 dark:text-rose-400">←</a>
|
||||
<h1 className="font-bold dark:text-white">Chats</h1>
|
||||
</div>
|
||||
<button onClick={createNewSession} className="w-8 h-8 flex items-center justify-center bg-rose-400 text-white rounded-full text-lg leading-none">+</button>
|
||||
<Button size="sm" onClick={createNewSession} className="w-8 h-8 !p-0 rounded-full">+</Button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-2 space-y-1">
|
||||
{sessions.length === 0 ? (
|
||||
|
|
@ -237,9 +238,7 @@ export default function AIChatPage() {
|
|||
<div className="text-4xl">🤱</div>
|
||||
<p className="text-gray-500 dark:text-gray-400 font-medium">Ask anything about your baby</p>
|
||||
<p className="text-sm text-gray-400 dark:text-gray-500">Tap ☰ to see past chats, or just type below to start</p>
|
||||
<button onClick={createNewSession} className="mt-2 px-5 py-2 bg-rose-400 text-white rounded-full text-sm">
|
||||
New Chat
|
||||
</button>
|
||||
<Button onClick={createNewSession} className="mt-2 rounded-full">New Chat</Button>
|
||||
</div>
|
||||
) : currentSession.messages.length === 0 ? (
|
||||
<div className="h-full flex flex-col items-center justify-center text-center gap-2">
|
||||
|
|
@ -278,38 +277,30 @@ export default function AIChatPage() {
|
|||
{/* Input */}
|
||||
<div className="p-4 border-t bg-white dark:bg-gray-800 flex-shrink-0">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
<Input
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={e => e.key === "Enter" && !e.shiftKey && handleSend()}
|
||||
placeholder="Ask about your baby..."
|
||||
className="flex-1 p-3 border dark:border-gray-600 rounded-xl dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-rose-300"
|
||||
disabled={loading}
|
||||
className="flex-1"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={loading || !input.trim()}
|
||||
className={`px-4 py-2 text-white rounded-xl text-sm font-medium transition-colors ${loading || !input.trim() ? "bg-gray-200 dark:bg-gray-600 text-gray-400 cursor-not-allowed" : "bg-rose-400 hover:bg-rose-500"}`}
|
||||
>
|
||||
{loading ? "..." : "Send"}
|
||||
</button>
|
||||
<Button onClick={handleSend} disabled={loading || !input.trim()} loading={loading}>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Delete confirm modal */}
|
||||
{deleteConfirm && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-2xl w-72 shadow-xl">
|
||||
<p className="mb-4 dark:text-white font-medium">Delete this conversation?</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-5">This can't be undone.</p>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => deleteSession(deleteConfirm)} className="flex-1 py-2 bg-red-500 text-white rounded-xl text-sm">Delete</button>
|
||||
<button onClick={() => setDeleteConfirm(null)} className="flex-1 py-2 bg-gray-100 dark:bg-gray-700 dark:text-white rounded-xl text-sm">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ConfirmDialog
|
||||
open={!!deleteConfirm}
|
||||
onClose={() => setDeleteConfirm(null)}
|
||||
onConfirm={() => deleteConfirm && deleteSession(deleteConfirm)}
|
||||
title="Delete this conversation?"
|
||||
description="This can't be undone."
|
||||
confirmLabel="Delete"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useFamily } from "../FamilyProvider";
|
||||
import { Button, Card, Input, ConfirmDialog } from "@/components/ui";
|
||||
import { WHO_BOY_WEIGHT, WHO_GIRL_WEIGHT, getAgeInMonthsFromBirth, getPercentile, type GrowthStandard } from "@/lib/growth-standards";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
|
|
@ -83,6 +84,7 @@ export default function GrowthPage() {
|
|||
const [chartMetric, setChartMetric] = useState<"weight" | "height" | "head">("weight");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
|
||||
const [showWhoStandards, setShowWhoStandards] = useState(true);
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
const [showHistory, setShowHistory] = useState(true);
|
||||
|
|
@ -186,8 +188,8 @@ export default function GrowthPage() {
|
|||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm("Delete this record?")) return;
|
||||
await fetch(`/api/growth?id=${id}`, { method: "DELETE" });
|
||||
setConfirmDeleteId(null);
|
||||
fetchGrowthData();
|
||||
};
|
||||
|
||||
|
|
@ -375,55 +377,33 @@ export default function GrowthPage() {
|
|||
<h1 className="text-xl font-bold">Growth 📈</h1>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={exportCSV} className="p-2 text-sm bg-gray-200 dark:bg-gray-700 rounded-lg" title="Export CSV">
|
||||
📥
|
||||
</button>
|
||||
<button onClick={() => setShowGoals(!showGoals)} className="p-2 text-sm bg-gray-200 dark:bg-gray-700 rounded-lg" title="Set goals">
|
||||
🎯
|
||||
</button>
|
||||
<button onClick={() => { setShowAdd(!showAdd); setEditingId(null); setWeight(""); setHeight(""); setHeadCircumference(""); setMeasuredAt(new Date().toISOString().split("T")[0]); }} className="p-2 bg-rose-400 text-white rounded-lg">
|
||||
<Button variant="secondary" size="sm" onClick={exportCSV} title="Export CSV">📥</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => setShowGoals(!showGoals)} title="Set goals">🎯</Button>
|
||||
<Button variant="primary" size="sm" onClick={() => { setShowAdd(!showAdd); setEditingId(null); setWeight(""); setHeight(""); setHeadCircumference(""); setMeasuredAt(new Date().toISOString().split("T")[0]); }}>
|
||||
+ Add
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Goals Card */}
|
||||
{showGoals && (
|
||||
<div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl">
|
||||
<Card className="mx-4 mb-4">
|
||||
<h3 className="font-semibold mb-3">Set Growth Goals</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-sm text-gray-500">Target Weight (kg)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
placeholder="e.g., 10"
|
||||
<Input label="Target Weight (kg)" type="number" step="0.1" placeholder="e.g., 10"
|
||||
value={goal.weightKg || ""}
|
||||
onChange={e => setGoal({ ...goal, weightKg: parseFloat(e.target.value) || undefined })}
|
||||
className="w-full p-2 border rounded-lg dark:bg-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-gray-500">Target Height (cm)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
placeholder="e.g., 80"
|
||||
<Input label="Target Height (cm)" type="number" step="0.1" placeholder="e.g., 80"
|
||||
value={goal.heightCm || ""}
|
||||
onChange={e => setGoal({ ...goal, heightCm: parseFloat(e.target.value) || undefined })}
|
||||
className="w-full p-2 border rounded-lg dark:bg-gray-700"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={saveGoal} className="flex-1 p-2 bg-rose-400 text-white rounded-lg">
|
||||
Save Goal
|
||||
</button>
|
||||
<button onClick={() => setShowGoals(false)} className="flex-1 p-2 bg-gray-200 dark:bg-gray-700 rounded-lg">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<Button fullWidth onClick={saveGoal}>Save Goal</Button>
|
||||
<Button variant="secondary" fullWidth onClick={() => setShowGoals(false)}>Cancel</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Latest Reading Card */}
|
||||
|
|
@ -621,54 +601,20 @@ export default function GrowthPage() {
|
|||
{saveError && (
|
||||
<div className="p-2 bg-red-100 dark:bg-red-900 text-red-600 rounded-lg text-sm">{saveError}</div>
|
||||
)}
|
||||
<input
|
||||
type="date"
|
||||
value={measuredAt}
|
||||
onChange={e => setMeasuredAt(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="Weight (kg)"
|
||||
value={weight}
|
||||
onChange={e => setWeight(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
placeholder="Height (cm)"
|
||||
value={height}
|
||||
onChange={e => setHeight(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
step="0.1"
|
||||
placeholder="Head circumference (cm)"
|
||||
value={headCircumference}
|
||||
onChange={e => setHeadCircumference(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700"
|
||||
/>
|
||||
<Input type="date" value={measuredAt} onChange={e => setMeasuredAt(e.target.value)} />
|
||||
<Input type="number" step="0.01" placeholder="Weight (kg)" value={weight} onChange={e => setWeight(e.target.value)} />
|
||||
<Input type="number" step="0.1" placeholder="Height (cm)" value={height} onChange={e => setHeight(e.target.value)} />
|
||||
<Input type="number" step="0.1" placeholder="Head circumference (cm)" value={headCircumference} onChange={e => setHeadCircumference(e.target.value)} />
|
||||
<div className="flex gap-2">
|
||||
{editingId ? (
|
||||
<>
|
||||
<button onClick={() => handleEdit(editingId)} disabled={saving} className="flex-1 p-3 bg-rose-400 text-white rounded-xl disabled:opacity-50">
|
||||
{saving ? "Saving..." : "Update"}
|
||||
</button>
|
||||
<button onClick={resetForm} className="flex-1 p-3 bg-gray-200 dark:bg-gray-700 rounded-xl">
|
||||
Cancel
|
||||
</button>
|
||||
<Button fullWidth loading={saving} onClick={() => handleEdit(editingId)}>Update</Button>
|
||||
<Button variant="secondary" fullWidth onClick={resetForm}>Cancel</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button onClick={() => handleAdd()} disabled={saving} className="flex-1 p-3 bg-rose-400 text-white rounded-xl disabled:opacity-50">
|
||||
{saving ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button onClick={() => { setShowAdd(false); setWeight(""); setHeight(""); setHeadCircumference(""); }} className="flex-1 p-3 bg-gray-200 dark:bg-gray-700 rounded-xl">
|
||||
Cancel
|
||||
</button>
|
||||
<Button fullWidth loading={saving} onClick={() => handleAdd()}>Save</Button>
|
||||
<Button variant="secondary" fullWidth onClick={() => { setShowAdd(false); setWeight(""); setHeight(""); setHeadCircumference(""); }}>Cancel</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -681,16 +627,16 @@ export default function GrowthPage() {
|
|||
<p>Loading...</p>
|
||||
</div>
|
||||
) : growthData.length === 0 ? (
|
||||
<div className="mx-4 p-8 bg-white dark:bg-gray-800 rounded-xl text-center">
|
||||
<Card className="mx-4">
|
||||
<div className="text-center py-4">
|
||||
<div className="text-4xl mb-4">📏</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Track {child?.name}'s Growth</h3>
|
||||
<p className="text-gray-500 mb-4">
|
||||
<h3 className="text-lg font-semibold mb-2">Track {child?.name}'s Growth</h3>
|
||||
<p className="text-gray-500 mb-4 text-sm">
|
||||
Start logging weight, height, and head measurements to see how {child?.name} is growing compared to WHO standards.
|
||||
</p>
|
||||
<button onClick={() => setShowAdd(true)} className="p-3 bg-rose-400 text-white rounded-xl">
|
||||
Add First Measurement
|
||||
</button>
|
||||
<Button onClick={() => setShowAdd(true)}>Add First Measurement</Button>
|
||||
</div>
|
||||
</Card>
|
||||
) : (
|
||||
/* History List - Collapsible */
|
||||
<div className="mx-4 mb-4 bg-white dark:bg-gray-800 rounded-xl overflow-hidden">
|
||||
|
|
@ -730,7 +676,7 @@ export default function GrowthPage() {
|
|||
✏️
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(record.id)}
|
||||
onClick={() => setConfirmDeleteId(record.id)}
|
||||
className="p-2 text-sm text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900 rounded-lg transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
|
|
@ -743,6 +689,16 @@ export default function GrowthPage() {
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ConfirmDialog
|
||||
open={!!confirmDeleteId}
|
||||
onClose={() => setConfirmDeleteId(null)}
|
||||
onConfirm={() => confirmDeleteId && handleDelete(confirmDeleteId)}
|
||||
title="Delete this record?"
|
||||
description="This measurement will be permanently removed."
|
||||
confirmLabel="Delete"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button, Input, Card } from "@/components/ui";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
|
|
@ -32,7 +33,6 @@ export default function LoginPage() {
|
|||
return;
|
||||
}
|
||||
|
||||
// Redirect based on response
|
||||
if (data.isNewUser) {
|
||||
router.push("/onboarding");
|
||||
} else if (data.familyId) {
|
||||
|
|
@ -40,7 +40,7 @@ export default function LoginPage() {
|
|||
} else {
|
||||
router.push("/onboarding");
|
||||
}
|
||||
} catch (err) {
|
||||
} catch {
|
||||
setError("Something went wrong");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
|
|
@ -49,46 +49,33 @@ export default function LoginPage() {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
|
||||
<div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg max-w-md w-full">
|
||||
<Card className="max-w-md w-full" padding="lg">
|
||||
<h1 className="text-2xl font-bold text-center mb-6 dark:text-white">
|
||||
{mode === "login" ? "Welcome Back" : "Create Account"}
|
||||
</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 dark:text-gray-200">Email</label>
|
||||
<input
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 dark:text-gray-200">Password</label>
|
||||
<input
|
||||
<Input
|
||||
label="Password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl dark:bg-gray-700 dark:text-white"
|
||||
required
|
||||
minLength={4}
|
||||
error={error || undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-red-500 text-sm">{error}</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
|
||||
>
|
||||
{loading ? "..." : mode === "login" ? "Sign In" : "Sign Up"}
|
||||
</button>
|
||||
<Button type="submit" fullWidth size="lg" loading={loading}>
|
||||
{mode === "login" ? "Sign In" : "Sign Up"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center mt-4 text-sm text-gray-500 dark:text-gray-400">
|
||||
|
|
@ -101,7 +88,7 @@ export default function LoginPage() {
|
|||
{mode === "login" ? "Sign Up" : "Sign In"}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useFamily } from "../FamilyProvider";
|
||||
import { Button, Card, Modal, Input, Select, Textarea, Badge } from "@/components/ui";
|
||||
|
||||
interface Medicine {
|
||||
id: string;
|
||||
|
|
@ -992,83 +993,38 @@ const SUPPLEMENTS = [
|
|||
</div>
|
||||
|
||||
{/* Log Dose Modal */}
|
||||
{logDoseMedId && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-sm space-y-3 shadow-xl">
|
||||
<h3 className="font-semibold dark:text-white">Log Dose</h3>
|
||||
<input
|
||||
type="text"
|
||||
value={doseAmount}
|
||||
onChange={e => setDoseAmount(e.target.value)}
|
||||
placeholder="Amount given (e.g. 5ml)"
|
||||
className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={doseTime}
|
||||
onChange={e => setDoseTime(e.target.value)}
|
||||
className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={doseNotes}
|
||||
onChange={e => setDoseNotes(e.target.value)}
|
||||
placeholder="Notes (optional)"
|
||||
className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
<Modal open={!!logDoseMedId} onClose={() => setLogDoseMedId(null)} title="Log Dose" maxWidth="sm">
|
||||
<div className="space-y-3">
|
||||
<Input placeholder="Amount given (e.g. 5ml)" value={doseAmount} onChange={e => setDoseAmount(e.target.value)} />
|
||||
<Input type="datetime-local" value={doseTime} onChange={e => setDoseTime(e.target.value)} />
|
||||
<Input placeholder="Notes (optional)" value={doseNotes} onChange={e => setDoseNotes(e.target.value)} />
|
||||
<div className="flex gap-2">
|
||||
<button onClick={submitDose} disabled={doseLoading} className="flex-1 py-2 bg-rose-400 text-white rounded-xl text-sm disabled:opacity-50">
|
||||
{doseLoading ? "Saving…" : "Save Dose"}
|
||||
</button>
|
||||
<button onClick={() => setLogDoseMedId(null)} className="flex-1 py-2 bg-gray-100 dark:bg-gray-700 dark:text-white rounded-xl text-sm">
|
||||
Cancel
|
||||
</button>
|
||||
<Button fullWidth loading={doseLoading} onClick={submitDose}>Save Dose</Button>
|
||||
<Button variant="secondary" fullWidth onClick={() => setLogDoseMedId(null)}>Cancel</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
{/* Correction Modal */}
|
||||
<Modal open={!!correctDose} onClose={() => setCorrectDose(null)} title="Edit Dose (Correction)" maxWidth="sm">
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-gray-400">Original is kept. A correction record is added.</p>
|
||||
{correctDose && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-sm space-y-3 shadow-xl">
|
||||
<h3 className="font-semibold dark:text-white">Edit Dose (Correction)</h3>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">Original is kept. A correction record is added.</p>
|
||||
<div className="text-xs bg-gray-50 dark:bg-gray-700 rounded-lg p-2 text-gray-500 dark:text-gray-400">
|
||||
Original: {correctDose.dose.amount_given || "—"} · {new Date(correctDose.dose.administered_at).toLocaleString()}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={correctAmount}
|
||||
onChange={e => setCorrectAmount(e.target.value)}
|
||||
placeholder="Corrected amount"
|
||||
className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={correctNotes}
|
||||
onChange={e => setCorrectNotes(e.target.value)}
|
||||
placeholder="Corrected notes"
|
||||
className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={correctReason}
|
||||
onChange={e => setCorrectReason(e.target.value)}
|
||||
placeholder="Reason for correction (optional)"
|
||||
className="w-full p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={submitCorrection} disabled={correctLoading} className="flex-1 py-2 bg-amber-500 text-white rounded-xl text-sm disabled:opacity-50">
|
||||
{correctLoading ? "Saving…" : "Save Correction"}
|
||||
</button>
|
||||
<button onClick={() => setCorrectDose(null)} className="flex-1 py-2 bg-gray-100 dark:bg-gray-700 dark:text-white rounded-xl text-sm">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Input placeholder="Corrected amount" value={correctAmount} onChange={e => setCorrectAmount(e.target.value)} />
|
||||
<Input placeholder="Corrected notes" value={correctNotes} onChange={e => setCorrectNotes(e.target.value)} />
|
||||
<Input placeholder="Reason for correction (optional)" value={correctReason} onChange={e => setCorrectReason(e.target.value)} />
|
||||
<div className="flex gap-2">
|
||||
<Button fullWidth loading={correctLoading} onClick={submitCorrection} className="bg-amber-500 hover:bg-amber-600">
|
||||
Save Correction
|
||||
</Button>
|
||||
<Button variant="secondary" fullWidth onClick={() => setCorrectDose(null)}>Cancel</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button, Card, Input, Select } from "@/components/ui";
|
||||
|
||||
const IAP_SCHEDULE = [
|
||||
{ name: "BCG", weeks: 0, milestone: "At Birth" },
|
||||
|
|
@ -155,38 +156,20 @@ export default function OnboardingPage() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white rounded-3xl shadow-lg p-6 space-y-4">
|
||||
<Card className="space-y-4" padding="lg">
|
||||
{/* Step 1 — Family info */}
|
||||
{step === 1 && (
|
||||
<>
|
||||
<h2 className="font-semibold text-gray-800">Your family</h2>
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium">Family Name</span>
|
||||
<input
|
||||
type="text"
|
||||
value={form.familyName}
|
||||
<Input label="Family Name" type="text" value={form.familyName}
|
||||
onChange={(e) => setForm({ ...form, familyName: e.target.value })}
|
||||
placeholder="The Gupta Family"
|
||||
className="w-full p-3 border rounded-xl mt-1"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium">Your Name</span>
|
||||
<input
|
||||
type="text"
|
||||
value={form.memberName}
|
||||
placeholder="The Gupta Family" />
|
||||
<Input label="Your Name" type="text" value={form.memberName}
|
||||
onChange={(e) => setForm({ ...form, memberName: e.target.value })}
|
||||
placeholder="Mama"
|
||||
className="w-full p-3 border rounded-xl mt-1"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
onClick={() => setStep(2)}
|
||||
disabled={!form.familyName || !form.memberName}
|
||||
className="w-full p-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
|
||||
>
|
||||
placeholder="Mama" />
|
||||
<Button fullWidth size="lg" onClick={() => setStep(2)} disabled={!form.familyName || !form.memberName}>
|
||||
Next →
|
||||
</button>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
@ -194,49 +177,35 @@ export default function OnboardingPage() {
|
|||
{step === 2 && (
|
||||
<>
|
||||
<h2 className="font-semibold text-gray-800">Your baby</h2>
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium">Baby's Name</span>
|
||||
<input
|
||||
type="text"
|
||||
value={form.childName}
|
||||
<Input label="Baby's Name" type="text" value={form.childName}
|
||||
onChange={(e) => setForm({ ...form, childName: e.target.value })}
|
||||
placeholder="Tia"
|
||||
className="w-full p-3 border rounded-xl mt-1"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium">Birth Date</span>
|
||||
<input
|
||||
type="date"
|
||||
value={form.birthDate}
|
||||
onChange={(e) => setForm({ ...form, birthDate: e.target.value })}
|
||||
className="w-full p-3 border rounded-xl mt-1"
|
||||
/>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium">Sex</span>
|
||||
placeholder="Tia" />
|
||||
<Input label="Birth Date" type="date" value={form.birthDate}
|
||||
onChange={(e) => setForm({ ...form, birthDate: e.target.value })} />
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-700">Sex</span>
|
||||
<div className="flex gap-2 mt-1">
|
||||
{(["male", "female", "other"] as const).map((s) => (
|
||||
<button
|
||||
<Button
|
||||
key={s}
|
||||
type="button"
|
||||
fullWidth
|
||||
variant={form.sex === s ? "primary" : "secondary"}
|
||||
onClick={() => setForm({ ...form, sex: s })}
|
||||
className={`flex-1 p-3 rounded-xl border capitalize ${form.sex === s ? "bg-rose-400 text-white border-rose-400" : "bg-white"}`}
|
||||
className="capitalize"
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button type="button" onClick={() => setStep(1)} className="flex-1 p-3 border rounded-xl font-medium">Back</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={!form.childName || !form.birthDate || !form.sex || loading}
|
||||
className="flex-1 p-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
|
||||
>
|
||||
{loading ? "Creating..." : "Next →"}
|
||||
</button>
|
||||
<Button variant="secondary" fullWidth onClick={() => setStep(1)}>Back</Button>
|
||||
<Button fullWidth loading={loading}
|
||||
disabled={!form.childName || !form.birthDate || !form.sex}
|
||||
onClick={handleSubmit}>
|
||||
Next →
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -285,11 +254,8 @@ export default function OnboardingPage() {
|
|||
</button>
|
||||
</div>
|
||||
{s.given && (
|
||||
<input
|
||||
type="date"
|
||||
value={s.date}
|
||||
<Input type="date" value={s.date} className="mt-2"
|
||||
onChange={e => setVaccStates(prev => ({ ...prev, [v.name]: { ...s, date: e.target.value } }))}
|
||||
className="mt-2 w-full p-1.5 border rounded-lg text-sm"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -302,23 +268,12 @@ export default function OnboardingPage() {
|
|||
)}
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<button
|
||||
onClick={() => router.push("/")}
|
||||
className="flex-1 p-3 border rounded-xl text-sm text-gray-500"
|
||||
>
|
||||
Skip for now
|
||||
</button>
|
||||
<button
|
||||
onClick={handleVaccSave}
|
||||
disabled={saving}
|
||||
className="flex-1 p-3 bg-rose-400 text-white rounded-xl font-medium disabled:opacity-50"
|
||||
>
|
||||
{saving ? "Saving..." : "Save & Go Home"}
|
||||
</button>
|
||||
<Button variant="ghost" fullWidth onClick={() => router.push("/")}>Skip for now</Button>
|
||||
<Button fullWidth loading={saving} onClick={handleVaccSave}>Save & Go Home</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import Link from "next/link";
|
|||
import { useTheme } from "./ThemeProvider";
|
||||
import { useFamily } from "./FamilyProvider";
|
||||
import { useStageCheck, type BabyStage } from "@/hooks/useStageCheck";
|
||||
import { Button, Modal, Select, Input } from "@/components/ui";
|
||||
|
||||
const OFFLINE_QUEUE_KEY = "tia_offline_queue";
|
||||
|
||||
|
|
@ -109,17 +110,41 @@ function LogModal({ type, childId, onClose }: { type: "feed" | "diaper" | "sleep
|
|||
setLoading(false);
|
||||
};
|
||||
|
||||
const title = type === "feed" ? "Log Feed" : type === "diaper" ? "Log Diaper" : "Log Sleep";
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-sm mx-4">
|
||||
<h2 className="text-xl font-bold mb-4">{type === "feed" && "Log Feed"}{type === "diaper" && "Log Diaper"}{type === "sleep" && "Log Sleep"}</h2>
|
||||
{type === "feed" && (<><select value={subType} onChange={e => setSubType(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-3 bg-white dark:bg-gray-700 dark:text-white"><option value="breast_milk">Breast Milk</option><option value="formula">Formula</option><option value="solid">Solid Food</option><option value="water">Water</option></select><input type="number" placeholder="Amount (ml)" value={amountMl} onChange={e => setAmountMl(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-3 bg-white dark:bg-gray-700 dark:text-white dark:placeholder-gray-400" /></>)}
|
||||
{type === "diaper" && (<select value={subType} onChange={e => setSubType(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-3 bg-white dark:bg-gray-700 dark:text-white"><option value="wet">Wet</option><option value="dirty">Dirty</option><option value="both">Both</option></select>)}
|
||||
{type === "sleep" && (<select value={subType} onChange={e => setSubType(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-3 bg-white dark:bg-gray-700 dark:text-white"><option value="nap">Nap</option><option value="night">Night Sleep</option></select>)}
|
||||
<input type="text" placeholder="Notes (optional)" value={notes} onChange={e => setNotes(e.target.value)} className="w-full p-3 border dark:border-gray-600 rounded-xl mb-4 bg-white dark:bg-gray-700 dark:text-white dark:placeholder-gray-400" />
|
||||
<div className="flex gap-3"><button onClick={onClose} className="flex-1 p-3 border dark:border-gray-600 rounded-xl dark:text-white">Cancel</button><button onClick={handleSubmit} disabled={loading} className="flex-1 p-3 bg-rose-400 text-white rounded-xl">{loading ? "Saving..." : "Save"}</button></div>
|
||||
<Modal open={!!type} onClose={onClose} title={title} maxWidth="sm">
|
||||
<div className="space-y-3">
|
||||
{type === "feed" && (
|
||||
<>
|
||||
<Select value={subType} onChange={e => setSubType(e.target.value)}>
|
||||
<option value="breast_milk">Breast Milk</option>
|
||||
<option value="formula">Formula</option>
|
||||
<option value="solid">Solid Food</option>
|
||||
<option value="water">Water</option>
|
||||
</Select>
|
||||
<Input type="number" placeholder="Amount (ml)" value={amountMl} onChange={e => setAmountMl(e.target.value)} />
|
||||
</>
|
||||
)}
|
||||
{type === "diaper" && (
|
||||
<Select value={subType} onChange={e => setSubType(e.target.value)}>
|
||||
<option value="wet">Wet</option>
|
||||
<option value="dirty">Dirty</option>
|
||||
<option value="both">Both</option>
|
||||
</Select>
|
||||
)}
|
||||
{type === "sleep" && (
|
||||
<Select value={subType} onChange={e => setSubType(e.target.value)}>
|
||||
<option value="nap">Nap</option>
|
||||
<option value="night">Night Sleep</option>
|
||||
</Select>
|
||||
)}
|
||||
<Input placeholder="Notes (optional)" value={notes} onChange={e => setNotes(e.target.value)} />
|
||||
<div className="flex gap-3 pt-1">
|
||||
<Button variant="secondary" fullWidth onClick={onClose}>Cancel</Button>
|
||||
<Button variant="primary" fullWidth loading={loading} onClick={handleSubmit}>Save</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import Link from "next/link";
|
|||
import { useRouter } from "next/navigation";
|
||||
import { useTheme } from "../ThemeProvider";
|
||||
import { useFamily } from "../FamilyProvider";
|
||||
import { Button, Card, Input, Select, Badge } from "@/components/ui";
|
||||
|
||||
interface Member {
|
||||
id: string;
|
||||
|
|
@ -180,7 +181,7 @@ export default function SettingsPage() {
|
|||
</div>
|
||||
</div>
|
||||
{tier === "free" && (
|
||||
<button className="text-sm px-3 py-1 bg-rose-400 text-white rounded-full">Upgrade</button>
|
||||
<Button size="sm">Upgrade</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -195,9 +196,7 @@ export default function SettingsPage() {
|
|||
<div className="font-medium text-sm">{member.name || member.email}</div>
|
||||
<div className="text-xs text-gray-400">{member.email}</div>
|
||||
</div>
|
||||
<span className={`text-xs px-2 py-1 rounded ${member.role === "admin" ? "bg-rose-100 text-rose-600" : "bg-gray-100 dark:bg-gray-600"}`}>
|
||||
{member.role}
|
||||
</span>
|
||||
<Badge variant={member.role === "admin" ? "rose" : "default"}>{member.role}</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -256,28 +255,14 @@ export default function SettingsPage() {
|
|||
{/* Add invite form */}
|
||||
{canInvite && (
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
type="email"
|
||||
value={inviteEmail}
|
||||
onChange={(e) => setInviteEmail(e.target.value)}
|
||||
placeholder="Email address"
|
||||
className="w-full p-2 border rounded-lg text-sm"
|
||||
/>
|
||||
<select
|
||||
value={inviteRole}
|
||||
onChange={(e) => setInviteRole(e.target.value)}
|
||||
className="w-full p-2 border rounded-lg text-sm"
|
||||
>
|
||||
<Input type="email" value={inviteEmail} onChange={(e) => setInviteEmail(e.target.value)} placeholder="Email address" />
|
||||
<Select value={inviteRole} onChange={(e) => setInviteRole(e.target.value)}>
|
||||
<option value="caregiver">Caregiver</option>
|
||||
<option value="viewer">Viewer (read-only)</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={sendInvite}
|
||||
disabled={inviteLoading || !inviteEmail}
|
||||
className="w-full p-2 bg-rose-400 text-white rounded-lg text-sm disabled:opacity-50"
|
||||
>
|
||||
{inviteLoading ? "Sending..." : "Send Invite"}
|
||||
</button>
|
||||
</Select>
|
||||
<Button fullWidth loading={inviteLoading} disabled={!inviteEmail} onClick={sendInvite}>
|
||||
Send Invite
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -301,15 +286,13 @@ export default function SettingsPage() {
|
|||
<div className="px-4 pb-4">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{themeOptions.map((opt) => (
|
||||
<button
|
||||
<Button
|
||||
key={opt.value}
|
||||
onClick={() => setMode(opt.value)}
|
||||
className={`p-3 rounded-lg text-sm ${
|
||||
mode === opt.value ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"
|
||||
}`}
|
||||
variant={mode === opt.value ? "primary" : "secondary"}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -324,20 +307,8 @@ export default function SettingsPage() {
|
|||
</div>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">Shown on the emergency guide and in AI medical redirects.</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="tel"
|
||||
value={pedPhone}
|
||||
onChange={e => setPedPhone(e.target.value)}
|
||||
placeholder="+91 98765 43210"
|
||||
className="flex-1 p-2 border dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-white"
|
||||
/>
|
||||
<button
|
||||
onClick={savePedPhone}
|
||||
disabled={pedSaving}
|
||||
className="px-4 py-2 bg-rose-400 text-white rounded-lg text-sm disabled:opacity-50"
|
||||
>
|
||||
{pedSaving ? "..." : "Save"}
|
||||
</button>
|
||||
<Input type="tel" value={pedPhone} onChange={e => setPedPhone(e.target.value)} placeholder="+91 98765 43210" className="flex-1" />
|
||||
<Button size="sm" loading={pedSaving} onClick={savePedPhone}>Save</Button>
|
||||
</div>
|
||||
<Link href="/medical/emergency" className="text-xs text-rose-500 dark:text-rose-400">
|
||||
View Emergency Guide →
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue