Components

More useful components are available in The majority of the app will be developed in the src/components/ directory.

Ag Grid Table

<AgGridTable
urlParam={url}
fieldNames={['name', 'email', 'phone', 'active']}
section="user"
toggleButton={{ show: true, field: 'active' }}/>

prop	description	required	default
urlParam	Url to fetch api calls for the table data	true	None
fieldNames	Field names to be fetched from the data from API call	true	None
section	Used for navigation purposes after actions like edit, add and delete	true	None
viewPopUp	Switches between view page and view popup	false	false
toggleButton	Object that specifies whether to show a toggle button or not	false	{ show: false, field: 'none' }
addButtonPlaceholder	PlaceHolder for add button	false	null

Counter Cards

<Counter
className={styles[card1bgStyle]}
cardstyle={styles.cardbox1}
cardicon={faBookOpenReader}
text="Users"
count={NumFormatter(usercount)}
url="/user"
/>

prop	description	required	default
text	The text to be displayed	true	None
count	Count to be shown	true	None
cardstyle	Style to be passed	true	None
cardicon	Icon to be used in card	true	None
className	ClassName to be used for the component	true	None
url	Url to be navigated	false	null

Custom Table

Reusable custom table component data={data} table data is passing here .section="user"if toggle button is needed we can pass toggle button like this toggleButton={{ show: true, field: 'active' }}`

<CustomTable
data={data}
viewPopUp
section="User"
toggleButton={{ show: true, field: 'active' }}
/>

prop	description	required	default
text	The text to be displayed	true	None
count	Count to be shown	true	None
cardstyle	Style to be passed	true	None
cardicon	Icon to be used in card	true	None
className	ClassName to be used for the component	true	None
url	Url to be navigated	false	null

Doughnut Chart

 <DoughnutChart
title="Doughnut Chart"
labels={months}
datas={graph}
label="# of Votes"
backgroundColor={[
  '#ff9f40',
  '#36a2eb',
  '#4bc0c0',
  '#ffcd56',
  '#ff6384',
  '"##d11919',
]}
borderColor={['#ffff', '#ffff', '#ffff', '#ffff', '#ffff', '#ffff']}
borderWidth="1"
 />

prop	description	required	default
labels	function to be executed when value changes	true	None
datas	Data required for the chart	true	None
backgroundColor	Array of colors required for the chart	true	None
borderColor	Border Color for the chart	true	None
borderWidth	Border width for the chart	true	None
title	Title for the chart	true	None
height	Required height for the chart	false	500
width	Required width for the chart	false	500

AutoComplete

<AutoComplete url={url} field="email" />

Autocomplete component api url is passed as url variable and field name as field.

DateRange

<DateRangeFilter onChange={onChange} open={open} setOpen={setOpen} />

prop	description	required	default
onChange	function to be executed when value changes	true	None
open	indicates whether the daterange picker is open or not	false	false
setOpen	FUnction to handle the value of Open	true	None