@@ -12,6 +12,10 @@ import { SkeletonAuditGrid } from "#src/components/Skeleton.tsx";
1212import { AuditsTable } from "#src/components/AuditsTable.tsx" ;
1313import * as Tabs from "@radix-ui/react-tabs" ;
1414import { FaTable , FaTableList } from "react-icons/fa6" ;
15+ import { StyledLabeledInput } from "#src/components/StyledLabeledInput.tsx" ;
16+ import { ChangeEvent , useState } from "react" ;
17+ import { useUser } from "../queries" ;
18+ import { TbHelpCircleFilled } from "react-icons/tb" ;
1519
1620export interface Scan {
1721 blockers_aggregate : {
@@ -38,12 +42,19 @@ export interface Audit {
3842
3943export const Audits = ( ) => {
4044 const navigate = useNavigate ( ) ;
41- const { auditsTableView, setAuditsTableView} = useGlobalStore ( ) ;
45+ const { data : user } = useUser ( ) ;
46+ const {
47+ auditsTableView,
48+ setAuditsTableView,
49+ auditsTableCreatedByView,
50+ setAuditsTableCreatedByView
51+ } = useGlobalStore ( ) ;
52+ const [ searchString , setSearchString ] = useState ( "" ) ;
4253 const { data : audits , isLoading } = useQuery ( {
4354 queryKey : [ "audits" ] ,
4455 queryFn : async ( ) =>
4556 (
46- await apiClient . graphql ( {
57+ await ( apiClient . graphql ( {
4758 //query: `{audits(order_by: {created_at: desc}) {id created_at name}}`,
4859 query : `
4960 {
@@ -74,9 +85,25 @@ export const Audits = () => {
7485 }
7586 ` ,
7687 } )
77- ) ?. data ?. audits ,
88+ ) as any ) . data ?. audits ,
89+ select : ( audits ) => {
90+ let filtered = audits ;
91+ if ( auditsTableCreatedByView == "user" ) {
92+ filtered = audits . filter ( ( audit : any ) => audit . user . email === user . email ) ;
93+ }
94+ if ( searchString . length >= 3 ) {
95+ filtered = filtered . filter ( ( audit : any ) => audit . name . includes ( searchString ) )
96+ }
97+ return filtered ;
98+ }
99+
78100 } ) ;
79- console . log ( audits ) ;
101+ //console.log(audits);
102+
103+ const handleCreatedByViewChange = ( e : ChangeEvent < HTMLSelectElement > ) => {
104+ setAuditsTableCreatedByView ( e . target . value ) ;
105+ } ;
106+
80107 return (
81108 < div className = { styles . Audits } >
82109 < div >
@@ -100,31 +127,48 @@ export const Audits = () => {
100127 </ div >
101128 </ div >
102129 < >
130+
103131 < Tabs . Root
104132 orientation = "horizontal"
105133 className = "audit-tabs"
106134 value = { auditsTableView }
107- onValueChange = { ( value ) => setAuditsTableView ( value ) }
135+ onValueChange = { ( value ) => setAuditsTableView ( value ) }
108136 activationMode = "manual"
109137 >
110- < Tabs . List aria-label = "Select a View" className = { styles [ "audits-view-selector" ] } >
111- < Tabs . Trigger value = "cards" className = { styles [ "audits-view-trigger" ] } asChild >
112- < StyledButton
113- icon = { < FaTable /> }
114- onClick = { ( ) => { } }
115- label = { "Cards View" }
116- showLabel = { false }
117- />
118- </ Tabs . Trigger >
119- < Tabs . Trigger value = "table" className = { styles [ "audits-view-trigger" ] } asChild >
120- < StyledButton
121- icon = { < FaTableList /> }
122- onClick = { ( ) => { } }
123- label = { "Cards View" }
124- showLabel = { false }
125- />
126- </ Tabs . Trigger >
127- </ Tabs . List >
138+ < div className = { styles [ "filter-controls" ] } >
139+ < div className = { styles [ "filter-controls-left" ] } >
140+ < StyledLabeledInput >
141+ < label htmlFor = "auditsSearch" > Search</ label >
142+ < input id = "auditsSearch" type = "text" value = { searchString } onChange = { ( e ) => setSearchString ( e . target . value ) } > </ input >
143+ </ StyledLabeledInput >
144+ < StyledLabeledInput >
145+ < label htmlFor = "createdByView" > Filter View:</ label >
146+ < select onChange = { handleCreatedByViewChange } value = { auditsTableCreatedByView } id = "createdByView" >
147+ < option value = "user" > My Audits</ option >
148+ < option value = "all" > All Audits</ option >
149+ </ select >
150+ </ StyledLabeledInput >
151+ </ div >
152+
153+ < Tabs . List aria-label = "Select a View" className = { styles [ "audits-view-selector" ] } >
154+ < Tabs . Trigger value = "cards" className = { styles [ "audits-view-trigger" ] } asChild >
155+ < StyledButton
156+ icon = { < FaTable /> }
157+ onClick = { ( ) => { } }
158+ label = { "Cards View" }
159+ showLabel = { false }
160+ />
161+ </ Tabs . Trigger >
162+ < Tabs . Trigger value = "table" className = { styles [ "audits-view-trigger" ] } asChild >
163+ < StyledButton
164+ icon = { < FaTableList /> }
165+ onClick = { ( ) => { } }
166+ label = { "Cards View" }
167+ showLabel = { false }
168+ />
169+ </ Tabs . Trigger >
170+ </ Tabs . List >
171+ </ div >
128172 < Tabs . Content value = "cards" >
129173 < div className = "cards-33" >
130174 { isLoading ? (
@@ -163,8 +207,8 @@ export const Audits = () => {
163207 the_value = {
164208 row . scans [ 0 ]
165209 ? prettyDate ( row . scans [ 0 ] . updated_at ) +
166- " at " +
167- prettyTime ( row . scans [ 0 ] . updated_at )
210+ " at " +
211+ prettyTime ( row . scans [ 0 ] . updated_at )
168212 : "Not scanned yet"
169213 }
170214 />
@@ -179,6 +223,15 @@ export const Audits = () => {
179223 </ Card >
180224 ) )
181225 ) }
226+ { audits && audits . length == 0 && ! isLoading && searchString == "" && < >
227+ < Card variant = "empty-state-card" >
228+ < TbHelpCircleFilled />
229+ < div className = "text" >
230+ < h2 > It looks like you haven’t created any accessibility audits yet.</ h2 >
231+ < p > Jump right in by < Link to = "build/" > creating your first audit</ Link > or explore < a style = { { cursor : "pointer" } } onClick = { ( ) => setAuditsTableCreatedByView ( "all" ) } > existing reports</ a > from across your organization to see what’s already being improved.</ p >
232+ </ div >
233+ </ Card >
234+ </ > }
182235 </ div >
183236 </ Tabs . Content >
184237 < Tabs . Content value = "table" >
0 commit comments