From f432ba06f9d3a86ec00bfd316d1c020ddf779de6 Mon Sep 17 00:00:00 2001
From: "web@ppanel" <web@ppanel.dev>
Date: Mon, 29 Dec 2025 06:12:10 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Refactor=20SubscriptionForm?=
 =?UTF-8?q?=20layout=20for=20improved=20readability=20and=20maintainabilit?=
 =?UTF-8?q?y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user-subscription/subscription-form.tsx   | 280 +++++++++---------
 1 file changed, 142 insertions(+), 138 deletions(-)

diff --git a/apps/admin/src/sections/user/user-subscription/subscription-form.tsx b/apps/admin/src/sections/user/user-subscription/subscription-form.tsx
index 3001fea..9eb1051 100644
--- a/apps/admin/src/sections/user/user-subscription/subscription-form.tsx
+++ b/apps/admin/src/sections/user/user-subscription/subscription-form.tsx
@@ -96,144 +96,148 @@ export function SubscriptionForm({
           <SheetTitle>{title}</SheetTitle>
         </SheetHeader>
         <ScrollArea className="h-[calc(100dvh-48px-36px-36px-env(safe-area-inset-top))]">
-          <Form {...form}>
-            <form
-              className="mt-4 space-y-4"
-              onSubmit={form.handleSubmit(handleSubmit)}
-            >
-              <FormField
-                control={form.control}
-                name="subscribe_id"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("subscription", "Subscription")}</FormLabel>
-                    <FormControl>
-                      <Combobox<number, false>
-                        onChange={(value) => {
-                          form.setValue(field.name, value);
-                        }}
-                        options={subscribes?.map((item) => ({
-                          value: item.id!,
-                          label: item.name!,
-                        }))}
-                        placeholder="Select Subscription"
-                        value={field.value}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="traffic"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("trafficLimit", "Traffic Limit")}</FormLabel>
-                    <FormControl>
-                      <EnhancedInput
-                        placeholder={t("unlimited", "Unlimited")}
-                        type="number"
-                        {...field}
-                        formatInput={(value) =>
-                          unitConversion("bytesToGb", value)
-                        }
-                        formatOutput={(value) =>
-                          unitConversion("gbToBytes", value)
-                        }
-                        onValueChange={(value) => {
-                          form.setValue(field.name, value as number);
-                        }}
-                        suffix="GB"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="upload"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      {t("uploadTraffic", "Upload Traffic")}
-                    </FormLabel>
-                    <FormControl>
-                      <EnhancedInput
-                        placeholder="0"
-                        type="number"
-                        {...field}
-                        formatInput={(value) =>
-                          unitConversion("bytesToGb", value)
-                        }
-                        formatOutput={(value) =>
-                          unitConversion("gbToBytes", value)
-                        }
-                        onValueChange={(value) => {
-                          form.setValue(field.name, value as number);
-                        }}
-                        suffix="GB"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="download"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      {t("downloadTraffic", "Download Traffic")}
-                    </FormLabel>
-                    <FormControl>
-                      <EnhancedInput
-                        placeholder="0"
-                        type="number"
-                        {...field}
-                        formatInput={(value) =>
-                          unitConversion("bytesToGb", value)
-                        }
-                        formatOutput={(value) =>
-                          unitConversion("gbToBytes", value)
-                        }
-                        onValueChange={(value) => {
-                          form.setValue(field.name, value as number);
-                        }}
-                        suffix="GB"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="expired_at"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("expiredAt", "Expired At")}</FormLabel>
-                    <FormControl>
-                      <DatePicker
-                        onChange={(value: number | null | undefined) => {
-                          form.setValue(field.name, value || 0);
-                        }}
-                        placeholder={t("permanent", "Permanent")}
-                        value={
-                          field.value && field.value > 0
-                            ? field.value
-                            : undefined
-                        }
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </form>
-          </Form>
+          <div className="pr-4">
+            <Form {...form}>
+              <form
+                className="mt-4 space-y-4"
+                onSubmit={form.handleSubmit(handleSubmit)}
+              >
+                <FormField
+                  control={form.control}
+                  name="subscribe_id"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("subscription", "Subscription")}</FormLabel>
+                      <FormControl>
+                        <Combobox<number, false>
+                          onChange={(value) => {
+                            form.setValue(field.name, value);
+                          }}
+                          options={subscribes?.map((item) => ({
+                            value: item.id!,
+                            label: item.name!,
+                          }))}
+                          placeholder="Select Subscription"
+                          value={field.value}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="traffic"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t("trafficLimit", "Traffic Limit")}
+                      </FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          placeholder={t("unlimited", "Unlimited")}
+                          type="number"
+                          {...field}
+                          formatInput={(value) =>
+                            unitConversion("bytesToGb", value)
+                          }
+                          formatOutput={(value) =>
+                            unitConversion("gbToBytes", value)
+                          }
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value as number);
+                          }}
+                          suffix="GB"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="upload"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t("uploadTraffic", "Upload Traffic")}
+                      </FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          placeholder="0"
+                          type="number"
+                          {...field}
+                          formatInput={(value) =>
+                            unitConversion("bytesToGb", value)
+                          }
+                          formatOutput={(value) =>
+                            unitConversion("gbToBytes", value)
+                          }
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value as number);
+                          }}
+                          suffix="GB"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="download"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t("downloadTraffic", "Download Traffic")}
+                      </FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          placeholder="0"
+                          type="number"
+                          {...field}
+                          formatInput={(value) =>
+                            unitConversion("bytesToGb", value)
+                          }
+                          formatOutput={(value) =>
+                            unitConversion("gbToBytes", value)
+                          }
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value as number);
+                          }}
+                          suffix="GB"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="expired_at"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("expiredAt", "Expired At")}</FormLabel>
+                      <FormControl>
+                        <DatePicker
+                          onChange={(value: number | null | undefined) => {
+                            form.setValue(field.name, value || 0);
+                          }}
+                          placeholder={t("permanent", "Permanent")}
+                          value={
+                            field.value && field.value > 0
+                              ? field.value
+                              : undefined
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </form>
+            </Form>
+          </div>
         </ScrollArea>
         <SheetFooter className="flex-row justify-end gap-2 pt-3">
           <Button