From dc794a29d398ae2581b2a9dfe84ad219e2983200 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Tue, 4 Mar 2025 09:53:13 +0800
Subject: [PATCH] feat: enhance layout and button functionality in
 subscriptions page

---
 app/pages/dashboard-subscriptions/index.tsx | 159 +++++++++++---------
 1 file changed, 87 insertions(+), 72 deletions(-)

diff --git a/app/pages/dashboard-subscriptions/index.tsx b/app/pages/dashboard-subscriptions/index.tsx
index e251c7e..c1163b5 100644
--- a/app/pages/dashboard-subscriptions/index.tsx
+++ b/app/pages/dashboard-subscriptions/index.tsx
@@ -52,44 +52,50 @@ export const SubscriptionsPage = () => {
   return (
     <div className="relative">
       <TitleDashboard title="Subscription" />
-      <Button
-        className="float-right mt-7 h-10 w-[160px] rounded-md"
-        onClick={switchView}
-      >
-        {SubscribtionOpen ? 'Subscriptions' : 'Save'}
-      </Button>
 
       {SubscribtionOpen && (
         <>
-          <div className="mb-8 flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
-            <div className="w-[400px]">
-              <Field>
-                <Label className="mb-2 block text-sm font-medium">
-                  Cari User
-                </Label>
-                <div className="relative">
-                  <Input
-                    type="text"
-                    placeholder="Cari Nama"
-                    className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                  />
-                  <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-                    <SearchIcon className="h-5 w-5" />
+          <div className="mb-8 flex items-end justify-between">
+            <div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
+              <div className="w-[400px]">
+                <Field>
+                  <Label className="mb-2 block text-sm font-medium">
+                    Cari User
+                  </Label>
+                  <div className="relative">
+                    <Input
+                      type="text"
+                      placeholder="Cari Nama"
+                      className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                    />
+                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+                      <SearchIcon className="h-5 w-5" />
+                    </div>
                   </div>
-                </div>
-              </Field>
+                </Field>
+              </div>
+
+              <div className="w-[235px]">
+                <Field>
+                  <Label className="mb-2 block text-sm font-medium">
+                    Status
+                  </Label>
+                  <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
+                    <option>Pilih Status</option>
+                    <option>Aktif</option>
+                    <option>Nonaktif</option>
+                  </Select>
+                </Field>
+              </div>
             </div>
 
-            <div className="w-[235px]">
-              <Field>
-                <Label className="mb-2 block text-sm font-medium">Status</Label>
-                <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
-                  <option>Pilih Status</option>
-                  <option>Aktif</option>
-                  <option>Nonaktif</option>
-                </Select>
-              </Field>
-            </div>
+            <Button
+              className="rounded-md"
+              size="lg"
+              onClick={switchView}
+            >
+              Subscription Settings
+            </Button>
           </div>
 
           <UiTable
@@ -108,48 +114,57 @@ export const SubscriptionsPage = () => {
 
       {!SubscribtionOpen && (
         <>
-          <div className="mb-8 flex items-end gap-5 rounded-lg bg-gray-50 text-[#363636]">
-            <div className="w-[300px]">
-              <Field>
-                <Label className="mb-2 block text-sm font-medium">
-                  Subscription Name
-                </Label>
-                <div className="relative">
-                  <Input
-                    type="text"
-                    placeholder="Subscription Name"
-                    className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                  />
-                </div>
-              </Field>
-            </div>
-            <div className="w-[300px]">
-              <Field>
-                <Label className="mb-2 block text-sm font-medium">
-                  Subscription Price
-                </Label>
-                <div className="relative">
-                  <Input
-                    type="text"
-                    placeholder="Subscription Price"
-                    className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                  />
-                </div>
-              </Field>
-            </div>
+          <div className="mb-8 flex items-end justify-between">
+            <div className="flex items-end gap-5 rounded-lg bg-gray-50 text-[#363636]">
+              <div className="w-[300px]">
+                <Field>
+                  <Label className="mb-2 block text-sm font-medium">
+                    Subscription Name
+                  </Label>
+                  <div className="relative">
+                    <Input
+                      type="text"
+                      placeholder="Subscription Name"
+                      className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                    />
+                  </div>
+                </Field>
+              </div>
+              <div className="w-[300px]">
+                <Field>
+                  <Label className="mb-2 block text-sm font-medium">
+                    Subscription Price
+                  </Label>
+                  <div className="relative">
+                    <Input
+                      type="text"
+                      placeholder="Subscription Price"
+                      className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                    />
+                  </div>
+                </Field>
+              </div>
 
-            <div className="w-[300px]">
-              <Field>
-                <Label className="mb-2 block text-sm font-medium">
-                  Subscription Length (Days)
-                </Label>
-                <Input
-                  type="text"
-                  placeholder="Subscription Length (Days)"
-                  className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                ></Input>
-              </Field>
+              <div className="w-[300px]">
+                <Field>
+                  <Label className="mb-2 block text-sm font-medium">
+                    Subscription Length (Days)
+                  </Label>
+                  <Input
+                    type="text"
+                    placeholder="Subscription Length (Days)"
+                    className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                  ></Input>
+                </Field>
+              </div>
             </div>
+            <Button
+              className="rounded-md"
+              size="lg"
+              onClick={switchView}
+            >
+              Save
+            </Button>
           </div>
 
           <UiTable