feat: enhance JiraDashboardPage with new components and improved UI

- Integrated `PeriodSelector`, `SkeletonGrid`, and `MetricsGrid` for better data visualization and user interaction.
- Replaced legacy period selection and error display with new components for a cleaner UI.
- Updated `UIShowcaseClient` to demonstrate new Jira dashboard components, enhancing showcase functionality.

src/components/ui/PeriodSelector.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PeriodOption {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+interface PeriodSelectorProps {
+  options: PeriodOption[];
+  selectedValue: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+}
+
+export function PeriodSelector({ 
+  options, 
+  selectedValue, 
+  onValueChange, 
+  className 
+}: PeriodSelectorProps) {
+  return (
+    <div className={cn(
+      "flex bg-[var(--card)] border border-[var(--border)] rounded-lg p-1",
+      className
+    )}>
+      {options.map((option) => (
+        <button
+          key={option.value}
+          onClick={() => onValueChange(option.value)}
+          className={cn(
+            "px-3 py-1 text-sm rounded transition-all flex items-center gap-1",
+            selectedValue === option.value
+              ? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
+              : 'text-[var(--muted-foreground)] hover:text-[var(--foreground)]'
+          )}
+        >
+          {option.icon && <span>{option.icon}</span>}
+          <span>{option.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}