This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
@@ -13,230 +13,276 @@ import { Switch } from "@/components/ui/switch";
|
||||
import { useServerAction } from "@/hooks/use-server-action";
|
||||
|
||||
interface Banner {
|
||||
id: number;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
image: string;
|
||||
link: string;
|
||||
color: string;
|
||||
isActive: number;
|
||||
sortOrder: number;
|
||||
startDate: string | null;
|
||||
endDate: string | null;
|
||||
id: number;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
image: string;
|
||||
link: string;
|
||||
color: string;
|
||||
isActive: number;
|
||||
sortOrder: number;
|
||||
startDate: string | null;
|
||||
endDate: string | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
banners: Banner[];
|
||||
banners: Banner[];
|
||||
}
|
||||
|
||||
export function BannersManager({ banners }: Props) {
|
||||
const { run, isPending } = useServerAction();
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [form, setForm] = useState({
|
||||
title: "",
|
||||
subtitle: "",
|
||||
image: "",
|
||||
link: "",
|
||||
color: "",
|
||||
isActive: 1,
|
||||
sortOrder: 0,
|
||||
startDate: "" as string | null,
|
||||
endDate: "" as string | null,
|
||||
});
|
||||
const { run, isPending } = useServerAction();
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
const [form, setForm] = useState({
|
||||
title: "",
|
||||
subtitle: "",
|
||||
image: "",
|
||||
link: "",
|
||||
color: "",
|
||||
isActive: 1,
|
||||
sortOrder: 0,
|
||||
startDate: "" as string | null,
|
||||
endDate: "" as string | null,
|
||||
});
|
||||
|
||||
function resetForm() {
|
||||
setForm({
|
||||
title: "",
|
||||
subtitle: "",
|
||||
image: "",
|
||||
link: "",
|
||||
color: "",
|
||||
isActive: 1,
|
||||
sortOrder: 0,
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
});
|
||||
setEditingId(null);
|
||||
setShowForm(false);
|
||||
}
|
||||
function resetForm() {
|
||||
setForm({
|
||||
title: "",
|
||||
subtitle: "",
|
||||
image: "",
|
||||
link: "",
|
||||
color: "",
|
||||
isActive: 1,
|
||||
sortOrder: 0,
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
});
|
||||
setEditingId(null);
|
||||
setShowForm(false);
|
||||
}
|
||||
|
||||
function handleEdit(b: Banner) {
|
||||
setForm({
|
||||
title: b.title,
|
||||
subtitle: b.subtitle,
|
||||
image: b.image,
|
||||
link: b.link,
|
||||
color: b.color,
|
||||
isActive: b.isActive,
|
||||
sortOrder: b.sortOrder,
|
||||
startDate: b.startDate,
|
||||
endDate: b.endDate,
|
||||
});
|
||||
setEditingId(b.id);
|
||||
setShowForm(true);
|
||||
}
|
||||
function handleEdit(b: Banner) {
|
||||
setForm({
|
||||
title: b.title,
|
||||
subtitle: b.subtitle,
|
||||
image: b.image,
|
||||
link: b.link,
|
||||
color: b.color,
|
||||
isActive: b.isActive,
|
||||
sortOrder: b.sortOrder,
|
||||
startDate: b.startDate,
|
||||
endDate: b.endDate,
|
||||
});
|
||||
setEditingId(b.id);
|
||||
setShowForm(true);
|
||||
}
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
const data = { ...form, startDate: form.startDate || null, endDate: form.endDate || null };
|
||||
if (editingId) {
|
||||
run(() => updateBanner({ id: editingId, ...data }), { successMessage: "Banner updated!" });
|
||||
} else {
|
||||
run(() => createBanner(data), { successMessage: "Banner created!" });
|
||||
}
|
||||
resetForm();
|
||||
}
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
const data = {
|
||||
...form,
|
||||
startDate: form.startDate || null,
|
||||
endDate: form.endDate || null,
|
||||
};
|
||||
if (editingId) {
|
||||
run(() => updateBanner({ id: editingId, ...data }), {
|
||||
successMessage: "Banner updated!",
|
||||
});
|
||||
} else {
|
||||
run(() => createBanner(data), { successMessage: "Banner created!" });
|
||||
}
|
||||
resetForm();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
setShowForm(!showForm);
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" /> New Banner
|
||||
</Button>
|
||||
</div>
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
setShowForm(!showForm);
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" /> New Banner
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{editingId ? "Edit Banner" : "New Banner"}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Title</Label>
|
||||
<Input
|
||||
value={form.title}
|
||||
onChange={(e) => setForm({ ...form, title: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Subtitle</Label>
|
||||
<Input
|
||||
value={form.subtitle}
|
||||
onChange={(e) => setForm({ ...form, subtitle: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Image URL</Label>
|
||||
<Input
|
||||
value={form.image}
|
||||
onChange={(e) => setForm({ ...form, image: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Link URL</Label>
|
||||
<Input value={form.link} onChange={(e) => setForm({ ...form, link: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Color</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={form.color || "#000000"}
|
||||
onChange={(e) => setForm({ ...form, color: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Start Date</Label>
|
||||
<DateTimePicker
|
||||
value={form.startDate}
|
||||
onChange={(d) => setForm({ ...form, startDate: d ? d.toISOString() : null })}
|
||||
placeholder="Select start date"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>End Date</Label>
|
||||
<DateTimePicker
|
||||
value={form.endDate}
|
||||
onChange={(d) => setForm({ ...form, endDate: d ? d.toISOString() : null })}
|
||||
placeholder="Select end date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={form.isActive === 1}
|
||||
onCheckedChange={(v) => setForm({ ...form, isActive: v ? 1 : 0 })}
|
||||
/>
|
||||
<Label>Active</Label>
|
||||
</div>
|
||||
<div className="space-y-2 flex items-center gap-2">
|
||||
<Label>Order</Label>
|
||||
<Input
|
||||
type="number"
|
||||
className="w-20"
|
||||
value={form.sortOrder}
|
||||
onChange={(e) => setForm({ ...form, sortOrder: Number(e.target.value) })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isPending}>
|
||||
{editingId ? "Update" : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
{showForm && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{editingId ? "Edit Banner" : "New Banner"}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Title</Label>
|
||||
<Input
|
||||
value={form.title}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, title: e.target.value })
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Subtitle</Label>
|
||||
<Input
|
||||
value={form.subtitle}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, subtitle: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Image URL</Label>
|
||||
<Input
|
||||
value={form.image}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, image: e.target.value })
|
||||
}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Link URL</Label>
|
||||
<Input
|
||||
value={form.link}
|
||||
onChange={(e) => setForm({ ...form, link: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Color</Label>
|
||||
<Input
|
||||
type="color"
|
||||
value={form.color || "#000000"}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, color: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Start Date</Label>
|
||||
<DateTimePicker
|
||||
value={form.startDate}
|
||||
onChange={(d) =>
|
||||
setForm({
|
||||
...form,
|
||||
startDate: d ? d.toISOString() : null,
|
||||
})
|
||||
}
|
||||
placeholder="Select start date"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>End Date</Label>
|
||||
<DateTimePicker
|
||||
value={form.endDate}
|
||||
onChange={(d) =>
|
||||
setForm({ ...form, endDate: d ? d.toISOString() : null })
|
||||
}
|
||||
placeholder="Select end date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={form.isActive === 1}
|
||||
onCheckedChange={(v) =>
|
||||
setForm({ ...form, isActive: v ? 1 : 0 })
|
||||
}
|
||||
/>
|
||||
<Label>Active</Label>
|
||||
</div>
|
||||
<div className="space-y-2 flex items-center gap-2">
|
||||
<Label>Order</Label>
|
||||
<Input
|
||||
type="number"
|
||||
className="w-20"
|
||||
value={form.sortOrder}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, sortOrder: Number(e.target.value) })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isPending}>
|
||||
{editingId ? "Update" : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{banners.length === 0 && (
|
||||
<p className="text-muted-foreground col-span-full text-center py-8">No banners yet.</p>
|
||||
)}
|
||||
{banners.map((b) => (
|
||||
<Card key={b.id} className="overflow-hidden">
|
||||
{b.image && (
|
||||
<div className="h-32 bg-cover bg-center" style={{ backgroundImage: `url(${b.image})` }} />
|
||||
)}
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium">{b.title}</h3>
|
||||
{b.subtitle && <p className="text-xs text-muted-foreground">{b.subtitle}</p>}
|
||||
<div className="flex gap-1 mt-2">
|
||||
<Badge variant={b.isActive ? "default" : "outline"}>
|
||||
{b.isActive ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
{b.startDate && <Badge variant="secondary">Scheduled</Badge>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleEdit(b)}>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() =>
|
||||
run(() => deleteBanner({ id: b.id }), { successMessage: "Banner deleted" })
|
||||
}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{banners.length === 0 && (
|
||||
<p className="text-muted-foreground col-span-full text-center py-8">
|
||||
No banners yet.
|
||||
</p>
|
||||
)}
|
||||
{banners.map((b) => (
|
||||
<Card key={b.id} className="overflow-hidden">
|
||||
{b.image && (
|
||||
<div
|
||||
className="h-32 bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${b.image})` }}
|
||||
/>
|
||||
)}
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium">{b.title}</h3>
|
||||
{b.subtitle && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{b.subtitle}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-1 mt-2">
|
||||
<Badge variant={b.isActive ? "default" : "outline"}>
|
||||
{b.isActive ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
{b.startDate && (
|
||||
<Badge variant="secondary">Scheduled</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleEdit(b)}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() =>
|
||||
run(() => deleteBanner({ id: b.id }), {
|
||||
successMessage: "Banner deleted",
|
||||
})
|
||||
}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,22 +4,24 @@ import { prisma } from "@/lib/prisma";
|
||||
import { BannersManager } from "./banners-manager";
|
||||
|
||||
export default async function BannersPage() {
|
||||
const { session, permissions } = await getAdminContext();
|
||||
if (!canAccess(permissions, PERMS.BANNERS_VIEW, session.user.rank)) {
|
||||
redirect("/admin");
|
||||
}
|
||||
const { session, permissions } = await getAdminContext();
|
||||
if (!canAccess(permissions, PERMS.BANNERS_VIEW, session.user.rank)) {
|
||||
redirect("/admin");
|
||||
}
|
||||
|
||||
const banners = await prisma.websiteBanner.findMany({
|
||||
orderBy: { sortOrder: "asc" },
|
||||
});
|
||||
const banners = await prisma.websiteBanner.findMany({
|
||||
orderBy: { sortOrder: "asc" },
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Banners</h1>
|
||||
<p className="text-muted-foreground">Manage homepage banners and promotional slides</p>
|
||||
</div>
|
||||
<BannersManager banners={banners} />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Banners</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage homepage banners and promotional slides
|
||||
</p>
|
||||
</div>
|
||||
<BannersManager banners={banners} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user