Redesign service editing window for a professional look and feel
Refactors the "Edit Service" modal UI in `admin.tsx` to improve visual hierarchy, user experience, and overall professionalism, including styling changes to the header, input fields, image uploader, and availability toggle.
This commit is contained in:
Riyadh
@@ -138,7 +138,7 @@ import { useQueryClient, useQuery } from "@tanstack/react-query";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { useUpload, type UploadResponse } from "@workspace/object-storage-web";
|
||||
import { resolveServiceImageUrl } from "@/lib/image-url";
|
||||
import { ArrowRight, ArrowLeft, Settings, Plus, Pencil, Trash2, Shield, Upload, Loader2, LayoutDashboard, Grid2X2, Coffee, Users as UsersIcon, Menu as MenuIcon, TrendingUp, TrendingDown, UserPlus, Activity, KeyRound, Copy, ChevronDown, ScrollText, Download } from "lucide-react";
|
||||
import { ArrowRight, ArrowLeft, Settings, Plus, Pencil, Trash2, Shield, Upload, Loader2, LayoutDashboard, Grid2X2, Coffee, Users as UsersIcon, Menu as MenuIcon, TrendingUp, TrendingDown, UserPlus, Activity, KeyRound, Copy, ChevronDown, ScrollText, Download, X, ImageIcon, Power } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -1256,60 +1256,141 @@ export default function AdminPage() {
|
||||
|
||||
{/* Edit Service Modal */}
|
||||
{editingService && (
|
||||
<div className="fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div className="glass-panel rounded-3xl p-6 w-full max-w-sm space-y-4 max-h-[90vh] overflow-y-auto">
|
||||
<h2 className="font-semibold text-foreground">
|
||||
{editingService.id ? t("admin.editService") : t("admin.addService")}
|
||||
</h2>
|
||||
{(
|
||||
[
|
||||
{ field: "nameAr", label: t("admin.serviceNameAr") },
|
||||
{ field: "nameEn", label: t("admin.serviceNameEn") },
|
||||
] as { field: keyof ServiceForm; label: string }[]
|
||||
).map(({ field, label }) => (
|
||||
<div key={field} className="space-y-1">
|
||||
<Label>{label}</Label>
|
||||
<Input
|
||||
value={String(editingService.form[field])}
|
||||
onChange={(e) => setEditingService({ ...editingService, form: { ...editingService.form, [field]: e.target.value } })}
|
||||
className="bg-white/70 border-slate-200"
|
||||
<div
|
||||
className="fixed inset-0 bg-slate-950/50 backdrop-blur-md z-50 flex items-center justify-center p-4 animate-in fade-in duration-150"
|
||||
onClick={(e) => { if (e.target === e.currentTarget) setEditingService(null); }}
|
||||
>
|
||||
<div className="bg-white rounded-2xl w-full max-w-lg max-h-[90vh] flex flex-col shadow-2xl border border-slate-200/80 overflow-hidden animate-in zoom-in-95 duration-150">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-4 px-6 pt-5 pb-4 border-b border-slate-100">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className="shrink-0 w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-blue-600 text-white flex items-center justify-center shadow-md shadow-indigo-500/20">
|
||||
<Coffee size={18} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h2 className="font-semibold text-slate-900 text-base leading-tight">
|
||||
{editingService.id ? t("admin.editService") : t("admin.addService")}
|
||||
</h2>
|
||||
<p className="text-xs text-slate-500 mt-0.5">
|
||||
{editingService.id
|
||||
? (lang === "ar" ? "حدّث تفاصيل الخدمة وصورتها" : "Update the service details and image")
|
||||
: (lang === "ar" ? "أضف خدمة جديدة إلى القائمة" : "Add a new service to the list")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingService(null)}
|
||||
className="shrink-0 -m-1 p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors"
|
||||
aria-label={t("common.cancel")}
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
|
||||
{/* Name fields — side by side on sm+ */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
|
||||
<span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">ع</span>
|
||||
{t("admin.serviceNameAr")}
|
||||
</Label>
|
||||
<Input
|
||||
value={editingService.form.nameAr}
|
||||
onChange={(e) => setEditingService({ ...editingService, form: { ...editingService.form, nameAr: e.target.value } })}
|
||||
className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
|
||||
dir="rtl"
|
||||
placeholder="شاي"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
|
||||
<span className="inline-flex items-center justify-center w-4 h-4 rounded bg-slate-100 text-[10px] font-bold text-slate-600">EN</span>
|
||||
{t("admin.serviceNameEn")}
|
||||
</Label>
|
||||
<Input
|
||||
value={editingService.form.nameEn}
|
||||
onChange={(e) => setEditingService({ ...editingService, form: { ...editingService.form, nameEn: e.target.value } })}
|
||||
className="bg-slate-50/70 border-slate-200 rounded-lg h-10 text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/30 focus-visible:border-indigo-400"
|
||||
dir="ltr"
|
||||
placeholder="Tea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs font-medium text-slate-700 flex items-center gap-1.5">
|
||||
<ImageIcon size={12} className="text-slate-500" />
|
||||
{t("admin.serviceImage")}
|
||||
</Label>
|
||||
<ServiceImageUploader
|
||||
value={editingService.form.imageUrl}
|
||||
onChange={(url) =>
|
||||
setEditingService({
|
||||
...editingService,
|
||||
form: { ...editingService.form, imageUrl: url },
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>{t("admin.serviceImage")}</Label>
|
||||
<ServiceImageUploader
|
||||
value={editingService.form.imageUrl}
|
||||
onChange={(url) =>
|
||||
setEditingService({
|
||||
...editingService,
|
||||
form: { ...editingService.form, imageUrl: url },
|
||||
})
|
||||
}
|
||||
/>
|
||||
{/* Availability — card row */}
|
||||
<div className="flex items-center gap-3 p-3.5 rounded-xl border border-slate-200 bg-slate-50/50">
|
||||
<div className={cn(
|
||||
"shrink-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors",
|
||||
editingService.form.isAvailable
|
||||
? "bg-emerald-100 text-emerald-600"
|
||||
: "bg-slate-200 text-slate-400"
|
||||
)}>
|
||||
<Power size={16} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-slate-800">{t("admin.serviceAvailable")}</div>
|
||||
<div className="text-xs text-slate-500 mt-0.5">
|
||||
{editingService.form.isAvailable
|
||||
? (lang === "ar" ? "الخدمة معروضة للمستخدمين الآن" : "Visible to users right now")
|
||||
: (lang === "ar" ? "الخدمة مخفية عن المستخدمين" : "Hidden from users")}
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={editingService.form.isAvailable}
|
||||
onCheckedChange={(v) => setEditingService({ ...editingService, form: { ...editingService.form, isAvailable: v } })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{editingService.id !== undefined && (
|
||||
<div className="pt-1">
|
||||
<RecentActivityForTarget
|
||||
targetType="service"
|
||||
targetId={editingService.id}
|
||||
enabled={true}
|
||||
lang={lang}
|
||||
onViewFullHistory={() =>
|
||||
openAuditLogForTarget("service", editingService.id!)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>{t("admin.serviceAvailable")}</Label>
|
||||
<Switch
|
||||
checked={editingService.form.isAvailable}
|
||||
onCheckedChange={(v) => setEditingService({ ...editingService, form: { ...editingService.form, isAvailable: v } })}
|
||||
/>
|
||||
</div>
|
||||
{editingService.id !== undefined && (
|
||||
<RecentActivityForTarget
|
||||
targetType="service"
|
||||
targetId={editingService.id}
|
||||
enabled={true}
|
||||
lang={lang}
|
||||
onViewFullHistory={() =>
|
||||
openAuditLogForTarget("service", editingService.id!)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" className="flex-1" onClick={() => setEditingService(null)}>{t("common.cancel")}</Button>
|
||||
<Button className="flex-1" onClick={handleSaveService}>{t("common.save")}</Button>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex gap-2 px-6 py-4 border-t border-slate-100 bg-slate-50/40">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1 h-10 rounded-lg border-slate-200 hover:bg-slate-100"
|
||||
onClick={() => setEditingService(null)}
|
||||
>
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
className="flex-1 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-600 hover:from-indigo-600 hover:to-blue-700 shadow-md shadow-indigo-500/20"
|
||||
onClick={handleSaveService}
|
||||
>
|
||||
{t("common.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user