feat: add multi-user admin panel and featured partners toggle on home page
This commit is contained in:
AyrisAI
156
app/admin/(dashboard)/partners/AddPartnerModal.tsx
Normal file
156
app/admin/(dashboard)/partners/AddPartnerModal.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, X, Save, AlertCircle } from "lucide-react";
|
||||
import { createPartnerAdmin } from "../../actions";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function AddPartnerModal() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [logo, setLogo] = useState<File | null>(null);
|
||||
const [displayOrder, setDisplayOrder] = useState("0");
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!logo) {
|
||||
setErrorMsg("Lütfen bir logo görseli seçin.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setErrorMsg("");
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("name", name);
|
||||
formData.append("logo", logo);
|
||||
formData.append("display_order", displayOrder);
|
||||
|
||||
const res = await createPartnerAdmin(formData);
|
||||
setIsLoading(false);
|
||||
|
||||
if (res.error) {
|
||||
setErrorMsg(res.error);
|
||||
} else {
|
||||
// Success
|
||||
setIsOpen(false);
|
||||
setName("");
|
||||
setLogo(null);
|
||||
setDisplayOrder("0");
|
||||
router.refresh();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="bg-primary text-white px-6 py-2 rounded-xl font-bold hover:bg-primary/80 transition-colors flex items-center gap-2 cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Yeni Partner Ekle
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fadeIn">
|
||||
<div className="relative w-full max-w-md bg-zinc-950 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center pb-4 border-b border-white/10">
|
||||
<h2 className="text-xl font-black uppercase tracking-widest text-white">Yeni Partner Ekle</h2>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="text-white/40 hover:text-white transition-colors p-1"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Marka Adı</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Örn: ABC A.Ş."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Marka Logosu (Görsel Seçin)</label>
|
||||
<div className="relative flex flex-col items-center justify-center border border-dashed border-white/10 hover:border-primary/50 transition-colors rounded-xl p-4 bg-white/5 cursor-pointer min-h-[100px]">
|
||||
<input
|
||||
required={!logo}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={(e) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
setLogo(e.target.files[0]);
|
||||
}
|
||||
}}
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
/>
|
||||
{logo ? (
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-primary font-bold">{logo.name}</p>
|
||||
<p className="text-[10px] text-white/40">{(logo.size / 1024).toFixed(1)} KB</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center space-y-1">
|
||||
<p className="text-xs text-white/60 font-medium">Görsel seçmek için tıklayın</p>
|
||||
<p className="text-[9px] text-white/30 uppercase tracking-wider">PNG, JPG veya SVG</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Görünüm Sırası</label>
|
||||
<input
|
||||
required
|
||||
type="number"
|
||||
value={displayOrder}
|
||||
onChange={(e) => setDisplayOrder(e.target.value)}
|
||||
placeholder="0"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errorMsg && (
|
||||
<div className="flex items-center gap-2 text-red-500 text-xs font-bold bg-red-500/10 p-4 rounded-xl">
|
||||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||||
<span>{errorMsg}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="pt-4 flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="flex-1 border border-white/10 text-white font-bold py-3 px-6 rounded-xl hover:bg-white/5 transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="flex-1 bg-primary text-white font-bold py-3 px-6 rounded-xl hover:bg-primary/80 transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
{isLoading ? "Kaydediliyor..." : "Kaydet"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Trash2, Save, Edit2, X } from "lucide-react";
|
||||
import { updatePartner } from "../../actions";
|
||||
import { Trash2, Save, Edit2, X, Star } from "lucide-react";
|
||||
import { updatePartner, togglePartnerFeatured } from "../../actions";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
|
||||
@@ -11,6 +11,7 @@ export default function PartnerRow({ partner, onDelete }: { partner: any, onDele
|
||||
const [name, setName] = useState(partner.name);
|
||||
const [displayOrder, setDisplayOrder] = useState(partner.display_order);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isFeatured, setIsFeatured] = useState(partner.is_featured);
|
||||
const router = useRouter();
|
||||
|
||||
const handleSave = async () => {
|
||||
@@ -25,6 +26,18 @@ export default function PartnerRow({ partner, onDelete }: { partner: any, onDele
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleFeatured = async () => {
|
||||
const nextState = !isFeatured;
|
||||
setIsFeatured(nextState);
|
||||
const res = await togglePartnerFeatured(partner.id, nextState);
|
||||
if (res.success) {
|
||||
router.refresh();
|
||||
} else {
|
||||
setIsFeatured(!nextState);
|
||||
alert("Öne çıkarma durumu güncellenemedi");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<tr className="hover:bg-white/[0.02] transition-colors border-b border-white/10 last:border-0">
|
||||
<td className="px-6 py-4">
|
||||
@@ -73,6 +86,19 @@ export default function PartnerRow({ partner, onDelete }: { partner: any, onDele
|
||||
<div className="font-bold text-white tracking-wide">{partner.name}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<button
|
||||
onClick={handleToggleFeatured}
|
||||
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
|
||||
isFeatured
|
||||
? "bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20"
|
||||
: "bg-white/5 text-white/20 hover:text-white/60 hover:bg-white/10"
|
||||
}`}
|
||||
>
|
||||
<Star className={`w-4 h-4 ${isFeatured ? "fill-yellow-500" : ""}`} />
|
||||
{isFeatured ? "Öne Çıkarıldı" : "Öne Çıkar"}
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="flex justify-end items-center gap-2">
|
||||
{isEditing ? (
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { getPartnersAdmin, deletePartner } from '../../actions';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import PartnerRow from './PartnerRow';
|
||||
import AddPartnerModal from './AddPartnerModal';
|
||||
|
||||
export default async function PartnersAdminPage() {
|
||||
const partners = await getPartnersAdmin();
|
||||
@@ -20,10 +20,7 @@ export default async function PartnersAdminPage() {
|
||||
<h1 className="text-3xl font-black uppercase tracking-widest text-white mb-2">Partnerler</h1>
|
||||
<p className="text-white/40">Referans markaların listesi.</p>
|
||||
</div>
|
||||
<button className="bg-primary text-white px-6 py-2 rounded-xl font-bold hover:bg-primary/80 transition-colors flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Yeni Partner Ekle
|
||||
</button>
|
||||
<AddPartnerModal />
|
||||
</div>
|
||||
|
||||
<div className="bg-zinc-950 border border-white/10 rounded-2xl overflow-hidden shadow-2xl">
|
||||
@@ -33,6 +30,7 @@ export default async function PartnersAdminPage() {
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40 w-24">Sıra</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Logo Önizleme</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Marka Adı</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40">Durum</th>
|
||||
<th className="px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-white/40 text-right">İşlemler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -42,7 +40,7 @@ export default async function PartnersAdminPage() {
|
||||
))}
|
||||
{(!partners || partners.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-6 py-8 text-center text-white/40">
|
||||
<td colSpan={5} className="px-6 py-8 text-center text-white/40">
|
||||
Henüz partner eklenmemiş.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user