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>
</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