Update admin PWA events, branding, and packages

resources/js/admin/mobile/PackageShopPage.tsx

@@ -11,6 +11,7 @@ import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Pri
 import { useAdminTheme } from './theme';
 import { getPackages, Package, getTenantPackagesOverview, TenantPackageSummary } from '../api';
 import { useQuery } from '@tanstack/react-query';
+import { adminPath } from '../constants';
 import {
   buildPackageComparisonRows,
   classifyPackageChange,
@@ -170,6 +171,7 @@ export default function MobilePackageShopPage() {
             <PackageShopCompareView
               entries={packageEntries}
               onSelect={(pkg) => setSelectedPackage(pkg)}
+              onManage={() => navigate(adminPath('/mobile/billing#packages'))}
               catalogType={catalogType}
             />
           ) : (
@@ -184,6 +186,7 @@ export default function MobilePackageShopPage() {
                 isDowngrade={entry.isDowngrade}
                 catalogType={catalogType}
                 onSelect={() => setSelectedPackage(entry.pkg)}
+                onManage={() => navigate(adminPath('/mobile/billing#packages'))}
               />
             ))
           )}
@@ -201,7 +204,8 @@ function PackageShopCard({
     isUpgrade,
     isDowngrade,
     catalogType,
-    onSelect 
+    onSelect,
+    onManage,
 }: { 
     pkg: Package; 
     owned?: TenantPackageSummary;
@@ -210,7 +214,8 @@ function PackageShopCard({
     isUpgrade?: boolean;
     isDowngrade?: boolean;
     catalogType: 'endcustomer' | 'reseller';
-    onSelect: () => void 
+    onSelect: () => void;
+    onManage?: () => void;
 }) {
   const { textStrong, muted, border, primary, accentSoft } = useAdminTheme();
   const { t } = useTranslation('management');
@@ -219,15 +224,17 @@ function PackageShopCard({
   const statusLabel = getPackageStatusLabel({ t, isActive, owned });
   const isSubdued = Boolean(!isResellerCatalog && (isDowngrade || !isUpgrade) && !isActive);
   const canSelect = isResellerCatalog ? Boolean(pkg.paddle_price_id) : canSelectPackage(isUpgrade, isActive);
+  const hasManageAction = Boolean(isActive && onManage);
   const includedTierLabel = resolveIncludedTierLabel(t, pkg.included_package_slug ?? null);
+  const handlePress = isActive ? onManage : canSelect ? onSelect : undefined;
 
   return (
     <MobileCard
-      onPress={canSelect ? onSelect : undefined}
+      onPress={handlePress}
       borderColor={isRecommended ? primary : (isActive ? '$green8' : border)}
       borderWidth={isRecommended || isActive ? 2 : 1}
       space="$3"
-      pressStyle={canSelect ? { backgroundColor: accentSoft } : undefined}
+      pressStyle={handlePress ? { backgroundColor: accentSoft } : undefined}
       backgroundColor={isActive ? '$green1' : undefined}
       style={{ opacity: isSubdued ? 0.6 : 1 }}
     >
@@ -314,9 +321,9 @@ function PackageShopCard({
                 ? t('shop.select', 'Select')
                 : t('shop.selectDisabled', 'Not available')
         }
-        onPress={canSelect ? onSelect : undefined}
+        onPress={handlePress}
         tone={isResellerCatalog ? (canSelect ? 'primary' : 'ghost') : isActive || !isUpgrade ? 'ghost' : 'primary'}
-        disabled={!canSelect}
+        disabled={!canSelect && !hasManageAction}
       />
     </MobileCard>
   );
@@ -344,10 +351,12 @@ type PackageEntry = {
 function PackageShopCompareView({
   entries,
   onSelect,
+  onManage,
   catalogType,
 }: {
   entries: PackageEntry[];
   onSelect: (pkg: Package) => void;
+  onManage: () => void;
   catalogType: 'endcustomer' | 'reseller';
 }) {
   const { t } = useTranslation('management');
@@ -520,13 +529,14 @@ function PackageShopCompareView({
                   : entry.isUpgrade
                     ? t('shop.select', 'Select')
                     : t('shop.selectDisabled', 'Not available');
+              const handlePress = entry.isActive ? onManage : canSelect ? () => onSelect(entry.pkg) : undefined;
 
               return (
                 <YStack key={`cta-${entry.pkg.id}`} width={columnWidth} paddingHorizontal="$2">
                   <CTAButton
                     label={label}
-                    onPress={canSelect ? () => onSelect(entry.pkg) : undefined}
-                    disabled={!canSelect}
+                    onPress={handlePress}
+                    disabled={!canSelect && !entry.isActive}
                     tone={
                       catalogType === 'reseller'
                         ? canSelect