tenantpilot/app/(app)/search/PolicyExplorerClient.tsx
Ahmed Darrazi f592e5f55b feat: Policy Explorer UX Upgrade (003)
Implemented MVP with all core features:
- Browse 50 newest policies on load with null filtering
- Click row to view details in slide-over sheet
- JSON detection and pretty formatting
- Search with real-time filtering
- Badge colors for policy types (Security=red, Compliance=blue, Config=gray, App=outline)
- Navigation consolidated to 'Policy Explorer'

New components:
- PolicyTable.tsx - table with badges and hover effects
- PolicySearchContainer.tsx - search state management
- PolicyDetailSheet.tsx - JSON detail view with formatting
- PolicyExplorerClient.tsx - client wrapper
- lib/utils/policyBadges.ts - badge color mapping

Updated:
- lib/actions/policySettings.ts - added getRecentPolicySettings() with null filtering
- app/(app)/search/page.tsx - converted to Server Component
- config/nav.ts - renamed Search to Policy Explorer, removed All Settings
- components/search/EmptyState.tsx - updated messaging

Tasks complete: 36/47 (MVP ready)
- Phase 1-7: All critical features implemented
- Phase 8: Core polish complete (T041), optional tasks remain

TypeScript:  No errors
Status: Production-ready MVP
2025-12-07 02:28:15 +01:00

38 lines
1.0 KiB
TypeScript

'use client';
import { useState } from 'react';
import { PolicySearchContainer } from '@/components/policy-explorer/PolicySearchContainer';
import { PolicyDetailSheet } from '@/components/policy-explorer/PolicyDetailSheet';
import type { PolicySettingSearchResult } from '@/lib/actions/policySettings';
interface PolicyExplorerClientProps {
initialPolicies: PolicySettingSearchResult[];
}
export function PolicyExplorerClient({
initialPolicies,
}: PolicyExplorerClientProps) {
const [selectedPolicy, setSelectedPolicy] = useState<PolicySettingSearchResult | null>(null);
const [sheetOpen, setSheetOpen] = useState(false);
const handlePolicyClick = (policy: PolicySettingSearchResult) => {
setSelectedPolicy(policy);
setSheetOpen(true);
};
return (
<>
<PolicySearchContainer
initialPolicies={initialPolicies}
onPolicyClick={handlePolicyClick}
/>
<PolicyDetailSheet
policy={selectedPolicy}
open={sheetOpen}
onOpenChange={setSheetOpen}
/>
</>
);
}