beautify: create coffee
This commit is contained in:
DeathKaioken
parent
1c87ba150e
commit
16ccb8de12
@ -106,75 +106,7 @@ export default function CreateSubscriptionPage() {
|
|||||||
|
|
||||||
<div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg">
|
<div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg">
|
||||||
<form onSubmit={onCreate} className="space-y-8">
|
<form onSubmit={onCreate} className="space-y-8">
|
||||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
{/* Picture Upload moved to top */}
|
||||||
{/* Title */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="title" className="block text-sm font-medium text-blue-900">Title</label>
|
|
||||||
<input id="title" name="title" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
|
||||||
</div>
|
|
||||||
{/* Price */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="price" className="block text-sm font-medium text-blue-900">Price</label>
|
|
||||||
<input
|
|
||||||
id="price"
|
|
||||||
name="price"
|
|
||||||
required
|
|
||||||
min={0.01}
|
|
||||||
step={0.01}
|
|
||||||
className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400"
|
|
||||||
placeholder="0.00"
|
|
||||||
type="number"
|
|
||||||
value={price}
|
|
||||||
onChange={e => {
|
|
||||||
const val = e.target.value;
|
|
||||||
setPrice(val);
|
|
||||||
}}
|
|
||||||
onBlur={e => {
|
|
||||||
const num = parseFloat(e.target.value);
|
|
||||||
if (!isNaN(num)) {
|
|
||||||
setPrice(num.toFixed(2));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/* Currency */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="currency" className="block text-sm font-medium text-blue-900">Currency (e.g., EUR)</label>
|
|
||||||
<input id="currency" name="currency" required maxLength={3} pattern="[A-Za-z]{3}" className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="EUR" value={currency} onChange={e => setCurrency(e.target.value.toUpperCase().slice(0,3))} />
|
|
||||||
</div>
|
|
||||||
{/* Featured */}
|
|
||||||
<div className="flex items-center gap-2 mt-6">
|
|
||||||
<input id="featured" type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900" checked={isFeatured} onChange={e => setIsFeatured(e.target.checked)} />
|
|
||||||
<label htmlFor="featured" className="text-sm font-medium text-blue-900">Featured</label>
|
|
||||||
</div>
|
|
||||||
{/* Subscription Billing (Locked) + Availability */}
|
|
||||||
<div className="sm:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-blue-900">Subscription Billing</label>
|
|
||||||
<p className="mt-1 text-xs text-gray-600">Fixed monthly subscription billing (interval count = 1). These settings are locked.</p>
|
|
||||||
<div className="mt-2 flex gap-4">
|
|
||||||
<input disabled value={billingInterval} className="w-40 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
|
||||||
<input disabled value={intervalCount} className="w-24 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label htmlFor="availability" className="block text-sm font-medium text-blue-900">Availability</label>
|
|
||||||
<select id="availability" name="availability" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black" value={state} onChange={e => setState(e.target.value as any)}>
|
|
||||||
<option value="available">Available</option>
|
|
||||||
<option value="unavailable">Unavailable</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="description" className="block text-sm font-medium text-blue-900">Description</label>
|
|
||||||
<textarea id="description" name="description" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" rows={3} placeholder="Describe the product" value={description} onChange={e => setDescription(e.target.value)} />
|
|
||||||
<p className="mt-1 text-xs text-gray-600">Shown to users in the shop and checkout.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Picture Upload */}
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-blue-900 mb-2">Picture</label>
|
<label className="block text-sm font-medium text-blue-900 mb-2">Picture</label>
|
||||||
<p className="text-xs text-gray-600 mb-3">Upload an image and crop it to fit the coffee thumbnail (16:9 aspect ratio, 144px height)</p>
|
<p className="text-xs text-gray-600 mb-3">Upload an image and crop it to fit the coffee thumbnail (16:9 aspect ratio, 144px height)</p>
|
||||||
@ -241,6 +173,74 @@ export default function CreateSubscriptionPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Description moved right after picture */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="description" className="block text-sm font-medium text-blue-900">Description</label>
|
||||||
|
<textarea id="description" name="description" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" rows={3} placeholder="Describe the product" value={description} onChange={e => setDescription(e.target.value)} />
|
||||||
|
<p className="mt-1 text-xs text-gray-600">Shown to users in the shop and checkout.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||||
|
{/* Title */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="title" className="block text-sm font-medium text-blue-900">Title</label>
|
||||||
|
<input id="title" name="title" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
{/* Price */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="price" className="block text-sm font-medium text-blue-900">Price</label>
|
||||||
|
<input
|
||||||
|
id="price"
|
||||||
|
name="price"
|
||||||
|
required
|
||||||
|
min={0.01}
|
||||||
|
step={0.01}
|
||||||
|
className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400"
|
||||||
|
placeholder="0.00"
|
||||||
|
type="number"
|
||||||
|
value={price}
|
||||||
|
onChange={e => {
|
||||||
|
const val = e.target.value;
|
||||||
|
setPrice(val);
|
||||||
|
}}
|
||||||
|
onBlur={e => {
|
||||||
|
const num = parseFloat(e.target.value);
|
||||||
|
if (!isNaN(num)) {
|
||||||
|
setPrice(num.toFixed(2));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/* Currency */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="currency" className="block text-sm font-medium text-blue-900">Currency (e.g., EUR)</label>
|
||||||
|
<input id="currency" name="currency" required maxLength={3} pattern="[A-Za-z]{3}" className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="EUR" value={currency} onChange={e => setCurrency(e.target.value.toUpperCase().slice(0,3))} />
|
||||||
|
</div>
|
||||||
|
{/* Featured */}
|
||||||
|
<div className="flex items-center gap-2 mt-6">
|
||||||
|
<input id="featured" type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900" checked={isFeatured} onChange={e => setIsFeatured(e.target.checked)} />
|
||||||
|
<label htmlFor="featured" className="text-sm font-medium text-blue-900">Featured</label>
|
||||||
|
</div>
|
||||||
|
{/* Subscription Billing (Locked) + Availability */}
|
||||||
|
<div className="sm:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-blue-900">Subscription Billing</label>
|
||||||
|
<p className="mt-1 text-xs text-gray-600">Fixed monthly subscription billing (interval count = 1). These settings are locked.</p>
|
||||||
|
<div className="mt-2 flex gap-4">
|
||||||
|
<input disabled value={billingInterval} className="w-40 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
||||||
|
<input disabled value={intervalCount} className="w-24 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="availability" className="block text-sm font-medium text-blue-900">Availability</label>
|
||||||
|
<select id="availability" name="availability" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black" value={state} onChange={e => setState(e.target.value as any)}>
|
||||||
|
<option value="available">Available</option>
|
||||||
|
<option value="unavailable">Unavailable</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Actions */}
|
{/* Actions */}
|
||||||
<div className="flex items-center justify-end gap-x-4">
|
<div className="flex items-center justify-end gap-x-4">
|
||||||
<Link href="/admin/subscriptions" className="text-sm font-medium text-blue-900 hover:text-blue-700">
|
<Link href="/admin/subscriptions" className="text-sm font-medium text-blue-900 hover:text-blue-700">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user