1- import React , { useState , useCallback , useMemo } from "react" ;
1+ import React , { useState , useCallback } from "react" ;
22import {
33 makeStyles ,
44 Text ,
55 Badge ,
66 Card ,
77 CardHeader ,
8- Input ,
98 Button ,
109 Divider ,
11- Switch ,
1210 tokens ,
1311} from "@fluentui/react-components" ;
1412import {
15- SearchRegular ,
1613 ArrowMaximizeRegular ,
1714 ArrowMinimizeRegular ,
1815 WrenchRegular ,
1916 StarRegular ,
2017 StarFilled ,
21- PersonRegular ,
2218 MailRegular ,
2319 PhoneRegular ,
2420 LocationRegular ,
2521 CertificateFilled ,
2622} from "@fluentui/react-icons" ;
2723import { useOpenAiGlobal } from "../hooks/useOpenAiGlobal" ;
2824import { useThemeColors } from "../hooks/useThemeColors" ;
29- import { useCapabilities } from "../hooks/useCapabilities" ;
3025import type { ContractorsListData , Contractor } from "../types" ;
3126
3227const useStyles = makeStyles ( {
3328 container : { padding : "16px" , fontFamily : tokens . fontFamilyBase } ,
3429 header : { display : "flex" , justifyContent : "space-between" , alignItems : "center" , marginBottom : "16px" } ,
35- filters : { display : "flex" , gap : "8px" , marginBottom : "16px" , flexWrap : "wrap" as const , alignItems : "center" } ,
3630 grid : { display : "grid" , gridTemplateColumns : "repeat(auto-fill, minmax(320px, 1fr))" , gap : "12px" } ,
3731 card : { padding : "12px" , borderRadius : "8px" } ,
3832 infoRow : { display : "flex" , alignItems : "center" , gap : "6px" , marginTop : "4px" } ,
@@ -55,12 +49,8 @@ function renderStars(rating: number) {
5549export function ContractorsList ( ) {
5650 const styles = useStyles ( ) ;
5751 const colors = useThemeColors ( ) ;
58- const capabilities = useCapabilities ( ) ;
5952 const toolOutput = useOpenAiGlobal ( "toolOutput" ) as ContractorsListData | null ;
60- const contractors = toolOutput ?. contractors ?? [ ] ;
61-
62- const [ search , setSearch ] = useState ( "" ) ;
63- const [ preferredOnly , setPreferredOnly ] = useState ( false ) ;
53+ const contractors = ( toolOutput ?. contractors ?? [ ] ) . filter ( c => c . isActive ) ;
6454
6555 const [ isFullscreen , setIsFullscreen ] = useState ( false ) ;
6656 const toggleFullscreen = useCallback ( async ( ) => {
@@ -79,17 +69,6 @@ export function ContractorsList() {
7969 setIsFullscreen ( prev => ! prev ) ;
8070 } , [ ] ) ;
8171
82- const filtered = useMemo ( ( ) => {
83- return contractors . filter ( c => {
84- const matchesSearch = ! search ||
85- c . name . toLowerCase ( ) . includes ( search . toLowerCase ( ) ) ||
86- c . businessName . toLowerCase ( ) . includes ( search . toLowerCase ( ) ) ||
87- c . specialties . some ( s => s . toLowerCase ( ) . includes ( search . toLowerCase ( ) ) ) ;
88- const matchesPreferred = ! preferredOnly || c . isPreferred ;
89- return matchesSearch && matchesPreferred && c . isActive ;
90- } ) ;
91- } , [ contractors , search , preferredOnly ] ) ;
92-
9372 return (
9473 < div className = { styles . container } style = { { backgroundColor : colors . background , color : colors . text } } >
9574 { /* Header */ }
@@ -105,31 +84,15 @@ export function ContractorsList() {
10584 />
10685 </ div >
10786
108- { /* Filters */ }
109- < div className = { styles . filters } >
110- < Input
111- placeholder = "Search contractors or specialties..."
112- contentBefore = { < SearchRegular /> }
113- value = { search }
114- onChange = { ( _ , d ) => setSearch ( d . value ) }
115- style = { { flex : "1 1 250px" } }
116- />
117- < Switch
118- label = "Preferred only"
119- checked = { preferredOnly }
120- onChange = { ( _ , d ) => setPreferredOnly ( d . checked ) }
121- />
122- </ div >
123-
12487 < Text size = { 300 } style = { { color : colors . textSecondary , marginBottom : "12px" , display : "block" } } >
125- Showing { filtered . length } of { contractors . length } contractors
88+ { contractors . length } contractor { contractors . length !== 1 ? "s" : "" }
12689 </ Text >
12790
12891 < Divider style = { { marginBottom : "12px" } } />
12992
13093 { /* Contractors Grid */ }
13194 < div className = { styles . grid } >
132- { filtered . map ( contractor => {
95+ { contractors . map ( contractor => {
13396 const addr = typeof contractor . address === "object" && contractor . address
13497 ? contractor . address
13598 : null ;
0 commit comments