Improve dynamic groups page display by adding helper functions and enhancing data handling

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/6f9f487d-e6ef-4a31-80c1-d28b62e5b63d.jpg

client/src/pages/dynamic-groups-page.tsx

@@ -33,7 +33,7 @@ interface DynamicGroupRule {
   }[];
 }
 
-// Helper functions are defined inside the component
+// Helper functions are defined and used in their respective components
 
 export default function DynamicGroupsPage() {
   const { toast } = useToast();
@@ -41,7 +41,7 @@ export default function DynamicGroupsPage() {
   const [modalOpen, setModalOpen] = React.useState(false);
   const [selectedRuleId, setSelectedRuleId] = React.useState<number | undefined>(undefined);
 
-  const { data: dynamicGroupRules, isLoading } = useQuery({
+  const { data: dynamicGroupRules = [], isLoading } = useQuery<DynamicGroupRule[]>({
     queryKey: ["/api/dynamic-group-rules"],
     retry: false,
   });
@@ -137,7 +137,7 @@ export default function DynamicGroupsPage() {
 
   // Filter the rules based on the active tab
   const filteredRules = React.useMemo(() => {
-    if (!dynamicGroupRules) return [];
+    if (!dynamicGroupRules || !Array.isArray(dynamicGroupRules)) return [];
     return activeTab === "active"
       ? dynamicGroupRules.filter((rule: DynamicGroupRule) => rule.enabled)
       : dynamicGroupRules.filter((rule: DynamicGroupRule) => !rule.enabled);
@@ -206,6 +206,8 @@ export default function DynamicGroupsPage() {
               onToggle={handleToggleRule}
               onEdit={handleEditRule}
               onCreateNew={handleCreateRule}
+              formatLastRunTime={formatLastRunTime}
+              getStatusBadge={getStatusBadge}
             />
           </TabsContent>
           
@@ -218,6 +220,8 @@ export default function DynamicGroupsPage() {
               onToggle={handleToggleRule}
               onEdit={handleEditRule}
               onCreateNew={handleCreateRule}
+              formatLastRunTime={formatLastRunTime}
+              getStatusBadge={getStatusBadge}
             />
           </TabsContent>
         </Tabs>
@@ -244,9 +248,21 @@ interface RulesListProps {
   onToggle: (id: number, currentStatus: boolean) => void;
   onEdit: (id: number) => void;
   onCreateNew: () => void;
+  formatLastRunTime: (lastRun: string | null) => string;
+  getStatusBadge: (status: string | null) => React.ReactNode;
 }
 
-function RulesList({ rules, isLoading, onDelete, onRunNow, onToggle, onEdit, onCreateNew }: RulesListProps) {
+function RulesList({ 
+  rules, 
+  isLoading, 
+  onDelete, 
+  onRunNow, 
+  onToggle, 
+  onEdit, 
+  onCreateNew,
+  formatLastRunTime,
+  getStatusBadge
+}: RulesListProps) {
   if (isLoading) {
     return (
       <div className="space-y-4">