chore(dashboard): show and separate deleted apps on the permitted and unpermitted tabs

Author: awisniew207

packages/apps/app-dashboard/src/components/user-dashboard/dashboard/PermittedAppsPage.tsx

@@ -88,6 +88,29 @@ export function PermittedAppsPage({
 
   const emptyState = getEmptyStateMessage();
 
+  // Separate active and deleted apps for display purposes (only for permitted/unpermitted views)
+  const activeApps = apps.filter((app) => {
+    const permission =
+      permittedPkps.find((p) => p.appId === app.appId) ||
+      unpermittedPkps.find((p) => p.appId === app.appId);
+    return !permission?.isDeleted;
+  });
+
+  const deletedApps = apps.filter((app) => {
+    const permission =
+      permittedPkps.find((p) => p.appId === app.appId) ||
+      unpermittedPkps.find((p) => p.appId === app.appId);
+    return permission?.isDeleted;
+  });
+
+  // Determine if we should show the deleted section separately
+  const shouldShowDeletedSection =
+    (filterState === 'permitted' || filterState === 'unpermitted') && deletedApps.length > 0;
+
+  // Apps to display in the main grid (active apps for permitted/unpermitted, all apps for deleted/all)
+  const mainGridApps =
+    filterState === 'permitted' || filterState === 'unpermitted' ? activeApps : apps;
+
   return (
     <motion.div
       initial={{ opacity: 0 }}
@@ -228,26 +251,76 @@ export function PermittedAppsPage({
               </div>
             </div>
           ) : (
-            <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
-              {apps.map((app, index) => {
-                const permittedPermission = permittedPkps.find((p) => p.appId === app.appId);
-                const unpermittedPermission = unpermittedPkps.find((p) => p.appId === app.appId);
-                const permission = permittedPermission || unpermittedPermission;
-                const isUnpermitted = !!unpermittedPermission && !permittedPermission;
-                const isDeleted = permission?.isDeleted ?? false;
-                return (
-                  <PermittedAppCard
-                    key={app.appId}
-                    app={app}
-                    permission={permission}
-                    isUnpermitted={isUnpermitted}
-                    isDeleted={isDeleted}
-                    index={index}
-                    appVersionsMap={appVersionsMap}
-                  />
-                );
-              })}
-            </div>
+            <>
+              {/* Main grid - active apps for permitted/unpermitted, all apps for deleted/all */}
+              <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
+                {mainGridApps.map((app, index) => {
+                  const permittedPermission = permittedPkps.find((p) => p.appId === app.appId);
+                  const unpermittedPermission = unpermittedPkps.find((p) => p.appId === app.appId);
+                  const permission = permittedPermission || unpermittedPermission;
+                  const isUnpermitted = !!unpermittedPermission && !permittedPermission;
+                  const isDeleted = permission?.isDeleted ?? false;
+                  return (
+                    <PermittedAppCard
+                      key={app.appId}
+                      app={app}
+                      permission={permission}
+                      isUnpermitted={isUnpermitted}
+                      isDeleted={isDeleted}
+                      index={index}
+                      appVersionsMap={appVersionsMap}
+                    />
+                  );
+                })}
+              </div>
+
+              {/* Show deleted apps section for permitted/unpermitted views */}
+              {shouldShowDeletedSection && (
+                <>
+                  {/* Divider */}
+                  <div className="my-8 flex items-center gap-4">
+                    <div className={`flex-1 border-t ${theme.cardBorder}`} />
+                    <div
+                      className={`px-4 py-2 rounded-lg ${theme.itemBg} ${theme.cardBorder} border`}
+                    >
+                      <p
+                        className={`text-sm font-semibold ${theme.text} whitespace-nowrap`}
+                        style={fonts.heading}
+                      >
+                        {filterState === 'permitted'
+                          ? 'Deleted Apps (Still Permitted)'
+                          : 'Deleted Apps (Unpermitted)'}
+                      </p>
+                    </div>
+                    <div className={`flex-1 border-t ${theme.cardBorder}`} />
+                  </div>
+
+                  {/* Deleted apps grid */}
+                  <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
+                    {deletedApps.map((app, index) => {
+                      const permittedPermission = permittedPkps.find((p) => p.appId === app.appId);
+                      const unpermittedPermission = unpermittedPkps.find(
+                        (p) => p.appId === app.appId,
+                      );
+                      const permission = permittedPermission || unpermittedPermission;
+                      const isUnpermitted = !!unpermittedPermission && !permittedPermission;
+                      const isDeleted = permission?.isDeleted ?? false;
+                      return (
+                        <PermittedAppCard
+                          key={app.appId}
+                          app={app}
+                          permission={permission}
+                          isUnpermitted={isUnpermitted}
+                          isDeleted={isDeleted}
+                          index={index + mainGridApps.length}
+                          appVersionsMap={appVersionsMap}
+                        />
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+            </>
           )}
         </div>
       </div>

packages/apps/app-dashboard/src/components/user-dashboard/dashboard/PermittedAppsWrapper.tsx

@@ -42,26 +42,29 @@ export function PermittedAppsWrapper() {
 
   // Get permitted, unpermitted, and deleted apps
   const { permittedApps, unpermittedApps, deletedApps } = useMemo(() => {
-    if (!allApps) return { permittedApps: [], unpermittedApps: [], deletedApps: [] };
+    if (!allApps)
+      return {
+        permittedApps: [],
+        unpermittedApps: [],
+        deletedApps: [],
+      };
 
     // Build sets of appIds for each category in a single pass
     const permittedAppIds = new Set<number>();
     const unpermittedAppIds = new Set<number>();
     const deletedAppIds = new Set<number>();
 
     permittedPkps.forEach((p) => {
+      permittedAppIds.add(p.appId);
       if (p.isDeleted) {
         deletedAppIds.add(p.appId);
-      } else {
-        permittedAppIds.add(p.appId);
       }
     });
 
     unpermittedPkps.forEach((p) => {
+      unpermittedAppIds.add(p.appId);
       if (p.isDeleted) {
         deletedAppIds.add(p.appId);
-      } else {
-        unpermittedAppIds.add(p.appId);
       }
     });
 
@@ -71,16 +74,22 @@ export function PermittedAppsWrapper() {
     const deleted: typeof allApps = [];
 
     allApps.forEach((app) => {
-      if (deletedAppIds.has(app.appId)) {
-        deleted.push(app);
-      } else if (permittedAppIds.has(app.appId)) {
+      if (permittedAppIds.has(app.appId)) {
         permitted.push(app);
       } else if (unpermittedAppIds.has(app.appId)) {
         unpermitted.push(app);
       }
+
+      if (deletedAppIds.has(app.appId)) {
+        deleted.push(app);
+      }
     });
 
-    return { permittedApps: permitted, unpermittedApps: unpermitted, deletedApps: deleted };
+    return {
+      permittedApps: permitted,
+      unpermittedApps: unpermitted,
+      deletedApps: deleted,
+    };
   }, [allApps, permittedPkps, unpermittedPkps]);
 
   // Filter apps based on filter state
@@ -93,7 +102,8 @@ export function PermittedAppsWrapper() {
       case 'deleted':
         return deletedApps;
       case 'all':
-        return [...permittedApps, ...unpermittedApps, ...deletedApps];
+        // permittedApps and unpermittedApps already include deleted apps, so just combine them
+        return [...permittedApps, ...unpermittedApps];
       default:
         return permittedApps;
     }