Skip to content

Commit cc80eca

Browse files
kastovkastov
committed
feat: add expiration date options in user actions
- Introduced buttons for quick selection of expiration dates (+1 month, +3 months, +1 year, 2099 year) in the CreateUserModal, BulkUserActionsUpdateTab, and ViewUserModal components. - Updated localization files for English, Persian, and Russian to include new expiration date labels.
1 parent e3891ff commit cc80eca

File tree

8 files changed

+252
-32
lines changed

8 files changed

+252
-32
lines changed

‎public/locales/en/remnawave.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,11 @@
246246
"loading-user-creation": "Loading user creation modal ...",
247247
"create-user": "Create user",
248248
"telegram-id-of-a-user-in-telegram": "Numeric ID of the user in Telegram messenger",
249-
"email-of-a-user": "Email address of the user"
249+
"email-of-a-user": "Email address of the user",
250+
"1-month": "+1 month",
251+
"3-months": "+3 months",
252+
"1-year": "+1 year",
253+
"2099-year": "2099 year"
250254
}
251255
},
252256
"login-form-feature": {
@@ -833,4 +837,4 @@
833837
"updated-at": "Updated At"
834838
}
835839
}
836-
}
840+
}

‎public/locales/fa/remnawave.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,11 @@
246246
"loading-user-creation": "در حال بارگذاری صفحه ساخت کاربر",
247247
"create-user": "ساخت کاربر",
248248
"email-of-a-user": "ایمیل کاربر",
249-
"telegram-id-of-a-user-in-telegram": "آیدی عددی تلگرام کاربر"
249+
"telegram-id-of-a-user-in-telegram": "آیدی عددی تلگرام کاربر",
250+
"1-month": "+1 month",
251+
"1-year": "+1 year",
252+
"2099-year": "2099 year",
253+
"3-months": "+3 months"
250254
}
251255
},
252256
"login-form-feature": {

‎public/locales/ru/remnawave.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,11 @@
246246
"loading-user-creation": "Загрузка создания пользователя...",
247247
"create-user": "Создать пользователя",
248248
"email-of-a-user": "Email пользователя",
249-
"telegram-id-of-a-user-in-telegram": "Telegram ID пользователя в Telegram"
249+
"telegram-id-of-a-user-in-telegram": "Telegram ID пользователя в Telegram",
250+
"1-month": "+1 мес.",
251+
"1-year": "+1 год",
252+
"2099-year": "2099 год",
253+
"3-months": "+3 мес."
250254
}
251255
},
252256
"login-form-feature": {

‎src/features/ui/dashboard/users/bulk-all-user-actions-tabs/bulk-all-user-actions-tabs.update.tab.feature.tsx‎

Lines changed: 63 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1-
import {
2-
PiCalendar,
3-
PiClockDuotone,
4-
PiEnvelopeDuotone,
5-
PiPencil,
6-
PiTelegramLogoDuotone,
7-
PiX
8-
} from 'react-icons/pi'
91
import {
102
Button,
113
Divider,
4+
Group,
125
NumberInput,
136
Select,
147
Stack,
158
Text,
169
Textarea,
1710
TextInput
1811
} from '@mantine/core'
12+
import {
13+
PiCalendar,
14+
PiClockDuotone,
15+
PiEnvelopeDuotone,
16+
PiPencil,
17+
PiTelegramLogoDuotone,
18+
PiX
19+
} from 'react-icons/pi'
1920
import { BulkAllUpdateUsersCommand } from '@remnawave/backend-contract'
2021
import { useForm, zodResolver } from '@mantine/form'
2122
import { DateTimePicker } from '@mantine/dates'
@@ -135,17 +136,71 @@ export const BulkAllUserActionsUpdateTabFeature = (props: IProps) => {
135136

136137
<DateTimePicker
137138
clearable
139+
key={form.key('expireAt')}
138140
label={t('bulk-all-user-actions-tabs.update.tab.feature.expire-date')}
139141
leftSection={<PiCalendar size="1rem" />}
140142
placeholder={t(
141143
'bulk-all-user-actions-tabs.update.tab.feature.select-expiration-date'
142144
)}
143145
valueFormat="MMMM D, YYYY - HH:mm"
144146
{...form.getInputProps('expireAt')}
147+
description={
148+
<Group gap="xs" mb="xs" mt="xs">
149+
<Button
150+
onClick={() => {
151+
const currentDate = new Date()
152+
const newDate = new Date(currentDate)
153+
newDate.setMonth(newDate.getMonth() + 1)
154+
form.setFieldValue('expireAt', newDate)
155+
}}
156+
size="compact-xs"
157+
variant="light"
158+
>
159+
{t('create-user-modal.widget.1-month')}
160+
</Button>
161+
<Button
162+
onClick={() => {
163+
const currentDate = new Date()
164+
const newDate = new Date(currentDate)
165+
newDate.setMonth(newDate.getMonth() + 3)
166+
form.setFieldValue('expireAt', newDate)
167+
}}
168+
size="compact-xs"
169+
variant="light"
170+
>
171+
{t('create-user-modal.widget.3-months')}
172+
</Button>
173+
<Button
174+
onClick={() => {
175+
const currentDate = new Date()
176+
const newDate = new Date(currentDate)
177+
newDate.setFullYear(newDate.getFullYear() + 1)
178+
form.setFieldValue('expireAt', newDate)
179+
}}
180+
size="compact-xs"
181+
variant="light"
182+
>
183+
{t('create-user-modal.widget.1-year')}
184+
</Button>
185+
<Button
186+
onClick={() => {
187+
const newDate = new Date()
188+
newDate.setFullYear(2099)
189+
form.setFieldValue('expireAt', newDate)
190+
}}
191+
size="compact-xs"
192+
variant="light"
193+
>
194+
{t('create-user-modal.widget.2099-year')}
195+
</Button>
196+
</Group>
197+
}
198+
highlightToday
145199
/>
146200

147201
<NumberInput
148202
allowDecimal={false}
203+
hideControls
149204
key={form.key('telegramId')}
150205
label="Telegram ID"
151206
leftSection={<PiTelegramLogoDuotone size="1rem" />}

‎src/features/ui/dashboard/users/bulk-user-actions-tabs/bulk-user-actions.update.tab.feature.tsx‎

Lines changed: 62 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1-
import {
2-
PiCalendar,
3-
PiClockDuotone,
4-
PiEnvelopeDuotone,
5-
PiPencil,
6-
PiTelegramLogoDuotone,
7-
PiX
8-
} from 'react-icons/pi'
91
import {
102
Button,
113
Divider,
4+
Group,
125
NumberInput,
136
Select,
147
Stack,
158
Text,
169
Textarea,
1710
TextInput
1811
} from '@mantine/core'
12+
import {
13+
PiCalendar,
14+
PiClockDuotone,
15+
PiEnvelopeDuotone,
16+
PiPencil,
17+
PiTelegramLogoDuotone,
18+
PiX
19+
} from 'react-icons/pi'
1920
import { BulkUpdateUsersCommand } from '@remnawave/backend-contract'
2021
import { useForm, zodResolver } from '@mantine/form'
2122
import { DateTimePicker } from '@mantine/dates'
@@ -155,6 +156,59 @@ export const BulkUserActionsUpdateTabFeature = (props: IProps) => {
155156

156157
<DateTimePicker
157158
clearable
159+
description={
160+
<Group gap="xs" mb="xs" mt="xs">
161+
<Button
162+
onClick={() => {
163+
const currentDate = new Date()
164+
const newDate = new Date(currentDate)
165+
newDate.setMonth(newDate.getMonth() + 1)
166+
form.setFieldValue('fields.expireAt', newDate)
167+
}}
168+
size="compact-xs"
169+
variant="light"
170+
>
171+
{t('create-user-modal.widget.1-month')}
172+
</Button>
173+
<Button
174+
onClick={() => {
175+
const currentDate = new Date()
176+
const newDate = new Date(currentDate)
177+
newDate.setMonth(newDate.getMonth() + 3)
178+
form.setFieldValue('fields.expireAt', newDate)
179+
}}
180+
size="compact-xs"
181+
variant="light"
182+
>
183+
{t('create-user-modal.widget.3-months')}
184+
</Button>
185+
<Button
186+
onClick={() => {
187+
const currentDate = new Date()
188+
const newDate = new Date(currentDate)
189+
newDate.setFullYear(newDate.getFullYear() + 1)
190+
form.setFieldValue('fields.expireAt', newDate)
191+
}}
192+
size="compact-xs"
193+
variant="light"
194+
>
195+
{t('create-user-modal.widget.1-year')}
196+
</Button>
197+
<Button
198+
onClick={() => {
199+
const newDate = new Date()
200+
newDate.setFullYear(2099)
201+
form.setFieldValue('fields.expireAt', newDate)
202+
}}
203+
size="compact-xs"
204+
variant="light"
205+
>
206+
{t('create-user-modal.widget.2099-year')}
207+
</Button>
208+
</Group>
209+
}
210+
highlightToday
211+
key={form.key('fields.expireAt')}
158212
label={t('bulk-user-actions.update.tab.feature.expire-date')}
159213
leftSection={<PiCalendar size="1rem" />}
160214
placeholder={t('bulk-user-actions.update.tab.feature.select-expiration-date')}

‎src/shared/constants/theme/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const theme = createTheme({
1919
},
2020
scale: 1,
2121
fontSmoothing: true,
22-
focusRing: 'auto',
22+
focusRing: 'never',
2323
white: '#ffffff',
2424
black: '#24292f',
2525
colors: {

‎src/widgets/dashboard/users/create-user-modal/create-user-modal.widget.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,61 @@ export const CreateUserModalWidget = () => {
174174
required
175175
valueFormat="MMMM D, YYYY - HH:mm"
176176
{...form.getInputProps('expireAt')}
177+
description={
178+
<Group gap="xs" mb="xs" mt="xs">
179+
<Button
180+
onClick={() => {
181+
const currentDate =
182+
form.values.expireAt || new Date()
183+
const newDate = new Date(currentDate)
184+
newDate.setMonth(newDate.getMonth() + 1)
185+
form.setFieldValue('expireAt', newDate)
186+
}}
187+
size="compact-xs"
188+
variant="light"
189+
>
190+
{t('create-user-modal.widget.1-month')}
191+
</Button>
192+
<Button
193+
onClick={() => {
194+
const currentDate =
195+
form.values.expireAt || new Date()
196+
const newDate = new Date(currentDate)
197+
newDate.setMonth(newDate.getMonth() + 3)
198+
form.setFieldValue('expireAt', newDate)
199+
}}
200+
size="compact-xs"
201+
variant="light"
202+
>
203+
{t('create-user-modal.widget.3-months')}
204+
</Button>
205+
<Button
206+
onClick={() => {
207+
const currentDate =
208+
form.values.expireAt || new Date()
209+
const newDate = new Date(currentDate)
210+
newDate.setFullYear(newDate.getFullYear() + 1)
211+
form.setFieldValue('expireAt', newDate)
212+
}}
213+
size="compact-xs"
214+
variant="light"
215+
>
216+
{t('create-user-modal.widget.1-year')}
217+
</Button>
218+
<Button
219+
onClick={() => {
220+
const newDate = new Date()
221+
newDate.setFullYear(2099)
222+
form.setFieldValue('expireAt', newDate)
223+
}}
224+
size="compact-xs"
225+
variant="light"
226+
>
227+
{t('create-user-modal.widget.2099-year')}
228+
</Button>
229+
</Group>
230+
}
231+
highlightToday
177232
leftSection={<PiCalendarDuotone size="1rem" />}
178233
/>
179234

‎src/widgets/dashboard/users/view-user-modal/view-user-modal.widget.tsx‎

Lines changed: 55 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -279,17 +279,6 @@ export const ViewUserModal = () => {
279279
}
280280
/>
281281

282-
<TextInput
283-
disabled
284-
label={t('view-user-modal.widget.last-traffic-reset-at')}
285-
leftSection={<PiCalendarDuotone size="1rem" />}
286-
value={
287-
user?.lastTrafficResetAt
288-
? dayjs(user.lastTrafficResetAt).format('DD/MM/YYYY HH:mm')
289-
: t('view-user-modal.widget.never')
290-
}
291-
/>
292-
293282
<NumberInput
294283
allowDecimal={false}
295284
allowNegative={false}
@@ -380,11 +369,66 @@ export const ViewUserModal = () => {
380369
/>
381370

382371
<DateTimePicker
372+
highlightToday
383373
key={form.key('expireAt')}
384374
label={t('create-user-modal.widget.expiry-date')}
385375
minDate={new Date()}
386376
valueFormat="MMMM D, YYYY - HH:mm"
387377
{...form.getInputProps('expireAt')}
378+
description={
379+
<Group gap="xs" mb="xs" mt="xs">
380+
<Button
381+
onClick={() => {
382+
const currentDate =
383+
form.values.expireAt || new Date()
384+
const newDate = new Date(currentDate)
385+
newDate.setMonth(newDate.getMonth() + 1)
386+
form.setFieldValue('expireAt', newDate)
387+
}}
388+
size="compact-xs"
389+
variant="light"
390+
>
391+
{t('create-user-modal.widget.1-month')}
392+
</Button>
393+
<Button
394+
onClick={() => {
395+
const currentDate =
396+
form.values.expireAt || new Date()
397+
const newDate = new Date(currentDate)
398+
newDate.setMonth(newDate.getMonth() + 3)
399+
form.setFieldValue('expireAt', newDate)
400+
}}
401+
size="compact-xs"
402+
variant="light"
403+
>
404+
{t('create-user-modal.widget.3-months')}
405+
</Button>
406+
<Button
407+
onClick={() => {
408+
const currentDate =
409+
form.values.expireAt || new Date()
410+
const newDate = new Date(currentDate)
411+
newDate.setFullYear(newDate.getFullYear() + 1)
412+
form.setFieldValue('expireAt', newDate)
413+
}}
414+
size="compact-xs"
415+
variant="light"
416+
>
417+
{t('create-user-modal.widget.1-year')}
418+
</Button>
419+
<Button
420+
onClick={() => {
421+
const newDate = new Date()
422+
newDate.setFullYear(2099)
423+
form.setFieldValue('expireAt', newDate)
424+
}}
425+
size="compact-xs"
426+
variant="light"
427+
>
428+
{t('create-user-modal.widget.2099-year')}
429+
</Button>
430+
</Group>
431+
}
388432
leftSection={<PiCalendarDuotone size="1rem" />}
389433
/>
390434

0 commit comments

Comments
 (0)