HI-VPN/hi-frontend
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

✨ feat: Refactor SubscriptionForm layout for improved readability and maintainability

Browse Source
This commit is contained in:
web@ppanel 2025-12-29 06:12:10 +00:00
parent 9559e003b7
commit f432ba06f9
1 changed files with 142 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
apps/admin/src/sections/user/user-subscription/subscription-form.tsx
View File

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