refactor(alert-settings): integrate AppShell layout and update cache version

- Replace custom page layout with AppShell component for consistent UI
- Remove unused PageHeader and UpdateAlertConditionDto imports
- Update service worker cache names and version.json to new timestamp

src/components/cards/DeviceCard.tsx

@@ -4,14 +4,48 @@ import { DeviceDto } from '@/lib/api'
 
 type DeviceCardProps = {
     device: DeviceDto
-    href: string
+    href?: string
+    onClick?: () => void
     className?: string
 }
 
-export function DeviceCard({ device, href, className }: DeviceCardProps) {
+export function DeviceCard({ device, href, onClick, className }: DeviceCardProps) {
+    if (onClick) {
+        return (
+            <div
+                onClick={onClick}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClick(); }}
+                className={`group bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 p-6 relative cursor-pointer ${className || ''}`}
+            >
+                <div className="flex items-start gap-4">
+                    <div className="flex-shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
+                        <Settings className="w-7 h-7 text-white" />
+                    </div>
+                    <div className="flex-1">
+                        <h3 className="text-xl font-semibold text-gray-900 mb-1 group-hover:text-green-600 transition-colors">
+                            {device.deviceName}
+                        </h3>
+                        <p className="text-sm text-gray-500 mb-2">
+                            {device.location || 'بدون موقعیت'}
+                        </p>
+                        <div className="flex items-center gap-2 text-xs text-gray-400">
+                            <span>{device.userName} {device.userFamily}</span>
+                        </div>
+                    </div>
+                    <div className="flex-shrink-0">
+                        <Calendar className="w-5 h-5 text-gray-400 group-hover:text-green-600 transition-colors" />
+                    </div>
+                </div>
+                <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-green-500 to-green-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
+            </div>
+        )
+    }
+
     return (
         <Link
-            href={href}
+            href={href || '#'}
             className={`group bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 p-6 relative ${className || ''}`}
         >
             <div className="flex items-start gap-4">