From b27b9287be0eb26fe5d5189b618a32db340c506c Mon Sep 17 00:00:00 2001
From: "web@ppanel" <web@ppanel.dev>
Date: Mon, 29 Dec 2025 05:42:05 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Enhance=20DatePicker=20comp?=
 =?UTF-8?q?onent=20with=20clear=20button=20and=20improved=20value=20handli?=
 =?UTF-8?q?ng?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user-subscription/subscription-form.tsx    | 12 ++++++------
 packages/ui/src/composed/date-picker.tsx       | 18 ++++++++++++++++--
 2 files changed, 22 insertions(+), 8 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 762acbe..3001fea 100644
--- a/apps/admin/src/sections/user/user-subscription/subscription-form.tsx
+++ b/apps/admin/src/sections/user/user-subscription/subscription-form.tsx
@@ -218,14 +218,14 @@ export function SubscriptionForm({
                     <FormControl>
                       <DatePicker
                         onChange={(value: number | null | undefined) => {
-                          if (value === field.value) {
-                            form.setValue(field.name, 0);
-                          } else {
-                            form.setValue(field.name, value!);
-                          }
+                          form.setValue(field.name, value || 0);
                         }}
                         placeholder={t("permanent", "Permanent")}
-                        value={field.value ?? undefined}
+                        value={
+                          field.value && field.value > 0
+                            ? field.value
+                            : undefined
+                        }
                       />
                     </FormControl>
                     <FormMessage />
diff --git a/packages/ui/src/composed/date-picker.tsx b/packages/ui/src/composed/date-picker.tsx
index a0678f4..acbbfe6 100644
--- a/packages/ui/src/composed/date-picker.tsx
+++ b/packages/ui/src/composed/date-picker.tsx
@@ -9,7 +9,7 @@ import {
 } from "@workspace/ui/components/popover";
 import { cn } from "@workspace/ui/lib/utils";
 import { intlFormat } from "date-fns";
-import { CalendarIcon } from "lucide-react";
+import { CalendarIcon, X } from "lucide-react";
 import * as React from "react";
 import type { DayPicker } from "react-day-picker";
 
@@ -45,7 +45,21 @@ export function DatePicker({
           variant="outline"
         >
           {value ? intlFormat(value) : <span>{placeholder}</span>}
-          <CalendarIcon className="size-4" />
+          <div className="flex items-center gap-2">
+            {value && (
+              <X
+                className="size-4 opacity-50 hover:opacity-100"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setDate(undefined);
+                  if (onChange) {
+                    onChange(0);
+                  }
+                }}
+              />
+            )}
+            <CalendarIcon className="size-4" />
+          </div>
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" className="w-auto p-0">