[PT2025BMHW-110][SuperAdminAPI,SuperAdminUI,Infrastructure] Implement tenant list sorting and filtering (#148)

Author: jusiaaxe

Frontend/apps/superadmin/src/components/tenants/TenantsPage.tsx

@@ -2,6 +2,7 @@ import type { Tenant, TenantSortField, TenantStatus } from '@ngo-platform/shared
 import { Alert, Badge, Button, Card, CardContent, CardHeader, CardTitle, Icon, Spinner, features } from '@ngo-platform/shared';
 import { type FC, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { CreateTenantDialog } from './CreateTenantDialog';
 
 const ITEMS_PER_PAGE = 10;
 
@@ -18,6 +19,9 @@ export const TenantsPage: FC = () => {
     page: currentPage,
     pageSize: ITEMS_PER_PAGE,
     search: searchQuery || undefined,
+    isActive: statusFilter === 'All' ? undefined : statusFilter === 'Active',
+    sortBy: sortField,
+    sortOrder: sortOrder,
   });
 
   const tenants = tenantResponse?.items ?? [];
@@ -81,6 +85,11 @@ export const TenantsPage: FC = () => {
     // TODO: Show confirmation dialog and delete
   };
 
+  const handleCreateSuccess = () => {
+    setIsCreateDialogOpen(false);
+    // Optionally refresh the list or show a success message
+  };
+
   const goToPage = (page: number) => {
     if (page >= 1 && page <= totalPages) {
       setCurrentPage(page);
@@ -166,23 +175,6 @@ export const TenantsPage: FC = () => {
           </CardContent>
         </Card>
 
-        <Card className="border-l-4 border-l-warning-500">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-neutral-600 dark:text-neutral-400">Suspended</p>
-                <p className="text-2xl font-bold text-neutral-900 dark:text-white">
-                  {/* TODO: Backend does not provide suspended status yet, only isActive */}
-                  {tenants.filter(t => !t.isActive && t.status === 'Suspended').length}
-                </p>
-              </div>
-              <div className="w-12 h-12 bg-warning-100 dark:bg-warning-900/30 rounded-full flex items-center justify-center">
-                <Icon name="alertTriangle" size={24} className="text-warning-600 dark:text-warning-400" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
         <Card className="border-l-4 border-l-warning-500">
           <CardContent className="p-4">
             <div className="flex items-center justify-between">

Frontend/apps/superadmin/src/pages/DashboardPage.tsx

@@ -5,7 +5,8 @@ import {
   Icon,
   useAuth,
   useLogout,
-  config
+  config,
+  features
 } from '@ngo-platform/shared';
 import { DashboardContent } from '../components/dashboard';
 import { TenantsPage } from '../components/tenants';
@@ -22,6 +23,12 @@ export const DashboardPage: FC = () => {
   const { mutate: logout } = useLogout(config.apis.superAdminApi);
   const { user } = useAuth();
 
+  // Fetch tenant count for sidebar badge
+  const { data: tenantResponse } = features.useTenants({
+    page: 1,
+    pageSize: 1, // Only need count, not actual data
+  });
+
   // Update URL when page changes
   useEffect(() => {
     setSearchParams({ page: activePage }, { replace: true });
@@ -115,9 +122,11 @@ export const DashboardPage: FC = () => {
               >
                 <Icon name="building" size={20} />
                 <span className="font-medium">Tenants</span>
-                <span className="ml-auto px-2 py-0.5 text-xs font-semibold bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full">
-                  24
-                </span>
+                {tenantResponse?.totalCount !== undefined && (
+                  <span className="ml-auto px-2 py-0.5 text-xs font-semibold bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full">
+                    {tenantResponse.totalCount}
+                  </span>
+                )}
               </button>
 
               <button

Frontend/packages/shared/src/config/index.ts

@@ -51,39 +51,24 @@ const getBaseUrl = (): string => {
   return 'localhost';
 };
 
-/**
- * Check if running in React Native environment
- */
-const isReactNative = (): boolean => {
-  return typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
-};
-
 /**
  * Get configuration based on current environment and platform
  */
 export const getConfig = (): PlatformConfig => {
   const environment = getEnvironment();
   const baseUrl = getBaseUrl();
-  const isMobile = isReactNative();
-
-  // Use HTTP for mobile development to avoid SSL issues with self-signed certificates
-  // Web apps continue to use HTTPS
-  const protocol = isMobile && environment === 'development' ? 'http' : 'https';
-
-  // Map ports: HTTPS (500x) -> HTTP (508x) for mobile development
-  const getPort = (basePort: number) => isMobile && environment === 'development' ? basePort : basePort;
 
   const configs: Record<typeof environment, PlatformConfig> = {
     development: {
       apis: {
-        sharedApi: `${protocol}://${baseUrl}:${getPort(5000)}`,
-        superAdminApi: `${protocol}://${baseUrl}:${getPort(5001)}`,
-        tenantAdminApi: `${protocol}://${baseUrl}:${getPort(5002)}`,
-        volunteerApi: `${protocol}://${baseUrl}:${getPort(5003)}`,
+        sharedApi: `https://${baseUrl}:5000`,
+        superAdminApi: `https://${baseUrl}:5001`,
+        tenantAdminApi: `https://${baseUrl}:5002`,
+        volunteerApi: `https://${baseUrl}:5003`,
       },
       apps: {
-        superAdmin: 'https://localhost:3001',
-        tenantAdmin: 'https://localhost:3000',
+        superAdmin: 'http://localhost:3001',
+        tenantAdmin: 'http://localhost:3000',
       },
       environment: 'development',
     },

Frontend/packages/shared/src/features/tenants/queries/index.ts

@@ -52,6 +52,8 @@ export function getTenantsQueryOptions(
           pageSize: params?.pageSize,
           searchTerm: params?.search,
           isActive: params?.isActive,
+          sortBy: params?.sortBy,
+          sortOrder: params?.sortOrder,
         },
       });
 

Infrastructure/NGOPlatform.AppHost/appsettings.Development.json

@@ -15,6 +15,8 @@
       "AllowedOrigins": [
         "https://localhost:3001",
         "http://localhost:3001",
+        "http://localhost:5174",
+        "https://localhost:5174",
         "https://localhost:3002",
         "http://localhost:3002",
         "https://localhost:3003",
@@ -25,6 +27,8 @@
       "AllowedOrigins": [
         "https://localhost:3000",
         "http://localhost:3000",
+        "http://localhost:5173",
+        "https://localhost:5173",
         "https://localhost:3002",
         "http://localhost:3002",
         "https://localhost:3003",

Infrastructure/NGOPlatform.SuperAdmin/NGOPlatform.SuperAdmin.Api/Controllers/TenantsController.cs

@@ -36,14 +36,18 @@ public async Task<IActionResult> GetAll(
         [FromQuery] int pageSize = 10,
         [FromQuery] string? searchTerm = null,
         [FromQuery] bool? isActive = null,
+        [FromQuery] string? sortBy = "createdAt",
+        [FromQuery] string? sortOrder = "desc",
         CancellationToken cancellationToken = default)
     {
         var query = new GetAllTenantsQuery
         {
             PageNumber = pageNumber,
             PageSize = pageSize,
             SearchTerm = searchTerm,
-            IsActive = isActive
+            IsActive = isActive,
+            SortBy = sortBy,
+            SortOrder = sortOrder
         };
 
         var result = await _mediator.Send(query, cancellationToken);

Infrastructure/NGOPlatform.SuperAdmin/NGOPlatform.SuperAdmin.Application/Queries/Tenants/GetAllTenantsQuery.cs

@@ -16,6 +16,8 @@ public partial record GetAllTenantsQuery : IQuery<PaginatedList<TenantListItemDt
     public int PageSize { get; init; } = 10;
     public string? SearchTerm { get; init; }
     public bool? IsActive { get; init; }
+    public string? SortBy { get; init; } = "createdAt";
+    public string? SortOrder { get; init; } = "desc";
 }
 
 /// <summary>
@@ -54,13 +56,30 @@ public async Task<PaginatedList<TenantListItemDto>> Handle(GetAllTenantsQuery re
             CreatedAt = tenant.CreatedAt
         }).ToList();
 
+        // Apply sorting in-memory (for now)
+        dtos = ApplySorting(dtos, request.SortBy, request.SortOrder);
+
         var result = new PaginatedList<TenantListItemDto>(dtos, totalCount, request.PageNumber, request.PageSize);
 
         _logger.LogInformation("Retrieved {Count} tenants (page {PageNumber} of {TotalPages})",
             dtos.Count, request.PageNumber, result.TotalPages);
 
         return result;
     }
+
+    private static List<TenantListItemDto> ApplySorting(List<TenantListItemDto> tenants, string? sortBy, string? sortOrder)
+    {
+        var isDescending = sortOrder?.ToLowerInvariant() == "desc";
+
+        return (sortBy?.ToLowerInvariant()) switch
+        {
+            "name" => isDescending ? tenants.OrderByDescending(t => t.Name).ToList() : tenants.OrderBy(t => t.Name).ToList(),
+            "subdomain" => isDescending ? tenants.OrderByDescending(t => t.Subdomain).ToList() : tenants.OrderBy(t => t.Subdomain).ToList(),
+            "isactive" => isDescending ? tenants.OrderByDescending(t => t.IsActive).ToList() : tenants.OrderBy(t => t.IsActive).ToList(),
+            "maxusers" => isDescending ? tenants.OrderByDescending(t => t.MaxUsers).ToList() : tenants.OrderBy(t => t.MaxUsers).ToList(),
+            "createdat" or _ => isDescending ? tenants.OrderByDescending(t => t.CreatedAt).ToList() : tenants.OrderBy(t => t.CreatedAt).ToList(),
+        };
+    }
 }
 
 /// <summary>