\n
\n
Current Version \n
React 17.x and PrimeReact 6.x
\n\n
Getting Started \n
Avalon is an application template for React based on the popular create-react-app that allows\n creating React apps with no configuration. To get started extract the contents of the zip bundle and install the dependencies\n with npm or yarn.
\n
\n{`\n\"npm install\" or \"yarn\"\n`}\n \n\n
The following command needs to be run to create the css files in the sample project.\n Note: Users can automatically run scss files without using this command by moving the theme file they want to use in their own projects under the src folder.\n Details
\n
\n{`\nsass public/assets:public/assets --no-source-map\n`}\n \n\n
Next step is running the application using the start script and navigate to http://localhost:3000/ to view the application.\n That is it, you may now start with the development of your application using the Avalon template.
\n\n
\n{`\n\"npm start\" or \"yarn start\"\n`}\n \n\n
That is it, you may now start with the development of your application using the Avalon template.
\n\n
React Scripts \n
Following commands are derived from create-app-app.
\n
\n{`\n\"npm start\" or \"yarn start\": Starts the development server\n\"npm test\" or \"yarn test\": Runs the tests.\n\"npm run build\" or \"yarn run build\": Creates a production build.\n`}\n \n\n
Structure \n
Avalon consists of 3 main parts; the application layout, layout resources and theme resources for PrimeReact components. App.js inside src folder is the main component containing the template for the base layout\n whereas required resources for the layout are placed inside the public/assets/layout folder and similarly theme resources are inside public/assets/theme folder.
\n\n
Template \n
Main layout is the JSX of the App.js, it is divided into a couple of child components such as topbar, profile, menu and footer. Here is render method of the\n App.js component that implements the logic such as menu state, layout modes and so on.
\n\n
\n{`\n\n
\n
\n\n
\n
\n {profileMode === 'inline' && menuMode !== 'horizontal' &&
}\n\n
\n
\n
\n\n
\n // routers\n
\n\n
\n\n
\n\n
\n
\n
\n\n
Menu \n
Menu is a separate component defined in AppMenu.js file based on PrimeReact MenuModel API. In order to define the menuitems,\n navigate to createMenu() method App.js file and define your own model as a nested structure. Here is the menu component from the demo application.\n Notice that menu object is bound to the model property of AppMenu component as shown above.
\n\n
\n
\n{`\n const menu = [\n {\n label: 'Dashboards', icon: 'pi pi-fw pi-home',\n items: [\n { label: 'Generic', icon: 'pi pi-fw pi-home', to: '/dashboards/generic' },\n { label: 'Banking', icon: 'pi pi-fw pi-money-bill', to: '/dashboards/dashboard_banking' },\n ]\n },\n {\n label: 'UI Kit', icon: 'pi pi-fw pi-sitemap',\n items: [\n { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/formlayout' },\n { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' },\n { label: \"Float Label\", icon: \"pi pi-fw pi-bookmark\", to: '/floatlabel' },\n { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button', className: 'rotated-icon' },\n { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' },\n { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' },\n { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' },\n { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' },\n { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' },\n { label: 'Media', icon: \"pi pi-fw pi-image\", to: '/media' },\n { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' },\n { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' },\n { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' },\n { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' },\n { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' },\n ]\n },\n {\n label: 'Utilities', icon: 'pi pi-fw pi-globe',\n items: [\n { label: 'Display', icon: 'pi pi-fw pi-desktop', to: '/display' },\n { label: 'Elevation', icon: 'pi pi-fw pi-external-link', to: '/elevation' },\n { label: 'Flexbox', icon: 'pi pi-fw pi-directions', to: '/flexbox' },\n { label: 'Icons', icon: 'pi pi-fw pi-search', to: '/icons' },\n { label: 'Widgets', icon: 'pi pi-fw pi-star-o', to: '/widgets' },\n { label: 'Grid System', icon: 'pi pi-fw pi-th-large', to: '/grid' },\n { label: 'Spacing', icon: 'pi pi-fw pi-arrow-right', to: '/spacing' },\n { label: 'Typography', icon: 'pi pi-fw pi-align-center', to: '/typography' },\n { label: 'Text', icon: 'pi pi-fw pi-pencil', to: '/text' },\n ]\n },\n {\n label: 'Pages', icon: 'pi pi-fw pi-clone',\n items: [\n { label: 'Crud', icon: 'pi pi-fw pi-pencil', to: '/crud' },\n { label: 'Calendar', icon: 'pi pi-fw pi-calendar-plus', to: '/calendar' },\n { label: 'Landing', icon: 'pi pi-fw pi-user-plus', url: 'assets/pages/landing.html', target: '_blank' },\n { label: 'Login', icon: 'pi pi-fw pi-sign-in', to: '/login' },\n { label: 'Invoice', icon: 'pi pi-fw pi-dollar', to: '/invoice' },\n { label: 'Wizard', icon: 'pi pi-fw pi-star', to: '/wizard' },\n { label: 'Help', icon: 'pi pi-fw pi-question-circle', to: '/help' },\n { label: 'Error', icon: 'pi pi-fw pi-times-circle', to: '/error' },\n { label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', to: '/notfound' },\n { label: 'Access Denied', icon: 'pi pi-fw pi-lock', to: '/access' },\n { label: 'Empty Page', icon: 'pi pi-fw pi-circle-off', to: '/empty' }\n ]\n },\n {\n label: 'Hierarchy', icon: 'pi pi-fw pi-align-left',\n items: [\n {\n label: 'Submenu 1', icon: 'pi pi-fw pi-align-left',\n items: [\n {\n label: 'Submenu 1.1', icon: 'pi pi-fw pi-align-left',\n items: [\n { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-align-left' },\n { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-align-left' },\n { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-align-left' },\n ]\n },\n {\n label: 'Submenu 1.2', icon: 'pi pi-fw pi-align-left',\n items: [\n { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-align-left' },\n { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-align-left' }\n ]\n },\n ]\n },\n {\n label: 'Submenu 2', icon: 'pi pi-fw pi-align-left',\n items: [\n {\n label: 'Submenu 2.1', icon: 'pi pi-fw pi-align-left',\n items: [\n { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-align-left' },\n { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-align-left' },\n { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-align-left' },\n ]\n },\n {\n label: 'Submenu 2.2', icon: 'pi pi-fw pi-align-left',\n items: [\n { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-align-left' },\n { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-align-left' }\n ]\n },\n ]\n }\n ]\n },\n { label: 'Buy Now', icon: 'pi pi-fw pi-shopping-cart', command: () => window.open(\"https://www.primefaces.org/store\", \"_blank\") },\n { label: 'Docs', icon: 'pi pi-fw pi-info-circle', to: '/documentation' },\n];\n`}\n \n
\n\n
Component Theme \n
Avalon provides 30 PrimeReact themes out of the box, setup of a theme is simple as including the css of theme to your application. All themes are located inside are located inside assets/theme folder.
\n\n
\n theme-amber \n theme-blue \n theme-brown \n theme-cyan \n theme-darkgrey \n theme-deeppurple \n theme-green \n theme-indigo \n theme-lightblue \n theme-lightgreen \n theme-lime \n theme-orange \n theme-pink \n theme-purple \n theme-teal \n \n\n
A custom theme can be developed by the following steps.
\n
\n Choose a custom theme name such as theme-myown. \n Create a file named theme-myown.scss under public/assets/theme folder . \n Define the variables listed below and import the ../sass/theme/_theme.scss file. \n Build the scss to generate css \n Include the generated theme.css in your application. \n \n\n
Here are the variables required to create a theme.
\n\n
\n{`\n$primaryLightColor: rgba(38,143,255,.5);\n$primaryColor: #007bff;\n$primaryDarkColor: #0069d9;\n$primaryDarkerColor: #0062cc;\n$primaryTextColor: #ffffff;\n\n$highlightBg: $primaryColor;\n$highlightTextColor: $primaryTextColor;\n\n@import '../sass/theme/_theme';\n`}\n \n\n
An example sass command to compile the css would be;
\n\n
\n{`\nsass public/assets/theme/mytheme/theme.scss:public/assets/theme/mytheme/theme.css\n`}\n \n\n
Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command\n so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.
\n\n
\n{`\nsass --watch public/assets:public/assets\n`}\n \n\n
Layout Theme \n
Avalon offers 25 layout themes out of the box, setup of a layout theme simple including the css of theme to your page that is located inside public/assets/layout/css folder.
\n\n
Flat Colors \n
\n layout-amber \n layout-blue \n layout-brown \n layout-cyan \n layout-darkgrey \n layout-deeppurple \n layout-green \n layout-indigo \n layout-lightblue \n layout-lightgreen \n layout-lime \n layout-orange \n layout-pink \n layout-purple \n layout-teal \n \n\n
Special Themes \n
\n Influenza \n Calm \n Crimson \n Night \n Skyline \n Sunkist \n Little Leaf \n Joomla \n Firewatch \n Suzy \n \n\n
A custom layout theme can be developed by the following steps.
\n
\n Choose a layout name such as layout-myown. \n Create an empty file named layout-myown.scss inside assets/layout/css folder. \n Define the variables listed below and import the /sass/layout/_layout.scss file. \n Build the scss to generate css \n Serve the css by importing it using a link tag or a bundler. \n \n\n
Here are the variables required to create a layout.
\n\n
\n{`\n$topbarLeftGradientStartBgColor:#146fd7;\n$topbarLeftGradientEndBgColor:#146fd7;\n$topbarRightGradientStartBgColor:#146fd7;\n$topbarRightGradientEndBgColor:#146fd7;\n$topbarTextColor:#ffffff;\n$menuGradientStartBgColor:#ffffff;\n$menuGradientEndBgColor:#ffffff;\n$menuitemHoverBgColor:#e8e8e8;\n$menuitemActiveColor:#007bff;\n$menuitemActiveBgColor:#e8e8e8;\n$menuButtonBgColor:#ffffff;\n$menuButtonColor:#007bff;\n$badgeBgColor:#ffc107;\n$badgeColor:#282b30;\n$darkMenuGradientStartBgColor:#363a41;\n$darkMenuGradientEndBgColor:#363a41;\n$darkMenuHoverBgColor:#4a4d54;\n$darkMenuMenuitemColor:#ffffff;\n$darkMenuMenuitemActiveColor:#6aa5d8;\n$darkMenuMenuitemActiveBgColor:#282b30;\n\n@import '../../sass/layout/_layout';\n`}\n \n\n
Common SASS Variables \n
In case you'd like to customize common variables, the _variables.scss under sass/layout or sass/theme folder is where the core variables (e.g. font size, paddings) for the layout are defined.
\n\n
sass/layout/_variables.scss \n
\n{`\n$fontFamily:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";\n$fontSize:14px;\n$textColor:#212529;\n$textSecondaryColor:#6c757d;\n$borderRadius:4px;\n$dividerColor:#dee2e6;\n$transitionDuration:.3s;\n$disabledBgColor:#eeeeee;\n$primeIconFontSize:1.286em;\n\n/* Predefined Colors */\n$lightestGray:#f5f5f5;\n$lightGray:#cccccc;\n$gray:#999999;\n$darkGray:#777777;\n$white:#ffffff;\n\n$blue:#007bff;\n$purple:#9189fd;\n$orange:#ffbf79;\n$lightBlue:#8dc8ff;\n$pink:#f790c8;\n$indigo:#6610f2;\n$green:#3e9018;\n$red:#da2f31;\n$orange:#ffb200;\n$teal:#599597;\n$black:#000000;\n$yellow:#ffd644;\n\n$inputInvalidBorderColor:#b94a48;\n$inputInvalidBgColor:#ffffff;\n\n$menuHoverBgColor: #f4f4f4;\n$bodyBgColor: #EEF2F6;\n`}\n \n\n
sass/theme/_variables.scss \n
\n
\n{`\n//reused color variables\n$shade000:#ffffff; //surface\n$shade100:#efefef; //header background\n$shade200:#e9ecef; //hover background\n$shade300:#dee2e6; //border, divider\n$shade400:#ced4da; //input border\n$shade500:#adb5bd; //unused\n$shade600:#6c757d; //text secondary color\n$shade700:#495057; //input text color\n$shade800:#343a40; //unused\n$shade900:#212529; //text color\n\n//global\n$fontFamily:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n$fontSize:1rem;\n$fontWeight:normal;\n$textColor:$shade900;\n$textSecondaryColor:$shade600;\n$borderRadius:4px;\n$transitionDuration:.15s;\n$formElementTransition:background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;\n$actionIconTransition:box-shadow $transitionDuration;\n$listItemTransition:box-shadow $transitionDuration;\n$primeIconFontSize:1rem;\n$divider:1px solid $shade300;\n$inlineSpacing:.5rem;\n$disabledOpacity:.65;\n$maskBg:rgba(0, 0, 0, 0.4);\n$loadingIconFontSize:2rem;\n$errorColor:#dc3545;\n\n//scale\n$scaleSM:0.875;\n$scaleLG:1.25;\n\n//focus\n$focusOutlineColor:$primaryLightColor;\n$focusOutline:0 none;\n$focusOutlineOffset:0;\n$focusShadow:0 0 0 0.2rem $focusOutlineColor;\n\n//action icons\n$actionIconWidth:2rem;\n$actionIconHeight:2rem;\n$actionIconBg:transparent;\n$actionIconBorder:0 none;\n$actionIconColor:$shade600;\n$actionIconHoverBg:transparent;\n$actionIconHoverBorderColor:transparent;\n$actionIconHoverColor:$shade700;\n$actionIconBorderRadius:50%;\n\n//input field (e.g. inputtext, spinner, inputmask)\n$inputPadding:.5rem .75rem;\n$inputTextFontSize:1rem;\n$inputBg:$shade000;\n$inputTextColor:$shade700;\n$inputIconColor:$shade700;\n$inputBorder:1px solid $shade400;\n$inputHoverBorderColor:$shade400;\n$inputFocusBorderColor:$primaryColor;\n$inputErrorBorderColor:$errorColor;\n$inputPlaceholderTextColor:$shade600;\n$inputFilledBg:$shade100;\n$inputFilledHoverBg:$shade100;\n$inputFilledFocusBg:$shade100;\n\n//input groups\n$inputGroupBg:$shade200;\n$inputGroupTextColor:$shade700;\n$inputGroupAddOnMinWidth:2.357rem;\n\n//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)\n$inputListBg:$shade000;\n$inputListTextColor:$shade900;\n$inputListBorder:$inputBorder;\n$inputListPadding:.5rem 0;\n$inputListItemPadding:.5rem 1.5rem;\n$inputListItemBg:transparent;\n$inputListItemTextColor:$shade900;\n$inputListItemHoverBg:$shade200;\n$inputListItemTextHoverColor:$shade900;\n$inputListItemBorder:0 none;\n$inputListItemBorderRadius:0;\n$inputListItemMargin:0;\n$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor;\n$inputListHeaderPadding:.75rem 1.5rem;\n$inputListHeaderMargin:0;\n$inputListHeaderBg:$shade100;\n$inputListHeaderTextColor:$shade900;\n$inputListHeaderBorder:1px solid $shade300;\n\n//inputs with overlays (e.g. autocomplete, dropdown, multiselect)\n$inputOverlayBg:$inputListBg;\n$inputOverlayHeaderBg:$inputListHeaderBg;\n$inputOverlayBorder:1px solid rgba(0,0,0,.15);\n$inputOverlayShadow:none;\n\n//password\n$passwordMeterBg:$shade200;\n$passwordWeakBg:#f8d7da;\n$passwordMediumBg:#fff3cd;\n$passwordStrongBg:#d4edda;\n\n//button\n$buttonPadding:.5rem .75rem;\n$buttonIconOnlyWidth:2.357rem;\n$buttonIconOnlyPadding:.5rem 0;\n$buttonBg:$primaryColor;\n$buttonTextColor:$primaryTextColor;\n$buttonBorder:1px solid $primaryColor;\n$buttonHoverBg:$primaryDarkColor;\n$buttonTextHoverColor:$primaryTextColor;\n$buttonHoverBorderColor:$primaryDarkColor;\n$buttonActiveBg:$primaryDarkerColor;\n$buttonTextActiveColor:$primaryTextColor;\n$buttonActiveBorderColor:$primaryDarkerColor;\n$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);\n$roundedButtonBorderRadius:2rem;\n\n$textButtonHoverBgOpacity:.04;\n$textButtonActiveBgOpacity:.16;\n$outlinedButtonBorder:1px solid;\n$plainButtonTextColor:$textSecondaryColor;\n$plainButtonHoverBgColor:$shade200;\n$plainButtonActiveBgColor:$shade300;\n\n$secondaryButtonBg:#6c757d;\n$secondaryButtonTextColor:#ffffff;\n$secondaryButtonBorder:1px solid #6c757d;\n$secondaryButtonHoverBg:#5a6268;\n$secondaryButtonTextHoverColor:#ffffff;\n$secondaryButtonHoverBorderColor:#5a6268;\n$secondaryButtonActiveBg:#545b62;\n$secondaryButtonTextActiveColor:#ffffff;\n$secondaryButtonActiveBorderColor:#4e555b;\n$secondaryButtonFocusShadow:0 0 0 0.2rem rgba(130,138,145,.5);\n\n$infoButtonBg:#17a2b8;\n$infoButtonTextColor:#ffffff;\n$infoButtonBorder:1px solid #17a2b8;\n$infoButtonHoverBg:#138496;\n$infoButtonTextHoverColor:#ffffff;\n$infoButtonHoverBorderColor:#117a8b;\n$infoButtonActiveBg:#138496;\n$infoButtonTextActiveColor:#ffffff;\n$infoButtonActiveBorderColor:#117a8b;\n$infoButtonFocusShadow:0 0 0 0.2rem rgba(58,176,195,.5);\n\n$successButtonBg:#28a745;\n$successButtonTextColor:#ffffff;\n$successButtonBorder:1px solid #28a745;\n$successButtonHoverBg:#218838;\n$successButtonTextHoverColor:#ffffff;\n$successButtonHoverBorderColor:#1e7e34;\n$successButtonActiveBg:#1e7e34;\n$successButtonTextActiveColor:#ffffff;\n$successButtonActiveBorderColor:#1c7430;\n$successButtonFocusShadow:0 0 0 0.2rem rgba(72,180,97,.5);\n\n$warningButtonBg:#ffc107;\n$warningButtonTextColor:#212529;\n$warningButtonBorder:1px solid #ffc107;\n$warningButtonHoverBg:#e0a800;\n$warningButtonTextHoverColor:#212529;\n$warningButtonHoverBorderColor:#d39e00;\n$warningButtonActiveBg:#d39e00;\n$warningButtonTextActiveColor:#212529;\n$warningButtonActiveBorderColor:#c69500;\n$warningButtonFocusShadow:0 0 0 0.2rem rgba(222,170,12,.5);\n\n$helpButtonBg:#6f42c1;\n$helpButtonTextColor:#ffffff;\n$helpButtonBorder:1px solid #6f42c1;\n$helpButtonHoverBg:#633bad;\n$helpButtonTextHoverColor:#ffffff;\n$helpButtonHoverBorderColor:#58349a;\n$helpButtonActiveBg:#58349a;\n$helpButtonTextActiveColor:#ffffff;\n$helpButtonActiveBorderColor:#4d2e87;\n$helpButtonFocusShadow:0 0 0 0.2rem #d3c6ec;\n\n$dangerButtonBg:#dc3545;\n$dangerButtonTextColor:#ffffff;\n$dangerButtonBorder:1px solid #dc3545;\n$dangerButtonHoverBg:#c82333;\n$dangerButtonTextHoverColor:#ffffff;\n$dangerButtonHoverBorderColor:#bd2130;\n$dangerButtonActiveBg:#bd2130;\n$dangerButtonTextActiveColor:#ffffff;\n$dangerButtonActiveBorderColor:#b21f2d;\n$dangerButtonFocusShadow:0 0 0 0.2rem rgba(225,83,97,.5);\n\n$linkButtonColor:$primaryColor;\n$linkButtonHoverColor:$primaryDarkColor;\n$linkButtonTextHoverDecoration:underline;\n$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor;\n\n//checkbox\n$checkboxWidth:20px;\n$checkboxHeight:20px;\n$checkboxBorder:2px solid $shade400;\n$checkboxIconFontSize:14px;\n$checkboxActiveBorderColor:$primaryColor;\n$checkboxActiveBg:$primaryColor;\n$checkboxIconActiveColor:$primaryTextColor;\n$checkboxActiveHoverBg:$primaryDarkerColor;\n$checkboxIconActiveHoverColor:$primaryTextColor;\n$checkboxActiveHoverBorderColor:$primaryDarkerColor;\n\n//radiobutton\n$radiobuttonWidth:20px;\n$radiobuttonHeight:20px;\n$radiobuttonBorder:2px solid $shade400;\n$radiobuttonIconSize:12px;\n$radiobuttonActiveBorderColor:$primaryColor;\n$radiobuttonActiveBg:$primaryColor;\n$radiobuttonIconActiveColor:$primaryTextColor;\n$radiobuttonActiveHoverBg:$primaryDarkerColor;\n$radiobuttonIconActiveHoverColor:$primaryTextColor;\n$radiobuttonActiveHoverBorderColor:$primaryDarkerColor;\n\n//colorpicker\n$colorPickerPreviewWidth:2rem;\n$colorPickerPreviewHeight:2rem;\n$colorPickerBg:#212529;\n$colorPickerBorderColor:#212529;\n$colorPickerHandleColor:$shade000;\n\n//togglebutton\n$toggleButtonBg:#6c757d;\n$toggleButtonBorder:1px solid #6c757d;\n$toggleButtonTextColor:#ffffff;\n$toggleButtonIconColor:#ffffff;\n$toggleButtonHoverBg:#5a6268;\n$toggleButtonHoverBorderColor:#545b62;\n$toggleButtonTextHoverColor:#ffffff;\n$toggleButtonIconHoverColor:#ffffff;\n$toggleButtonActiveBg:#545b62;\n$toggleButtonActiveBorderColor:#4e555b;\n$toggleButtonTextActiveColor:#ffffff;\n$toggleButtonIconActiveColor:#ffffff;\n$toggleButtonActiveHoverBg:#545b62;\n$toggleButtonActiveHoverBorderColor:#4e555b;\n$toggleButtonTextActiveHoverColor:#ffffff;\n$toggleButtonIconActiveHoverColor:#ffffff;\n\n//inplace\n$inplacePadding:$inputPadding;\n$inplaceHoverBg:$shade200;\n$inplaceTextHoverColor:$shade900;\n\n//rating\n$ratingIconFontSize:1.143rem;\n$ratingCancelIconColor:#dc3545;\n$ratingCancelIconHoverColor:#dc3545;\n$ratingStarIconOffColor:$shade700;\n$ratingStarIconOnColor:$primaryColor;\n$ratingStarIconHoverColor:$primaryColor;\n\n//slider\n$sliderBg:$shade200;\n$sliderBorder:0 none;\n$sliderHorizontalHeight:.286rem;\n$sliderVerticalWidth:0.286rem;\n$sliderHandleWidth:1.143rem;\n$sliderHandleHeight:1.143rem;\n$sliderHandleBg:$primaryColor;\n$sliderHandleBorder:2px solid $primaryColor;\n$sliderHandleBorderRadius:$borderRadius;\n$sliderHandleHoverBorderColor:$primaryDarkColor;\n$sliderHandleHoverBg:$primaryDarkColor;\n$sliderRangeBg:$primaryColor;\n\n//calendar\n$calendarTableMargin:.5rem 0;\n$calendarPadding:0;\n$calendarBg:$shade000;\n$calendarInlineBg:$calendarBg;\n$calendarTextColor:$shade900;\n$calendarBorder:$inputListBorder;\n$calendarOverlayBorder:$inputOverlayBorder;\n\n$calendarHeaderPadding:.5rem;\n$calendarHeaderBg:$shade100;\n$calendarInlineHeaderBg:$calendarBg;\n$calendarHeaderBorder:1px solid $shade300;\n$calendarHeaderTextColor:$shade900;\n$calendarHeaderFontWeight:600;\n$calendarHeaderCellPadding:.5rem;\n\n$calendarCellDatePadding:.5rem;\n$calendarCellDateWidth:2.5rem;\n$calendarCellDateHeight:2.5rem;\n$calendarCellDateBorderRadius:$borderRadius;\n$calendarCellDateBorder:1px solid transparent;\n$calendarCellDateHoverBg:$shade200;\n$calendarCellDateTodayBg:$shade400;\n$calendarCellDateTodayBorderColor:transparent;\n$calendarCellDateTodayTextColor:$shade900;\n\n$calendarButtonBarPadding:1rem 0;\n$calendarTimePickerPadding:.5rem;\n$calendarTimePickerElementPadding:0 .5rem;\n$calendarTimePickerTimeFontSize:1.25rem;\n\n$calendarBreakpoint:769px;\n$calendarCellDatePaddingSM:0;\n\n//input switch\n$inputSwitchWidth:3rem;\n$inputSwitchHeight:1.75rem;\n$inputSwitchBorderRadius:$borderRadius;\n$inputSwitchHandleWidth:1.250rem;\n$inputSwitchHandleHeight:1.250rem;\n$inputSwitchHandleBorderRadius:$borderRadius;\n$inputSwitchSliderPadding:.25rem;\n$inputSwitchSliderOffBg:$shade400;\n$inputSwitchHandleOffBg:$shade000;\n$inputSwitchSliderOffHoverBg:$shade400;\n$inputSwitchSliderOnBg:$primaryColor;\n$inputSwitchSliderOnHoverBg:$primaryColor;\n$inputSwitchHandleOnBg:$shade000;\n\n//panel\n$panelHeaderBorder:1px solid $shade300;\n$panelHeaderBg:$shade100;\n$panelHeaderTextColor:$shade900;\n$panelHeaderFontWeight:600;\n$panelHeaderPadding:1rem 1.25rem;\n$panelToggleableHeaderPadding:.5rem 1.25rem;\n\n$panelHeaderHoverBg:$shade200;\n$panelHeaderHoverBorderColor:$shade300;\n$panelHeaderTextHoverColor:$shade900;\n\n$panelContentBorder:1px solid $shade300;\n$panelContentBg:$shade000;\n$panelContentTextColor:$shade900;\n$panelContentPadding:1.25rem;\n\n$panelFooterBorder:1px solid $shade300;\n$panelFooterBg:$shade000;\n$panelFooterTextColor:$shade900;\n$panelFooterPadding:.5rem 1.25rem;\n\n//accordion\n$accordionSpacing:0;\n$accordionHeaderBorder:$panelHeaderBorder;\n$accordionHeaderBg:$panelHeaderBg;\n$accordionHeaderTextColor:$panelHeaderTextColor;\n$accordionHeaderFontWeight:$panelHeaderFontWeight;\n$accordionHeaderPadding:$panelHeaderPadding;\n\n$accordionHeaderHoverBg:$shade200;\n$accordionHeaderHoverBorderColor:$shade300;\n$accordionHeaderTextHoverColor:$shade900;\n\n$accordionHeaderActiveBg:$panelHeaderBg;\n$accordionHeaderActiveBorderColor:$shade300;\n$accordionHeaderTextActiveColor:$shade900;\n\n$accordionHeaderActiveHoverBg:$shade200;\n$accordionHeaderActiveHoverBorderColor:$shade300;\n$accordionHeaderTextActiveHoverColor:$shade900;\n\n$accordionContentBorder:$panelContentBorder;\n$accordionContentBg:$panelContentBg;\n$accordionContentTextColor:$panelContentTextColor;\n$accordionContentPadding:$panelContentPadding;\n\n//tabview\n$tabviewNavBorder:1px solid #dee2e6;\n$tabviewNavBorderWidth:0 0 1px 0;\n$tabviewNavBg:transparent;\n\n$tabviewHeaderSpacing:0;\n$tabviewHeaderBorder:solid;\n$tabviewHeaderBorderWidth:1px;\n$tabviewHeaderBorderColor:$shade000 $shade000 #dee2e6 $shade000;\n$tabviewHeaderBg:$shade000;\n$tabviewHeaderTextColor:$shade600;\n$tabviewHeaderFontWeight:$panelHeaderFontWeight;\n$tabviewHeaderPadding:.75rem 1rem;\n$tabviewHeaderMargin:0 0 -1px 0;\n\n$tabviewHeaderHoverBg:$shade000;\n$tabviewHeaderHoverBorderColor:#dee2e6;\n$tabviewHeaderTextHoverColor:$shade600;\n\n$tabviewHeaderActiveBg:$shade000;\n$tabviewHeaderActiveBorderColor:#dee2e6 #dee2e6 $shade000 #dee2e6;\n$tabviewHeaderTextActiveColor:$shade700;\n\n$tabviewContentBorder:0 none;\n$tabviewContentBg:$panelContentBg;\n$tabviewContentTextColor:$panelContentTextColor;\n$tabviewContentPadding:$panelContentPadding;\n\n//upload\n$fileUploadProgressBarHeight:.25rem;\n$fileUploadContentPadding:2rem 1rem;\n\n//scrollpanel\n$scrollPanelTrackBorder:0 none;\n$scrollPanelTrackBg:$shade100;\n\n//card\n$cardBodyPadding:1.5rem;\n$cardTitleFontSize:1.5rem;\n$cardTitleFontWeight:700;\n$cardSubTitleFontWeight:400;\n$cardSubTitleColor:$shade600;\n$cardContentPadding:1rem 0;\n$cardFooterPadding:1rem 0 0 0;\n$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n\n//editor\n$editorToolbarBg:$panelHeaderBg;\n$editorToolbarBorder:$panelHeaderBorder;\n$editorToolbarPadding:$panelHeaderPadding;\n$editorToolbarIconColor:$textSecondaryColor;\n$editorToolbarIconHoverColor:$textColor;\n$editorIconActiveColor:$primaryColor;\n$editorContentBorder:$panelContentBorder;\n$editorContentBg:$panelContentBg;\n\n//paginator\n$paginatorBg:$shade000;\n$paginatorTextColor:$primaryColor;\n$paginatorBorder:solid $shade300;\n$paginatorBorderWidth:0;\n$paginatorPadding:.75rem;\n$paginatorElementWidth:$buttonIconOnlyWidth;\n$paginatorElementHeight:$buttonIconOnlyWidth;\n$paginatorElementBg:$shade000;\n$paginatorElementBorder:1px solid #dee2e6;\n$paginatorElementIconColor:$primaryColor;\n$paginatorElementHoverBg:$shade200;\n$paginatorElementHoverBorderColor:#dee2e6;\n$paginatorElementIconHoverColor:$primaryColor;\n$paginatorElementBorderRadius:0;\n$paginatorElementMargin:0 0 0 -1px;\n$paginatorElementPadding:0;\n\n//table\n$tableHeaderBorder:solid #dee2e6;\n$tableHeaderBorderWidth:1px 0 0 0;\n$tableHeaderBg:$shade100;\n$tableHeaderTextColor:$shade900;\n$tableHeaderFontWeight:600;\n$tableHeaderPadding:1rem 1rem;\n\n$tableHeaderCellPadding:1rem 1rem;\n$tableHeaderCellBg:$shade000;\n$tableHeaderCellTextColor:$shade900;\n$tableHeaderCellFontWeight:600;\n$tableHeaderCellBorder:1px solid #dee2e6;\n$tableHeaderCellBorderWidth:1px 0 2px 0;\n$tableHeaderCellHoverBg:$shade200;\n$tableHeaderCellTextHoverColor:$shade900;\n$tableHeaderCellIconColor:$shade600;\n$tableHeaderCellIconHoverColor:$shade600;\n$tableHeaderCellHighlightBg:$shade000;\n$tableHeaderCellHighlightTextColor:$primaryColor;\n$tableHeaderCellHighlightHoverBg:$shade200;\n$tableHeaderCellHighlightTextHoverColor:$primaryColor;\n$tableSortableColumnBadgeSize:1.143rem;\n\n$tableBodyRowBg:$shade000;\n$tableBodyRowTextColor:$shade900;\n$tableBodyRowEvenBg:rgba(0,0,0,.05);\n$tableBodyRowHoverBg:$shade200;\n$tableBodyRowTextHoverColor:$shade900;\n$tableBodyCellBorder:1px solid #dee2e6;\n$tableBodyCellBorderWidth:1px 0 0 0;\n$tableBodyCellPadding:1rem 1rem;\n\n$tableFooterCellPadding:1rem 1rem;\n$tableFooterCellBg:$shade000;\n$tableFooterCellTextColor:$shade900;\n$tableFooterCellFontWeight:600;\n$tableFooterCellBorder:1px solid #dee2e6;\n$tableFooterCellBorderWidth:1px 0 1px 0;\n$tableResizerHelperBg:$primaryColor;\n\n$tableFooterBorder:1px solid #dee2e6;\n$tableFooterBorderWidth:1px 0 1px 0;\n$tableFooterBg:$shade100;\n$tableFooterTextColor:$shade900;\n$tableFooterFontWeight:600;\n$tableFooterPadding:1rem 1rem;\n\n$tableCellContentAlignment:left;\n$tableTopPaginatorBorderWidth:1px 0 0 0;\n$tableBottomPaginatorBorderWidth:1px 0 0 0;\n\n$tableScaleSM:0.5;\n$tableScaleLG:1.25;\n\n//dataview\n$dataViewContentPadding:0;\n$dataViewContentBorder:0 none;\n$dataViewListItemBorder:1px solid $shade300;\n$dataViewListItemBorderWidth:1px 0 0 0;\n\n//orderlist, picklist\n$orderListBreakpoint:769px;\n$pickListBreakpoint:769px;\n\n//schedule\n$fullCalendarEventBg:$primaryDarkColor;\n$fullCalendarEventBorder:1px solid $primaryDarkColor;\n$fullCalendarEventTextColor:$primaryTextColor;\n\n//tree\n$treeContainerPadding:0.286rem;\n$treeNodePadding:0.143rem;\n$treeNodeContentPadding:.5rem;\n$treeNodeChildrenPadding:0 0 0 1rem;\n$treeNodeIconColor:$shade600;\n\n//timeline\n$timelineVerticalEventContentPadding:0 1rem !default;\n$timelineHorizontalEventContentPadding:1rem 0 !default;\n$timelineEventMarkerWidth:1rem !default;\n$timelineEventMarkerHeight:1rem !default;\n$timelineEventMarkerBorderRadius:50% !default;\n$timelineEventMarkerBorder:0 none !default;\n$timelineEventMarkerBackground:$primaryColor !default;\n$timelineEventConnectorSize:2px !default;\n$timelineEventColor:$shade300 !default;\n\n//org chart\n$organizationChartConnectorColor:$shade300;\n\n//message\n$messageMargin:1rem 0;\n$messagePadding:1rem 1.25rem;\n$messageBorderWidth:1px;\n$messageIconFontSize:1.5rem;\n$messageTextFontSize:1rem;\n$messageTextFontWeight:500;\n\n//inline message\n$inlineMessagePadding:$inputPadding;\n$inlineMessageMargin:0;\n$inlineMessageIconFontSize:1rem;\n$inlineMessageTextFontSize:1rem;\n$inlineMessageBorderWidth:0px;\n\n//toast\n$toastIconFontSize:2rem;\n$toastMessageTextMargin:0 0 0 1rem;\n$toastMargin:0 0 1rem 0;\n$toastPadding:1rem;\n$toastBorderWidth:0;\n$toastShadow:0 0.25rem 0.75rem rgba(0,0,0,.1);\n$toastOpacity:1;\n$toastTitleFontWeight:700;\n$toastDetailMargin:$inlineSpacing 0 0 0;\n\n//severities\n$infoMessageBg:#cce5ff;\n$infoMessageBorder:solid #b8daff;\n$infoMessageTextColor:#004085;\n$infoMessageIconColor:#004085;\n$successMessageBg:#d4edda;\n$successMessageBorder:solid #c3e6cb;\n$successMessageTextColor:#155724;\n$successMessageIconColor:#155724;\n$warningMessageBg:#fff3cd;\n$warningMessageBorder:solid #ffeeba;\n$warningMessageTextColor:#856404;\n$warningMessageIconColor:#856404;\n$errorMessageBg:#f8d7da;\n$errorMessageBorder:solid #f5c6cb;\n$errorMessageTextColor:#721c24;\n$errorMessageIconColor:#721c24;\n\n//overlays\n$overlayContentBorder:1px solid rgba(0,0,0,.2);\n$overlayContentBg:$panelContentBg;\n$overlayContainerShadow:none;\n\n//dialog\n$dialogHeaderBg:$shade000;\n$dialogHeaderBorder:1px solid $shade200;\n$dialogHeaderTextColor:$shade900;\n$dialogHeaderFontWeight:600;\n$dialogHeaderFontSize:1.25rem;\n$dialogHeaderPadding:1rem;\n$dialogContentPadding:1rem;\n$dialogFooterBorder:1px solid $shade200;\n$dialogFooterPadding:1rem;\n\n//tooltip\n$tooltipBg:$shade900;\n$tooltipTextColor:$shade000;\n$tooltipPadding:$inputPadding;\n\n//steps\n$stepsItemBg:transparent;\n$stepsItemBorder:1px solid $shade300;\n$stepsItemTextColor:$shade600;\n$stepsItemNumberWidth:2rem;\n$stepsItemNumberHeight:2rem;\n$stepsItemNumberFontSize:1.143rem;\n$stepsItemNumberColor:$shade900;\n$stepsItemNumberBorderRadius:$borderRadius;\n$stepsItemActiveFontWeight:600;\n\n//progressbar\n$progressBarHeight:1.5rem;\n$progressBarBorder:0 none;\n$progressBarBg:$shade200;\n$progressBarValueBg:$primaryColor;\n\n//menu (e.g. menu, menubar, tieredmenu)\n$menuWidth:12.5rem;\n$menuBg:$shade000;\n$menuBorder:1px solid $shade300;\n$menuTextColor:$shade900;\n$menuitemPadding:.75rem 1rem;\n$menuitemBorderRadius:0;\n$menuitemTextColor:$shade900;\n$menuitemIconColor:$shade900;\n$menuitemTextHoverColor:$shade900;\n$menuitemIconHoverColor:$shade900;\n$menuitemHoverBg:$shade200;\n$menuitemTextActiveColor:$shade900;\n$menuitemIconActiveColor:$shade900;\n$menuitemActiveBg:$shade200;\n$menuitemSubmenuIconFontSize:.875rem;\n$submenuHeaderMargin:0;\n$submenuHeaderPadding:.75rem 1rem;\n$submenuHeaderBg:$shade000;\n$submenuHeaderTextColor:$shade900;\n$submenuHeaderBorderRadius:0;\n$submenuHeaderFontWeight:600;\n$overlayMenuBg:$menuBg;\n$overlayMenuBorder:1px solid rgba(0,0,0,.15);\n$overlayMenuShadow:none;\n$verticalMenuPadding:.5rem 0;\n$menuSeparatorMargin:.5rem 0;\n\n$breadcrumbPadding:1rem;\n$breadcrumbBg:$shade100;\n$breadcrumbBorder:0 none;\n$breadcrumbItemTextColor:$primaryColor;\n$breadcrumbItemIconColor:$primaryColor;\n$breadcrumbLastItemTextColor:$shade600;\n$breadcrumbLastItemIconColor:$shade600;\n$breadcrumbSeparatorColor:$shade600;\n\n$horizontalMenuPadding:.5rem 1rem;\n$horizontalMenuBg:$shade100;\n$horizontalMenuBorder:0 none;\n$horizontalMenuTextColor:rgba(0,0,0,.9);\n$horizontalMenuRootMenuitemPadding:1rem;\n$horizontalMenuRootMenuitemBorderRadius:$borderRadius;\n$horizontalMenuRootMenuitemTextColor:rgba(0,0,0,.5);\n$horizontalMenuRootMenuitemIconColor:rgba(0,0,0,.5);\n$horizontalMenuRootMenuitemTextHoverColor:rgba(0,0,0,.7);\n$horizontalMenuRootMenuitemIconHoverColor:rgba(0,0,0,.7);\n$horizontalMenuRootMenuitemHoverBg:transparent;\n$horizontalMenuRootMenuitemTextActiveColor:rgba(0,0,0,.9);\n$horizontalMenuRootMenuitemIconActiveColor:rgba(0,0,0,.9);\n$horizontalMenuRootMenuitemActiveBg:transparent;\n\n//badge and tag\n$badgeBg:$primaryColor;\n$badgeTextColor:$primaryTextColor;\n$badgeMinWidth:1.5rem;\n$badgeHeight:1.5rem;\n$badgeFontWeight:700;\n$badgeFontSize:.75rem;\n\n$tagPadding:.25rem .4rem;\n\n//carousel\n$carouselIndicatorsPadding:1rem;\n$carouselIndicatorBg:$shade200;\n$carouselIndicatorHoverBg:$shade300;\n$carouselIndicatorBorderRadius:0;\n$carouselIndicatorWidth:2rem;\n$carouselIndicatorHeight:.5rem;\n\n//galleria\n$galleriaMaskBg:rgba(0,0,0,0.9);\n$galleriaCloseIconMargin:.5rem;\n$galleriaCloseIconFontSize:2rem;\n$galleriaCloseIconBg:transparent;\n$galleriaCloseIconColor:$shade100;\n$galleriaCloseIconHoverBg:rgba(255,255,255,0.1);\n$galleriaCloseIconHoverColor:$shade100;\n$galleriaCloseIconWidth:4rem;\n$galleriaCloseIconHeight:4rem;\n$galleriaCloseIconBorderRadius:$borderRadius;\n\n$galleriaItemNavigatorBg:transparent;\n$galleriaItemNavigatorColor:$shade100;\n$galleriaItemNavigatorMargin:0 .5rem;\n$galleriaItemNavigatorFontSize:2rem;\n$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1);\n$galleriaItemNavigatorHoverColor:$shade100;\n$galleriaItemNavigatorWidth:4rem;\n$galleriaItemNavigatorHeight:4rem;\n$galleriaItemNavigatorBorderRadius:$borderRadius;\n\n$galleriaCaptionBg:rgba(0,0,0,.5);\n$galleriaCaptionTextColor:$shade100;\n$galleriaCaptionPadding:1rem;\n\n$galleriaIndicatorsPadding:1rem;\n$galleriaIndicatorBg:$shade200;\n$galleriaIndicatorHoverBg:$shade300;\n$galleriaIndicatorBorderRadius:$borderRadius;\n$galleriaIndicatorWidth:1rem;\n$galleriaIndicatorHeight:1rem;\n$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5);\n$galleriaIndicatorBgOnItem:rgba(255,255,255,.4);\n$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6);\n\n$galleriaThumbnailContainerBg:rgba(0,0,0,.9);\n$galleriaThumbnailContainerPadding:1rem .25rem;\n$galleriaThumbnailNavigatorBg:transparent;\n$galleriaThumbnailNavigatorColor:$shade100;\n$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1);\n$galleriaThumbnailNavigatorHoverColor:$shade100;\n$galleriaThumbnailNavigatorBorderRadius:$borderRadius;\n$galleriaThumbnailNavigatorWidth:2rem;\n$galleriaThumbnailNavigatorHeight:2rem;\n\n:root {\n\t--surface-a:#{$shade000};\n\t--surface-b:#{$shade100};\n\t--surface-c:#{$shade200};\n\t--surface-d:#{$shade300};\n\t--surface-e:#{$shade000};\n\t--surface-f:#{$shade000};\n\t--text-color:#{$shade900};\n\t--text-color-secondary:#{$shade600};\n\t--primary-color:#{$primaryColor};\n\t--primary-color-text:#{$primaryTextColor};\n\t--font-family:#{$fontFamily};\n}\n`}\n \n
\n\n
Menu Modes \n
Menu has 4 modes, static , overlay , slim and horizontal . Main layout container element in App.js is used to define which mode to use by adding specific classes. List\n below indicates the style classes for each mode.
\n\n
\n Static: \"layout-wrapper menu-layout-static\" \n Overlay: \"layout-wrapper menu-layout-overlay\" \n Slim: \"layout-wrapper menu-layout-static menu-layout-slim\" \n Horizontal: \"layout-wrapper menu-layout-static menu-layout-horizontal\" \n \n\n
For example to create a horizontal menu, the div element should be in following form;
\n
\n{`\n\n`}\n\n\n
It is also possible to leave the choice to the user by keeping the preference at a component and using an expression to bind it so that user can switch between modes. Sample\n application has an example implementation of such use case. Refer to App.js for an example.
\n\n
Dark Menu \n
Default color scheme of menu is light and alternative dark mode can be activated by adding layout-menu-dark style class to the menu container.
\n
\n{`\n\n`}\n\n\n
Profile Modes \n
There are two possible locations for the user profile menu, first option is inline located inside the main menu and second option is the topbar menu. For inline mode,\n profile content should be placed above the menu and for inline mode content goes in topbar-items list. The sample demo application provides examples for\n both cases.
\n\n
Grid CSS \n
Avalon uses PrimeReact Flex Grid CSS throughout the demos such as Dashboard, however any Grid library can be used with it since Avalon Layout itself does not depend on PrimeFlex CSS.
\n\n
Customizing Styles \n
It is suggested to add your customizations in the following sass files under the \"sass/overrides\" folder instead of adding them to the scss files under sass folder to avoid maintenance issues after an update.
\n\n
\n _layout_variables : Variables of the layout._layout_styles : Styles for the layout._theme_variables : Variables of the theme._theme_styles : Styles for the theme. \n\n
Migration Guide \n
Every change is included in CHANGELOG.md file at the root folder of the distribution along with the instructions to update.
\n
\n )\n}\n","import React, { useEffect, useState } from 'react';\nimport axios from 'axios';\nimport AppCodeHighlight from '../AppCodeHighlight';\nimport { Button } from 'primereact/button';\nimport { InputText } from 'primereact/inputtext';\n\nexport const IconsDemo = () => {\n\n const [icons, setIcons] = useState([]);\n const [filteredIcons, setFilteredIcons] = useState([]);\n\n useEffect(() => {\n axios.get('assets/demo/data/icons.json').then(res => {\n let icons = res.data.icons;\n icons.sort((icon1, icon2) => {\n if (icon1.properties.name < icon2.properties.name)\n return -1;\n else if (icon1.properties.name < icon2.properties.name)\n return 1;\n else\n return 0;\n });\n\n setIcons(icons);\n setFilteredIcons(icons);\n });\n }, []);\n\n const onFilter = (event) => {\n if (!event.target.value) {\n setFilteredIcons(icons);\n }\n else {\n setFilteredIcons(icons.filter( it => {\n return it.icon.tags[0].includes(event.target.value);\n }));\n }\n }\n\n return (\n
\n
Icons \n
This layout uses PrimeIcons v4.x, PrimeTek's new modern icon library.
\n\n
Getting Started \n
PrimeIcons use the pi pi-{`{icon}`} syntax such as pi pi-check. A standalone icon can be displayed using an element like i or span.
\n
\n{`\n \n\n
\n
\n\n
Component Icons \n
Components that have icon properties accept PrimeIcons with the pi pi-{`{icon}`} syntax.
\n
\n{`\n \n\n
\n\n
Size \n
Size of the icons can easily be changed using font-size property.
\n\n
\n{`\n \n\n
\n\n
\n{`\n \n\n
\n\n
Spinning Animation \n
Special pi-spin class applies continuous rotation to an icon.
\n
\n{`\n \n\n
\n\n
List of Icons \n
Here is the current list of PrimeIcons, more icons are added periodically. You may also request new icons at the issue tracker.
\n\n
\n
\n
\n {\n filteredIcons && filteredIcons.map(icon => {\n return (\n
\n
\n
pi-{icon.properties.name}
\n
\n );\n })\n }\n
\n
\n )\n}\n","import React, { useState } from 'react';\nimport { Button } from 'primereact/button';\nimport { InputText } from 'primereact/inputtext';\nimport { DataTable } from 'primereact/datatable';\nimport { Column } from 'primereact/column';\nimport { Checkbox } from 'primereact/checkbox';\nimport { Dropdown } from 'primereact/dropdown';\nimport { InputTextarea } from 'primereact/inputtextarea';\n\nexport const Widgets = () => {\n\n const [tasksCheckbox, setTaskCheckbox] = useState([]);\n const [dropdownCity, setDropdownCity] = useState(null);\n\n const dropdownCities = [\n { name: 'New York', code: 'NY' },\n { name: 'Rome', code: 'RM' },\n { name: 'London', code: 'LDN' },\n { name: 'Istanbul', code: 'IST' },\n { name: 'Paris', code: 'PRS' }\n ];\n\n const sales = [\n {\n order: 1,\n src: 'assets/layout/images/dashboard/flag-brazil.png',\n name: 'BRAZIL',\n sales: 4234,\n change: '+35%'\n },\n {\n order: 2,\n src: 'assets/layout/images/dashboard/flag-china.png',\n name: 'CHINA',\n sales: 3214,\n change: '-25%'\n },\n {\n order: 3,\n src: 'assets/layout/images/dashboard/flag-belgium.png',\n name: 'BELGIUM',\n sales: 2842,\n change: '+28%'\n },\n {\n order: 4,\n src: 'assets/layout/images/dashboard/flag-france.png',\n name: 'FRANCE',\n sales: 1942,\n change: '+15%'\n },\n ];\n\n return (\n
\n
Reusable CSS widgets for your applications. \n
\n
\n
Overview Boxes \n
\n
\n
\n
\n Unread Messages \n
\n
150
\n
12 less than yesterday
\n
\n
\n
\n
\n
\n Check-ins \n
\n
532
\n
46 more than yesterday
\n
\n
\n
\n
\n
\n Files \n
\n
450
\n
30 more than yesterday
\n
\n
\n
\n
\n
\n Users \n
\n
532
\n
250 more than yesterday
\n
\n
\n
\n
\n
\n\n
\n
\n
Sale Table \n
\n \n \n
\n
\n\n
\n
\n
Product Statistics \n
\n \n \n \n W
\n \n \n Last Update: 12m ago \n Currently Waiting \n \n \n 253 Shipments
\n 584 Orders
\n \n \n \n \n S
\n \n \n Last Update: 12m ago \n Successfully Completed \n \n \n 312 Shipments
\n 409 Orders
\n \n \n \n \n D
\n \n \n Last Update: 6m ago \n Delayed \n \n \n 122 Shipments
\n 341 Orders
\n \n \n \n \n P
\n \n \n Last Update: 15m ago \n Preordered \n \n \n 221 Shipments
\n 332 Orders
\n \n \n \n
\n
\n
\n\n
\n
\n
\n
\n Logins \n 52003 \n +32 \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Views \n 532 \n +24792 \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Sales \n $5521 \n +243 \n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
Tasks \n
\n \n -1} onChange={(e) => setTaskCheckbox(e.value)} />\n Sales Reports \n \n \n -1} onChange={(e) => setTaskCheckbox(e.value)} />\n Pay Invoices \n \n \n -1} onChange={(e) => setTaskCheckbox(e.value)} />\n Dinner with Tony \n \n \n -1} onChange={(e) => setTaskCheckbox(e.value)} />\n Client Meeting \n \n \n -1} onChange={(e) => setTaskCheckbox(e.value)} />\n New Theme \n \n \n -1} onChange={(e) => setTaskCheckbox(e.value)} />\n Flight Ticket \n \n \n -1} onChange={(e) => setTaskCheckbox(e.value)} />\n Generate Charts \n \n \n -1} onChange={(e) => setTaskCheckbox(e.value)} />\n Call Client \n \n \n
\n
\n\n
\n
\n
Contact Us \n
\n
\n setDropdownCity(e.value)} optionLabel=\"name\" placeholder=\"Select a City\" />\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
Contacts \n
\n \n \n Madison Hughes (me) \n jane@pn-manhattan.com \n
\n \n online \n
\n \n \n \n Joshua Williams \n joshua@pn-manhattan.com \n
\n \n online \n
\n \n \n \n Emily Clark \n emily@pn-manhattan.com \n
\n \n offline \n
\n \n \n \n Tim Johnson \n tim@pn-manhattan.com \n
\n \n online \n
\n \n \n \n David Stark \n kelly@pn-manhattan.com \n
\n \n offline \n
\n \n \n
\n
\n\n
\n
\n
Chat \n
\n \n Retro occupy organic, stumptown shabby chic pour-over roof party DIY normcore. \n \n \n Actually artisan organic occupy, Wes Anderson ugh whatever pour-over gastropub selvage. \n \n \n Chillwave craft beer tote bag stumptown quinoa hashtag. \n \n \n Dreamcatcher locavore iPhone chillwave, occupy trust fund slow-carb distillery art party narwhal. \n \n \n Sed ut perspiciatis unde omnis iste natus. \n \n \n Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse. \n \n \n At vero eos et accusamus. \n \n \n
\n
\n\n
\n
Messages \n
\n
\n
\n
\n
Joshua Williams\n\t\t\t\t\t\t\t\tToday \n
\n
Paenitet me quod tu me rogas? Oh, sic, qui stultus plastic continentis rogavi te ut emas. Vides non manducare acidum hydrofluoric per plastic.
\n
\n
\n
\n
\n
\n
\n
Adelle Charles\n\t\t\t\t\t\t\t\tToday \n
\n
Quinquaginta septem est - pars tua, triginta quinque millia. Est autem extra plus quindecim, tota tua est, quom meruisset.
\n
\n
\n
\n
\n
\n
\n
Marcos Moralez\n\t\t\t\t\t\t\t\tYesterday \n
\n
Fac nos fecit. SIC.
\n
\n
\n
\n
\n
\n
\n
Matt Litherland\n\t\t\t\t\t\t\t\t3 days ago \n
\n
Puto quia una res potest - venimus in cognitionem. Vide pretium in manibus.
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n just now \n
\n
\n
Katherine May \n
Lorem ipsun dolor amet \n
\n
\n
\n
\n\n
\n 12h ago \n
\n
\n Brandon Santos \n Ab nobis, magnam sunt eum. Laudantium, repudiandae, similique!. \n
\n\n
\n 15h ago \n
\n
\n
Stephan Ward \n
Omnis veniam quibusdam ratione est repellat qui nam quisquam ab mollitia dolores ullam voluptates, similique, dignissimos. \n
\n
\n
\n
\n\n
\n 2d ago \n
\n
\n
Jason Smith \n
Laudantium, repudiandae, similique! \n
\n
\n
\n
\n\n
\n 1w ago \n
\n
\n Kevin Cox \n Quibusdam ratione est repellat qui nam quisquam veniam quibusdam ratione. \n
\n\n
\n 2w ago \n
\n
\n Walter White \n I am the one who knocks! \n
\n\n
\n
\n
\n
\n
\n
\n );\n}\n","import React, { useState } from 'react';\nimport { Button } from 'primereact/button';\nimport { Panel } from 'primereact/panel';\n\nexport const GridDemo = () => {\n\n const [columns, setColumns] = useState([0, 1, 2, 3, 4, 5]);\n\n const addColumn = () => {\n setColumns([...columns, columns.length]);\n };\n\n const removeColumn = () => {\n let newColumns = [...columns];\n newColumns.pop();\n setColumns(newColumns);\n };\n\n return (\n
\n
\n
Grid System \n
Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
\n\n
Basic \n
\n\n
Dynamic \n
\n
\n\n
\n {\n columns.map(col =>\n
\n )\n }\n
\n\n
Reverse Direction \n
\n\n
Column Direction \n
\n\n
Reverse Column Direction \n
\n\n
12 Column Grid \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n
\n\n
MultiLine \n
\n\n
Fixed Width Column \n
\n\n
Responsive \n
\n
\n
p-col-12 p-md-6 p-lg-3
\n
\n
\n
p-col-12 p-md-6 p-lg-3
\n
\n
\n
p-col-12 p-md-6 p-lg-3
\n
\n
\n
p-col-12 p-md-6 p-lg-3
\n
\n
\n\n
Horizontal Alignment - Start \n
\n\n
Horizontal Alignment - End \n
\n\n
Horizontal Alignment - Center \n
\n\n
Horizontal Alignment - Between \n
\n\n
Horizontal Alignment - Around \n
\n\n
Horizontal Alignment - Even \n
\n\n
Vertical Alignment - Start \n
\n\n
Vertical Alignment - End \n
\n\n
Vertical Alignment - Center \n
\n\n
Vertical Alignment - Stretch \n
\n\n
Vertical Alignment - Per Column \n
\n\n
Offset \n
\n\n
\n\n
Nested \n
\n\n
Panels \n
\n
\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n\t\t\t\t\t\tcupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n \n
\n
\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n\t\t\t\t\t\tcupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n \n
\n
\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n\t\t\t\t\t\tcupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n \n
\n
\n
\n
\n )\n}\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { Button } from 'primereact/button';\nimport { InputText } from 'primereact/inputtext';\nimport AppCodeHighlight from '../AppCodeHighlight';\n\nexport const SpacingDemo = () => {\n\n return (\n
\n
\n
\n
Spacing \n
\n\n
Classes \n
The classes modify the margins and use the p-m{`{position}`}-{`{value}`} syntax whereas for responsive\n values p-m{`{position}`}-{`{breakpoint}`}-{`{value}`} format is used.
\n
\n{`\n
\n
\n
\n`}\n \n
Position \n
Position can either be either of the 4 sides, the x-y axis or blank for the shortand of all sides.
\n
\n t : topb : bottoml : leftr : rightx : left and righty : top and bottomblank : all sides \n\n
Value \n
Value field varies from 0 to 6 where default value of the $spacer is 1rem. The special auto value is used to center elements using auto margins.
\n
\n 0 : $spacer * 01 : $spacer * .252 : $spacer * .53 : $spacer * 14 : $spacer * 1.55 : $spacer * 26 : $spacer * 3auto : auto margin \n\n
Breakpoint \n
Breakpoints define how the spacing should be depending on the screen size.
\n
\n sm : small screens e.g. phonesmd : medium screens e.g. tabletslg : large screens e.g. notebooksxl : larger screens .e.g monitors \n
\n
\n\n
\n
\n
Use Case 1 \n
Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap\n they are displayed on top of each other whereas with spacing this issue can easily be resolved.
\n\n
Without Spacing \n
\n
\n\n
With Spacing \n
\n
\n
\n
\n\n
\n
\n
Use Case 2 \n
Spacing utilities also work seamlessly with responsive PrimeFlex grid utilty. Example below demonstrates a case where on a smaller screen inputs receive a margin to position themselves\n separately in stacked mode, reduce the dimension of the window to view the difference.
\n\n
Without Spacing \n
\n
\n
\n
\n
\n
\n
\n
\n\n
With Spacing \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n )\n}\n","import React from 'react';\n\nexport const ElevationDemo = () => {\n let cols = [];\n\n for (let i = 1; i < 25; i++) {\n let col = (\n
\n p-shadow-{i}\n
\n\n );\n\n cols.push(col);\n }\n\n return (\n
\n
\n
\n
Shadow \n
Elevation is used to specify the separation between surfaces and elements along the z-axis. There are 24 style classes (.p-shadow-{`{level}`} ) to define the elevation layers.
\n
\n {cols}\n
\n
\n
\n
\n )\n}","import React from 'react';\n\nexport const TextDemo = () => {\n\n return (\n
\n
\n
\n
Text \n
Manage the alignment and the styling of a text with PrimeFlex text utilities.
\n\n
Alignment \n
Left
\n
Center
\n
Right
\n\n
Wrap \n
Long text wraps and does not overlow.
\n
Long text does not wrap and overflows the parent.
\n
Long text does not wrap and overflows the parent.
\n\n
Transform \n
LOWERCASE
\n
uppercase
\n
capitalize
\n\n
Style \n
Bold
\n
Normal
\n
Light
\n
Italic
\n
\n
\n
\n )\n}\n","import React from 'react';\n\nexport const TypographyDemo = () => {\n\n return (\n
\n
\n
\n
Heading 1 \n Heading 2 \n Heading 3 \n Heading 4 \n Heading 5 \n Heading 6 \n \n\n
\n
Blockquote \n
Libero voluptatum atque exercitationem praesentium provident odit aperiam. \n
\n
\n\n
\n
\n
Paragraph \n
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero voluptatum atque\n exercitationem praesentium provident odit aperiam, vitae fugit\n\t\t\t\t\tdolores nostrum laborum accusamus quia iste facere possimus minus itaque error unde.
\n
\n\n
\n
Text Styles \n
Highlight text.
\n
Deleted text.
\n
Underlined Text
\n
Small text.
\n
Bold text.
\n
Italic Text.
\n
\n
\n
\n )\n}","import React from 'react';\nimport { InputText } from 'primereact/inputtext';\nimport { Button } from 'primereact/button';\n\nexport const DisplayDemo = () => {\n\n return (\n
\n
\n
\n
Display \n
Efficiently configure the display of the component with PrimeFlex display utilities.
\n\n
Inline \n
\n
\n\n
Block \n
\n
\n\n
Visible on a Small Screen \n
Resize to view.
\n
\n\n
Hidden on a Small Screen \n
Resize to hide.
\n
\n\n
Visible to Print, Invisible for Screen \n
Only visible when printed.
\n\n
Visible to Screen, Invisible for Print \n
Not available for printing.
\n
\n
\n
\n )\n}\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport { Button } from 'primereact/button';\nimport AppCodeHighlight from '../AppCodeHighlight';\n\nexport const FlexBoxDemo = () => {\n\n return (\n
\n
\n
FlexBox \n
Easily manage the layout of your components with the responsive FlexBox utilities. If you require a\n utility to manage the layout of your application,\n refer to the\n
\n\n
Flex Container \n
An element can configured as a flexbox container using the p-d-flex or p-d-inline-flex classes.
\n\n
\n{`\nFlex Container
\nInline Flex Container
\n`}\n \n\n
Flex Container
\n
Inline Flex Container
\n\n
Direction \n
Default is applied using the {`p-flex-{direction}`} class where direction can be either of the following.
\n
\n row (default) \n row-reverse \n column \n column-reverse \n \n\n
Row \n
\n{`\n\n
Item 1
\n
Item 2
\n
Item 3
\n
\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
\n\n
Column \n
\n{`\n\n
Item 1
\n
Item 2
\n
Item 3
\n
\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
\n\n
Responsive \n
Row direction for larger screens and column for smaller.
\n\n
\n{`\n\n
Item 1
\n
Item 2
\n
Item 3
\n
\n\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
\n\n
Direction Classes \n
\n p-flex-row \n p-flex-row-reverse \n p-flex-column \n p-flex-column-reverse \n p-flex-sm-row \n p-flex-sm-row-reverse \n p-flex-sm-column \n p-flex-sm-column-reverse \n p-flex-md-row \n p-flex-md-row-reverse \n p-flex-md-column \n p-flex-md-column-reverse \n p-flex-lg-row \n p-flex-lg-row-reverse \n p-flex-lg-column \n p-flex-lg-column-reverse \n p-flex-xl-row \n p-flex-xl-row-reverse \n p-flex-xl-column \n p-flex-xl-column-reverse \n \n\n
Order \n
Order configures the way in which they appear in the flex container. {`p-order-{value}`} format is used where value can be a number from 0 to 6.
\n\n
Customized \n
\n{`\n\n
Item 1
\n
Item 2
\n
Item 3
\n
\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
\n\n
Responsive \n
Orders change depending on the screen size.
\n
\n{`\n\n
Item 1
\n
Item 2
\n
Item 3
\n
\n\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
\n\n
Order Classes \n
\n p-order-0 \n p-order-1 \n p-order-2 \n p-order-3 \n p-order-4 \n p-order-5 \n p-order-6 \n p-order-sm-0 \n p-order-sm-1 \n p-order-sm-2 \n p-order-sm-3 \n p-order-sm-4 \n p-order-sm-5 \n p-order-sm-6 \n p-order-md-0 \n p-order-md-1 \n p-order-md-2 \n p-order-md-3 \n p-order-md-4 \n p-order-md-5 \n p-order-md-6 \n p-order-lg-0 \n p-order-lg-1 \n p-order-lg-2 \n p-order-lg-3 \n p-order-lg-4 \n p-order-lg-5 \n p-order-lg-6 \n p-order-xl-0 \n p-order-xl-1 \n p-order-xl-2 \n p-order-xl-3 \n p-order-xl-4 \n p-order-xl-5 \n p-order-xl-6 \n \n\n
Wrap \n
Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is {`p-flex-{value}`} and the value field can be either of the\n listed alternatives.
\n\n
\n nowrap (default) \n wrap \n wrap-reverse \n \n\n
No Wrap \n
\n{`\n\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 5
\n
Item 6
\n
\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 5
\n
Item 6
\n
\n\n
Wrap \n
\n{`\n\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 5
\n
Item 6
\n
\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 5
\n
Item 6
\n
\n\n
Wrap Reverse \n
\n{`\n\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 5
\n
Item 6
\n
\n
\n
Item 1
\n
Item 2
\n
Item 3
\n
Item 4
\n
Item 5
\n
Item 6
\n
\n\n
Wrap Classes \n
\n p-flex-nowrap \n p-flex-wrap \n p-flex-wrap-reverse \n p-flex-sm-nowrap \n p-flex-sm-wrap \n p-flex-sm-wrap-reverse \n p-flex-md-nowrap \n p-flex-md-wrap \n p-flex-md-wrap-reverse \n p-flex-lg-nowrap \n p-flex-lg-wrap \n p-flex-lg-wrap-reverse \n p-flex-xl-nowrap \n p-flex-xl-wrap \n p-flex-xl-wrap-reverse \n \n\n
Justify Content \n
Justify content is the alignment along the main axis and defined using the {`p-jc-{value}`} format with responsive alternatives. Value field accepts\n the options below.
\n
\n start \n end \n center \n between \n around \n evenly \n \n\n
Between \n
\n{`\n\n`}\n \n
\n\n
Center \n
\n{`\n\n`}\n \n
\n\n
Justify Content Classes \n
\n p-jc-start \n p-jc-end \n p-jc-center \n p-jc-between \n p-jc-around \n p-jc-evenly \n p-jc-sm-start \n p-jc-sm-end \n p-jc-sm-center \n p-jc-sm-between \n p-jc-sm-around \n p-jc-sm-evenly \n p-jc-md-start \n p-jc-md-end \n p-jc-md-center \n p-jc-md-between \n p-jc-md-around \n p-jc-md-evenly \n p-jc-lg-start \n p-jc-lg-end \n p-jc-lg-center \n p-jc-lg-between \n p-jc-lg-around \n p-jc-lg-evenly \n p-jc-xl-start \n p-jc-xl-end \n p-jc-xl-center \n p-jc-xl-between \n p-jc-xl-around \n p-jc-xl-evenly \n \n\n
Align Items \n
Align Items configuration is the alignment along the cross axis and defined using the {`p-ai-{value}`} format with responsive alternatives. Value field accepts\n the options below.
\n
\n start \n end \n center \n baseline \n stretch (default) \n \n\n
Start \n
\n{`\n\n`}\n \n
\n\n
Center \n
\n{`\n\n`}\n \n
\n\n
Align Items Classes \n
\n p-ai-start \n p-ai-end \n p-ai-center \n p-ai-baseline \n p-ai-strech \n p-ai-sm-start \n p-ai-sm-end \n p-ai-sm-center \n p-ai-sm-baseline \n p-ai-sm-strech \n p-ai-md-start \n p-ai-md-end \n p-ai-md-center \n p-ai-md-baseline \n p-ai-md-strech \n p-ai-lg-start \n p-ai-lg-end \n p-ai-lg-center \n p-ai-lg-baseline \n p-ai-lg-strech \n p-ai-xl-start \n p-ai-xl-end \n p-ai-xl-center \n p-ai-xl-baseline \n p-ai-xl-strech \n \n\n
Align Self \n
Align self configuration is the alignment along the cross axis for a particular element and defined using the {`p-as-{value}`} format with responsive alternatives. Value field accepts\n the options below.
\n
\n start \n end \n center \n baseline \n stretch (default) \n \n\n
\n{`\n\n
Start
\n
Center
\n
End
\n
Stretch
\n
\n
\n
Start
\n
Center
\n
End
\n
Stretch
\n
\n\n
Align Items Classes \n
\n p-as-start \n p-as-end \n p-as-center \n p-as-baseline \n p-as-strech \n p-as-sm-start \n p-as-sm-end \n p-as-sm-center \n p-as-sm-baseline \n p-as-sm-strech \n p-as-md-start \n p-as-md-end \n p-as-md-center \n p-as-md-baseline \n p-as-md-strech \n p-as-lg-start \n p-as-lg-end \n p-as-lg-center \n p-as-lg-baseline \n p-as-lg-strech \n p-as-xl-start \n p-as-xl-end \n p-as-xl-center \n p-as-xl-baseline \n p-as-xl-strech \n \n\n
Align Content \n
Align content is the alignment along the cross axis and defined using the {`p-ac-{value}`} format with responsive alternatives. Value field accepts\n the options below.
\n
\n start \n end \n center \n around \n stretch \n between \n \n\n
Align Content Classes \n
\n p-ac-start \n p-ac-end \n p-ac-center \n p-ac-around \n p-ac-stretch \n p-ac-between \n p-ac-sm-start \n p-ac-sm-end \n p-ac-sm-center \n p-ac-sm-around \n p-ac-sm-stretch \n p-ac-sm-between \n p-ac-md-start \n p-ac-md-end \n p-ac-md-center \n p-ac-md-around \n p-ac-md-stretch \n p-ac-md-between \n p-ac-lg-start \n p-ac-lg-end \n p-ac-lg-center \n p-ac-lg-around \n p-ac-lg-stretch \n p-ac-lg-between \n p-ac-xl-start \n p-ac-xl-end \n p-ac-xl-center \n p-ac-xl-around \n p-ac-xl-stretch \n p-ac-xl-between \n \n\n
Margin with FlexBox \n
When combined with
\n
Horizontal Spacing \n\n
\n{`\n\n \n
\n`}\n \n
\n
\n\n
Vertical Spacing \n
\n{`\n\n`}\n \n
\n
\n
\n )\n}\n","import React, { useState, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { DataTable } from 'primereact/datatable';\nimport { Column } from 'primereact/column';\nimport { Toast } from 'primereact/toast';\nimport { Button } from 'primereact/button';\nimport { FileUpload } from 'primereact/fileupload';\nimport { Rating } from 'primereact/rating';\nimport { Toolbar } from 'primereact/toolbar';\nimport { InputTextarea } from 'primereact/inputtextarea';\nimport { RadioButton } from 'primereact/radiobutton';\nimport { InputNumber } from 'primereact/inputnumber';\nimport { Dialog } from 'primereact/dialog';\nimport { InputText } from 'primereact/inputtext';\nimport ProductService from '../service/ProductService';\n\nexport const CrudDemo = () => {\n\n let emptyProduct = {\n id: null,\n name: '',\n image: null,\n description: '',\n category: null,\n price: 0,\n quantity: 0,\n rating: 0,\n inventoryStatus: 'INSTOCK'\n };\n\n const [products, setProducts] = useState(null);\n const [productDialog, setProductDialog] = useState(false);\n const [deleteProductDialog, setDeleteProductDialog] = useState(false);\n const [deleteProductsDialog, setDeleteProductsDialog] = useState(false);\n const [product, setProduct] = useState(emptyProduct);\n const [selectedProducts, setSelectedProducts] = useState(null);\n const [submitted, setSubmitted] = useState(false);\n const [globalFilter, setGlobalFilter] = useState(null);\n const toast = useRef(null);\n const dt = useRef(null);\n\n useEffect(() => {\n const productService = new ProductService();\n productService.getProducts().then(data => setProducts(data));\n }, []);\n\n const formatCurrency = (value) => {\n return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });\n }\n\n const openNew = () => {\n setProduct(emptyProduct);\n setSubmitted(false);\n setProductDialog(true);\n }\n\n const hideDialog = () => {\n setSubmitted(false);\n setProductDialog(false);\n }\n\n const hideDeleteProductDialog = () => {\n setDeleteProductDialog(false);\n }\n\n const hideDeleteProductsDialog = () => {\n setDeleteProductsDialog(false);\n }\n\n const saveProduct = () => {\n setSubmitted(true);\n\n if (product.name.trim()) {\n let _products = [...products];\n let _product = { ...product };\n if (product.id) {\n const index = findIndexById(product.id);\n\n _products[index] = _product;\n toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });\n }\n else {\n _product.id = createId();\n _product.image = 'product-placeholder.svg';\n _products.push(_product);\n toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });\n }\n\n setProducts(_products);\n setProductDialog(false);\n setProduct(emptyProduct);\n }\n }\n\n const editProduct = (product) => {\n setProduct({ ...product });\n setProductDialog(true);\n }\n\n const confirmDeleteProduct = (product) => {\n setProduct(product);\n setDeleteProductDialog(true);\n }\n\n const deleteProduct = () => {\n let _products = products.filter(val => val.id !== product.id);\n setProducts(_products);\n setDeleteProductDialog(false);\n setProduct(emptyProduct);\n toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });\n }\n\n const findIndexById = (id) => {\n let index = -1;\n for (let i = 0; i < products.length; i++) {\n if (products[i].id === id) {\n index = i;\n break;\n }\n }\n\n return index;\n }\n\n const createId = () => {\n let id = '';\n let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n for (let i = 0; i < 5; i++) {\n id += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n return id;\n }\n\n const exportCSV = () => {\n dt.current.exportCSV();\n }\n\n const confirmDeleteSelected = () => {\n setDeleteProductsDialog(true);\n }\n\n const deleteSelectedProducts = () => {\n let _products = products.filter(val => !selectedProducts.includes(val));\n setProducts(_products);\n setDeleteProductsDialog(false);\n setSelectedProducts(null);\n toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });\n }\n\n const onCategoryChange = (e) => {\n let _product = { ...product };\n _product['category'] = e.value;\n setProduct(_product);\n }\n\n const onInputChange = (e, name) => {\n const val = (e.target && e.target.value) || '';\n let _product = { ...product };\n _product[`${name}`] = val;\n\n setProduct(_product);\n }\n\n const onInputNumberChange = (e, name) => {\n const val = e.value || 0;\n let _product = { ...product };\n _product[`${name}`] = val;\n\n setProduct(_product);\n }\n\n const leftToolbarTemplate = () => {\n return (\n
\n \n )\n }\n\n const rightToolbarTemplate = () => {\n return (\n
\n \n )\n }\n\n const codeBodyTemplate = (rowData) => {\n return (\n <>\n
Code \n {rowData.code}\n \n );\n }\n\n const nameBodyTemplate = (rowData) => {\n return (\n <>\n
Name \n {rowData.name}\n \n );\n }\n\n const imageBodyTemplate = (rowData) => {\n return (\n <>\n
Image \n
\n \n )\n }\n\n const priceBodyTemplate = (rowData) => {\n return (\n <>\n
Price \n {formatCurrency(rowData.price)}\n \n );\n }\n\n const categoryBodyTemplate = (rowData) => {\n return (\n <>\n
Category \n {rowData.category}\n \n );\n }\n\n const ratingBodyTemplate = (rowData) => {\n return (\n <>\n
Reviews \n
\n \n );\n }\n\n const statusBodyTemplate = (rowData) => {\n return (\n <>\n
Status \n
{rowData.inventoryStatus} \n \n )\n }\n\n const actionBodyTemplate = (rowData) => {\n return (\n
\n editProduct(rowData)} />\n confirmDeleteProduct(rowData)} />\n
\n );\n }\n\n const header = (\n
\n
Manage Products \n \n setGlobalFilter(e.target.value)} placeholder=\"Search...\" />\n \n \n );\n\n const productDialogFooter = (\n <>\n
\n
\n \n );\n const deleteProductDialogFooter = (\n <>\n
\n
\n \n );\n const deleteProductsDialogFooter = (\n <>\n
\n
\n \n );\n\n return (\n
\n
\n
\n
\n
\n\n
setSelectedProducts(e.value)}\n dataKey=\"id\" paginator rows={10} rowsPerPageOptions={[5, 10, 25]} className=\"datatable-responsive\"\n paginatorTemplate=\"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown\"\n currentPageReportTemplate=\"Showing {first} to {last} of {totalRecords} products\"\n globalFilter={globalFilter} emptyMessage=\"No products found.\" header={header}>\n \n\n
\n {product.image && \n Name \n onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && !product.name })} />\n {submitted && !product.name && Name is required. }\n
\n \n Description \n onInputChange(e, 'description')} required rows={3} cols={20} />\n
\n\n \n
Category \n
\n
\n Accessories \n
\n
\n Clothing \n
\n
\n Electronics \n
\n
\n Fitness \n
\n
\n
\n
\n Price \n onInputNumberChange(e, 'price')} mode=\"currency\" currency=\"USD\" locale=\"en-US\" />\n
\n
\n Quantity \n onInputNumberChange(e, 'quantity')} integeronly />\n
\n
\n\n
\n \n Are you sure you want to delete {product.name} ? }\n
\n \n\n
\n \n Are you sure you want to delete the selected products? }\n
\n \n
\n
\n
\n );\n}\n","import React from 'react';\nimport { Button } from 'primereact/button';\nimport { Card } from 'primereact/card';\nimport { Timeline } from 'primereact/timeline';\nimport classNames from 'classnames';\n\n\nexport const TimelineDemo = () => {\n\n const customEvents = [\n {\n status: 'Ordered',\n date: '15/10/2020 10:30',\n icon: 'pi pi-shopping-cart',\n color: '#9C27B0',\n image: 'game-controller.jpg'\n },\n { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },\n { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-envelope', color: '#FF9800' },\n { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }\n ];\n\n const horizontalEvents = [\n '2020', '2021', '2022', '2023'\n ];\n\n\n const customizedContent = (item) => {\n return (\n
\n { item.image && Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt\n quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
\n \n );\n };\n\n const customizedMarker = (item) => {\n return (\n
\n \n );\n };\n\n return
\n
\n
\n
Timeline \n\n Custom Timeline \n Horizontal - Alternate Align \n item} opposite={ } />\n \n
\n
\n}","import React, { useEffect, useState } from 'react';\nimport FullCalendar from '@fullcalendar/react';\nimport dayGridPlugin from '@fullcalendar/daygrid';\nimport timeGridPlugin from '@fullcalendar/timegrid';\nimport interactionPlugin from '@fullcalendar/interaction';\nimport { Button } from 'primereact/button';\nimport { Dialog } from 'primereact/dialog';\nimport { InputText } from 'primereact/inputtext';\nimport { Checkbox } from 'primereact/checkbox';\nimport { Calendar as PRCalendar } from 'primereact/calendar';\nimport EventService from '../service/EventService';\n\nexport const CalendarDemo = () => {\n\n const [eventDialog, setEventDialog] = useState(false);\n const [clickedEvent, setClickedEvent] = useState(null);\n const [changedEvent, setChangedEvent] = useState({ title: '', start: null, end: null, allDay: null });\n const [events, setEvents] = useState(null);\n\n const eventClick = (e) => {\n const { title, start, end } = e.event;\n setEventDialog(true);\n setClickedEvent(e.event);\n setChangedEvent({ title, start, end, allDay: null });\n }\n\n useEffect(() => {\n const eventService = new EventService();\n eventService.getEvents().then(data => setEvents(data));\n }, [])\n\n const save = () => {\n setEventDialog(false);\n\n clickedEvent.setProp('title', changedEvent.title)\n clickedEvent.setStart(changedEvent.start)\n clickedEvent.setEnd(changedEvent.end)\n clickedEvent.setAllDay(changedEvent.allDay)\n\n setChangedEvent({ title: '', start: null, end: '', allDay: null });\n };\n\n const reset = () => {\n const { title, start, end } = clickedEvent;\n setChangedEvent({ title, start, end, allDay: null });\n };\n\n const footer = (\n <>\n
\n
\n \n );\n\n return (\n
\n
\n
\n\n
\n\n
setEventDialog(false)}>\n \n
\n Title \n setChangedEvent({ ...changedEvent, ...{ title: e.target.value } })} required autoFocus />\n
\n
\n
From \n
setChangedEvent({ ...changedEvent, ...{ start: e.value } })} showTime appendTo={document.body} />\n \n
\n
To \n
setChangedEvent({ ...changedEvent, ...{ end: e.value } })} showTime appendTo={document.body} />\n \n
\n setChangedEvent({ ...changedEvent, ...{ allDay: e.value } })} />\n All Day \n
\n
\n
\n
\n
\n )\n}\n","import React from 'react';\nimport { Button } from 'primereact/button';\n\nexport const Invoice = () => {\n\n const print = () => {\n window.print();\n }\n\n return (\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
9137 3rd Lane California City, CA 93504.
\n
\n
\n
INVOICE \n
30/08/2019
\n
\n
\n
\n
\n
\n
BILL TO \n \n
\n
DATE \n \n
\n
INVOICE NO \n \n
\n
NOTES \n \n
\n
\n
\n
TOYOKSU SYSCOM CORPORATION 11-27, MEIEKI 4-CHROME\n NAKAMURA-KU, NAGOYA 450-0002 JAPAN
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
DESCRIPTION \n \n
\n
QUANTITY \n \n
\n
UNIT PRICE \n \n
\n
LINE TOTAL \n \n
\n
\n
\n
1 Year PrimeFaces Elite Subscription
\n
\n
\n
\n
\n
\n
\n
\n
PrimeFaces Ultima Extended License
\n
\n
\n
\n
\n
\n
\n
\n
PrimeFaces Prestige Basic License
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
BANK \n \n
\n
TOTAL \n \n\n
\n
\n
\n
Bank \n \n
\n
\n
Subtotal \n \n
\n
\n
\n
\n
Account Beneficiary \n \n
\n
\n
VAT \n \n
\n
\n
\n
\n
Swift \n \n
\n
\n
Total \n \n
\n
\n
\n
\n
IBAN \n \n
\n
GB04420235692263866724650931
\n
\n
\n
\n
\n
\n
\n
\n
\n );\n}\n","import React from 'react';\nimport { InputText } from 'primereact/inputtext';\nimport { Accordion, AccordionTab } from 'primereact/accordion';\n\nexport const Help = () => {\n\n return (\n
\n
\n
\n
\n
We are here to help \n
\n
\n
\n
\n
\n\n
\n
\n
General \n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\t\t\t\t\t\t\tExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n \n \n Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi\n architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione\n\t\t\t\t\t\t\tvoluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
\n \n \n At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati\n cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.\n\t\t\t\t\t\t\tNam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
\n \n \n\n
FAQ \n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\t\t\t\t\t\t\tExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n \n \n Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi\n architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione\n\t\t\t\t\t\t\tvoluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
\n \n \n At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati\n cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.\n\t\t\t\t\t\t\tNam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
\n \n \n
\n
\n\n\n
\n
\n
System Status \n
All services are operational.
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n 30 Days Ago \n Today \n
\n
\n\n
\n
Articles \n
Recent articles from our team.
\n
\n
\n
\n
Building Revenue With Confidence \n And avoiding failures \n \n
\n
\n
\n
\n\n
\n
\n
Latest Marketing Trends \n Don't miss out our tips \n \n
\n
\n
\n
\n\n
\n
\n
How To Reach Your Audience \n 10 ways to increase your efficiency \n \n
\n
\n
\n
\n
\n
\n
\n
\n );\n}\n","import React from 'react';\n\nexport const EmptyPage = () => {\n\n return (\n
\n
\n
\n
Empty Page \n
Use this page to start from scratch and place your custom content.
\n
\n
\n
\n );\n}\n","import axios from 'axios';\r\n\r\nexport default class OCDSApiService {\r\n\r\n async getRecords() {\r\n return await axios.get('https://ocdsapi.dppib-crsgov.org/api/ocdsapi/getocidreleases?year=0&month=0', { headers: { 'Access-Control-Allow-Origin': '*' } }).then(res => res.data);\r\n }\r\n async getRecordsWithYearAndMonth(year, month) {\r\n return await axios.get('https://ocdsapi.dppib-crsgov.org/api/ocdsapi/getocidreleases?year=' + year + '&month=' + month, { headers: { 'Access-Control-Allow-Origin': '*' } }).then(res => res.data);\r\n }\r\n\r\n async getExistingYears() {\r\n var yearslist = await axios.get('https://ocdsapi.dppib-crsgov.org/api/ocdsapi/getExistingYearList').then(res => res.data);\r\n var arraylist = yearslist.map(element => ({ code: element, name: element }));\r\n //console.log(arraylist);\r\n return arraylist;\r\n }\r\n\r\n async getReleasePackageItemList() {\r\n return await axios.get('https://ocdsapi.dppib-crsgov.org/api/ocdsAPI/getReleasePackageItemList', { headers: { 'Access-Control-Allow-Origin': '*' } }).then(res => res.data);\r\n }\r\n\r\n async getExcelExportPackageItem(id) {\r\n axios({\r\n url: 'https://ocdsapi.dppib-crsgov.org/api/ocdsAPI/getExcelPackageFile?id=' + id,\r\n method: 'GET',\r\n responseType: 'blob', // important\r\n headers: { 'Accept': 'application/vnd.ms-excel' }\r\n }).then((response) => {\r\n const url = window.URL.createObjectURL(new Blob([response.data]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n \r\n link.setAttribute('download', id + '-' +'ReleasePackage.xlsx');\r\n document.body.appendChild(link);\r\n link.click();\r\n });\r\n }\r\n\r\n async getReleasePackageItem(year, month) {\r\n axios({\r\n url: 'https://ocdsapi.dppib-crsgov.org/api/ocdsAPI/getReleasePackage?year=' + year + '&month=' + month,\r\n method: 'GET',\r\n responseType: 'blob', // important\r\n headers: { 'Accept': 'application/json' }\r\n }).then((response) => {\r\n const url = window.URL.createObjectURL(new Blob([response.data]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n \r\n link.setAttribute('download', year + month + '-' +'ReleasePackage.json');\r\n document.body.appendChild(link);\r\n link.click();\r\n });\r\n }\r\n\r\n async getRecordPackageItem(year, month) {\r\n axios({\r\n url: 'https://ocdsapi.dppib-crsgov.org/api/ocdsAPI/getRecordPackage?year=' + year + '&month=' + month,\r\n method: 'GET',\r\n responseType: 'blob', // important\r\n headers: { 'Accept': 'application/json' }\r\n }).then((response) => {\r\n const url = window.URL.createObjectURL(new Blob([response.data]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n \r\n link.setAttribute('download', year + month + '-' +'RecordPackage.json');\r\n document.body.appendChild(link);\r\n link.click();\r\n });\r\n }\r\n\r\n // async getExcelExportPackageItem(id) {\r\n // return await axios.get('https://ocdsapi.dppib-crsgov.org/api/ocdsAPI/getExcelPackageFile?id=' + id, { headers: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/vnd.ms-excel', 'Access-Control-Expose-Headers': 'X-Suggested-Filename'}, responseType: 'blob' }).then(res => res.data); \r\n // }\r\n\r\n}","import React, { useState, useEffect, useRef } from 'react';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\n// import { Rating } from 'primereact/rating';\r\nimport { Button } from 'primereact/button';\r\nimport { Toast } from 'primereact/toast';\r\nimport { InputText } from 'primereact/inputtext';\r\n// import { ProgressBar } from 'primereact/progressbar';\r\n// import ProductService from '../service/ProductService';\r\n// import CustomerService from '../service/CustomerService';\r\nimport OCDSApiService from '../service/OCDSApiService';\r\nimport { TabPanel, TabView } from 'primereact/tabview';\r\nimport { Dropdown } from 'primereact/dropdown';\r\nimport '../assets/css/DataTableStyle.css';\r\n\r\n\r\nexport const OCDSRecords = () => {\r\n\r\n // const [customer1, setCustomer1] = useState(null);\r\n // const [customer2, setCustomer2] = useState(null);\r\n // const [customer3, setCustomer3] = useState(null);\r\n const [records, setRecords] = useState(null);\r\n const [existingYears, setExistingYears] = useState(null);\r\n // const [selectedCustomers, setSelectedCustomers] = useState(null);\r\n // const [globalFilter1, setGlobalFilter1] = useState('');\r\n // const [globalFilter2, setGlobalFilter2] = useState('');\r\n const [globalFilter3, setGlobalFilter3] = useState('');\r\n // const [loading1, setLoading1] = useState(true);\r\n const [loading2, setLoading2] = useState(true);\r\n // const [products, setProducts] = useState(null);\r\n const [expandedRows, setExpandedRows] = useState([]);\r\n const toast = useRef(null);\r\n const [monthValue, setMonthValue] = useState('');\r\n const [yearValue, setYearValue] = useState('');\r\n\r\n const months = [\r\n { name: 'January', code: '1' },\r\n { name: 'February', code: '2' },\r\n { name: 'March', code: '3' },\r\n { name: 'April', code: '4' },\r\n { name: 'May', code: '5' },\r\n { name: 'June', code: '6' },\r\n { name: 'July', code: '7' },\r\n { name: 'August', code: '8' },\r\n { name: 'September', code: '9' },\r\n { name: 'October', code: '10' },\r\n { name: 'November', code: '11' },\r\n { name: 'December', code: '12' },\r\n ];\r\n\r\n useEffect(() => {\r\n const oCDSApiService = new OCDSApiService();\r\n oCDSApiService.getRecords().then(data => { setRecords(data); setLoading2(false)});\r\n oCDSApiService.getExistingYears().then(data => setExistingYears(data));\r\n }, []);\r\n\r\n const onRowExpand = (event) => {\r\n //toast.current.show({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });\r\n };\r\n\r\n const onRowCollapse = (event) => {\r\n //toast.current.show({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });\r\n };\r\n\r\n \r\n const formatCurrency = (value) => {\r\n return value.toLocaleString('en-US', { style: 'currency', currency: 'NGN' });\r\n };\r\n\r\n const formatDate = (value) => {\r\n return new Intl.DateTimeFormat('en-GB', {\r\n month: 'long',\r\n day: '2-digit',\r\n year: 'numeric',\r\n }).format(new Date(value))\r\n };\r\n\r\n \r\n const bodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field]}\r\n \r\n );\r\n };\r\n\r\n const objectBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field].name}\r\n \r\n );\r\n };\r\n\r\n const awardStatusBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field][0].status}\r\n \r\n );\r\n };\r\n\r\n const arrayBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field][0].title}\r\n \r\n );\r\n };\r\n\r\n const contractorBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field][0].suppliers[0].name}\r\n \r\n );\r\n };\r\n\r\n \r\n // const actionTemplate = () =>
;\r\n\r\n const productsTableHeader = (\r\n
\r\n {/* \r\n setGlobalFilter3(e.target.value)} placeholder=\"Search\" />\r\n \r\n
\r\n );\r\n\r\n \r\n const contractAmountBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
Price \r\n {formatCurrency(data[props.field][0].value.amount)}\r\n \r\n );\r\n };\r\n\r\n const contractDateBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
Price \r\n {formatDate(data[props.field])}\r\n \r\n );\r\n };\r\n\r\n \r\n\r\n const detailRowExpansionTemplate = (data) => {\r\n return (\r\n
\r\n
Details for {data.ocid} release \r\n
\r\n \r\n\r\n \r\n
Project
\r\n
{data.planning.budget.project}
\r\n
\r\n
Rationale
\r\n
{data.planning.rationale}
\r\n
\r\n
Budget Reference
\r\n
{data.planning.budget.id}
\r\n
\r\n
Budget Description
\r\n
{data.planning.budget.description}
\r\n
\r\n
Budget Amount
\r\n
{formatCurrency(data.planning.budget.amount.amount)}
\r\n
\r\n \r\n \r\n \r\n
Tender Period
\r\n
\r\n
{formatDate(data.tender.tenderPeriod.startDate)}
\r\n
\r\n
{formatDate(data.tender.tenderPeriod.endDate)}
\r\n
\r\n
Eligibility Criteria
\r\n
{data.tender.eligibilityCriteria}
\r\n
\r\n
Procurement Category
\r\n
{data.tender.mainProcurementCategory}
\r\n
\r\n
Procurement Method
\r\n
{data.tender.procurementMethodDetails}
\r\n
\r\n
Submission Method
\r\n
{data.tender.submissionMethodDetails}
\r\n
No. of Tenderers
\r\n
{data.tender.numberOfTenderers}
\r\n
\r\n
Tender Items
\r\n
\r\n \r\n \r\n
\r\n
\r\n
Procuring Entity
\r\n
{data.tender.procuringEntity.id} - {data.tender.procuringEntity.name}
\r\n
\r\n
Tenderers Status
\r\n
\r\n
\r\n \r\n \r\n \r\n
Contract Period
\r\n
\r\n
{formatDate(data.awards[0].contractPeriod.startDate)}
\r\n
\r\n
{formatDate(data.awards[0].contractPeriod.endDate)}
\r\n
\r\n
Award Criteria
\r\n
{data.tender.awardCriteria}
\r\n
\r\n
Award Date
\r\n
{formatDate(data.awards[0].date)}
\r\n
\r\n
Award Amount
\r\n
{formatCurrency(data.awards[0].value.amount)}
\r\n
\r\n
Contractor Reg. No.
\r\n
{data.awards[0].suppliers[0].id}
\r\n
Contractor Name
\r\n
{data.awards[0].suppliers[0].name}
\r\n
\r\n
Award Items
\r\n
\r\n \r\n \r\n
\r\n
\r\n
Award Status
\r\n
\r\n
\r\n \r\n \r\n
Title
\r\n
{data.contracts[0].title}
\r\n
\r\n
Date Signed
\r\n
{formatDate(data.contracts[0].dateSigned)}
\r\n
\r\n
Description
\r\n
{data.contracts[0].description}
\r\n
\r\n
Contract Amount
\r\n
{formatCurrency(data.contracts[0].value.amount)}
\r\n
\r\n
Contractor Reg. No.
\r\n
{data.awards[0].suppliers[0].id}
\r\n
Contractor Name
\r\n
{data.awards[0].suppliers[0].name}
\r\n
\r\n
Contract Status
\r\n
{data.contracts[0].status}
\r\n
\r\n
Contract Period
\r\n
\r\n
{formatDate(data.awards[0].contractPeriod.startDate)}
\r\n
\r\n
{formatDate(data.awards[0].contractPeriod.endDate)}
\r\n
\r\n \r\n {/* \r\n */}\r\n \r\n
Contract Amount
\r\n
{formatCurrency(data.contracts[0].value.amount)}
\r\n
\r\n
Transaction Date
\r\n
{formatDate(data.contracts[0].implementation.transactions[0].date)}
\r\n
\r\n
Transaction Amount
\r\n
{formatCurrency(data.contracts[0].implementation.transactions[0].value.amount)}
\r\n
\r\n
Contract Status
\r\n
{data.contracts[0].status}
\r\n
\r\n \r\n {/*
\r\n \r\n */}\r\n
\r\n );\r\n };\r\n\r\n \r\n\r\n const handleSearchButton = (e) => {\r\n e.preventDefault();\r\n setLoading2(true);\r\n const oCDSApiService = new OCDSApiService();\r\n var selectedmonth = monthValue === '' ? 0 : monthValue.code;\r\n var selectedyear = yearValue === '' ? 0 : yearValue.code;\r\n if (selectedyear === 0 && selectedmonth !== 0) {\r\n alert(\"Please select a year\");\r\n } else {\r\n oCDSApiService.getRecordsWithYearAndMonth(selectedyear, selectedmonth).then(data => { setRecords(data); setLoading2(false) });\r\n }\r\n };\r\n\r\n const handleClearButton = (e) => {\r\n e.preventDefault();\r\n setLoading2(true);\r\n setYearValue('');\r\n setMonthValue('');\r\n const oCDSApiService = new OCDSApiService();\r\n oCDSApiService.getRecords().then(data => { setRecords(data); setLoading2(false)} );\r\n };\r\n\r\n return (\r\n
\r\n \r\n
\r\n
\r\n
Search with Year & Month \r\n
\r\n
\r\n
\r\n \r\n setYearValue(e.value)} optionLabel=\"name\"> \r\n Select Year \r\n \r\n
\r\n
\r\n \r\n setMonthValue(e.value)} optionLabel=\"name\"> \r\n Select Month \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n {/*
Row Expand */}\r\n\r\n setExpandedRows(e.data)} onRowExpand={onRowExpand} onRowCollapse={onRowCollapse}\r\n rowHover globalFilter={globalFilter3} emptyMessage=\"No records found.\" loading={loading2} header={productsTableHeader} rowExpansionTemplate={detailRowExpansionTemplate}>\r\n \r\n\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n )\r\n}\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\nimport { Button } from 'primereact/button';\r\nimport { InputText } from 'primereact/inputtext';\r\nimport OCDSApiService from '../service/OCDSApiService';\r\n\r\n\r\nexport const OCDSReleasePackage = () => {\r\n\r\n\r\n const [packages, setPackages] = useState(null);\r\n const [globalFilter3, setGlobalFilter3] = useState('');\r\n const [loading1, setLoading1] = useState(true);\r\n\r\n\r\n\r\n useEffect(() => {\r\n const oCDSApiService = new OCDSApiService();\r\n oCDSApiService.getReleasePackageItemList().then(data => { setPackages(data); setLoading1(false) });\r\n }, []);\r\n\r\n \r\n\r\n const formatDate = (value) => {\r\n return new Intl.DateTimeFormat('en-GB', {\r\n month: 'long',\r\n day: '2-digit',\r\n year: 'numeric',\r\n }).format(new Date(value))\r\n };\r\n\r\n\r\n const bodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field]}\r\n \r\n );\r\n };\r\n\r\n \r\n const actionTemplate = (data, props) => {\r\n return (\r\n <>\r\n
\r\n \r\n )\r\n };\r\n\r\n const handleDownloadReleasePackage = (params) => (e) => {\r\n e.preventDefault();\r\n //alert(params);\r\n const year = params.substring(0, 4);\r\n const month = params.substring(4, 6);\r\n const oCDSApiService = new OCDSApiService();\r\n oCDSApiService.getReleasePackageItem(year, month).then(data => console.log(data));\r\n }\r\n\r\n const actionTemplate2 = (data, props) => {\r\n return (\r\n <>\r\n
\r\n \r\n )\r\n };\r\n\r\n const handleDownloadRecordPackage = (params) => (e) => {\r\n e.preventDefault();\r\n //alert(params);\r\n const year = params.substring(0, 4);\r\n const month = params.substring(4, 6);\r\n const oCDSApiService = new OCDSApiService();\r\n oCDSApiService.getRecordPackageItem(year, month).then(data => console.log(data));\r\n }\r\n\r\n \r\n\r\n const actionTemplate3 = (data, props) => {\r\n return (\r\n <>\r\n
\r\n \r\n )\r\n };\r\n\r\n const handleDownloadExcelExport = (params) => (e) => {\r\n e.preventDefault();\r\n //alert(params);\r\n const oCDSApiService = new OCDSApiService();\r\n oCDSApiService.getExcelExportPackageItem(params).then(data => console.log(data));\r\n //var url = 'https://ocdsapi.dppib-crsgov.org/api/ocdsAPI/getExcelPackageFile?id=' + params ;\r\n\r\n //window.open(url, '_blank');\r\n }\r\n\r\n \r\n const contractDateBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
Price \r\n {formatDate(data[props.field])}\r\n \r\n );\r\n };\r\n\r\n \r\n const customer2TableHeader = (\r\n
\r\n List of Packages\r\n \r\n setGlobalFilter3(e.target.value)} placeholder=\"Global Search\" />\r\n \r\n
\r\n );\r\n\r\n return (\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n )\r\n}\r\n","import axios from 'axios';\r\n\r\nexport default class PlanningApiService {\r\n\r\n async getPlannings() {\r\n //return await axios.get('http://18.202.236.131:9006/api/ocdscompliance/getPlanningList', { headers: { 'Access-Control-Allow-Origin': '*' } }).then(res => res.data);\r\n return await axios.get('https://adminapi.dppib-crsgov.org/api/ocdscompliance/getPlanningList', { headers: { 'Access-Control-Allow-Origin': '*' } }).then(res => res.data);\r\n }\r\n async getPlanningsWithYear(year) {\r\n return await axios.get('https://ocdsapi.dppib-crsgov.org/api/ocdsapi/getocidreleases?year=' + year, { headers: { 'Access-Control-Allow-Origin': '*' } }).then(res => res.data);\r\n }\r\n\r\n async getExistingYears() {\r\n var yearslist = await axios.get('https://ocdsapi.dppib-crsgov.org/api/ocdsapi/getExistingYearList').then(res => res.data);\r\n var arraylist = yearslist.map(element => ({ code: element, name: element }));\r\n //console.log(arraylist);\r\n return arraylist;\r\n }\r\n\r\n async getPlanningsWithMDA(mda) {\r\n return await axios.get('https://ocdsapi.dppib-crsgov.org/api/ocdsapi/getocidreleases?mda=' + mda, { headers: { 'Access-Control-Allow-Origin': '*' } }).then(res => res.data);\r\n }\r\n\r\n \r\n async getExcelExportPackageItem(id) {\r\n axios({\r\n url: 'https://ocdsapi.dppib-crsgov.org/api/ocdsAPI/getExcelPackageFile?id=' + id,\r\n method: 'GET',\r\n responseType: 'blob', // important\r\n headers: { 'Accept': 'application/vnd.ms-excel' }\r\n }).then((response) => {\r\n const url = window.URL.createObjectURL(new Blob([response.data]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n \r\n link.setAttribute('download', id + '-' +'ReleasePackage.xlsx');\r\n document.body.appendChild(link);\r\n link.click();\r\n });\r\n }\r\n\r\n async getReleasePackageItem(year, month) {\r\n axios({\r\n url: 'https://ocdsapi.dppib-crsgov.org/api/ocdsAPI/getReleasePackage?year=' + year + '&month=' + month,\r\n method: 'GET',\r\n responseType: 'blob', // important\r\n headers: { 'Accept': 'application/json' }\r\n }).then((response) => {\r\n const url = window.URL.createObjectURL(new Blob([response.data]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n \r\n link.setAttribute('download', year + month + '-' +'ReleasePackage.json');\r\n document.body.appendChild(link);\r\n link.click();\r\n });\r\n }\r\n\r\n async getRecordPackageItem(year, month) {\r\n axios({\r\n url: 'https://ocdsapi.dppib-crsgov.org/api/ocdsAPI/getRecordPackage?year=' + year + '&month=' + month,\r\n method: 'GET',\r\n responseType: 'blob', // important\r\n headers: { 'Accept': 'application/json' }\r\n }).then((response) => {\r\n const url = window.URL.createObjectURL(new Blob([response.data]));\r\n const link = document.createElement('a');\r\n link.href = url;\r\n \r\n link.setAttribute('download', year + month + '-' +'RecordPackage.json');\r\n document.body.appendChild(link);\r\n link.click();\r\n });\r\n }\r\n\r\n}","import React, { useState, useEffect, useRef } from 'react';\r\nimport { DataTable } from 'primereact/datatable';\r\nimport { Column } from 'primereact/column';\r\n// import { Rating } from 'primereact/rating';\r\nimport { Button } from 'primereact/button';\r\nimport { Toast } from 'primereact/toast';\r\nimport { InputText } from 'primereact/inputtext';\r\n// import { ProgressBar } from 'primereact/progressbar';\r\n// import ProductService from '../service/ProductService';\r\n// import CustomerService from '../service/CustomerService';\r\n//import OCDSApiService from '../service/OCDSApiService';\r\nimport { TabPanel, TabView } from 'primereact/tabview';\r\nimport { Dropdown } from 'primereact/dropdown';\r\nimport '../assets/css/DataTableStyle.css';\r\nimport PlanningApiService from '../service/PlanningApiService';\r\n\r\n\r\nexport const PlanningRecords = () => {\r\n\r\n // const [customer1, setCustomer1] = useState(null);\r\n // const [customer2, setCustomer2] = useState(null);\r\n // const [customer3, setCustomer3] = useState(null);\r\n const [records, setRecords] = useState(null);\r\n const [existingYears, setExistingYears] = useState(null);\r\n // const [selectedCustomers, setSelectedCustomers] = useState(null);\r\n // const [globalFilter1, setGlobalFilter1] = useState('');\r\n // const [globalFilter2, setGlobalFilter2] = useState('');\r\n const [globalFilter3, setGlobalFilter3] = useState('');\r\n // const [loading1, setLoading1] = useState(true);\r\n const [loading2, setLoading2] = useState(true);\r\n // const [products, setProducts] = useState(null);\r\n const [expandedRows, setExpandedRows] = useState([]);\r\n const toast = useRef(null);\r\n const [monthValue, setMonthValue] = useState('');\r\n const [yearValue, setYearValue] = useState('');\r\n\r\n const months = [\r\n { name: 'January', code: '1' },\r\n { name: 'February', code: '2' },\r\n { name: 'March', code: '3' },\r\n { name: 'April', code: '4' },\r\n { name: 'May', code: '5' },\r\n { name: 'June', code: '6' },\r\n { name: 'July', code: '7' },\r\n { name: 'August', code: '8' },\r\n { name: 'September', code: '9' },\r\n { name: 'October', code: '10' },\r\n { name: 'November', code: '11' },\r\n { name: 'December', code: '12' },\r\n ];\r\n\r\n useEffect(() => {\r\n const planningApiService = new PlanningApiService();\r\n planningApiService.getPlannings().then(data => { setRecords(data); setLoading2(false)});\r\n \r\n planningApiService.getExistingYears().then(data => setExistingYears(data));\r\n }, []);\r\n\r\n const onRowExpand = (event) => {\r\n //toast.current.show({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });\r\n };\r\n\r\n const onRowCollapse = (event) => {\r\n //toast.current.show({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });\r\n };\r\n\r\n \r\n const formatCurrency = (value) => {\r\n return value.toLocaleString('en-US', { style: 'currency', currency: 'NGN' });\r\n };\r\n\r\n const formatDate = (value) => {\r\n return new Intl.DateTimeFormat('en-GB', {\r\n month: 'long',\r\n day: '2-digit',\r\n year: 'numeric',\r\n }).format(new Date(value))\r\n };\r\n\r\n \r\n const bodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field]}\r\n \r\n );\r\n };\r\n\r\n const objectBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field].name}\r\n \r\n );\r\n };\r\n\r\n const awardStatusBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field][0].status}\r\n \r\n );\r\n };\r\n\r\n const arrayBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field][0].title}\r\n \r\n );\r\n };\r\n\r\n const contractorBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
{props.header} \r\n {data[props.field][0].suppliers[0].name}\r\n \r\n );\r\n };\r\n\r\n \r\n // const actionTemplate = () =>
;\r\n\r\n const productsTableHeader = (\r\n
\r\n {/* \r\n setGlobalFilter3(e.target.value)} placeholder=\"Search\" />\r\n \r\n
\r\n );\r\n\r\n \r\n const contractAmountBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
Price \r\n {formatCurrency(data[props.field])}\r\n \r\n );\r\n };\r\n\r\n const contractDateBodyTemplate = (data, props) => {\r\n return (\r\n <>\r\n
Price \r\n {formatDate(data[props.field])}\r\n \r\n );\r\n };\r\n\r\n \r\n\r\n const detailRowExpansionTemplate = (data) => {\r\n return (\r\n
\r\n
Details for Planning \r\n
\r\n {/*
Tender Items
*/}\r\n
\r\n \r\n \r\n
\r\n
\r\n {/*
\r\n \r\n\r\n \r\n
Project
\r\n
{data.planning.budget.project}
\r\n
\r\n
Rationale
\r\n
{data.planning.rationale}
\r\n
\r\n
Budget Reference
\r\n
{data.planning.budget.id}
\r\n
\r\n
Budget Description
\r\n
{data.planning.budget.description}
\r\n
\r\n
Budget Amount
\r\n
{formatCurrency(data.planning.budget.amount.amount)}
\r\n
\r\n \r\n */}\r\n \r\n
\r\n );\r\n };\r\n\r\n \r\n\r\n const handleSearchButton = (e) => {\r\n e.preventDefault();\r\n // setLoading2(true);\r\n // const oCDSApiService = new OCDSApiService();\r\n // var selectedmonth = monthValue === '' ? 0 : monthValue.code;\r\n // var selectedyear = yearValue === '' ? 0 : yearValue.code;\r\n // if (selectedyear === 0 && selectedmonth !== 0) {\r\n // alert(\"Please select a year\");\r\n // } else {\r\n // oCDSApiService.getRecordsWithYearAndMonth(selectedyear, selectedmonth).then(data => { setRecords(data); setLoading2(false) });\r\n // }\r\n };\r\n\r\n const handleClearButton = (e) => {\r\n e.preventDefault();\r\n // setLoading2(true);\r\n // setYearValue('');\r\n // setMonthValue('');\r\n // const oCDSApiService = new OCDSApiService();\r\n // oCDSApiService.getRecords().then(data => { setRecords(data); setLoading2(false)} );\r\n };\r\n\r\n return (\r\n
\r\n \r\n
\r\n {/*
\r\n
Search with Year & Month \r\n
\r\n
\r\n
\r\n \r\n setYearValue(e.value)} optionLabel=\"name\"> \r\n Select Year \r\n \r\n
\r\n
\r\n \r\n setMonthValue(e.value)} optionLabel=\"name\"> \r\n Select Month \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
*/}\r\n
\r\n {/*
Row Expand */}\r\n\r\n setExpandedRows(e.data)} onRowExpand={onRowExpand} onRowCollapse={onRowCollapse}\r\n rowHover globalFilter={globalFilter3} emptyMessage=\"No records found.\" loading={loading2} header={productsTableHeader} rowExpansionTemplate={detailRowExpansionTemplate}>\r\n \r\n\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n )\r\n}\r\n","import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport { Route } from 'react-router-dom';\n\nimport AppTopBar from './AppTopbar';\nimport AppFooter from './AppFooter';\nimport AppConfig from './AppConfig';\nimport AppMenu from './AppMenu';\nimport AppInlineProfile from './AppInlineProfile';\n\nimport { Dashboard } from './components/Dashboard';\nimport { DashboardBanking } from './components/DashboardBanking';\nimport { FormLayoutDemo } from './components/FormLayoutDemo';\nimport { InputDemo } from './components/InputDemo';\nimport { FloatLabelDemo } from './components/FloatLabelDemo';\nimport { InvalidStateDemo } from './components/InvalidStateDemo';\nimport { ButtonDemo } from './components/ButtonDemo';\nimport { TableDemo } from './components/TableDemo';\nimport { ListDemo } from './components/ListDemo';\nimport { TreeDemo } from './components/TreeDemo';\nimport { PanelDemo } from './components/PanelDemo';\nimport { OverlayDemo } from './components/OverlayDemo';\nimport { MediaDemo } from './components/MediaDemo';\nimport { MenuDemo } from './components/MenuDemo';\nimport { MessagesDemo } from './components/MessagesDemo';\nimport { FileDemo } from './components/FileDemo';\nimport { ChartDemo } from './components/ChartDemo';\nimport { MiscDemo } from './components/MiscDemo';\nimport { Documentation } from './components/Documentation';\nimport { IconsDemo } from './utilities/IconsDemo';\nimport { Widgets } from './utilities/Widgets';\nimport { GridDemo } from './utilities/GridDemo';\nimport { SpacingDemo } from './utilities/SpacingDemo';\nimport { ElevationDemo } from './utilities/ElevationDemo';\nimport { TextDemo } from './utilities/TextDemo';\nimport { TypographyDemo } from './utilities/TypographyDemo';\nimport { DisplayDemo } from './utilities/DisplayDemo';\nimport { FlexBoxDemo } from './utilities/FlexBoxDemo';\nimport { CrudDemo } from './pages/CrudDemo';\nimport { TimelineDemo } from './pages/TimlineDemo';\nimport { CalendarDemo } from './pages/CalendarDemo';\nimport { Invoice } from './pages/Invoice';\nimport { Help } from './pages/Help';\nimport { EmptyPage } from './pages/EmptyPage';\n\nimport PrimeReact from 'primereact/api';\n\nimport 'primereact/resources/primereact.min.css';\nimport 'primeicons/primeicons.css';\nimport 'primeflex/primeflex.css';\nimport './App.scss';\nimport { OCDSRecords } from './components/OCDSRecords';\nimport { OCDSReleasePackage } from './components/OCDSReleasePackage';\nimport { PlanningRecords } from './components/PlanningRecords';\nconst App = () => {\n\n const [menuActive, setMenuActive] = useState(false);\n const [profileMode, setProfileMode] = useState('inline');\n const [profileExpanded, setProfileExpanded] = useState(false);\n const [menuMode, setMenuMode] = useState('static');\n const [overlayMenuActive, setOverlayMenuActive] = useState(false);\n const [staticMenuDesktopInactive, setStaticMenuDesktopInactive] = useState(false);\n const [staticMenuMobileActive, setStaticMenuMobileActive] = useState(false);\n const [topbarMenuActive, setTopbarMenuActive] = useState(false);\n const [activeTopbarItem, setActiveTopbarItem] = useState(null);\n const [darkMenu, setDarkMenu] = useState(false);\n const [theme, setTheme] = useState('blue');\n const [layout, setLayout] = useState('blue');\n const [configActive, setConfigActive] = useState(false);\n const [inputStyle, setInputStyle] = useState('outlined');\n const [ripple, setRipple] = useState(false);\n\n let menuClick = false;\n let topbarItemClick = false;\n let configClick = false;\n\n const menu = [\n // {\n // label: 'Favorites', icon: 'pi pi-fw pi-home',\n // items: [\n // { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },\n // ]\n // },\n {\n label: 'Packages', icon: 'pi pi-fw pi-star-o', badge: 6,\n items: [\n // { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/formlayout' },\n // { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' },\n // { label: 'Float Label', icon: \"pi pi-fw pi-bookmark\", to: \"/floatlabel\" },\n // { label: 'Invalid State', icon: \"pi pi-fw pi-exclamation-circle\", to: \"/invalidstate\" },\n // { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button', className: 'rotated-icon' },\n // { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' }, // active\n { label: 'Records', icon: 'pi pi-fw pi-table', to: '/records' }, // active\n { label: 'Release Packages', icon: 'pi pi-fw pi-table', to: '/releasepackages' }, // active\n { label: 'Planning', icon: 'pi pi-fw pi-table', to: '/plannings' }, ///active\n // { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' },\n // { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' },\n // { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' },\n // { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' },\n // { label: \"Media\", icon: \"pi pi-fw pi-image\", to: \"/media\" },\n // { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' },\n // { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' },\n // { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' },\n // { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' },\n // { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' },\n ]\n },\n // {\n // label: \"Utilities\", icon: 'pi pi-fw pi-compass',\n // items: [\n // { label: 'Display', icon: 'pi pi-fw pi-desktop', to: '/display' },\n // { label: 'Elevation', icon: 'pi pi-fw pi-external-link', to: '/elevation' },\n // { label: 'Flexbox', icon: 'pi pi-fw pi-directions', to: '/flexbox' },\n // { label: 'Icons', icon: 'pi pi-fw pi-search', to: '/icons' },\n // { label: 'Widgets', icon: 'pi pi-fw pi-star-o', to: '/widgets' },\n // { label: 'Grid System', icon: 'pi pi-fw pi-th-large', to: '/grid' },\n // { label: 'Spacing', icon: 'pi pi-fw pi-arrow-right', to: '/spacing' },\n // { label: 'Typography', icon: 'pi pi-fw pi-align-center', to: '/typography' },\n // { label: 'Text', icon: 'pi pi-fw pi-pencil', to: '/text' },\n // ]\n // },\n // {\n // label: 'Pages', icon: 'pi pi-fw pi-briefcase', badge: 8, badgeStyleClass: 'teal-badge',\n // items: [\n // { label: 'Crud', icon: 'pi pi-fw pi-pencil', to: '/crud' },\n // { label: 'Calendar', icon: 'pi pi-fw pi-calendar-plus', to: '/calendar' },\n // { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' },\n // { label: 'Landing', icon: 'pi pi-fw pi-globe', url: 'assets/pages/landing.html', target: '_blank' },\n // { label: 'Login', icon: 'pi pi-fw pi-sign-in', to: '/login' },\n // { label: 'Invoice', icon: 'pi pi-fw pi-dollar', to: '/invoice' },\n // { label: 'Help', icon: 'pi pi-fw pi-question-circle', to: '/help' },\n // { label: 'Error', icon: 'pi pi-fw pi-times-circle', to: '/error' },\n // { label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', to: '/notfound' },\n // { label: 'Access Denied', icon: 'pi pi-fw pi-lock', to: '/access' },\n // { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' }\n // ]\n // },\n // {\n // label: 'Hierarchy', icon: 'pi pi-fw pi-align-left',\n // items: [\n // {\n // label: 'Submenu 1', icon: 'pi pi-fw pi-align-left',\n // items: [\n // {\n // label: 'Submenu 1.1', icon: 'pi pi-fw pi-align-left',\n // items: [\n // { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-align-left' },\n // { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-align-left' },\n // { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-align-left' },\n // ]\n // },\n // {\n // label: 'Submenu 1.2', icon: 'pi pi-fw pi-align-left',\n // items: [\n // { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-align-left' },\n // { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-align-left' }\n // ]\n // },\n // ]\n // },\n // {\n // label: 'Submenu 2', icon: 'pi pi-fw pi-align-left',\n // items: [\n // {\n // label: 'Submenu 2.1', icon: 'pi pi-fw pi-align-left',\n // items: [\n // { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-align-left' },\n // { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-align-left' },\n // { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-align-left' },\n // ]\n // },\n // {\n // label: 'Submenu 2.2', icon: 'pi pi-fw pi-align-left',\n // items: [\n // { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-align-left' },\n // { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-align-left' }\n // ]\n // },\n // ]\n // }\n // ]\n // },\n // {\n // label: 'Start', icon: 'pi pi-fw pi-download',\n // items: [\n // {\n // label: 'Buy Now', icon: 'pi pi-fw pi-shopping-cart', command: () => { window.location = \"https://www.primefaces.org/store\" }\n // },\n // {\n // label: 'Documentation', icon: 'pi pi-fw pi-info-circle', to: '/documentation'\n // }\n // ]\n // }\n ];\n\n const routers = [\n // { path: '/', component: Dashboard, exact: true },\n { path: '/dashboards/generic', component: Dashboard },\n { path: '/dashboards/dashboard_banking', component: DashboardBanking },\n { path: '/formlayout', component: FormLayoutDemo },\n { path: '/input', component: InputDemo },\n { path: '/floatlabel', component: FloatLabelDemo },\n { path: '/invalidstate', component: InvalidStateDemo },\n { path: '/button', component: ButtonDemo },\n { path: '/table', component: TableDemo },\n { path: '/', component: OCDSRecords, exact: true },\n { path: '/records', component: OCDSRecords },\n { path: '/releasepackages', component: OCDSReleasePackage },\n { path: '/plannings', component: PlanningRecords },\n { path: '/list', component: ListDemo },\n { path: '/tree', component: TreeDemo },\n { path: '/panel', component: PanelDemo },\n { path: '/overlay', component: OverlayDemo },\n { path: '/media', component: MediaDemo },\n { path: '/menu', component: MenuDemo },\n { path: '/messages', component: MessagesDemo },\n { path: '/file', component: FileDemo },\n { path: '/chart', component: ChartDemo },\n { path: '/misc', component: MiscDemo },\n { path: '/icons', component: IconsDemo },\n { path: '/widgets', component: Widgets },\n { path: '/grid', component: GridDemo },\n { path: '/spacing', component: SpacingDemo },\n { path: '/elevation', component: ElevationDemo },\n { path: '/typography', component: TypographyDemo },\n { path: '/display', component: DisplayDemo },\n { path: '/flexbox', component: FlexBoxDemo },\n { path: '/text', component: TextDemo },\n { path: '/crud', component: CrudDemo },\n { path: '/timeline', component: TimelineDemo },\n { path: '/calendar', component: CalendarDemo },\n { path: '/invoice', component: Invoice },\n { path: '/help', component: Help },\n { path: '/empty', component: EmptyPage },\n { path: '/documentation', component: Documentation }\n ];\n\n const onInputStyleChange = (inputStyle) => {\n setInputStyle(inputStyle);\n };\n\n const onRippleChange = (e) => {\n PrimeReact.ripple = e.value;\n setRipple(e.value);\n };\n\n const onDocumentClick = () => {\n if (!topbarItemClick) {\n setActiveTopbarItem(null);\n setTopbarMenuActive(false);\n }\n\n if (!menuClick) {\n if (isHorizontal() || isSlim()) {\n setMenuActive(false);\n }\n\n hideOverlayMenu();\n }\n\n if (configActive && !configClick) {\n setConfigActive(false);\n }\n\n menuClick = false;\n topbarItemClick = false;\n configClick = false;\n };\n\n const onProfileClick = (e) => {\n setProfileExpanded(prevProfileExpanded => !prevProfileExpanded);\n };\n\n const onMenuClick = () => {\n menuClick = true;\n };\n\n const onMenuitemClick = (event) => {\n if (!event.item.items) {\n hideOverlayMenu();\n }\n\n if (!event.item.items && (isSlim() || isHorizontal())) {\n setMenuActive(false);\n }\n };\n\n const onRootMenuitemClick = () => {\n setMenuActive(prevMenuActive => !prevMenuActive);\n };\n\n const onMenuButtonClick = (event) => {\n menuClick = true;\n setTopbarMenuActive(false);\n\n if (menuMode === 'overlay') {\n setOverlayMenuActive(prevOverlayMenuActive => !prevOverlayMenuActive);\n }\n else {\n if (isDesktop())\n setStaticMenuDesktopInactive(prevStaticMenuDesktopInactive => !prevStaticMenuDesktopInactive);\n else\n setStaticMenuMobileActive(prevStaticMenuMobileActive => !prevStaticMenuMobileActive);\n }\n\n event.preventDefault();\n };\n\n const onTopbarMenuButtonClick = (event) => {\n topbarItemClick = true;\n setTopbarMenuActive(prevTopbarMenuActive => !prevTopbarMenuActive);\n hideOverlayMenu();\n event.preventDefault();\n };\n\n const onTopbarItemClick = (e) => {\n topbarItemClick = true;\n\n if (activeTopbarItem === e.item)\n setActiveTopbarItem(null)\n else\n setActiveTopbarItem(e.item);\n\n e.originalEvent.preventDefault();\n };\n\n const hideOverlayMenu = () => {\n setOverlayMenuActive(false);\n setStaticMenuMobileActive(false);\n };\n\n const isDesktop = () => {\n return window.innerWidth > 1024;\n };\n\n const isHorizontal = () => {\n return menuMode === 'horizontal';\n };\n\n const isSlim = () => {\n return menuMode === 'slim';\n };\n\n const isMenuVisible = () => {\n if (isDesktop()) {\n if (menuMode === 'static')\n return !staticMenuDesktopInactive;\n else if (menuMode === 'overlay')\n return overlayMenuActive;\n else\n return true;\n } else {\n if (staticMenuMobileActive)\n return true;\n else if (menuMode === 'overlay')\n return overlayMenuActive;\n else\n return true;\n }\n };\n\n const onMenuModeChange = (e) => {\n setMenuMode(e.value);\n setStaticMenuDesktopInactive(false);\n setOverlayMenuActive(false);\n\n if (e.value === 'horizontal') {\n setProfileMode('top');\n }\n };\n\n const onMenuColorChange = (e) => {\n setDarkMenu(e.value);\n };\n\n const onProfileModeChange = (e) => {\n setProfileMode(e.value);\n };\n\n const onConfigClick = () => {\n configClick = true;\n };\n\n const onConfigButtonClick = () => {\n setConfigActive(prevConfigActive => !prevConfigActive);\n configClick = true;\n };\n\n const onLayoutColorChange = (color) => {\n setLayout(color);\n };\n\n const onThemeChange = (color) => {\n setTheme(color);\n };\n\n let containerClassName = classNames('layout-wrapper', {\n 'menu-layout-static': menuMode !== 'overlay',\n 'menu-layout-overlay': menuMode === 'overlay',\n 'layout-menu-overlay-active': overlayMenuActive,\n 'menu-layout-slim': menuMode === 'slim',\n 'menu-layout-horizontal': menuMode === 'horizontal',\n 'layout-menu-static-inactive': staticMenuDesktopInactive,\n 'layout-menu-static-active': staticMenuMobileActive,\n 'p-input-filled': inputStyle === 'filled',\n 'p-ripple-disabled': !ripple,\n });\n let menuClassName = classNames('layout-menu-container', { 'layout-menu-dark': darkMenu, 'layout-menu-container-inactive': !isMenuVisible() });\n\n return (\n
\n
\n
\n\n
\n
\n {/* {profileMode === 'inline' && menuMode !== 'horizontal' &&
} */}\n\n
\n
\n
\n\n
\n {\n routers.map((router, index) => {\n if (router.exact) {\n return
\n\n {/*
*/}\n\n
\n\n
\n
\n
\n );\n}\n\nexport default App;\n","import React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { InputText } from 'primereact/inputtext';\nimport { Password } from 'primereact/password';\nimport { Button } from 'primereact/button';\n\nexport const Login = () => {\n const history = useHistory();\n\n return (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Welcome Guest \n Sign in to Avalon Network \n \n
\n
\n
\n history.push('/')} />\n
\n
\n Forget Password? \n
\n
\n
\n
\n
\n );\n}\n","import React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { Button } from 'primereact/button';\n\nexport const Error = () => {\n const history = useHistory();\n\n return (\n
\n
\n
\n Error \n
\n
Occured \n
\n
\n
\n
\n
\n
\n
\n
An error occured. \n
Please contact system administrator.
\n
\n
history.push('/')} />\n \n
\n
\n );\n}\n","import React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { Button } from 'primereact/button';\n\nexport const NotFound = () => {\n const history = useHistory();\n\n return (\n
\n
\n
\n 404 \n
\n
Page Not Found \n
\n
\n
\n
\n
\n
\n
\n
That wasn’t supposed to happen... \n
Better get back home and forget about that
\n
\n
history.push('/')} />\n \n
\n
\n );\n}\n","import React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { Button } from 'primereact/button';\n\nexport const Access = () => {\n const history = useHistory();\n\n return (\n
\n
\n
\n Access \n
\n
Denied \n
\n
\n
\n
\n
\n
\n
\n
Access denied to this resource. \n
You don't have the necessary permission.
\n
\n
history.push('/')} />\n\t\t\t \n
\n
\n );\n}\n","import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport { Button } from 'primereact/button';\nimport { InputText } from 'primereact/inputtext';\nimport { Calendar } from 'primereact/calendar';\nimport { Dropdown } from 'primereact/dropdown';\nimport { Checkbox } from 'primereact/checkbox';\n\nexport const Wizard = () => {\n const [activeContent, setActiveContent] = useState('register');\n const [activeTab, setActiveTab] = useState('register');\n const [activeCard, setActiveCard] = useState('pro');\n const [selectDropdownOptions1, setSelectDropdownOptions1] = useState(null);\n const [selectDropdownOptions2, setSelectDropdownOptions2] = useState(null);\n const [birthdate, setBirthDate] = useState(null);\n const [checked, setChecked] = useState(false);\n\n const dropdownOptions1 = [\n { name: 'UTC-12.00', code: '-12' },\n { name: 'UTC-11.00', code: '-11' },\n { name: 'UTC-10.00', code: '-10' },\n { name: 'UTC-09.30', code: '-93' },\n { name: 'UTC-09.00', code: '-09' },\n { name: 'UTC-08.00', code: '-08' },\n { name: 'UTC-07.00', code: '-07' },\n { name: 'UTC-06.00', code: '-06' },\n { name: 'UTC-05.00', code: '-05' },\n { name: 'UTC-04.00', code: '-04' },\n { name: 'UTC-03.30', code: '-33' },\n { name: 'UTC-03.00', code: '-03' },\n { name: 'UTC-02.00', code: '-02' },\n { name: 'UTC-01.00', code: '-01' },\n { name: 'UTC-+00.00', code: '-00' },\n { name: 'UTC+01.00', code: '+01' },\n { name: 'UTC+02.00', code: '+02' },\n { name: 'UTC+03.00', code: '+03' },\n { name: 'UTC+03.30', code: '+33' },\n { name: 'UTC+04.00', code: '+04' },\n { name: 'UTC+04.30', code: '+43' },\n { name: 'UTC+05.00', code: '+05' },\n { name: 'UTC+05.30', code: '+53' },\n { name: 'UTC+05.45', code: '+54' },\n { name: 'UTC+06.00', code: '+06' },\n { name: 'UTC+06.30', code: '+63' },\n { name: 'UTC+07.00', code: '+07' },\n { name: 'UTC+08.00', code: '+08' },\n { name: 'UTC+08.45', code: '+84' },\n { name: 'UTC+09.00', code: '+09' },\n { name: 'UTC+09.30', code: '+93' },\n { name: 'UTC+10.00', code: '+10' },\n { name: 'UTC+10.30', code: '+13' },\n { name: 'UTC+01.00', code: '+11' },\n { name: 'UTC+01.00', code: '+12' },\n { name: 'UTC+01.00', code: '+24' },\n { name: 'UTC+01.00', code: '+13' },\n { name: 'UTC+01.00', code: '+14' },\n ];\n\n const dropdownOptions2 = [\n { label: 'Blogs', value: 'Blogs' },\n { label: 'Google Ads', value: 'google' },\n { label: 'Your Forum', value: 'prime-forum' },\n { label: 'Youtube', value: 'Youtube' },\n { label: 'Reddit', value: 'Reddit' },\n { label: 'Events', value: 'Events' },\n { label: 'Other', value: 'Other' }\n ];\n\n const clickNext = (step) => {\n if (step === 'register') {\n if (activeTab === 'register') {\n setActiveTab('register');\n setActiveContent('register');\n } else if (activeTab === 'tier') {\n setTimeout(() => {\n setActiveContent('register');\n }, 600);\n setActiveTab('register');\n } else {\n setActiveTab('tier');\n setTimeout(() => {\n setActiveTab('register');\n }, 600);\n setTimeout(() => {\n setActiveContent('register');\n }, 1200);\n }\n }\n if (step === 'tier') {\n setActiveTab('tier');\n setTimeout(() => {\n setActiveContent('tier');\n }, 600);\n }\n\n if (step === 'payment') {\n if (activeTab === 'payment') {\n setActiveTab('payment');\n setActiveContent('payment');\n } else if (activeTab === 'tier') {\n setTimeout(() => {\n setActiveContent('payment');\n }, 600);\n setActiveTab('payment');\n } else {\n setActiveTab('tier');\n setTimeout(() => {\n setActiveTab('payment');\n }, 600);\n setTimeout(() => {\n setActiveContent('payment');\n }, 1200);\n }\n }\n };\n\n const selectTier = (card) => {\n setActiveCard(card);\n setTimeout(() => {\n setActiveTab('payment');\n setActiveContent('payment');\n }, 600);\n };\n\n return (\n
\n
\n
\n
\n
\n
clickNext('register')}>\n
\n
\n
\n
clickNext('tier')}>\n
\n
\n
\n
clickNext('payment')}>\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
REGISTER \n Please complete steps to register \n \n
\n
\n
\n
\n
\n\n
\n
\n
\n Username \n Email \n Password \n
\n\n
\n Timezone \n setSelectDropdownOptions1(e.value)} placeholder=\"Select Time Zone\" className=\"form-element\"> \n\n Birthdate \n \n\n Where did you hear Avalon \n setSelectDropdownOptions2(e.value)} placeholder=\"Where did you hear Avalon\" className=\"form-element\"> \n
\n
\n
\n clickNext('tier')}> \n
\n
\n
\n\n
\n
\n
\n
\n
CHOOSE TIER \n Now choose your account type \n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
selectTier('basic')}>\n
\n
\n
\n
BEGINNER \n For starters and side projects \n \n
\n
\n
\n
\n
\n
\n Responsive\n
\n
\n Push Mesaages\n
\n
\n
\n
\n\n
\n
selectTier('pro')}>\n
\n
\n
\n
PROFFESIONAL \n For companies \n \n
\n
\n
\n
\n
\n
\n Responsive\n
\n
\n Push Mesaages\n
\n
\n 7/24 Support\n
\n
\n
\n
\n\n
\n
selectTier('pro-plus')}>\n
\n
\n
\n
ENTERPRISE \n For custom needs \n \n
\n
\n
\n
\n
\n
\n Responsive\n
\n
\n Push Mesaages\n
\n
\n 7/24 High Priority Support\n
\n
\n Free Shipping\n
\n
\n
\n
\n
\n
\n clickNext('payment')}> \n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
PAYMENT \n Give me the money \n \n
\n
\n
\n
\n
\n Cardholder Name \n
\n\n
\n Card Number \n
\n\n
\n Date \n
\n\n
\n CCV \n
\n
\n\n
\n setChecked(e.value)} binary className=\"p-mr-2\"> \n Save credit card information for future usage \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
Total
\n
$0.00
\n
\n Please select one tier.\n
\n
\n
\n
\n
\n
\n
\n
Tier - Basic
\n
$5.00
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
Tier - Pro+
\n
$50.00
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n );\n}\n","import React, { useEffect } from 'react';\nimport { Route, useLocation, withRouter } from 'react-router-dom';\nimport App from './App';\nimport { Login } from './pages/Login';\nimport { Error } from './pages/Error';\nimport { NotFound } from './pages/NotFound';\nimport { Access } from './pages/Access';\nimport { Wizard } from './pages/Wizard';\n\nconst AppWrapper = () => {\n\n let location = useLocation();\n\n useEffect(() => {\n window.scrollTo(0, 0)\n }, [location]);\n\n switch (location.pathname) {\n case '/login':\n return
\n case '/error':\n return
\n case '/notfound':\n return
\n case '/access':\n return
\n case '/wizard':\n return
\n default:\n return
;\n }\n}\n\nexport default withRouter(AppWrapper);\n","import 'react-app-polyfill/ie11';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { HashRouter } from 'react-router-dom'\nimport AppWrapper from './AppWrapper';\n//import * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n
\n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: http://bit.ly/CRA-PWA\n//serviceWorker.unregister();\n"],"sourceRoot":""}
![\"Logo\"](\"assets/layout/images/ocds_logo.png\"){kind=logo}
\n \n {/* \n \n \n \n */}\n ![\"Chart](\"assets/layout/images/dashboard/graph-1.svg\")
\n ![\"Chart](\"assets/layout/images/dashboard/graph-2.svg\")
\n ![\"Chart](\"assets/layout/images/dashboard/graph-3.svg\")
\n ![\"User\"](\"assets/layout/images/avatar.png\"){kind=avatar}
\n ![\"Contact](\"assets/layout/images/avatar1.png\"){kind=avatar}
\n ![\"Contact](\"assets/layout/images/avatar2.png\"){kind=avatar}
\n ![\"Contact](\"assets/layout/images/avatar3.png\"){kind=avatar}
\n ![\"Contact](\"assets/layout/images/avatar4.png\"){kind=avatar}
\n 
}>![\"Bridge\"](\"assets/layout/images/dashboard/bridge.png\")
\n ![\"Nature\"](\"assets/demo/images/nature/nature1.jpg\")
\n ![\"Map\"](\"assets/layout/images/dashboard/map.png\")
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-transfer.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-creditcards.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-cardtransfer.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-receivemoney.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-transactions.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-ticket.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-dollar.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-euro.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-gbp.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-gold.png\"){kind=icon}
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/chart-expenses.png\")
\n\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/profile.png\")
\n\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/profile1.png\")
\n\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/profile2.png\")
\n\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/profile3.png\")
\n\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/asset-graph.png\")
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/asset-visa.png\")
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/asset-netflix.png\")
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/asset-spotify.png\")
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/asset-newyorker.png\")
\n ![\"avalon-layout\"](\"assets/layout/images/dashboard-banking/icon-customersupport.png\"){kind=icon}
\n\n ![{data.country.name}](\"assets/demo/images/flags/flag_placeholder.png\")
\n {data.country.name}\n \n );\n };\n\n const representativeBodyTemplate = (data) => {\n return (\n <>\n Representative\n 
\n {data.representative.name}\n \n );\n };\n\n const statusBodyTemplate = (data) => {\n return (\n <>\n Status\n {data.status}\n \n )\n };\n\n const activityBody = (data) => {\n return (\n <>\n Activity\n