feat: multi-select roles in pricing management UI
This commit is contained in:
Tracewebstudio Dev
parent
c628c968ae
commit
a8b1b7cd11
1 changed files with 633 additions and 225 deletions
|
|
@ -1,18 +1,18 @@
|
|||
import { createSignal, createMemo, onMount, Show, For } from 'solid-js';
|
||||
import { createSignal, createMemo, onMount, Show, For } from "solid-js";
|
||||
|
||||
const API = '';
|
||||
const API = "";
|
||||
|
||||
function getToken(): string {
|
||||
return typeof sessionStorage !== 'undefined'
|
||||
? sessionStorage.getItem('nxtgauge_admin_access_token') || ''
|
||||
: '';
|
||||
return typeof sessionStorage !== "undefined"
|
||||
? sessionStorage.getItem("nxtgauge_admin_access_token") || ""
|
||||
: "";
|
||||
}
|
||||
|
||||
function authHeaders(): Record<string, string> {
|
||||
const token = getToken();
|
||||
return {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
};
|
||||
}
|
||||
|
|
@ -20,71 +20,124 @@ function authHeaders(): Record<string, string> {
|
|||
type Package = {
|
||||
id: string;
|
||||
name: string;
|
||||
role: string;
|
||||
tracecoin_amount: number;
|
||||
price_inr: number;
|
||||
bonus_percentage?: number;
|
||||
description?: string;
|
||||
package_type: string;
|
||||
applicable_roles: string[];
|
||||
tracecoins_amount: number;
|
||||
price: number;
|
||||
duration_days?: number;
|
||||
valid_from?: string;
|
||||
valid_until?: string;
|
||||
is_promotional: boolean;
|
||||
is_active: boolean;
|
||||
features?: any;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
is_available?: boolean;
|
||||
is_expired?: boolean;
|
||||
};
|
||||
|
||||
const ROLES = [
|
||||
'company', 'customer', 'job_seeker', 'photographer', 'video_editor',
|
||||
'graphic_designer', 'social_media_manager', 'fitness_trainer',
|
||||
'catering_services', 'makeup_artist', 'tutor', 'developer', 'ugc_content_creator',
|
||||
const PACKAGE_TYPES = [
|
||||
{ value: "TRACECOIN_BUNDLE", label: "Tracecoin Bundle" },
|
||||
{ value: "CONTACT_VIEWS", label: "Contact Views (Company)" },
|
||||
{ value: "JOB_POSTING", label: "Job Posting (Company)" },
|
||||
{ value: "LEAD_REQUEST", label: "Lead Request (Professional)" },
|
||||
{ value: "REQUIREMENT_SLOTS", label: "Requirement Slots (Customer)" },
|
||||
];
|
||||
|
||||
type SortMode = 'name_asc' | 'name_desc' | 'price_asc' | 'price_desc' | 'coins_asc' | 'coins_desc';
|
||||
const ALL_ROLES = [
|
||||
"COMPANY",
|
||||
"CUSTOMER",
|
||||
"JOB_SEEKER",
|
||||
"PHOTOGRAPHER",
|
||||
"VIDEO_EDITOR",
|
||||
"GRAPHIC_DESIGNER",
|
||||
"SOCIAL_MEDIA_MANAGER",
|
||||
"FITNESS_TRAINER",
|
||||
"CATERING_SERVICE",
|
||||
"MAKEUP_ARTIST",
|
||||
"TUTOR",
|
||||
"DEVELOPER",
|
||||
"UGC_CONTENT_CREATOR",
|
||||
];
|
||||
|
||||
const ROLE_LABELS: Record<string, string> = {
|
||||
COMPANY: "Company",
|
||||
CUSTOMER: "Customer",
|
||||
JOB_SEEKER: "Job Seeker",
|
||||
PHOTOGRAPHER: "Photographer",
|
||||
VIDEO_EDITOR: "Video Editor",
|
||||
GRAPHIC_DESIGNER: "Graphic Designer",
|
||||
SOCIAL_MEDIA_MANAGER: "Social Media Manager",
|
||||
FITNESS_TRAINER: "Fitness Trainer",
|
||||
CATERING_SERVICE: "Catering Service",
|
||||
MAKEUP_ARTIST: "Makeup Artist",
|
||||
TUTOR: "Tutor",
|
||||
DEVELOPER: "Developer",
|
||||
UGC_CONTENT_CREATOR: "UGC Creator",
|
||||
};
|
||||
|
||||
type SortMode = "name_asc" | "name_desc" | "price_asc" | "price_desc" | "coins_asc" | "coins_desc";
|
||||
|
||||
const SORT_LABELS: Record<SortMode, string> = {
|
||||
name_asc: 'Name A→Z', name_desc: 'Name Z→A',
|
||||
price_asc: 'Price ↑', price_desc: 'Price ↓',
|
||||
coins_asc: 'TraceCoins ↑', coins_desc: 'TraceCoins ↓',
|
||||
name_asc: "Name A→Z",
|
||||
name_desc: "Name Z→A",
|
||||
price_asc: "Price ↑",
|
||||
price_desc: "Price ↓",
|
||||
coins_asc: "TraceCoins ↑",
|
||||
coins_desc: "TraceCoins ↓",
|
||||
};
|
||||
|
||||
export default function PricingPage() {
|
||||
const [rows, setRows] = createSignal<Package[]>([]);
|
||||
const [loading, setLoading] = createSignal(true);
|
||||
const [loadError, setLoadError] = createSignal('');
|
||||
const [view, setView] = createSignal<'packages' | 'create'>('packages');
|
||||
const [loadError, setLoadError] = createSignal("");
|
||||
const [view, setView] = createSignal<"packages" | "create">("packages");
|
||||
|
||||
// Filters
|
||||
const [search, setSearch] = createSignal('');
|
||||
const [roleFilter, setRoleFilter] = createSignal('all');
|
||||
const [statusFilter, setStatusFilter] = createSignal('all');
|
||||
const [sortBy, setSortBy] = createSignal<SortMode>('name_asc');
|
||||
const [search, setSearch] = createSignal("");
|
||||
const [typeFilter, setTypeFilter] = createSignal("all");
|
||||
const [statusFilter, setStatusFilter] = createSignal("all");
|
||||
const [sortBy, setSortBy] = createSignal<SortMode>("name_asc");
|
||||
const [sortOpen, setSortOpen] = createSignal(false);
|
||||
|
||||
// Inline edit
|
||||
const [editingId, setEditingId] = createSignal('');
|
||||
const [editName, setEditName] = createSignal('');
|
||||
const [editTracecoins, setEditTracecoins] = createSignal('');
|
||||
const [editPrice, setEditPrice] = createSignal('');
|
||||
const [editingId, setEditingId] = createSignal("");
|
||||
const [editName, setEditName] = createSignal("");
|
||||
const [editTracecoins, setEditTracecoins] = createSignal("");
|
||||
const [editPrice, setEditPrice] = createSignal("");
|
||||
const [editSaving, setEditSaving] = createSignal(false);
|
||||
const [editError, setEditError] = createSignal('');
|
||||
const [togglingId, setTogglingId] = createSignal('');
|
||||
const [editError, setEditError] = createSignal("");
|
||||
const [togglingId, setTogglingId] = createSignal("");
|
||||
|
||||
// Create form
|
||||
const [cName, setCName] = createSignal('');
|
||||
const [cRole, setCRole] = createSignal(ROLES[0]);
|
||||
const [cTracecoins, setCTracecoins] = createSignal('');
|
||||
const [cPrice, setCPrice] = createSignal('');
|
||||
const [cBonus, setCBonus] = createSignal('');
|
||||
const [cName, setCName] = createSignal("");
|
||||
const [cDescription, setCDescription] = createSignal("");
|
||||
const [cType, setCType] = createSignal("TRACECOIN_BUNDLE");
|
||||
const [cRoles, setCRoles] = createSignal<string[]>([]);
|
||||
const [cTracecoins, setCTracecoins] = createSignal("");
|
||||
const [cPrice, setCPrice] = createSignal("");
|
||||
const [cDuration, setCDuration] = createSignal("");
|
||||
const [cValidFrom, setCValidFrom] = createSignal("");
|
||||
const [cValidUntil, setCValidUntil] = createSignal("");
|
||||
const [cPromotional, setCPromotional] = createSignal(false);
|
||||
const [cSaving, setCsaving] = createSignal(false);
|
||||
const [cError, setCError] = createSignal('');
|
||||
const [cError, setCError] = createSignal("");
|
||||
const [roleDropdownOpen, setRoleDropdownOpen] = createSignal(false);
|
||||
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
setLoadError('');
|
||||
setLoadError("");
|
||||
try {
|
||||
const res = await fetch(`${API}/api/admin/tracecoin-packages`, {
|
||||
const res = await fetch(`${API}/api/packages`, {
|
||||
headers: authHeaders(),
|
||||
credentials: 'include',
|
||||
credentials: "include",
|
||||
});
|
||||
if (!res.ok) throw new Error(`Request failed (${res.status})`);
|
||||
const data = await res.json();
|
||||
setRows(Array.isArray(data) ? data : (data.packages ?? []));
|
||||
setRows(Array.isArray(data) ? data : (data.data ?? []));
|
||||
} catch (err: any) {
|
||||
setLoadError(err.message || 'Could not load packages.');
|
||||
setLoadError(err.message || "Could not load packages.");
|
||||
setRows([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
|
|
@ -96,276 +149,631 @@ export default function PricingPage() {
|
|||
const filteredRows = createMemo(() => {
|
||||
let r = rows();
|
||||
const q = search().toLowerCase();
|
||||
if (q) r = r.filter((p) => p.name.toLowerCase().includes(q) || p.role.toLowerCase().includes(q));
|
||||
if (roleFilter() !== 'all') r = r.filter((p) => p.role === roleFilter());
|
||||
if (statusFilter() === 'active') r = r.filter((p) => p.is_active);
|
||||
if (statusFilter() === 'inactive') r = r.filter((p) => !p.is_active);
|
||||
if (q)
|
||||
r = r.filter(
|
||||
(p) =>
|
||||
p.name.toLowerCase().includes(q) ||
|
||||
p.package_type.toLowerCase().includes(q) ||
|
||||
p.applicable_roles.some((r) => r.toLowerCase().includes(q))
|
||||
);
|
||||
if (typeFilter() !== "all") r = r.filter((p) => p.package_type === typeFilter());
|
||||
if (statusFilter() === "active") r = r.filter((p) => p.is_active);
|
||||
if (statusFilter() === "inactive") r = r.filter((p) => !p.is_active);
|
||||
const sorted = [...r];
|
||||
const mode = sortBy();
|
||||
sorted.sort((a, b) => {
|
||||
if (mode === 'name_desc') return b.name.localeCompare(a.name);
|
||||
if (mode === 'price_asc') return a.price_inr - b.price_inr;
|
||||
if (mode === 'price_desc') return b.price_inr - a.price_inr;
|
||||
if (mode === 'coins_asc') return a.tracecoin_amount - b.tracecoin_amount;
|
||||
if (mode === 'coins_desc') return b.tracecoin_amount - a.tracecoin_amount;
|
||||
if (mode === "name_desc") return b.name.localeCompare(a.name);
|
||||
if (mode === "price_asc") return a.price - b.price;
|
||||
if (mode === "price_desc") return b.price - a.price;
|
||||
if (mode === "coins_asc") return a.tracecoins_amount - b.tracecoins_amount;
|
||||
if (mode === "coins_desc") return b.tracecoins_amount - a.tracecoins_amount;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
return sorted;
|
||||
});
|
||||
|
||||
const startEdit = (pkg: Package) => {
|
||||
setEditingId(pkg.id); setEditName(pkg.name);
|
||||
setEditTracecoins(String(pkg.tracecoin_amount)); setEditPrice(String(pkg.price_inr));
|
||||
setEditError('');
|
||||
setEditingId(pkg.id);
|
||||
setEditName(pkg.name);
|
||||
setEditTracecoins(String(pkg.tracecoins_amount));
|
||||
setEditPrice(String(pkg.price));
|
||||
setEditError("");
|
||||
};
|
||||
const cancelEdit = () => {
|
||||
setEditingId("");
|
||||
setEditError("");
|
||||
};
|
||||
const cancelEdit = () => { setEditingId(''); setEditError(''); };
|
||||
|
||||
const saveEdit = async (id: string) => {
|
||||
try {
|
||||
setEditSaving(true); setEditError('');
|
||||
const res = await fetch(`${API}/api/admin/tracecoin-packages/${id}`, {
|
||||
method: 'PATCH', headers: authHeaders(), credentials: 'include',
|
||||
body: JSON.stringify({ name: editName(), tracecoin_amount: Number(editTracecoins()), price_inr: Number(editPrice()) }),
|
||||
setEditSaving(true);
|
||||
setEditError("");
|
||||
const res = await fetch(`${API}/api/packages/${id}`, {
|
||||
method: "PATCH",
|
||||
headers: authHeaders(),
|
||||
credentials: "include",
|
||||
body: JSON.stringify({
|
||||
name: editName(),
|
||||
tracecoins_amount: Number(editTracecoins()),
|
||||
price: Number(editPrice()),
|
||||
}),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to save');
|
||||
setEditingId(''); await load();
|
||||
} catch (err: any) { setEditError(err.message || 'Failed to save'); }
|
||||
finally { setEditSaving(false); }
|
||||
if (!res.ok) throw new Error("Failed to save");
|
||||
setEditingId("");
|
||||
await load();
|
||||
} catch (err: any) {
|
||||
setEditError(err.message || "Failed to save");
|
||||
} finally {
|
||||
setEditSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleActive = async (pkg: Package) => {
|
||||
try {
|
||||
setTogglingId(pkg.id);
|
||||
await fetch(`${API}/api/admin/tracecoin-packages/${pkg.id}`, {
|
||||
method: 'PATCH', headers: authHeaders(), credentials: 'include',
|
||||
await fetch(`${API}/api/packages/${pkg.id}`, {
|
||||
method: "PATCH",
|
||||
headers: authHeaders(),
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ is_active: !pkg.is_active }),
|
||||
});
|
||||
await load();
|
||||
} catch { /* ignore */ } finally { setTogglingId(''); }
|
||||
} catch {
|
||||
/* ignore */
|
||||
} finally {
|
||||
setTogglingId("");
|
||||
}
|
||||
};
|
||||
|
||||
const toggleRole = (role: string) => {
|
||||
const current = cRoles();
|
||||
if (current.includes(role)) {
|
||||
setCRoles(current.filter((r) => r !== role));
|
||||
} else {
|
||||
setCRoles([...current, role]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
setCsaving(true); setCError('');
|
||||
setCsaving(true);
|
||||
setCError("");
|
||||
const body: Record<string, any> = {
|
||||
name: cName(), role: cRole(),
|
||||
tracecoin_amount: Number(cTracecoins()), price_inr: Number(cPrice()),
|
||||
name: cName(),
|
||||
description: cDescription() || undefined,
|
||||
package_type: cType(),
|
||||
applicable_roles: cRoles(),
|
||||
tracecoins_amount: Number(cTracecoins()),
|
||||
price: Number(cPrice()),
|
||||
is_promotional: cPromotional(),
|
||||
};
|
||||
if (cBonus()) body.bonus_percentage = Number(cBonus());
|
||||
const res = await fetch(`${API}/api/admin/tracecoin-packages`, {
|
||||
method: 'POST', headers: authHeaders(), credentials: 'include',
|
||||
if (cDuration()) body.duration_days = Number(cDuration());
|
||||
if (cValidFrom()) body.valid_from = new Date(cValidFrom()).toISOString();
|
||||
if (cValidUntil()) body.valid_until = new Date(cValidUntil()).toISOString();
|
||||
|
||||
const res = await fetch(`${API}/api/packages`, {
|
||||
method: "POST",
|
||||
headers: authHeaders(),
|
||||
credentials: "include",
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to create package');
|
||||
setCName(''); setCRole(ROLES[0]); setCTracecoins(''); setCPrice(''); setCBonus('');
|
||||
setView('packages'); await load();
|
||||
} catch (err: any) { setCError(err.message || 'Failed to create'); }
|
||||
finally { setCsaving(false); }
|
||||
if (!res.ok) throw new Error("Failed to create package");
|
||||
setCName("");
|
||||
setCDescription("");
|
||||
setCType("TRACECOIN_BUNDLE");
|
||||
setCRoles([]);
|
||||
setCTracecoins("");
|
||||
setCPrice("");
|
||||
setCDuration("");
|
||||
setCValidFrom("");
|
||||
setCValidUntil("");
|
||||
setCPromotional(false);
|
||||
setView("packages");
|
||||
await load();
|
||||
} catch (err: any) {
|
||||
setCError(err.message || "Failed to create");
|
||||
} finally {
|
||||
setCsaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr?: string) => {
|
||||
if (!dateStr) return "—";
|
||||
return new Date(dateStr).toLocaleDateString("en-IN", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const getTypeLabel = (type: string) => {
|
||||
return PACKAGE_TYPES.find((t) => t.value === type)?.label || type;
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="w-full space-y-6 pb-8">
|
||||
<div style="margin-bottom:1.5rem">
|
||||
<h1 class="text-[28px] font-bold leading-tight text-[#111827]">Pricing Management</h1>
|
||||
<p class="mt-1 text-[14px] text-[#6B7280]">Create and manage TraceCoin packages</p>
|
||||
<p class="mt-1 text-[14px] text-[#6B7280]">
|
||||
Create and manage TraceCoin packages for all roles
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div class="bg-white border-b border-gray-200 px-6 flex items-center gap-8 sticky top-0 z-10">
|
||||
{(['packages', 'create'] as const).map((t) => (
|
||||
{(["packages", "create"] as const).map((t) => (
|
||||
<button
|
||||
type="button"
|
||||
class={view() === t
|
||||
? 'py-3 border-b-2 border-orange-500 text-orange-600 text-sm font-medium'
|
||||
: 'py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors'}
|
||||
class={
|
||||
view() === t
|
||||
? "py-3 border-b-2 border-orange-500 text-orange-600 text-sm font-medium"
|
||||
: "py-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 text-sm font-medium transition-colors"
|
||||
}
|
||||
onClick={() => setView(t)}
|
||||
>
|
||||
{t === 'packages' ? 'Packages' : 'Create Package'}
|
||||
{t === "packages" ? "Packages" : "Create Package"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
{/* ── Packages list ── */}
|
||||
<Show when={view() === 'packages'}>
|
||||
<Show when={view() === "packages"}>
|
||||
<div style="position:relative;margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:visible;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6;flex-wrap:wrap">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name or role..."
|
||||
value={search()}
|
||||
onInput={(e) => setSearch(e.currentTarget.value)}
|
||||
style="height:34px;flex:1;min-width:220px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
|
||||
/>
|
||||
<select value={roleFilter()} onChange={(e) => setRoleFilter(e.currentTarget.value)} style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;color:#374151">
|
||||
<option value="all">All Roles</option>
|
||||
<For each={ROLES}>{(r) => <option value={r}>{r}</option>}</For>
|
||||
</select>
|
||||
<select value={statusFilter()} onChange={(e) => setStatusFilter(e.currentTarget.value)} style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;color:#374151">
|
||||
<option value="all">All Status</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="inactive">Inactive</option>
|
||||
</select>
|
||||
<div style="position:relative">
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6;flex-wrap:wrap">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name or role..."
|
||||
value={search()}
|
||||
onInput={(e) => setSearch(e.currentTarget.value)}
|
||||
style="height:34px;flex:1;min-width:220px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
|
||||
/>
|
||||
<select
|
||||
value={typeFilter()}
|
||||
onChange={(e) => setTypeFilter(e.currentTarget.value)}
|
||||
style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;color:#374151"
|
||||
>
|
||||
<option value="all">All Types</option>
|
||||
<For each={PACKAGE_TYPES}>{(t) => <option value={t.value}>{t.label}</option>}</For>
|
||||
</select>
|
||||
<select
|
||||
value={statusFilter()}
|
||||
onChange={(e) => setStatusFilter(e.currentTarget.value)}
|
||||
style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;color:#374151"
|
||||
>
|
||||
<option value="all">All Status</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="inactive">Inactive</option>
|
||||
</select>
|
||||
<div style="position:relative">
|
||||
<button
|
||||
type="button"
|
||||
style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
|
||||
onClick={() => setSortOpen(!sortOpen())}
|
||||
>
|
||||
Sort: {SORT_LABELS[sortBy()]}
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path
|
||||
d="M3 4.5L6 7.5L9 4.5"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<Show when={sortOpen()}>
|
||||
<div style="position:absolute;top:38px;right:0;background:white;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:50;min-width:190px;padding:6px">
|
||||
<For each={Object.entries(SORT_LABELS) as [SortMode, string][]}>
|
||||
{([key, label]) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSortBy(key);
|
||||
setSortOpen(false);
|
||||
}}
|
||||
style={`display:block;width:100%;text-align:left;padding:8px 12px;font-size:13px;border-radius:8px;border:none;cursor:pointer;background:${sortBy() === key ? "#FFF1EB" : "transparent"};color:${sortBy() === key ? "#FF5E13" : "#374151"};font-weight:${sortBy() === key ? "600" : "400"}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
|
||||
onClick={() => setSortOpen(!sortOpen())}
|
||||
style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #D1D5DB;background:#fff;padding:0 12px;font-size:12px;font-weight:600;color:#0f172a;cursor:pointer"
|
||||
onClick={load}
|
||||
>
|
||||
Sort: {SORT_LABELS[sortBy()]}
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
Refresh
|
||||
</button>
|
||||
<Show when={sortOpen()}>
|
||||
<div style="position:absolute;top:38px;right:0;background:white;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:50;min-width:190px;padding:6px">
|
||||
<For each={Object.entries(SORT_LABELS) as [SortMode, string][]}>
|
||||
{([key, label]) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setSortBy(key); setSortOpen(false); }}
|
||||
style={`display:block;width:100%;text-align:left;padding:8px 12px;font-size:13px;border-radius:8px;border:none;cursor:pointer;background:${sortBy() === key ? '#FFF1EB' : 'transparent'};color:${sortBy() === key ? '#FF5E13' : '#374151'};font-weight:${sortBy() === key ? '600' : '400'}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #D1D5DB;background:#fff;padding:0 12px;font-size:12px;font-weight:600;color:#0f172a;cursor:pointer" onClick={load}>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Show when={loadError()}>
|
||||
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{loadError()}</div>
|
||||
</Show>
|
||||
<Show when={loadError()}>
|
||||
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
{loadError()}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="data-table w-full text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th><th>Role</th><th>TraceCoins</th><th>Price (₹)</th><th>Bonus</th><th>Status</th><th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<Show when={loading()}>
|
||||
<tr><td colspan="7" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
|
||||
</Show>
|
||||
<Show when={!loading() && filteredRows().length === 0}>
|
||||
<tr><td colspan="7" style="text-align:center;padding:32px;color:#94a3b8">No packages found.</td></tr>
|
||||
</Show>
|
||||
<Show when={!loading() && filteredRows().length > 0}>
|
||||
<For each={filteredRows()}>
|
||||
{(pkg) => (
|
||||
<>
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td class="font-semibold text-slate-900">{pkg.name}</td>
|
||||
<td><span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#f1f5f9;color:#475569">{pkg.role}</span></td>
|
||||
<td class="text-slate-700 font-medium">{pkg.tracecoin_amount}</td>
|
||||
<td class="text-slate-700">₹{(pkg.price_inr / 100).toFixed(2)}</td>
|
||||
<td class="text-slate-500">{pkg.bonus_percentage != null ? `${pkg.bonus_percentage}%` : '—'}</td>
|
||||
<td>
|
||||
<span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${pkg.is_active ? '#FFD8C2' : '#D1D5DB'};background:${pkg.is_active ? '#FFF1EB' : '#F3F4F6'};color:${pkg.is_active ? '#FF5E13' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
|
||||
<span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${pkg.is_active ? '#FF5E13' : '#9CA3AF'};margin-right:5px`} />
|
||||
{pkg.is_active ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={() => startEdit(pkg)}>Edit</button>
|
||||
<button
|
||||
class={pkg.is_active ? 'inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors' : 'btn-primary'}
|
||||
disabled={togglingId() === pkg.id}
|
||||
onClick={() => toggleActive(pkg)}
|
||||
<div class="table-card">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="data-table w-full text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Applicable Roles</th>
|
||||
<th>TraceCoins</th>
|
||||
<th>Price (₹)</th>
|
||||
<th>Valid Period</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<Show when={loading()}>
|
||||
<tr>
|
||||
<td colspan="8" style="text-align:center;padding:32px;color:#64748b">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
</Show>
|
||||
<Show when={!loading() && filteredRows().length === 0}>
|
||||
<tr>
|
||||
<td colspan="8" style="text-align:center;padding:32px;color:#94a3b8">
|
||||
No packages found.
|
||||
</td>
|
||||
</tr>
|
||||
</Show>
|
||||
<Show when={!loading() && filteredRows().length > 0}>
|
||||
<For each={filteredRows()}>
|
||||
{(pkg) => (
|
||||
<>
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td class="font-semibold text-slate-900">
|
||||
{pkg.name}
|
||||
{pkg.is_promotional && (
|
||||
<span style="margin-left:6px;font-size:10px;background:#FEF3C7;color:#D97706;padding:1px 6px;border-radius:4px">
|
||||
PROMO
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#e0f2fe;color:#0369a1">
|
||||
{getTypeLabel(pkg.package_type)}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:4px">
|
||||
<For each={pkg.applicable_roles.slice(0, 3)}>
|
||||
{(role) => (
|
||||
<span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:10px;background:#f1f5f9;color:#475569">
|
||||
{ROLE_LABELS[role] || role}
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
{pkg.applicable_roles.length > 3 && (
|
||||
<span style="font-size:10px;color:#64748b">
|
||||
+{pkg.applicable_roles.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-slate-700 font-medium">{pkg.tracecoins_amount}</td>
|
||||
<td class="text-slate-700">₹{pkg.price.toLocaleString("en-IN")}</td>
|
||||
<td style="font-size:12px;color:#64748b">
|
||||
{pkg.valid_from || pkg.valid_until ? (
|
||||
<>
|
||||
{formatDate(pkg.valid_from)} - {formatDate(pkg.valid_until)}
|
||||
</>
|
||||
) : (
|
||||
"Always"
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${pkg.is_active ? "#FFD8C2" : "#D1D5DB"};background:${pkg.is_active ? "#FFF1EB" : "#F3F4F6"};color:${pkg.is_active ? "#FF5E13" : "#4B5563"};padding:2px 10px;font-size:12px;font-weight:500`}
|
||||
>
|
||||
{togglingId() === pkg.id ? '...' : pkg.is_active ? 'Disable' : 'Enable'}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<Show when={editingId() === pkg.id}>
|
||||
<tr>
|
||||
<td colspan="7" style="background:#f8fafc;padding:16px">
|
||||
<Show when={editError()}>
|
||||
<div class="mb-3 rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700">{editError()}</div>
|
||||
</Show>
|
||||
<div style="display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end">
|
||||
<div>
|
||||
<label style="display:block;font-size:12px;font-weight:600;margin-bottom:4px">Name</label>
|
||||
<input type="text" value={editName()} onInput={(e) => setEditName(e.currentTarget.value)} style="padding:7px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;width:180px" />
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:12px;font-weight:600;margin-bottom:4px">TraceCoins</label>
|
||||
<input type="number" value={editTracecoins()} onInput={(e) => setEditTracecoins(e.currentTarget.value)} style="padding:7px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;width:110px" />
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:12px;font-weight:600;margin-bottom:4px">Price (paise)</label>
|
||||
<input type="number" value={editPrice()} onInput={(e) => setEditPrice(e.currentTarget.value)} style="padding:7px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;width:110px" />
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<button class="btn-primary" disabled={editSaving()} onClick={() => saveEdit(pkg.id)}>{editSaving() ? 'Saving...' : 'Save'}</button>
|
||||
<button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={cancelEdit}>Cancel</button>
|
||||
</div>
|
||||
<span
|
||||
style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${pkg.is_active ? "#FF5E13" : "#9CA3AF"};margin-right:5px`}
|
||||
/>
|
||||
{pkg.is_active ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<button
|
||||
class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
onClick={() => startEdit(pkg)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
class={
|
||||
pkg.is_active
|
||||
? "inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors"
|
||||
: "btn-primary"
|
||||
}
|
||||
disabled={togglingId() === pkg.id}
|
||||
onClick={() => toggleActive(pkg)}
|
||||
>
|
||||
{togglingId() === pkg.id
|
||||
? "..."
|
||||
: pkg.is_active
|
||||
? "Disable"
|
||||
: "Enable"}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</Show>
|
||||
</>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Show when={!loading()}>
|
||||
<div style="padding:10px 16px;font-size:12px;color:#64748b;border-top:1px solid #f1f5f9">
|
||||
{filteredRows().length} of {rows().length} packages
|
||||
<Show when={editingId() === pkg.id}>
|
||||
<tr>
|
||||
<td colspan="8" style="background:#f8fafc;padding:16px">
|
||||
<Show when={editError()}>
|
||||
<div class="mb-3 rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm text-red-700">
|
||||
{editError()}
|
||||
</div>
|
||||
</Show>
|
||||
<div style="display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end">
|
||||
<div>
|
||||
<label style="display:block;font-size:12px;font-weight:600;margin-bottom:4px">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editName()}
|
||||
onInput={(e) => setEditName(e.currentTarget.value)}
|
||||
style="padding:7px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;width:180px"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:12px;font-weight:600;margin-bottom:4px">
|
||||
TraceCoins
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={editTracecoins()}
|
||||
onInput={(e) => setEditTracecoins(e.currentTarget.value)}
|
||||
style="padding:7px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;width:110px"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:12px;font-weight:600;margin-bottom:4px">
|
||||
Price (₹)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={editPrice()}
|
||||
onInput={(e) => setEditPrice(e.currentTarget.value)}
|
||||
style="padding:7px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:13px;width:110px"
|
||||
/>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<button
|
||||
class="btn-primary"
|
||||
disabled={editSaving()}
|
||||
onClick={() => saveEdit(pkg.id)}
|
||||
>
|
||||
{editSaving() ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
onClick={cancelEdit}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</Show>
|
||||
</>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={!loading()}>
|
||||
<div style="padding:10px 16px;font-size:12px;color:#64748b;border-top:1px solid #f1f5f9">
|
||||
{filteredRows().length} of {rows().length} packages
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* ── Create Package ── */}
|
||||
<Show when={view() === 'create'}>
|
||||
<section class="rounded-xl border border-gray-200 bg-white shadow-sm p-6" style="max-width:480px">
|
||||
<Show when={view() === "create"}>
|
||||
<section
|
||||
class="rounded-xl border border-gray-200 bg-white shadow-sm p-6"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<h2 style="margin:0 0 20px;font-size:16px;font-weight:700">New Package</h2>
|
||||
<Show when={cError()}>
|
||||
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{cError()}</div>
|
||||
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
{cError()}
|
||||
</div>
|
||||
</Show>
|
||||
<form onSubmit={handleCreate} style="display:flex;flex-direction:column;gap:14px">
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">Name</label>
|
||||
<input type="text" value={cName()} onInput={(e) => setCName(e.currentTarget.value)} required placeholder="e.g. Starter Pack" style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box" />
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">
|
||||
Package Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={cName()}
|
||||
onInput={(e) => setCName(e.currentTarget.value)}
|
||||
required
|
||||
placeholder="e.g. Christmas Special - 50 Tracecoins"
|
||||
style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">Role</label>
|
||||
<select value={cRole()} onChange={(e) => setCRole(e.currentTarget.value)} required style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box">
|
||||
<For each={ROLES}>{(r) => <option value={r}>{r}</option>}</For>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={cDescription()}
|
||||
onInput={(e) => setCDescription(e.currentTarget.value)}
|
||||
placeholder="Optional description..."
|
||||
style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box;min-height:60px;resize:vertical"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">
|
||||
Package Type *
|
||||
</label>
|
||||
<select
|
||||
value={cType()}
|
||||
onChange={(e) => setCType(e.currentTarget.value)}
|
||||
required
|
||||
style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
|
||||
>
|
||||
<For each={PACKAGE_TYPES}>
|
||||
{(t) => <option value={t.value}>{t.label}</option>}
|
||||
</For>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">TraceCoins</label>
|
||||
<input type="number" value={cTracecoins()} onInput={(e) => setCTracecoins(e.currentTarget.value)} required min="1" placeholder="e.g. 100" style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box" />
|
||||
<div style="position:relative">
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">
|
||||
Applicable Roles *
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setRoleDropdownOpen(!roleDropdownOpen())}
|
||||
style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box;text-align:left;background:white;cursor:pointer"
|
||||
>
|
||||
{cRoles().length === 0
|
||||
? "Select roles..."
|
||||
: `${cRoles().length} role(s) selected`}
|
||||
<span style="float:right">▼</span>
|
||||
</button>
|
||||
<Show when={roleDropdownOpen()}>
|
||||
<div style="position:absolute;top:100%;left:0;right:0;background:white;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:20;max-height:200px;overflow-y:auto;margin-top:4px">
|
||||
<For each={ALL_ROLES}>
|
||||
{(role) => (
|
||||
<label style="display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={cRoles().includes(role)}
|
||||
onChange={() => toggleRole(role)}
|
||||
/>
|
||||
{ROLE_LABELS[role] || role}
|
||||
</label>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={cRoles().length > 0}>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:8px">
|
||||
<For each={cRoles()}>
|
||||
{(role) => (
|
||||
<span style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:#e0f2fe;color:#0369a1;border-radius:4px;font-size:12px">
|
||||
{ROLE_LABELS[role] || role}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleRole(role)}
|
||||
style="background:none;border:none;cursor:pointer;font-size:14px;padding:0;line-height:1"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">
|
||||
Tracecoins Amount *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={cTracecoins()}
|
||||
onInput={(e) => setCTracecoins(e.currentTarget.value)}
|
||||
required
|
||||
min="1"
|
||||
placeholder="e.g. 50"
|
||||
style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">
|
||||
Price (₹) *
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={cPrice()}
|
||||
onInput={(e) => setCPrice(e.currentTarget.value)}
|
||||
required
|
||||
min="1"
|
||||
placeholder="e.g. 499"
|
||||
style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">Price INR (paise — e.g. 49900 = ₹499)</label>
|
||||
<input type="number" value={cPrice()} onInput={(e) => setCPrice(e.currentTarget.value)} required min="1" placeholder="e.g. 49900" style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box" />
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">
|
||||
Duration (days)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={cDuration()}
|
||||
onInput={(e) => setCDuration(e.currentTarget.value)}
|
||||
min="1"
|
||||
placeholder="e.g. 30 (leave empty for unlimited)"
|
||||
style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
|
||||
/>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">
|
||||
Valid From
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={cValidFrom()}
|
||||
onInput={(e) => setCValidFrom(e.currentTarget.value)}
|
||||
style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">
|
||||
Valid Until
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={cValidUntil()}
|
||||
onInput={(e) => setCValidUntil(e.currentTarget.value)}
|
||||
style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;margin-bottom:4px">Bonus % <span style="font-weight:400;color:#94a3b8">(optional)</span></label>
|
||||
<input type="number" value={cBonus()} onInput={(e) => setCBonus(e.currentTarget.value)} min="0" placeholder="e.g. 10" style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;box-sizing:border-box" />
|
||||
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={cPromotional()}
|
||||
onChange={(e) => setCPromotional(e.currentTarget.checked)}
|
||||
/>
|
||||
<span style="font-size:13px;font-weight:600">Promotional Package</span>
|
||||
</label>
|
||||
<p style="font-size:12px;color:#64748b;margin-top:4px">
|
||||
Promotional packages appear first in listings
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn-primary" type="submit" disabled={cSaving()}>{cSaving() ? 'Creating...' : 'Create Package'}</button>
|
||||
<button class="btn-primary" type="submit" disabled={cSaving()}>
|
||||
{cSaving() ? "Creating..." : "Create Package"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</Show>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue