From 16ccb8de123de77d97dbe840aa0c4db6301be04d Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Mon, 8 Dec 2025 09:51:20 +0100
Subject: [PATCH] beautify: create coffee

---
 .../subscriptions/createSubscription/page.tsx | 138 +++++++++---------
 1 file changed, 69 insertions(+), 69 deletions(-)

diff --git a/src/app/admin/subscriptions/createSubscription/page.tsx b/src/app/admin/subscriptions/createSubscription/page.tsx
index 3eca194..88d3d9f 100644
--- a/src/app/admin/subscriptions/createSubscription/page.tsx
+++ b/src/app/admin/subscriptions/createSubscription/page.tsx
@@ -106,75 +106,7 @@ export default function CreateSubscriptionPage() {
 
           <div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg">
             <form onSubmit={onCreate} className="space-y-8">
-              <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>
-
-              {/* 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 */}
+              {/* Picture Upload moved to top */}
               <div>
                 <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>
@@ -241,6 +173,74 @@ export default function CreateSubscriptionPage() {
                 </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 */}
               <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">