@umituz/web-dashboard 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Dashboard Layout System - Customizable, themeable dashboard layouts and settings",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/billing/constants/billing.ts

@@ -0,0 +1,69 @@
+/**
+ * Billing Constants
+ *
+ * Centralized constants for billing domain to avoid hardcoded strings
+ */
+
+/**
+ * Subscription status constants
+ */
+export const SUBSCRIPTION_STATUS = {
+  ACTIVE: "active",
+  TRIALING: "trialing",
+  PAST_DUE: "past_due",
+  CANCELED: "canceled",
+  UNPAID: "unpaid",
+  INCOMPLETE: "incomplete",
+  REVOKED: "revoked",
+} as const;
+
+export type SubscriptionStatus = typeof SUBSCRIPTION_STATUS[keyof typeof SUBSCRIPTION_STATUS];
+
+/**
+ * Invoice status constants
+ */
+export const INVOICE_STATUS = {
+  DRAFT: "draft",
+  OPEN: "open",
+  PAID: "paid",
+  VOID: "void",
+  UNCOLLECTIBLE: "uncollectible",
+  REFUNDED: "refunded",
+} as const;
+
+export type InvoiceStatus = typeof INVOICE_STATUS[keyof typeof INVOICE_STATUS];
+
+/**
+ * Billing cycle constants
+ */
+export const BILLING_CYCLE = {
+  MONTHLY: "monthly",
+  YEARLY: "yearly",
+} as const;
+
+export type BillingCycle = typeof BILLING_CYCLE[keyof typeof BILLING_CYCLE];
+
+/**
+ * Currency constants
+ */
+export const CURRENCY = {
+  USD: "USD",
+  EUR: "EUR",
+  GBP: "GBP",
+  TRY: "TRY",
+  JPY: "JPY",
+} as const;
+
+export type Currency = typeof CURRENCY[keyof typeof CURRENCY];
+
+/**
+ * Plan type constants
+ */
+export const PLAN_TYPE = {
+  STANDARD: "standard",
+  PRO: "pro",
+  BUSINESS: "business",
+  ENTERPRISE: "enterprise",
+} as const;
+
+export type PlanType = typeof PLAN_TYPE[keyof typeof PLAN_TYPE];

package/src/domains/billing/types/billing.ts

@@ -5,22 +5,22 @@
  */
 
 import type { ComponentType, ReactElement } from "react";
+import { SUBSCRIPTION_STATUS, INVOICE_STATUS, BILLING_CYCLE, CURRENCY } from "../constants/billing";
 
 /**
  * Billing cycle
  */
-export type BillingCycle = "monthly" | "yearly";
+export type BillingCycle = typeof BILLING_CYCLE[keyof typeof BILLING_CYCLE];
 
 /**
  * Subscription status
  */
-export type SubscriptionStatus =
-  | "active"
-  | "trialing"
-  | "past_due"
-  | "canceled"
-  | "unpaid"
-  | "incomplete";
+export type SubscriptionStatus = typeof SUBSCRIPTION_STATUS[keyof typeof SUBSCRIPTION_STATUS];
+
+/**
+ * Invoice status
+ */
+export type InvoiceStatus = typeof INVOICE_STATUS[keyof typeof INVOICE_STATUS];
 
 /**
  * Plan type
@@ -30,7 +30,7 @@ export type PlanType = "free" | "basic" | "pro" | "enterprise" | "custom";
 /**
  * Currency
  */
-export type Currency = "USD" | "EUR" | "GBP" | "TRY" | "JPY";
+export type Currency = typeof CURRENCY[keyof typeof CURRENCY];
 
 /**
  * Plan pricing tier
@@ -133,11 +133,6 @@ export interface PaymentMethod {
   createdAt: string;
 }
 
-/**
- * Invoice status
- */
-export type InvoiceStatus = "draft" | "open" | "paid" | "void" | "uncollectible";
-
 /**
  * Invoice item
  */

package/src/domains/layouts/components/DashboardSidebar.tsx

@@ -97,16 +97,18 @@ export const DashboardSidebar = ({
                 {!collapsed && (
                   <button
                     onClick={() => toggleGroup(group.title)}
-                    className="w-full flex items-center justify-between px-3 mb-2 group/header"
+                    className="w-full flex items-center justify-between px-3 py-2 mb-1 rounded-lg hover:bg-sidebar-accent/30 transition-all duration-200 group/header"
                   >
                     <span className="text-[10px] font-bold uppercase tracking-widest text-sidebar-foreground/40 group-hover/header:text-sidebar-foreground/70 transition-colors">
                       {group.title === "sidebar.ai" ? `${brandName} AI` : t(group.title)}
                     </span>
-                    {isGroupCollapsed ? (
-                      <ChevronRight className="h-3 w-3 text-sidebar-foreground/30 flex-shrink-0 group-hover/header:text-sidebar-foreground/50 transition-colors" />
-                    ) : (
-                      <ChevronDown className="h-3 w-3 text-sidebar-foreground/30 flex-shrink-0 group-hover/header:text-sidebar-foreground/50 transition-colors" />
-                    )}
+                    <div className="flex-shrink-0">
+                      {isGroupCollapsed ? (
+                        <ChevronRight className="h-3.5 w-3.5 text-sidebar-foreground/30 transition-transform duration-200 group-hover/header:text-sidebar-foreground/50" />
+                      ) : (
+                        <ChevronDown className="h-3.5 w-3.5 text-sidebar-foreground/30 transition-transform duration-200 group-hover/header:text-sidebar-foreground/50" />
+                      )}
+                    </div>
                   </button>
                 )}
 
@@ -116,14 +118,14 @@ export const DashboardSidebar = ({
                     <Link
                       key={item.path}
                       to={item.path}
-                      className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 ${
+                      className={`flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200 ${
                         active
                           ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
                           : "text-sidebar-foreground/70 hover:bg-sidebar-accent/40 hover:text-sidebar-foreground"
                       } ${collapsed ? "justify-center" : ""}`}
                       title={collapsed ? t(item.label) : undefined}
                     >
-                      <item.icon className={`h-4 w-4 shrink-0 transition-transform ${active && "scale-110"}`} />
+                      <item.icon className={`h-4 w-4 shrink-0 transition-transform duration-200 ${active && "scale-110"}`} />
                       {!collapsed && <span>{t(item.label)}</span>}
                     </Link>
                   );