├── .babelrc ├── .eslintrc ├── .gitignore ├── LICENSE ├── README.md ├── app ├── colors.js ├── colors.scss ├── common.js ├── components │ ├── Accordion │ │ ├── Accordion.js │ │ ├── AccordionBody.js │ │ ├── AccordionHeader.js │ │ ├── AccordionHeader.scss │ │ ├── AccordionIndicator.js │ │ ├── context.js │ │ └── index.js │ ├── App │ │ ├── AppClient.js │ │ └── index.js │ ├── Avatar │ │ ├── Avatar.js │ │ ├── AvatarAddonBadge.js │ │ ├── AvatarAddonIcon.js │ │ ├── AvatarFont.js │ │ ├── AvatarImage.js │ │ └── index.js │ ├── Card │ │ ├── Card.js │ │ ├── Card.scss │ │ └── index.js │ ├── CardHeader │ │ ├── CardHeader.js │ │ ├── CardHeader.scss │ │ └── index.js │ ├── Checkable │ │ ├── Checkable.js │ │ ├── CheckableInput.js │ │ ├── CheckableTrigger.js │ │ ├── CheckableTrigger.scss │ │ ├── context.js │ │ └── index.js │ ├── CustomInput │ │ ├── CustomInput.js │ │ └── index.js │ ├── Divider │ │ ├── Divider.js │ │ └── index.js │ ├── EmptyLayout │ │ ├── EmptyLayout.js │ │ ├── EmptyLayoutSection.js │ │ └── index.js │ ├── ExtendedDropdown │ │ ├── ExtendedDropdown.js │ │ ├── ExtendedDropdownLink.js │ │ ├── ExtendedDropdownSection.js │ │ └── index.js │ ├── FloatGrid │ │ ├── Col.js │ │ ├── Grid.js │ │ ├── Ready.js │ │ ├── Row.js │ │ ├── floatGridContext.js │ │ └── index.js │ ├── HolderProvider │ │ ├── HolderIconProvider.js │ │ ├── HolderTextProvider.js │ │ └── index.js │ ├── IconWithBadge │ │ ├── IconWithBadge.js │ │ └── index.js │ ├── InputGroupAddon │ │ ├── InputGroupAddon.js │ │ └── index.js │ ├── Layout │ │ ├── Layout.js │ │ ├── LayoutContent.js │ │ ├── LayoutNavbar.js │ │ ├── LayoutSidebar.js │ │ ├── PageConfigContext.js │ │ ├── index.js │ │ ├── setupPage.js │ │ └── withPageConfig.js │ ├── Nav │ │ ├── index.js │ │ └── nav.js │ ├── Navbar │ │ ├── index.js │ │ └── navbar.js │ ├── NavbarThemeProvider │ │ ├── NavbarThemeProvider.js │ │ └── index.js │ ├── NestedDropdown │ │ ├── NestedDropdown.js │ │ ├── NestedDropdownSubmenu.js │ │ ├── context.js │ │ └── index.js │ ├── OuterClick │ │ ├── OuterClick.js │ │ └── index.js │ ├── PageLoader │ │ ├── PageLoader.js │ │ ├── PageLoader.scss │ │ └── index.js │ ├── Progress │ │ ├── Progress.js │ │ ├── Progress.scss │ │ └── index.js │ ├── Recharts │ │ ├── CartesianGrid.js │ │ ├── DefAreaValueColor.js │ │ ├── Legend.js │ │ ├── PieValueLabel.js │ │ ├── PolarAngleAxis.js │ │ ├── PolarGrid.js │ │ ├── PolarRadiusAxis.js │ │ ├── Tooltip.js │ │ ├── ValueLabel.js │ │ ├── XAxis.js │ │ ├── YAxis.js │ │ ├── ZAxis.js │ │ └── config.js │ ├── Sidebar │ │ ├── Sidebar.js │ │ ├── SidebarClose.js │ │ ├── SidebarContent.js │ │ ├── SidebarHideSlim.js │ │ ├── SidebarMobileFluid.js │ │ ├── SidebarSection.js │ │ ├── SidebarShowSlim.js │ │ └── index.js │ ├── SidebarMenu │ │ ├── MenuContext.js │ │ ├── SidebarMenu.js │ │ ├── SidebarMenuItem.js │ │ └── index.js │ ├── SidebarTrigger │ │ ├── SidebarTrigger.js │ │ └── index.js │ ├── StarRating │ │ ├── StarRating.js │ │ ├── StarRating.scss │ │ └── index.js │ ├── Theme │ │ ├── ThemeClass.js │ │ ├── ThemeContext.js │ │ ├── ThemeProvider.js │ │ ├── ThemeSelector.js │ │ └── index.js │ ├── Tools │ │ ├── DefaultOnly.js │ │ ├── SlimOnly.js │ │ ├── SlimProps.js │ │ └── index.js │ ├── UncontrolledModal │ │ ├── UncontrolledModal.js │ │ ├── UncontrolledModalClose.js │ │ ├── context.js │ │ └── index.js │ ├── UncontrolledPopover │ │ ├── UncontrolledPopover.js │ │ └── index.js │ ├── UncontrolledTabs │ │ ├── UncontrolledTabs.js │ │ ├── UncontrolledTabsNavLink.js │ │ ├── UncontrolledTabsTabContent.js │ │ ├── context.js │ │ └── index.js │ ├── Wizard │ │ ├── Wizard.js │ │ ├── WizardStep.js │ │ └── index.js │ ├── agGrid.js │ ├── index.js │ └── recharts.js ├── images │ ├── avatars │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 21.jpg │ │ ├── 22.jpg │ │ ├── 23.jpg │ │ ├── 24.jpg │ │ ├── 25.jpg │ │ ├── 26.jpg │ │ ├── 27.jpg │ │ ├── 28.jpg │ │ ├── 29.jpg │ │ ├── 3.jpg │ │ ├── 30.jpg │ │ ├── 31.jpg │ │ ├── 32.jpg │ │ ├── 33.jpg │ │ ├── 34.jpg │ │ ├── 35.jpg │ │ ├── 36.jpg │ │ ├── 37.jpg │ │ ├── 38.jpg │ │ ├── 39.jpg │ │ ├── 4.jpg │ │ ├── 40.jpg │ │ ├── 41.jpg │ │ ├── 42.jpg │ │ ├── 43.jpg │ │ ├── 44.jpg │ │ ├── 45.jpg │ │ ├── 46.jpg │ │ ├── 47.jpg │ │ ├── 48.jpg │ │ ├── 49.jpg │ │ ├── 5.jpg │ │ ├── 50.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ ├── 9.jpg │ │ └── avatar-1.jpg │ ├── favicons │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ └── favicon.ico │ └── logos │ │ ├── logo-danger.svg │ │ ├── logo-indigo.svg │ │ ├── logo-info.svg │ │ ├── logo-pink.svg │ │ ├── logo-primary.svg │ │ ├── logo-purple.svg │ │ ├── logo-success.svg │ │ ├── logo-warning.svg │ │ ├── logo-white.svg │ │ └── logo-yellow.svg ├── index.html ├── index.js ├── layout │ ├── components │ │ ├── DefaultNavbar.js │ │ ├── DefaultSidebar.js │ │ ├── NavbarActivityFeed.js │ │ ├── NavbarMessages.js │ │ ├── NavbarUser.js │ │ ├── SidebarANavbar.js │ │ ├── SidebarASidebar.js │ │ ├── SidebarMiddleNav.js │ │ └── SidebarWithNavbarNavbar.js │ └── default.js ├── routes │ ├── Apps │ │ ├── AccountEdit │ │ │ ├── AccountEdit.js │ │ │ └── index.js │ │ ├── BillingEdit │ │ │ ├── BillingEdit.js │ │ │ └── index.js │ │ ├── Chat │ │ │ ├── Chat.js │ │ │ └── index.js │ │ ├── Clients │ │ │ ├── Clients.js │ │ │ ├── components │ │ │ │ ├── TrTableClients.js │ │ │ │ └── TrTableCompanies.js │ │ │ └── index.js │ │ ├── EmailDetails │ │ │ ├── EmailDetails.js │ │ │ └── index.js │ │ ├── Files │ │ │ ├── Files.js │ │ │ ├── FilesGrid.js │ │ │ ├── FilesList.js │ │ │ ├── components │ │ │ │ └── TrTableFilesList.js │ │ │ └── index.js │ │ ├── GalleryGrid │ │ │ ├── GalleryGrid.js │ │ │ └── index.js │ │ ├── GalleryTable │ │ │ ├── GalleryTable.js │ │ │ ├── components │ │ │ │ └── TrTableGalleryList.js │ │ │ └── index.js │ │ ├── ImagesResults │ │ │ ├── ImagesResults.js │ │ │ └── index.js │ │ ├── Inbox │ │ │ ├── Inbox.js │ │ │ ├── components │ │ │ │ └── TrTableInbox.js │ │ │ └── index.js │ │ ├── NewEmail │ │ │ ├── NewEmail.js │ │ │ └── index.js │ │ ├── ProfileDetails │ │ │ ├── ProfileDetails.js │ │ │ ├── components │ │ │ │ └── TrTableMessages.js │ │ │ └── index.js │ │ ├── ProfileEdit │ │ │ ├── ProfileEdit.js │ │ │ └── index.js │ │ ├── Projects │ │ │ ├── Projects.js │ │ │ ├── ProjectsGrid.js │ │ │ ├── ProjectsList.js │ │ │ ├── components │ │ │ │ └── TrTableProjectsList.js │ │ │ └── index.js │ │ ├── SearchResults │ │ │ ├── SearchResults.js │ │ │ └── index.js │ │ ├── SessionsEdit │ │ │ ├── SessionsEdit.js │ │ │ └── index.js │ │ ├── SettingsEdit │ │ │ ├── SettingsEdit.js │ │ │ └── index.js │ │ ├── Tasks │ │ │ ├── Tasks.js │ │ │ ├── TasksGrid.js │ │ │ ├── TasksList.js │ │ │ ├── components │ │ │ │ └── TrTableTasksList.js │ │ │ └── index.js │ │ ├── TasksDetails │ │ │ ├── TasksDetails.js │ │ │ └── index.js │ │ ├── TasksKanban │ │ │ ├── TasksKanban.js │ │ │ └── index.js │ │ ├── Users │ │ │ ├── Users.js │ │ │ ├── UsersGrid.js │ │ │ ├── UsersList.js │ │ │ ├── components │ │ │ │ └── TrTableUsersList.js │ │ │ └── index.js │ │ ├── UsersResults │ │ │ ├── UsersResults.js │ │ │ └── index.js │ │ └── VideosResults │ │ │ ├── VideosResults.js │ │ │ └── index.js │ ├── Cards │ │ ├── Cards │ │ │ ├── Cards.js │ │ │ └── index.js │ │ └── CardsHeaders │ │ │ ├── CardsHeaders.js │ │ │ └── index.js │ ├── Dashboards │ │ ├── Analytics │ │ │ ├── Analytics.js │ │ │ ├── Analytics.scss │ │ │ ├── components │ │ │ │ └── AudienceMetricsChart.js │ │ │ └── index.js │ │ ├── Financial │ │ │ ├── Financial.js │ │ │ └── index.js │ │ ├── Monitor │ │ │ ├── Monitor.js │ │ │ └── index.js │ │ ├── Projects │ │ │ ├── DraggableProjects.js │ │ │ ├── ProjectsDashboard.js │ │ │ └── index.js │ │ ├── Reports │ │ │ ├── Reports.js │ │ │ ├── components │ │ │ │ ├── TinyArcChart.js │ │ │ │ ├── TinyAreaChart.js │ │ │ │ └── TinyLineChart.js │ │ │ └── index.js │ │ ├── Stock │ │ │ ├── Stock.js │ │ │ └── index.js │ │ ├── System │ │ │ ├── System.js │ │ │ ├── components │ │ │ │ ├── CardSystem.js │ │ │ │ ├── TinyAreaChart.js │ │ │ │ ├── TinyBarChart.js │ │ │ │ ├── TinyDonutChart.js │ │ │ │ └── trSystem.js │ │ │ └── index.js │ │ └── components │ │ │ └── TinyLineChart.js │ ├── Forms │ │ ├── DatePicker │ │ │ ├── DatePickerExamples.js │ │ │ ├── components │ │ │ │ ├── AddonInput.js │ │ │ │ ├── ButtonInput.js │ │ │ │ ├── Example.js │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── Dropzone │ │ │ ├── Dropzone.js │ │ │ ├── components │ │ │ │ ├── FilesGrid.js │ │ │ │ ├── FilesList.js │ │ │ │ ├── common.scss │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── utilities.js │ │ ├── Editor │ │ │ ├── Editor.js │ │ │ └── index.js │ │ ├── Forms │ │ │ ├── Forms.js │ │ │ └── index.js │ │ ├── FormsLayouts │ │ │ ├── FormsLayouts.js │ │ │ └── index.js │ │ ├── InputGroups │ │ │ ├── InputGroups.js │ │ │ └── index.js │ │ ├── Sliders │ │ │ ├── Sliders.js │ │ │ ├── Sliders.scss │ │ │ └── index.js │ │ ├── TextMask │ │ │ ├── TextMask.js │ │ │ └── index.js │ │ ├── Toggles │ │ │ ├── Toggles.js │ │ │ ├── Toggles.scss │ │ │ └── index.js │ │ ├── Typeahead │ │ │ ├── Typeahead.js │ │ │ ├── components │ │ │ │ ├── AsynchronousPagination.js │ │ │ │ ├── AsynchronousSearching.js │ │ │ │ ├── BasicBehaviors.js │ │ │ │ ├── BasicExample.js │ │ │ │ ├── BodyContainer.js │ │ │ │ ├── ControllingSelections.js │ │ │ │ ├── CustomFiltering.js │ │ │ │ ├── CustomSelections.js │ │ │ │ ├── Filtering.js │ │ │ │ ├── FormExample.js │ │ │ │ ├── GithubMenuItem.js │ │ │ │ ├── InputSize.js │ │ │ │ ├── LabelKey.js │ │ │ │ ├── MenuAlignment.js │ │ │ │ ├── PaginationExample.js │ │ │ │ ├── PublicMethods.js │ │ │ │ ├── RenderingExample.js │ │ │ │ ├── exampleData.js │ │ │ │ ├── index.js │ │ │ │ └── utils.js │ │ │ └── index.js │ │ └── Wizard │ │ │ ├── Wizard.js │ │ │ └── index.js │ ├── Graphs │ │ └── ReCharts │ │ │ ├── ReCharts.js │ │ │ ├── components │ │ │ ├── AreaChartFillByValue.js │ │ │ ├── BarChartHasBackground.js │ │ │ ├── BarChartStackedBySign.js │ │ │ ├── CustomizedLabelLineChart.js │ │ │ ├── DashedLineChart.js │ │ │ ├── LineBarAreaComposedChart.js │ │ │ ├── MixBarChart.js │ │ │ ├── PercentAreaChart.js │ │ │ ├── PieChartWithCustomizedLabel.js │ │ │ ├── PieChartWithPaddingAngle.js │ │ │ ├── PieChartWithPaddingAngleHalf.js │ │ │ ├── PositiveAndNegativeBarChart.js │ │ │ ├── SimpleAreaChart.js │ │ │ ├── SimpleBarChart.js │ │ │ ├── SimpleLineChart.js │ │ │ ├── SimpleRadialBarChart.js │ │ │ ├── SpecifiedDomainRadarChart.js │ │ │ ├── StackedAreaChart.js │ │ │ ├── StackedBarChart.js │ │ │ ├── StraightAnglePieChart.js │ │ │ ├── TinyAreaChart.js │ │ │ ├── TinyBarChart.js │ │ │ ├── TinyDonutChart.js │ │ │ ├── TinyLineChart.js │ │ │ ├── TinyPieChart.js │ │ │ ├── TwoLevelPieChart.js │ │ │ ├── VerticalComposedChart.js │ │ │ └── VerticalLineChart.js │ │ │ └── index.js │ ├── Icons │ │ ├── Icons.js │ │ └── index.js │ ├── Interface │ │ ├── Accordions │ │ │ ├── Accordions.js │ │ │ └── index.js │ │ ├── Alerts │ │ │ ├── Alerts.js │ │ │ └── index.js │ │ ├── Avatars │ │ │ ├── Avatars.js │ │ │ └── index.js │ │ ├── BadgesLabels │ │ │ ├── BadgesLabels.js │ │ │ └── index.js │ │ ├── Breadcrumbs │ │ │ ├── Breadcrumbs.js │ │ │ └── index.js │ │ ├── Buttons │ │ │ ├── Buttons.js │ │ │ └── index.js │ │ ├── Calendar │ │ │ ├── Calendar.js │ │ │ ├── events.js │ │ │ └── index.js │ │ ├── Colors │ │ │ ├── Colors.js │ │ │ └── index.js │ │ ├── CropImage │ │ │ ├── CropImage.js │ │ │ ├── components │ │ │ │ └── ExampleProvider.js │ │ │ ├── images │ │ │ │ ├── image-1.jpg │ │ │ │ └── image-2.jpg │ │ │ └── index.js │ │ ├── DragAndDropElements │ │ │ ├── DragAndDropElements.js │ │ │ ├── components │ │ │ │ ├── DraggableTable.js │ │ │ │ ├── HorizontalLists.js │ │ │ │ ├── MultipleVerticalLists.js │ │ │ │ ├── common.scss │ │ │ │ ├── index.js │ │ │ │ └── utilities.js │ │ │ └── index.js │ │ ├── Dropdowns │ │ │ ├── Dropdowns.js │ │ │ └── index.js │ │ ├── Images │ │ │ ├── Images.js │ │ │ └── index.js │ │ ├── ListGroups │ │ │ ├── ListGroups.js │ │ │ └── index.js │ │ ├── MediaObjects │ │ │ ├── MediaObjects.js │ │ │ └── index.js │ │ ├── Modals │ │ │ ├── Modals.js │ │ │ └── index.js │ │ ├── Navbars │ │ │ ├── Navbars.js │ │ │ └── index.js │ │ ├── Notifications │ │ │ ├── Notifications.js │ │ │ └── index.js │ │ ├── Paginations │ │ │ ├── Paginations.js │ │ │ └── index.js │ │ ├── ProgressBars │ │ │ ├── ProgressBars.js │ │ │ └── index.js │ │ ├── TabsPills │ │ │ ├── TabsPills.js │ │ │ └── index.js │ │ ├── TooltipsPopovers │ │ │ ├── TooltipsPopovers.js │ │ │ └── index.js │ │ └── Typography │ │ │ ├── Typography.js │ │ │ └── index.js │ ├── Layouts │ │ ├── DragAndDropLayout │ │ │ ├── DragAndDropLayout.js │ │ │ └── index.js │ │ ├── NavbarOnly │ │ │ ├── NavbarOnly.js │ │ │ ├── components │ │ │ │ └── LayoutNavbar.js │ │ │ └── index.js │ │ ├── SidebarA │ │ │ ├── SidebarA.js │ │ │ └── index.js │ │ ├── SidebarDefault │ │ │ ├── SidebarDefault.js │ │ │ └── index.js │ │ └── SidebarWithNavbar │ │ │ ├── SidebarWithNavbar.js │ │ │ └── index.js │ ├── Pages │ │ ├── ComingSoon │ │ │ ├── ComingSoon.js │ │ │ └── index.js │ │ ├── Confirmation │ │ │ ├── Confirmation.js │ │ │ └── index.js │ │ ├── Danger │ │ │ ├── Danger.js │ │ │ └── index.js │ │ ├── Error404 │ │ │ ├── Error404.js │ │ │ └── index.js │ │ ├── ForgotPassword │ │ │ ├── ForgotPassword.js │ │ │ └── index.js │ │ ├── LockScreen │ │ │ ├── LockScreen.js │ │ │ └── index.js │ │ ├── Login │ │ │ ├── Login.js │ │ │ └── index.js │ │ ├── Register │ │ │ ├── Register.js │ │ │ └── index.js │ │ ├── Success │ │ │ ├── Success.js │ │ │ └── index.js │ │ └── Timeline │ │ │ ├── Timeline.js │ │ │ └── index.js │ ├── Tables │ │ ├── AgGrid │ │ │ ├── AgGrid.js │ │ │ └── index.js │ │ ├── ExtendedTable │ │ │ ├── ExtendedTable.js │ │ │ ├── components │ │ │ │ ├── AdvancedTableA.js │ │ │ │ ├── AdvancedTableB.js │ │ │ │ ├── BasicTable.js │ │ │ │ ├── BorderedTable.js │ │ │ │ ├── CellEdit.js │ │ │ │ ├── ClearSearch.js │ │ │ │ ├── CustomExportButton.js │ │ │ │ ├── CustomPaginationPanel.js │ │ │ │ ├── CustomPaginationTotal.js │ │ │ │ ├── CustomSearch.js │ │ │ │ ├── CustomSizePerPageButton.js │ │ │ │ ├── LargeTable.js │ │ │ │ ├── LargeTable.scss │ │ │ │ ├── SelectAll.js │ │ │ │ ├── SortTable.js │ │ │ │ └── index.js │ │ │ ├── filters │ │ │ │ ├── index.js │ │ │ │ ├── numberFilter.js │ │ │ │ ├── selectFilter.js │ │ │ │ └── textFilter.js │ │ │ └── index.js │ │ └── Tables │ │ │ ├── Tables.js │ │ │ ├── components │ │ │ ├── TrTableBordered.js │ │ │ ├── TrTableBorderless.js │ │ │ ├── TrTableContextual.js │ │ │ ├── TrTableDefault.js │ │ │ ├── TrTableHeads.js │ │ │ ├── TrTableHoverable.js │ │ │ ├── TrTableResponsive.js │ │ │ ├── TrTableSmall.js │ │ │ └── TrTableStriped.js │ │ │ └── index.js │ ├── Widgets │ │ ├── Widgets.js │ │ └── index.js │ ├── components │ │ ├── Analytics │ │ │ ├── MetricVsTarget.js │ │ │ ├── SessionsByDevice.js │ │ │ ├── TinyAreaChart.js │ │ │ ├── TinyAreaChartSpend.js │ │ │ ├── TrTableTrafficChannels.js │ │ │ └── WebsitePerformance.js │ │ ├── Attachment.js │ │ ├── CardFooterInfo.js │ │ ├── CardTextDemo.js │ │ ├── Chat │ │ │ ├── ChatCardFooter.js │ │ │ ├── ChatCardHeader.js │ │ │ ├── ChatLeft.js │ │ │ ├── ChatLeftNav.js │ │ │ └── ChatRight.js │ │ ├── Colors │ │ │ ├── CardColor.js │ │ │ ├── CardRgbaColor.js │ │ │ └── InfoPopover.js │ │ ├── Comment.js │ │ ├── Dropdowns │ │ │ ├── Activity.js │ │ │ ├── DropdownProfile.js │ │ │ ├── Messages.js │ │ │ └── SwitchVersion.js │ │ ├── Files │ │ │ ├── FilesCardGrid.js │ │ │ └── FilesLeftNav.js │ │ ├── Financial │ │ │ ├── StackedAreaChart.js │ │ │ ├── TinyDonutChartBig.js │ │ │ ├── TrTableInvoices.js │ │ │ └── TrTableRecentFundings.js │ │ ├── FooterText.js │ │ ├── Gallery │ │ │ └── GalleryCard.js │ │ ├── HeaderDemo.js │ │ ├── HeaderMain.js │ │ ├── LogoThemed │ │ │ └── LogoThemed.js │ │ ├── Logos │ │ │ ├── LogoNavbar.js │ │ │ └── LogotypeNavbar.js │ │ ├── Mailbox │ │ │ └── MailboxLeftNav.js │ │ ├── Monitor │ │ │ ├── TinyAreaChart.js │ │ │ ├── TinyDonutChart.js │ │ │ ├── TinyDonutChartBig.js │ │ │ └── TrTableMonitor.js │ │ ├── Navbars │ │ │ ├── NavbarExample.js │ │ │ └── NavbarNavigation.js │ │ ├── Pages │ │ │ ├── FooterAuth.js │ │ │ └── HeaderAuth.js │ │ ├── Paginations.js │ │ ├── Profile.js │ │ ├── Profile │ │ │ ├── DlRowAddress.js │ │ │ ├── DlRowContacts.js │ │ │ ├── ProfileHeader.js │ │ │ ├── ProfileLeftNav.js │ │ │ └── ProfileOverviewCard.js │ │ ├── Projects │ │ │ ├── ProjectsCardGrid.js │ │ │ ├── ProjectsLeftNav.js │ │ │ └── ProjectsSmHeader.js │ │ ├── ProjectsDashboards │ │ │ ├── ProjectsList.js │ │ │ ├── TasksMedia.js │ │ │ ├── TinyDonutChart.js │ │ │ └── TinyDonutChartAllProjects.js │ │ ├── SearchResults │ │ │ ├── ImagesResultsCard.js │ │ │ ├── SearchResultsCard.js │ │ │ ├── SearchResultsHeader.js │ │ │ ├── SearchResultsLeftNav.js │ │ │ ├── UsersResultsCard.js │ │ │ └── VideosResultsCard.js │ │ ├── Sidebar │ │ │ ├── SidebarBottomA.js │ │ │ ├── SidebarBottomB.js │ │ │ ├── SidebarTopA.js │ │ │ └── SidebarTopB.js │ │ ├── Stock │ │ │ ├── SimpleLineChart.js │ │ │ ├── TrTableFavStock.js │ │ │ ├── TrTableStock.js │ │ │ └── TrTableSummary.js │ │ ├── Tables │ │ │ ├── TrBorderless.js │ │ │ └── TrResponsive.js │ │ ├── Tasks │ │ │ └── TasksCardGrid.js │ │ ├── Timeline │ │ │ ├── TimelineDefault.js │ │ │ └── TimelineMini.js │ │ ├── Users │ │ │ ├── UsersCardGrid.js │ │ │ └── UsersLeftNav.js │ │ └── VersionSelector.js │ └── index.js ├── styles │ ├── bootstrap.scss │ ├── components │ │ ├── float-grid.scss │ │ ├── theme-selector.scss │ │ └── wizard.scss │ ├── main.scss │ ├── plugins │ │ ├── _ag-grid.scss │ │ ├── _font-awesome.scss │ │ ├── _rc-slider.scss │ │ ├── _react-big-calendar.scss │ │ ├── _react-bootstrap-table.scss │ │ ├── _react-bootstrap-typeahead.scss │ │ ├── _react-datepicker.scss │ │ ├── _react-dropzone.scss │ │ ├── _react-grid-layout.scss │ │ ├── _react-image-crop.scss │ │ ├── _react-quill.scss │ │ ├── _react-toastify.scss │ │ ├── _react-toggle.scss │ │ ├── plugins.css │ │ └── plugins.scss │ └── variables.scss └── utilities.js ├── build ├── cli-tools.js ├── webpack.config.client.dev.js └── webpack.config.client.prod.js ├── config.js ├── package.json ├── packages └── dashboard-style │ ├── js-modules │ ├── colors.js │ ├── dashboard-version.js │ ├── dropdown-menu-animate.js │ ├── extended-faker.js │ ├── highcharts.js │ ├── index.js │ ├── nested-dropdown-animate.js │ ├── side-menu-animate.js │ ├── sidebar-entry-animate.js │ ├── slim-menu-animate.js │ ├── slim-sidebar-animate.js │ └── utilities.js │ ├── js │ ├── ag-grid.js │ ├── ag-grid.js.map │ ├── animate.js │ ├── animate.js.map │ ├── colors.js │ ├── colors.js.map │ ├── dashboard-version.js │ ├── dashboard-version.js.map │ ├── faker.js │ ├── faker.js.map │ ├── highcharts.js │ ├── highcharts.js.map │ ├── highcharts │ │ ├── area-basic.js │ │ ├── area-basic.js.map │ │ ├── area-stacked.js │ │ ├── area-stacked.js.map │ │ ├── bar-basic.js │ │ ├── bar-basic.js.map │ │ ├── bar-stacked.js │ │ ├── bar-stacked.js.map │ │ ├── column-basic.js │ │ ├── column-basic.js.map │ │ ├── column-drilldown.js │ │ ├── column-drilldown.js.map │ │ ├── line-ajax.js │ │ ├── line-ajax.js.map │ │ ├── line-basic.js │ │ ├── line-basic.js.map │ │ ├── line-labels.js │ │ ├── line-labels.js.map │ │ ├── line-time-series.js │ │ ├── line-time-series.js.map │ │ ├── pie-legend.js │ │ ├── pie-legend.js.map │ │ ├── pie-semi-circle.js │ │ └── pie-semi-circle.js.map │ ├── init.js │ ├── init.js.map │ ├── layout.js │ ├── layout.js.map │ ├── nested-dropdown.js │ ├── nested-dropdown.js.map │ ├── side-menu.js │ ├── side-menu.js.map │ ├── theme-config.js │ └── theme-config.js.map │ ├── package.json │ └── scss │ ├── _animations.scss │ ├── _avatars.scss │ ├── _custom-card-header.scss │ ├── _custom-card.scss │ ├── _extended-dropdown.scss │ ├── _fullScreen.scss │ ├── _hr-text.scss │ ├── _icon-with-badge.scss │ ├── _layout.scss │ ├── _navbar.scss │ ├── _nested-dropdown.scss │ ├── _sidebar-menu.scss │ ├── _sidebar.scss │ ├── _theme-config.scss │ ├── _theme-variants.scss │ ├── _timeline.scss │ ├── _variables.scss │ ├── bootstrap │ ├── _functions.scss │ ├── _helpers.scss │ ├── _mixins.scss │ ├── _variables.scss │ └── bootstrap.scss │ ├── mixins │ └── _layout-theme.scss │ ├── plugins │ ├── ag-grid │ │ ├── _ag-theme-bootstrap-vars.scss │ │ ├── ag-grid.scss │ │ └── ag-theme-bootstrap.scss │ └── highcharts │ │ └── highcharts.scss │ └── style.scss ├── postcss.config.js └── vercel.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react", 5 | ], 6 | "plugins": [ 7 | "@babel/plugin-proposal-class-properties", 8 | "@babel/plugin-syntax-dynamic-import", 9 | "universal-import", 10 | "react-hot-loader/babel" 11 | ], 12 | "env": { 13 | "development": { 14 | "plugins": [ 15 | "react-hot-loader/babel" 16 | ] 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": [ 4 | "react" 5 | ], 6 | "parserOptions": { 7 | "ecmaVersion": 6, 8 | "sourceType": "module", 9 | "ecmaFeatures": { 10 | "jsx": true, 11 | "experimentalObjectRestSpread": true 12 | } 13 | }, 14 | "env": { 15 | "es6": true, 16 | "browser": true, 17 | "node": true, 18 | "mocha": true 19 | }, 20 | "extends": [ 21 | "eslint:recommended", 22 | "plugin:react/recommended" 23 | ], 24 | "rules": { 25 | } 26 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist 3 | 4 | # dependencies 5 | node_modules 6 | package-lock.json 7 | yarn.lock 8 | 9 | # other 10 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Tomasz O. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /app/colors.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash'; 2 | 3 | import colors from './colors.scss'; 4 | 5 | const colorKeys = _ 6 | .chain(colors) 7 | .keys() 8 | .filter((colorKey) => ( 9 | colorKey.indexOf('bg-') === -1 && 10 | colorKey.indexOf('fg-') === -1 11 | )) 12 | .value(); 13 | 14 | export default _.pick(colors, colorKeys); -------------------------------------------------------------------------------- /app/colors.scss: -------------------------------------------------------------------------------- 1 | @import "./styles/variables"; 2 | 3 | @each $name, $color in $dashboard-colors { 4 | .fg-color--#{ $name } { 5 | color: $color; 6 | } 7 | .bg-color--#{ $name } { 8 | background-color: $color; 9 | } 10 | } 11 | 12 | :export { 13 | @each $name, $color in $dashboard-colors { 14 | #{$name}: $color 15 | } 16 | } -------------------------------------------------------------------------------- /app/common.js: -------------------------------------------------------------------------------- 1 | import * as CommonDashboardFuncs from '@owczar/dashboard-style--airframe'; 2 | 3 | export default CommonDashboardFuncs; -------------------------------------------------------------------------------- /app/components/Accordion/AccordionBody.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { Collapse, CardBody } from 'reactstrap'; 5 | 6 | import { Consumer } from './context'; 7 | 8 | export const AccordionBody = (props) => ( 9 | 10 | { 11 | ({ isOpen }) => ( 12 | 13 | 14 | { props.children } 15 | 16 | 17 | ) 18 | } 19 | 20 | ); 21 | AccordionBody.propTypes = { 22 | children: PropTypes.node, 23 | className: PropTypes.string 24 | }; 25 | -------------------------------------------------------------------------------- /app/components/Accordion/AccordionHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | import CardHeader from './../CardHeader'; 6 | 7 | import { Consumer } from './context'; 8 | import classes from './AccordionHeader.scss'; 9 | 10 | export const AccordionHeader = (props) => ( 11 | 12 | { 13 | ({ onToggle }) => ( 14 | 23 | { props.children } 24 | 25 | ) 26 | } 27 | 28 | ); 29 | AccordionHeader.propTypes = { 30 | children: PropTypes.node, 31 | onClick: PropTypes.func, 32 | className: PropTypes.string 33 | }; 34 | -------------------------------------------------------------------------------- /app/components/Accordion/AccordionHeader.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/variables'; 2 | 3 | div.header { 4 | background: none; 5 | border-bottom: none; 6 | cursor: pointer; 7 | color: $link-color; 8 | text-decoration: $link-decoration; 9 | 10 | &:hover { 11 | color: $link-hover-color; 12 | text-decoration: $link-hover-decoration; 13 | } 14 | } -------------------------------------------------------------------------------- /app/components/Accordion/AccordionIndicator.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | import { Consumer } from './context'; 6 | 7 | export const AccordionIndicator = (props) => ( 8 | 9 | { 10 | ({ isOpen }) => isOpen ? 11 | React.cloneElement(props.open, { 12 | className: classNames(props.className, props.open.props.className) 13 | }) : React.cloneElement(props.closed, { 14 | className: classNames(props.className, props.closed.props.className) 15 | }) 16 | } 17 | 18 | ); 19 | AccordionIndicator.propTypes = { 20 | open: PropTypes.node, 21 | closed: PropTypes.node, 22 | className: PropTypes.string 23 | } 24 | AccordionIndicator.defaultProps = { 25 | open: , 26 | closed: 27 | } 28 | -------------------------------------------------------------------------------- /app/components/Accordion/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const { Provider, Consumer } = React.createContext(); 4 | 5 | export { 6 | Provider, 7 | Consumer 8 | }; 9 | -------------------------------------------------------------------------------- /app/components/Accordion/index.js: -------------------------------------------------------------------------------- 1 | import { Accordion } from './Accordion'; 2 | import { AccordionBody } from './AccordionBody'; 3 | import { AccordionHeader } from './AccordionHeader'; 4 | import { AccordionIndicator } from './AccordionIndicator'; 5 | 6 | Accordion.Body = AccordionBody; 7 | Accordion.Header = AccordionHeader; 8 | Accordion.Indicator = AccordionIndicator; 9 | 10 | export default Accordion; 11 | -------------------------------------------------------------------------------- /app/components/App/AppClient.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { hot } from 'react-hot-loader' 3 | import { BrowserRouter as Router } from 'react-router-dom'; 4 | 5 | import AppLayout from './../../layout/default'; 6 | import { RoutedContent } from './../../routes'; 7 | 8 | const basePath = process.env.BASE_PATH || '/'; 9 | 10 | const AppClient = () => { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | export default hot(module)(AppClient); -------------------------------------------------------------------------------- /app/components/App/index.js: -------------------------------------------------------------------------------- 1 | import AppClient from './AppClient'; 2 | 3 | export default AppClient; -------------------------------------------------------------------------------- /app/components/Avatar/AvatarAddonBadge.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { Badge } from 'reactstrap'; 5 | 6 | const AvatarAddonBadge = (props) => { 7 | const { children, ...badgeProps } = props; 8 | 9 | return ( 10 | 11 | { children } 12 | 13 | ); 14 | }; 15 | AvatarAddonBadge.propTypes = { 16 | children: PropTypes.node, 17 | className: PropTypes.string 18 | }; 19 | AvatarAddonBadge.addOnId = "avatar--badge"; 20 | 21 | export { AvatarAddonBadge }; -------------------------------------------------------------------------------- /app/components/Avatar/AvatarAddonIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | import avatarColors from './../../colors.scss'; 6 | 7 | const AvatarAddonIcon = (props) => { 8 | const addOnClass = classNames({ 9 | 'avatar__icon__inner': props.small 10 | }, avatarColors[`fg-color--${ props.color }`]); 11 | 12 | return ( 13 | 14 | ); 15 | }; 16 | AvatarAddonIcon.propTypes = { 17 | small: PropTypes.bool, 18 | className: PropTypes.string, 19 | color: PropTypes.string 20 | }; 21 | AvatarAddonIcon.defaultProps = { 22 | color: "success" 23 | }; 24 | AvatarAddonIcon.addOnId = "avatar--icon"; 25 | 26 | export { AvatarAddonIcon }; -------------------------------------------------------------------------------- /app/components/Avatar/index.js: -------------------------------------------------------------------------------- 1 | import { Avatar } from './Avatar'; 2 | import { AvatarFont } from './AvatarFont'; 3 | import { AvatarImage } from './AvatarImage'; 4 | 5 | import { AvatarAddonBadge } from './AvatarAddonBadge'; 6 | import { AvatarAddonIcon } from './AvatarAddonIcon'; 7 | 8 | Avatar.Font = AvatarFont; 9 | Avatar.Image = AvatarImage; 10 | 11 | const AvatarAddOn = { 12 | Icon: AvatarAddonIcon, 13 | Badge: AvatarAddonBadge 14 | }; 15 | 16 | export default Avatar; 17 | export { AvatarAddOn }; -------------------------------------------------------------------------------- /app/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { 5 | Card as BsCard 6 | } from 'reactstrap'; 7 | 8 | import classes from './Card.scss'; 9 | 10 | const Card = (props) => { 11 | const { children, type, color, className, ...otherProps } = props; 12 | const cardClass = classNames(className, 13 | classes['custom-card'], 14 | classes[`custom-card--${ type }`], 15 | color && classes[`custom-card--color-${ color }`] 16 | ); 17 | return ( 18 | 19 | { children } 20 | 21 | ); 22 | } 23 | Card.propTypes = { 24 | ...BsCard.propTypes, 25 | type: PropTypes.string, 26 | color: PropTypes.string 27 | }; 28 | Card.defaultProps = { 29 | type: 'border', 30 | color: null 31 | }; 32 | 33 | export { Card }; 34 | -------------------------------------------------------------------------------- /app/components/Card/Card.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/variables"; 2 | 3 | .custom-card { 4 | &--border-dash, 5 | &--border-dot, 6 | &--border { 7 | @each $name, $color in $dashboard-colors { 8 | &.custom-card--color-#{$name} { 9 | border-color: $color 10 | } 11 | } 12 | } 13 | 14 | &--side-border { 15 | border-left-width: 2px; 16 | 17 | @each $name, $color in $dashboard-colors { 18 | &.custom-card--color-#{$name} { 19 | border-left-color: $color 20 | } 21 | } 22 | } 23 | 24 | &--background { 25 | color: map-get($dashboard-colors, 'white'); 26 | 27 | @each $name, $color in $dashboard-colors { 28 | &.custom-card--color-#{$name} { 29 | background-color: $color; 30 | } 31 | } 32 | } 33 | 34 | &--border-dash { 35 | border-style: dashed; 36 | border-width: 2px; 37 | } 38 | 39 | &--border-dot { 40 | border-style: dotted; 41 | border-width: 2px; 42 | } 43 | 44 | &--shadow { 45 | box-shadow: 0 1px 2px 0 rgba(31, 45, 61, 0.07); 46 | } 47 | 48 | &--none { 49 | border: none; 50 | background: none; 51 | } 52 | } -------------------------------------------------------------------------------- /app/components/Card/index.js: -------------------------------------------------------------------------------- 1 | import { Card } from './Card'; 2 | 3 | export default Card; -------------------------------------------------------------------------------- /app/components/CardHeader/CardHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { 5 | CardHeader as BsCardHeader 6 | } from 'reactstrap'; 7 | 8 | import classes from './CardHeader.scss'; 9 | 10 | const CardHeader = (props) => { 11 | const { type, color, className, children, ...otherProps } = props; 12 | const cardHeaderClass = classNames(className, 13 | classes['custom-card-header'], 14 | type && classes[`custom-card-header--${ type }`], 15 | color && classes[`custom-card-header--color-${ color }`] 16 | ); 17 | return ( 18 | 19 | { children } 20 | 21 | ); 22 | }; 23 | CardHeader.propTypes = { 24 | type: PropTypes.string, 25 | color: PropTypes.string, 26 | className: PropTypes.string, 27 | ...BsCardHeader.propTypes 28 | }; 29 | 30 | export { CardHeader }; 31 | -------------------------------------------------------------------------------- /app/components/CardHeader/CardHeader.scss: -------------------------------------------------------------------------------- 1 | @import "../../styles/variables"; 2 | 3 | .custom-card-header { 4 | &--background { 5 | color: map-get($dashboard-colors, "white"); 6 | 7 | @each $name, $color in $dashboard-colors { 8 | &.custom-card-header--color-#{$name} { 9 | background-color: $color; 10 | } 11 | } 12 | } 13 | 14 | &--border { 15 | @each $name, $color in $dashboard-colors { 16 | border-bottom: 2px solid; 17 | background: none; 18 | 19 | &.custom-card-header--color-#{$name} { 20 | border-bottom-color: $color; 21 | } 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /app/components/CardHeader/index.js: -------------------------------------------------------------------------------- 1 | import { CardHeader } from './CardHeader'; 2 | 3 | export default CardHeader; -------------------------------------------------------------------------------- /app/components/Checkable/Checkable.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { Provider } from './context'; 5 | 6 | class Checkable extends React.Component { 7 | static propTypes = { 8 | children: PropTypes.node.isRequired, 9 | tag: PropTypes.oneOfType([ 10 | PropTypes.func, 11 | PropTypes.string 12 | ]) 13 | }; 14 | static defaultProps = { 15 | tag: "div" 16 | }; 17 | 18 | constructor(props) { 19 | super(props); 20 | 21 | this.state = { 22 | isChecked: false 23 | }; 24 | } 25 | 26 | render() { 27 | const { tag, children, ...otherProps } = this.props; 28 | const Tag = this.props.tag; 29 | 30 | return ( 31 | { this.setState({ isChecked: enabled || !this.state.isChecked }) } 35 | }} 36 | > 37 | 38 | { children } 39 | 40 | 41 | ); 42 | } 43 | } 44 | 45 | export { Checkable }; 46 | -------------------------------------------------------------------------------- /app/components/Checkable/CheckableTrigger.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import PropTypes from 'prop-types'; 4 | 5 | import { Consumer } from './context'; 6 | 7 | import classes from './CheckableTrigger.scss'; 8 | 9 | const CheckableTrigger = (props) => { 10 | const { children, tag, className, ...otherProps } = props; 11 | const Tag = tag; 12 | const tagClass = classNames(classes['checkable__trigger'], className); 13 | 14 | return ( 15 | 16 | { 17 | (value) => ( 18 | { value.toggle() } }> 19 | { children } 20 | 21 | ) 22 | } 23 | 24 | ); 25 | }; 26 | CheckableTrigger.propTypes = { 27 | children: PropTypes.node, 28 | className: PropTypes.string, 29 | tag: PropTypes.oneOfType([ 30 | PropTypes.func, 31 | PropTypes.string 32 | ]) 33 | }; 34 | CheckableTrigger.defaultProps = { 35 | tag: "div" 36 | }; 37 | 38 | export { CheckableTrigger }; -------------------------------------------------------------------------------- /app/components/Checkable/CheckableTrigger.scss: -------------------------------------------------------------------------------- 1 | .checkable__trigger { 2 | cursor: pointer; 3 | } -------------------------------------------------------------------------------- /app/components/Checkable/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const { Provider, Consumer } = React.createContext(); 4 | 5 | export { 6 | Provider, 7 | Consumer 8 | }; 9 | -------------------------------------------------------------------------------- /app/components/Checkable/index.js: -------------------------------------------------------------------------------- 1 | import { Checkable } from './Checkable'; 2 | import { CheckableTrigger } from './CheckableTrigger'; 3 | import { CheckableInput } from './CheckableInput'; 4 | 5 | Checkable.Trigger = CheckableTrigger; 6 | Checkable.Input = CheckableInput; 7 | 8 | export default Checkable; -------------------------------------------------------------------------------- /app/components/CustomInput/CustomInput.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import { CustomInput as RSCustomInput } from 'reactstrap'; 4 | 5 | const CustomInput = (props) => { 6 | const { className, ...otherProps } = props; 7 | const inputClass = classNames(className, { 8 | 'custom-control-empty': !props.label 9 | }); 10 | 11 | return ( 12 | 13 | ); 14 | } 15 | CustomInput.propTypes = { ...RSCustomInput.propTypes }; 16 | 17 | export { CustomInput }; 18 | -------------------------------------------------------------------------------- /app/components/CustomInput/index.js: -------------------------------------------------------------------------------- 1 | import { CustomInput } from './CustomInput'; 2 | 3 | export default CustomInput; 4 | -------------------------------------------------------------------------------- /app/components/Divider/Divider.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | export const Divider = ({ position, children, className }) => { 6 | const dividerClass = classNames({ 7 | 'hr-text-center': position === 'center', 8 | 'hr-text-right': position === 'right' 9 | }, 'hr-text', className); 10 | 11 | return ( 12 |
13 | { children } 14 |
15 | ) 16 | } 17 | 18 | Divider.propTypes = { 19 | position: PropTypes.string, 20 | className: PropTypes.string, 21 | children: PropTypes.node 22 | } -------------------------------------------------------------------------------- /app/components/Divider/index.js: -------------------------------------------------------------------------------- 1 | import { Divider } from './Divider'; 2 | 3 | export default Divider; 4 | -------------------------------------------------------------------------------- /app/components/EmptyLayout/EmptyLayoutSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import PropTypes from 'prop-types'; 4 | import classNames from 'classnames'; 5 | 6 | const EmptyLayoutSection = (props) => { 7 | const sectionClass = classNames(props.className, 'fullscreen__section', { 8 | 'fullscreen__section--center': props.center 9 | }); 10 | const maxWidth = _.isNumber(props.width) ? `${props.width}px` : props.width; 11 | return ( 12 |
13 | { 14 | props.center ? 15 |
16 | { props.children } 17 |
: props.children 18 | } 19 |
20 | ) 21 | }; 22 | EmptyLayoutSection.propTypes = { 23 | className: PropTypes.string, 24 | children: PropTypes.node.isRequired, 25 | center: PropTypes.bool, 26 | width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) 27 | }; 28 | EmptyLayoutSection.defaultProps = { 29 | width: '420px' 30 | } 31 | 32 | export { EmptyLayoutSection }; 33 | -------------------------------------------------------------------------------- /app/components/EmptyLayout/index.js: -------------------------------------------------------------------------------- 1 | import { EmptyLayout } from './EmptyLayout'; 2 | import { EmptyLayoutSection } from './EmptyLayoutSection'; 3 | 4 | EmptyLayout.Section = EmptyLayoutSection; 5 | 6 | export default EmptyLayout; 7 | -------------------------------------------------------------------------------- /app/components/ExtendedDropdown/ExtendedDropdown.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { DropdownMenu } from 'reactstrap'; 5 | 6 | export const ExtendedDropdown = ({ className, ...otherProps }) => { 7 | const classes = classNames( 8 | className, 9 | 'extended-dropdown' 10 | ); 11 | return ( 12 | 13 | ); 14 | } 15 | ExtendedDropdown.propTypes = { 16 | className: PropTypes.string, 17 | }; 18 | -------------------------------------------------------------------------------- /app/components/ExtendedDropdown/ExtendedDropdownLink.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { DropdownContext } from 'reactstrap/es/DropdownContext'; 4 | 5 | const ExtendedDropdownLink = (props) => { 6 | const { children, ...otherProps } = props; 7 | 8 | return ( 9 | 10 | { 11 | ({ toggle }) => ( 12 | { toggle(); } }> 13 | { children } 14 | 15 | ) 16 | } 17 | 18 | ); 19 | }; 20 | ExtendedDropdownLink.propTypes = { ...Link.propTypes }; 21 | ExtendedDropdownLink.defaultProps = { ...Link.defaultProps }; 22 | 23 | export { ExtendedDropdownLink }; 24 | -------------------------------------------------------------------------------- /app/components/ExtendedDropdown/ExtendedDropdownSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const ExtendedDropdownSection = (props) => { 6 | const { children, list, className, tag, ...otherProps } = props; 7 | const sectionClass = classNames( 8 | "extended-dropdown__section", className, { 9 | "extended-dropdown__section--list": list 10 | } 11 | ); 12 | const Tag = tag; 13 | 14 | return ( 15 | 16 | { children } 17 | 18 | ); 19 | }; 20 | ExtendedDropdownSection.propTypes = { 21 | children: PropTypes.node, 22 | list: PropTypes.bool, 23 | className: PropTypes.string, 24 | tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func]) 25 | }; 26 | ExtendedDropdownSection.defaultProps = { 27 | tag: "div" 28 | }; 29 | 30 | export { ExtendedDropdownSection }; -------------------------------------------------------------------------------- /app/components/ExtendedDropdown/index.js: -------------------------------------------------------------------------------- 1 | import { ExtendedDropdown } from './ExtendedDropdown'; 2 | import { ExtendedDropdownSection } from './ExtendedDropdownSection'; 3 | import { ExtendedDropdownLink } from './ExtendedDropdownLink'; 4 | 5 | ExtendedDropdown.Section = ExtendedDropdownSection; 6 | ExtendedDropdown.Link = ExtendedDropdownLink; 7 | 8 | export default ExtendedDropdown; -------------------------------------------------------------------------------- /app/components/FloatGrid/Ready.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { FloatGridContext } from './floatGridContext'; 4 | 5 | export const Ready = ({ children }) => ( 6 | 7 | { 8 | ({ gridReady }) => gridReady ? children : null 9 | } 10 | 11 | ); 12 | Ready.propTypes = { 13 | children: PropTypes.node 14 | } -------------------------------------------------------------------------------- /app/components/FloatGrid/floatGridContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const FloatGridContext = React.createContext(); 4 | -------------------------------------------------------------------------------- /app/components/FloatGrid/index.js: -------------------------------------------------------------------------------- 1 | import { Col } from './Col'; 2 | import { Row } from './Row'; 3 | import { Grid } from './Grid'; 4 | import { Ready } from './Ready'; 5 | 6 | Grid.Col = Col; 7 | Grid.Row = Row; 8 | Grid.Ready = Ready; 9 | 10 | export const applyColumn = (columnId, layouts) => ({ 11 | ...layouts[columnId], 12 | i: columnId, 13 | key: columnId 14 | }); 15 | 16 | export default Grid; 17 | -------------------------------------------------------------------------------- /app/components/HolderProvider/HolderIconProvider.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { HolderTextProvider } from './HolderTextProvider'; 5 | 6 | const HolderIconProvider = (props) => { 7 | const { iconChar, children, ...otherProps } = props; 8 | return ( 9 | 14 | { children } 15 | 16 | ); 17 | }; 18 | HolderIconProvider.propTypes = { 19 | iconChar: PropTypes.string.isRequired, 20 | children: PropTypes.node 21 | }; 22 | 23 | export { HolderIconProvider }; -------------------------------------------------------------------------------- /app/components/HolderProvider/index.js: -------------------------------------------------------------------------------- 1 | import { HolderTextProvider } from './HolderTextProvider'; 2 | import { HolderIconProvider } from './HolderIconProvider'; 3 | 4 | const HolderProvider = { 5 | Text: HolderTextProvider, 6 | Icon: HolderIconProvider 7 | }; 8 | 9 | export default HolderProvider; 10 | 11 | -------------------------------------------------------------------------------- /app/components/IconWithBadge/IconWithBadge.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const IconWithBadge = (props) => { 6 | const { badge, children, className } = props; 7 | const adjustedBadge = React.cloneElement(badge, { 8 | className: classNames( 9 | badge.props.className, 10 | 'icon-with-badge__badge' 11 | ) 12 | }); 13 | const wrapClass = classNames(className, 'icon-with-badge'); 14 | return ( 15 |
16 | { children } 17 | { adjustedBadge } 18 |
19 | ); 20 | }; 21 | IconWithBadge.propTypes = { 22 | badge: PropTypes.node, 23 | children: PropTypes.node, 24 | className: PropTypes.string 25 | }; 26 | 27 | export { IconWithBadge }; 28 | -------------------------------------------------------------------------------- /app/components/IconWithBadge/index.js: -------------------------------------------------------------------------------- 1 | import { IconWithBadge } from './IconWithBadge'; 2 | 3 | export default IconWithBadge; 4 | -------------------------------------------------------------------------------- /app/components/InputGroupAddon/InputGroupAddon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | 4 | import { 5 | InputGroupAddon as BsInputGroupAddon 6 | } from 'reactstrap'; 7 | 8 | const InputGroupAddon = (props) => { 9 | const { children, ...otherProps } = props; 10 | const childArr = React.Children.toArray(children); 11 | const isFa = _.some(childArr, (child) => 12 | React.isValidElement(child) && child.props.className && _.includes(child.props.className, 'fa')); 13 | const isCheckRadio = _.some(childArr, (child) => 14 | React.isValidElement(child) && (child.props.type === 'radio' || child.props.type === 'checkbox')); 15 | 16 | let child = isFa || isCheckRadio ? ( 17 |
18 | { children } 19 |
20 | ) : children; 21 | 22 | return ( 23 | 24 | { child } 25 | 26 | ); 27 | } 28 | InputGroupAddon.propTypes = { 29 | ...BsInputGroupAddon.propTypes 30 | }; 31 | InputGroupAddon.defaultProps = BsInputGroupAddon.defaultProps; 32 | 33 | export { InputGroupAddon }; 34 | -------------------------------------------------------------------------------- /app/components/InputGroupAddon/index.js: -------------------------------------------------------------------------------- 1 | import { InputGroupAddon } from './InputGroupAddon'; 2 | 3 | export default InputGroupAddon; -------------------------------------------------------------------------------- /app/components/Layout/LayoutContent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const LayoutContent = (props) => ( 5 |
6 | { props.children } 7 |
8 | ); 9 | 10 | LayoutContent.propTypes = { 11 | children: PropTypes.node 12 | }; 13 | LayoutContent.layoutPartName = "content"; 14 | 15 | export { 16 | LayoutContent 17 | }; 18 | -------------------------------------------------------------------------------- /app/components/Layout/LayoutNavbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const LayoutNavbar = (props) => { 5 | const navbar = React.Children.only(props.children); 6 | 7 | return ( 8 |
9 | { 10 | React.cloneElement(navbar, { fixed: null }) 11 | } 12 |
13 | ); 14 | }; 15 | 16 | LayoutNavbar.propTypes = { 17 | children: PropTypes.node 18 | }; 19 | LayoutNavbar.layoutPartName = "navbar"; 20 | 21 | export { 22 | LayoutNavbar 23 | }; 24 | -------------------------------------------------------------------------------- /app/components/Layout/LayoutSidebar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const LayoutSidebar = (props) => { 6 | const sidebarClass = classNames("layout__sidebar", { 7 | "layout__sidebar--slim": props.sidebarSlim, 8 | "layout__sidebar--collapsed": props.sidebarCollapsed 9 | }); 10 | 11 | return ( 12 |
13 | { props.children } 14 |
15 | ); 16 | }; 17 | 18 | LayoutSidebar.propTypes = { 19 | children: PropTypes.node, 20 | sidebarSlim: PropTypes.bool, 21 | sidebarCollapsed: PropTypes.bool 22 | }; 23 | LayoutSidebar.layoutPartName = "sidebar"; 24 | 25 | export { 26 | LayoutSidebar 27 | }; 28 | -------------------------------------------------------------------------------- /app/components/Layout/PageConfigContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const PageConfigContext = React.createContext(); 4 | 5 | export { 6 | PageConfigContext 7 | }; 8 | -------------------------------------------------------------------------------- /app/components/Layout/index.js: -------------------------------------------------------------------------------- 1 | import { Layout } from './Layout'; 2 | import { LayoutContent } from './LayoutContent'; 3 | import { LayoutNavbar } from './LayoutNavbar'; 4 | import { LayoutSidebar } from './LayoutSidebar'; 5 | import { withPageConfig } from './withPageConfig'; 6 | import { setupPage } from './setupPage'; 7 | import { PageConfigContext } from './PageConfigContext'; 8 | 9 | Layout.Sidebar = LayoutSidebar; 10 | Layout.Navbar = LayoutNavbar; 11 | Layout.Content = LayoutContent; 12 | 13 | const PageConfigProvider = PageConfigContext.Provider; 14 | const PageConfigConsumer = PageConfigContext.Consumer; 15 | 16 | export default Layout; 17 | export { withPageConfig, setupPage, PageConfigProvider, PageConfigConsumer }; 18 | -------------------------------------------------------------------------------- /app/components/Layout/setupPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import PropTypes from 'prop-types'; 4 | import { withPageConfig } from './withPageConfig' 5 | 6 | export const setupPage = (startupConfig) => 7 | (Component) => { 8 | class PageSetupWrap extends React.Component { 9 | static propTypes = { 10 | pageConfig: PropTypes.object 11 | } 12 | componentDidMount() { 13 | this.prevConfig = _.pick(this.props.pageConfig, 14 | ['pageTitle', 'pageDescription', 'pageKeywords']); 15 | this.props.pageConfig.changeMeta(startupConfig); 16 | } 17 | 18 | componentWillUnmount() { 19 | this.props.pageConfig.changeMeta(this.prevConfig); 20 | } 21 | 22 | render() { 23 | return ( 24 | 25 | ) 26 | } 27 | } 28 | 29 | return withPageConfig(PageSetupWrap); 30 | }; -------------------------------------------------------------------------------- /app/components/Layout/withPageConfig.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { PageConfigContext } from './PageConfigContext'; 3 | 4 | export const withPageConfig = (Component) => { 5 | const WithPageConfig = (props) => ( 6 | 7 | { 8 | (pageConfig) => 9 | } 10 | 11 | ); 12 | return WithPageConfig; 13 | }; 14 | -------------------------------------------------------------------------------- /app/components/Nav/index.js: -------------------------------------------------------------------------------- 1 | import { Nav } from './nav'; 2 | 3 | export default Nav; 4 | -------------------------------------------------------------------------------- /app/components/Nav/nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | import { Nav as BsNav } from 'reactstrap'; 6 | 7 | const Nav = ({ accent, className, ...otherProps }) => { 8 | return ( 9 | 15 | ); 16 | }; 17 | Nav.propTypes = { 18 | ...BsNav.propTypes, 19 | accent: PropTypes.bool, 20 | }; 21 | Nav.defaultProps = { 22 | accent: false 23 | }; 24 | 25 | export { Nav }; 26 | -------------------------------------------------------------------------------- /app/components/Navbar/index.js: -------------------------------------------------------------------------------- 1 | import { Navbar } from './navbar'; 2 | 3 | export default Navbar; -------------------------------------------------------------------------------- /app/components/NavbarThemeProvider/NavbarThemeProvider.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const NavbarThemeProvider = ({ style, color, children, className }) => { 6 | const isSingleChild = React.Children.count(children) === 1; 7 | const themeClass = `navbar-${style}-${color}`; 8 | 9 | if (isSingleChild) { 10 | const child = React.Children.only(children); 11 | 12 | return React.cloneElement(child, { 13 | className: classNames( 14 | child.props.className, 15 | themeClass 16 | ), 17 | }); 18 | } else { 19 | return ( 20 |
21 | { children } 22 |
23 | ); 24 | } 25 | }; 26 | NavbarThemeProvider.propTypes = { 27 | children: PropTypes.node.isRequired, 28 | style: PropTypes.string, 29 | color: PropTypes.string, 30 | }; 31 | NavbarThemeProvider.defaultProps = { 32 | style: 'light', 33 | color: 'primary', 34 | }; 35 | 36 | export { NavbarThemeProvider }; 37 | -------------------------------------------------------------------------------- /app/components/NavbarThemeProvider/index.js: -------------------------------------------------------------------------------- 1 | import { NavbarThemeProvider } from './NavbarThemeProvider'; 2 | 3 | export default NavbarThemeProvider; 4 | -------------------------------------------------------------------------------- /app/components/NestedDropdown/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const { Consumer, Provider } = React.createContext(); 4 | 5 | export { 6 | Consumer, 7 | Provider 8 | }; 9 | -------------------------------------------------------------------------------- /app/components/NestedDropdown/index.js: -------------------------------------------------------------------------------- 1 | import { NestedDropdown } from './NestedDropdown'; 2 | import { NestedDropdownSubmenu } from './NestedDropdownSubmenu'; 3 | 4 | NestedDropdown.Submenu = NestedDropdownSubmenu; 5 | 6 | export default NestedDropdown; 7 | -------------------------------------------------------------------------------- /app/components/OuterClick/index.js: -------------------------------------------------------------------------------- 1 | import { OuterClick } from './OuterClick'; 2 | 3 | export default OuterClick; -------------------------------------------------------------------------------- /app/components/PageLoader/PageLoader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import classes from './PageLoader.scss'; 4 | 5 | const PageLoader = () => ( 6 |
Loading...
7 | ); 8 | 9 | export default PageLoader; -------------------------------------------------------------------------------- /app/components/PageLoader/PageLoader.scss: -------------------------------------------------------------------------------- 1 | .pageLoader { 2 | background-color: cyan; 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | bottom: 0; 7 | right: 0; 8 | z-index: 1000; 9 | } -------------------------------------------------------------------------------- /app/components/PageLoader/index.js: -------------------------------------------------------------------------------- 1 | import PageLoader from './PageLoader'; 2 | 3 | export default PageLoader; -------------------------------------------------------------------------------- /app/components/Progress/Progress.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | import { 6 | Progress as BsProgress 7 | } from 'reactstrap'; 8 | 9 | import classes from './Progress.scss'; 10 | 11 | const Progress = (props) => { 12 | const { children, slim, className, ...otherProps } = props; 13 | const progressClass = classNames(className, { 14 | [classes['slim']]: slim 15 | }); 16 | 17 | return ( 18 | 19 | { !slim && children } 20 | 21 | ); 22 | }; 23 | 24 | Progress.propTypes = { 25 | slim: PropTypes.bool, 26 | className: PropTypes.string, 27 | children: PropTypes.node 28 | }; 29 | 30 | export { Progress }; -------------------------------------------------------------------------------- /app/components/Progress/Progress.scss: -------------------------------------------------------------------------------- 1 | .slim { 2 | height: 0.3rem; 3 | } -------------------------------------------------------------------------------- /app/components/Progress/index.js: -------------------------------------------------------------------------------- 1 | import { Progress } from './Progress'; 2 | 3 | export default Progress; 4 | -------------------------------------------------------------------------------- /app/components/Recharts/CartesianGrid.js: -------------------------------------------------------------------------------- 1 | import { CartesianGrid } from 'recharts'; 2 | 3 | import styleConfig from './config'; 4 | 5 | class CustomCartesianGrid extends CartesianGrid { 6 | static defaultProps = { 7 | ...CartesianGrid.defaultProps, 8 | ...styleConfig.grid, 9 | } 10 | } 11 | 12 | export { CustomCartesianGrid as CartesianGrid }; 13 | -------------------------------------------------------------------------------- /app/components/Recharts/DefAreaValueColor.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import colors from './../../colors'; 5 | 6 | const gradientOffset = (data) => { 7 | const dataMax = Math.max(...data.map((i) => i.uv)); 8 | const dataMin = Math.min(...data.map((i) => i.uv)); 9 | 10 | if (dataMax <= 0){ 11 | return 0 12 | } 13 | else if (dataMin >= 0){ 14 | return 1 15 | } 16 | else{ 17 | return dataMax / (dataMax - dataMin); 18 | } 19 | } 20 | 21 | export const DefAreaValueColor = (props) => { 22 | const offset = gradientOffset(props.data); 23 | 24 | return ( 25 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | DefAreaValueColor.propTypes = { 32 | positiveColor: PropTypes.string, 33 | negativeColor: PropTypes.string, 34 | id: PropTypes.string.isRequired, 35 | data: PropTypes.array.isRequired 36 | }; 37 | DefAreaValueColor.defaultProps = { 38 | positiveColor: colors['success-07'], 39 | negativeColor: colors['danger-07'] 40 | }; 41 | -------------------------------------------------------------------------------- /app/components/Recharts/Legend.js: -------------------------------------------------------------------------------- 1 | import { Legend as RCLegend } from 'recharts'; 2 | 3 | import styleConfig from './config'; 4 | 5 | export class Legend extends RCLegend { 6 | static defaultProps = { 7 | ...RCLegend.defaultProps, 8 | ...styleConfig.legend 9 | } 10 | } -------------------------------------------------------------------------------- /app/components/Recharts/PieValueLabel.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import config from './config'; 5 | 6 | const RADIAN = Math.PI / 180; 7 | 8 | export const PieValueLabel = (props) => { 9 | const { cx, cy, midAngle, innerRadius, outerRadius, percent, color } = props; 10 | const radius = innerRadius + (outerRadius - innerRadius) * 0.5; 11 | const x = cx + radius * Math.cos(-midAngle * RADIAN); 12 | const y = cy + radius * Math.sin(-midAngle * RADIAN); 13 | 14 | return ( 15 | cx ? 'start' : 'end' } 19 | dominantBaseline="central" 20 | fill={ props.color || config.pieLabel.fill } 21 | fontSize={ config.pieLabel.fontSize } 22 | > 23 | {`${(percent * 100).toFixed(0)}%`} 24 | 25 | ); 26 | }; 27 | PieValueLabel.propTypes = { 28 | cx: PropTypes.number, 29 | cy: PropTypes.number, 30 | midAngle: PropTypes.number, 31 | innerRadius: PropTypes.number, 32 | outerRadius: PropTypes.number, 33 | percent: PropTypes.number, 34 | color: PropTypes.string 35 | }; 36 | -------------------------------------------------------------------------------- /app/components/Recharts/PolarAngleAxis.js: -------------------------------------------------------------------------------- 1 | import { PolarAngleAxis as RCPolarAngleAxis} from 'recharts'; 2 | 3 | import styleConfig from './config'; 4 | 5 | export class PolarAngleAxis extends RCPolarAngleAxis { 6 | static defaultProps = { 7 | ...RCPolarAngleAxis.defaultProps, 8 | ...styleConfig.polarAngleAxis 9 | } 10 | } -------------------------------------------------------------------------------- /app/components/Recharts/PolarGrid.js: -------------------------------------------------------------------------------- 1 | import { PolarGrid } from 'recharts'; 2 | 3 | import styleConfig from './config'; 4 | 5 | class CustomPolarGrid extends PolarGrid { 6 | static defaultProps = { 7 | ...PolarGrid.defaultProps, 8 | ...styleConfig.polarGrid 9 | } 10 | } 11 | 12 | export { CustomPolarGrid as PolarGrid }; 13 | -------------------------------------------------------------------------------- /app/components/Recharts/PolarRadiusAxis.js: -------------------------------------------------------------------------------- 1 | import { PolarRadiusAxis as RCPolarRadiusAxis} from 'recharts'; 2 | 3 | import styleConfig from './config'; 4 | 5 | export class PolarRadiusAxis extends RCPolarRadiusAxis { 6 | static defaultProps = { 7 | ...RCPolarRadiusAxis.defaultProps, 8 | ...styleConfig.polarRadiusAxis 9 | } 10 | } -------------------------------------------------------------------------------- /app/components/Recharts/Tooltip.js: -------------------------------------------------------------------------------- 1 | import { Tooltip as RCTooltip } from 'recharts'; 2 | 3 | import styleConfig from './config'; 4 | 5 | export class Tooltip extends RCTooltip { 6 | static defaultProps = { 7 | ...RCTooltip.defaultProps, 8 | ...styleConfig.tooltip 9 | } 10 | } -------------------------------------------------------------------------------- /app/components/Recharts/ValueLabel.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import config from './config'; 5 | 6 | export const ValueLabel = (props) => 7 | 13 | { props.value } 14 | ; 15 | 16 | ValueLabel.propTypes = { 17 | value: PropTypes.number, 18 | x: PropTypes.number, 19 | y: PropTypes.number 20 | }; -------------------------------------------------------------------------------- /app/components/Recharts/XAxis.js: -------------------------------------------------------------------------------- 1 | import { XAxis as RCXAxis } from 'recharts'; 2 | 3 | import styleConfig from './config'; 4 | 5 | export class XAxis extends RCXAxis { 6 | static defaultProps = { 7 | ...RCXAxis.defaultProps, 8 | ...styleConfig.axis 9 | } 10 | } -------------------------------------------------------------------------------- /app/components/Recharts/YAxis.js: -------------------------------------------------------------------------------- 1 | import { YAxis as RCYAxis } from 'recharts'; 2 | 3 | import styleConfig from './config'; 4 | 5 | export class YAxis extends RCYAxis { 6 | static defaultProps = { 7 | ...RCYAxis.defaultProps, 8 | ...styleConfig.axis 9 | } 10 | } -------------------------------------------------------------------------------- /app/components/Recharts/ZAxis.js: -------------------------------------------------------------------------------- 1 | import { ZAxis as RCZAxis } from 'recharts'; 2 | 3 | import styleConfig from './config'; 4 | 5 | export class ZAxis extends RCZAxis { 6 | static defaultProps = { 7 | ...RCZAxis.defaultProps, 8 | ...styleConfig.axis 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /app/components/Sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import OuterClick from './../OuterClick'; 5 | import { withPageConfig } from './../Layout'; 6 | import { SidebarContent } from './SidebarContent'; 7 | 8 | const Sidebar = (props) => ( 9 | 10 | { /* Enable OuterClick only in sidebar overlay mode */} 11 | props.pageConfig.toggleSidebar() } 20 | > 21 | 22 | 23 | 24 | ); 25 | 26 | Sidebar.propTypes = { 27 | children: PropTypes.node, 28 | slim: PropTypes.bool, 29 | collapsed: PropTypes.bool, 30 | animationsDisabled: PropTypes.bool, 31 | pageConfig: PropTypes.object 32 | }; 33 | 34 | const cfgSidebar = withPageConfig(Sidebar); 35 | 36 | export { 37 | cfgSidebar as Sidebar 38 | }; 39 | -------------------------------------------------------------------------------- /app/components/Sidebar/SidebarClose.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const SidebarClose = (props) => ( 5 |
6 | { props.children } 7 |
8 | ); 9 | SidebarClose.propTypes = { 10 | children: PropTypes.node 11 | }; 12 | 13 | export { SidebarClose }; -------------------------------------------------------------------------------- /app/components/Sidebar/SidebarHideSlim.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | export const SidebarHideSlim = ({ children }) => { 6 | return React.Children.map(children, (child) => 7 | React.cloneElement(child, { 8 | className: classNames( 9 | child.props.className, 10 | 'sidebar__hide-slim' 11 | ) 12 | }) 13 | ); 14 | }; 15 | 16 | SidebarHideSlim.propTypes = { 17 | children: PropTypes.node, 18 | }; 19 | -------------------------------------------------------------------------------- /app/components/Sidebar/SidebarMobileFluid.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const SidebarMobileFluid = (props) => { 6 | const wrapClass = classNames("sidebar__mobile-fluid", props.className); 7 | 8 | return ( 9 |
10 | { props.children } 11 |
12 | ); 13 | }; 14 | 15 | SidebarMobileFluid.propTypes = { 16 | children: PropTypes.node, 17 | className: PropTypes.string 18 | }; 19 | 20 | export { 21 | SidebarMobileFluid 22 | }; 23 | -------------------------------------------------------------------------------- /app/components/Sidebar/SidebarSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const SidebarSection = (props) => { 6 | const sectionClass = classNames("sidebar__section", { 7 | 'sidebar__section--fluid': props.fluid, 8 | 'sidebar__section--cover': props.cover 9 | }, props.className); 10 | 11 | return ( 12 |
13 | { props.children } 14 |
15 | ); 16 | }; 17 | 18 | SidebarSection.propTypes = { 19 | children: PropTypes.node, 20 | fluid: PropTypes.bool, 21 | cover: PropTypes.bool, 22 | className: PropTypes.string 23 | }; 24 | 25 | export { 26 | SidebarSection 27 | }; 28 | -------------------------------------------------------------------------------- /app/components/Sidebar/SidebarShowSlim.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | export const SidebarShowSlim = ({ children }) => { 6 | return React.Children.map(children, (child) => 7 | React.cloneElement(child, { 8 | className: classNames( 9 | child.props.className, 10 | 'sidebar__show-slim' 11 | ) 12 | }) 13 | ); 14 | }; 15 | 16 | SidebarShowSlim.propTypes = { 17 | children: PropTypes.node, 18 | }; 19 | -------------------------------------------------------------------------------- /app/components/Sidebar/index.js: -------------------------------------------------------------------------------- 1 | import { Sidebar } from './Sidebar'; 2 | import { SidebarSection } from './SidebarSection'; 3 | import { SidebarClose } from './SidebarClose'; 4 | import { SidebarMobileFluid } from './SidebarMobileFluid'; 5 | import { SidebarShowSlim } from './SidebarShowSlim'; 6 | import { SidebarHideSlim } from './SidebarHideSlim'; 7 | 8 | Sidebar.Section = SidebarSection; 9 | Sidebar.Close = SidebarClose; 10 | Sidebar.MobileFluid = SidebarMobileFluid; 11 | Sidebar.ShowSlim = SidebarShowSlim; 12 | Sidebar.HideSlim = SidebarHideSlim; 13 | 14 | export default Sidebar; -------------------------------------------------------------------------------- /app/components/SidebarMenu/MenuContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MenuContext = React.createContext({ 4 | entries: { }, 5 | addEntry: () => { }, 6 | removeEntry: () => { } 7 | }); 8 | 9 | export { MenuContext }; -------------------------------------------------------------------------------- /app/components/SidebarMenu/index.js: -------------------------------------------------------------------------------- 1 | import { SidebarMenu } from './SidebarMenu'; 2 | import { SidebarMenuItem } from './SidebarMenuItem'; 3 | 4 | SidebarMenu.Item = SidebarMenuItem; 5 | 6 | export default SidebarMenu; 7 | -------------------------------------------------------------------------------- /app/components/SidebarTrigger/SidebarTrigger.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NavLink } from 'reactstrap'; 3 | import PropTypes from 'prop-types'; 4 | import { withPageConfig } from './../Layout'; 5 | 6 | const SidebarTrigger = (props) => { 7 | const { tag: Tag, pageConfig, ...otherProps } = props; 8 | return ( 9 | { props.pageConfig.toggleSidebar(); return false; } } 11 | active={ Tag !== 'a' ? !pageConfig.sidebarCollapsed : undefined } 12 | { ...otherProps } 13 | > 14 | { props.children } 15 | 16 | ) 17 | }; 18 | SidebarTrigger.propTypes = { 19 | tag: PropTypes.any, 20 | children: PropTypes.node, 21 | pageConfig: PropTypes.object 22 | } 23 | SidebarTrigger.defaultProps = { 24 | tag: NavLink, 25 | children: 26 | } 27 | 28 | const cfgSidebarTrigger = withPageConfig(SidebarTrigger); 29 | 30 | export { 31 | cfgSidebarTrigger as SidebarTrigger 32 | } 33 | -------------------------------------------------------------------------------- /app/components/SidebarTrigger/index.js: -------------------------------------------------------------------------------- 1 | import { SidebarTrigger } from './SidebarTrigger'; 2 | 3 | export default SidebarTrigger; -------------------------------------------------------------------------------- /app/components/StarRating/StarRating.scss: -------------------------------------------------------------------------------- 1 | .starRating { 2 | display: inline-block; 3 | } 4 | -------------------------------------------------------------------------------- /app/components/StarRating/index.js: -------------------------------------------------------------------------------- 1 | import { StarRating } from './StarRating'; 2 | 3 | export default StarRating; 4 | -------------------------------------------------------------------------------- /app/components/Theme/ThemeClass.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { Consumer } from './ThemeContext'; 5 | 6 | const ThemeClass = ({ children, color, style }) => { 7 | const layoutThemeClass = `layout--theme--${ style }--${ color }`; 8 | 9 | return children(layoutThemeClass); 10 | }; 11 | ThemeClass.propTypes = { 12 | children: PropTypes.func.isRequired, 13 | color: PropTypes.string, 14 | style: PropTypes.string, 15 | }; 16 | 17 | const ContextThemeClass = (otherProps) => 18 | 19 | { 20 | (themeState) => 21 | } 22 | ; 23 | 24 | export { ContextThemeClass as ThemeClass }; 25 | 26 | -------------------------------------------------------------------------------- /app/components/Theme/ThemeContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const { Provider, Consumer } = React.createContext(); 4 | 5 | export { Provider, Consumer }; 6 | -------------------------------------------------------------------------------- /app/components/Theme/index.js: -------------------------------------------------------------------------------- 1 | export * from './ThemeClass'; 2 | export * from './ThemeSelector'; 3 | export * from './ThemeProvider'; 4 | export { Consumer as ThemeConsumer } from './ThemeContext'; 5 | -------------------------------------------------------------------------------- /app/components/Tools/DefaultOnly.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import MediaQuery from 'react-responsive'; 4 | 5 | import { withPageConfig } from './../Layout/withPageConfig'; 6 | 7 | const DefaultOnly = (props) => ( 8 | 9 | { 10 | props.pageConfig.sidebarSlim && props.pageConfig.sidebarCollapsed ? ( 11 | 12 | { props.children } 13 | 14 | ) : ( 15 | props.children 16 | ) 17 | } 18 | 19 | ); 20 | DefaultOnly.propTypes = { 21 | children: PropTypes.node.isRequired, 22 | pageConfig: PropTypes.object 23 | }; 24 | 25 | const ExtendedDefaultOnly = withPageConfig(DefaultOnly); 26 | 27 | export { 28 | ExtendedDefaultOnly as DefaultOnly 29 | }; -------------------------------------------------------------------------------- /app/components/Tools/SlimOnly.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import MediaQuery from 'react-responsive'; 4 | 5 | import { withPageConfig } from './../Layout/withPageConfig'; 6 | 7 | const SlimOnly = (props) => ( 8 | 9 | { 10 | props.pageConfig.sidebarSlim && props.pageConfig.sidebarCollapsed && props.children 11 | } 12 | 13 | ); 14 | SlimOnly.propTypes = { 15 | children: PropTypes.node.isRequired, 16 | pageConfig: PropTypes.object 17 | }; 18 | 19 | const ExtendedSlimOnly = withPageConfig(SlimOnly); 20 | 21 | export { 22 | ExtendedSlimOnly as SlimOnly 23 | }; 24 | -------------------------------------------------------------------------------- /app/components/Tools/SlimProps.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import MatchMedia from 'react-responsive'; 4 | 5 | import { withPageConfig } from './../../components/Layout/withPageConfig'; 6 | 7 | const SlimProps = (props) => { 8 | const { 9 | pageConfig, 10 | children, 11 | slimProps 12 | } = props; 13 | 14 | return ( 15 | 16 | 17 | { 18 | /* If slim is enabled extend the children with slimProps */ 19 | pageConfig.sidebarSlim && pageConfig.sidebarCollapsed ? 20 | React.Children.map(children, (child) => React.cloneElement(child, slimProps)) : 21 | children 22 | } 23 | 24 | 25 | { children } 26 | 27 | 28 | ); 29 | }; 30 | SlimProps.propTypes = { 31 | children: PropTypes.node, 32 | pageConfig: PropTypes.object, 33 | slimProps: PropTypes.object, 34 | defaultProps: PropTypes.object 35 | }; 36 | 37 | const ExtendedSlimProps 38 | = withPageConfig(SlimProps); 39 | 40 | export { 41 | ExtendedSlimProps as SlimProps 42 | } -------------------------------------------------------------------------------- /app/components/Tools/index.js: -------------------------------------------------------------------------------- 1 | import { SlimOnly } from './SlimOnly'; 2 | import { DefaultOnly } from './DefaultOnly'; 3 | import { SlimProps } from './SlimProps'; 4 | 5 | const Tools = { 6 | SlimOnly, 7 | DefaultOnly, 8 | SlimProps 9 | }; 10 | 11 | export default Tools; 12 | -------------------------------------------------------------------------------- /app/components/UncontrolledModal/UncontrolledModalClose.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Button } from 'reactstrap'; 4 | 5 | import { Consumer } from './context'; 6 | 7 | const UncontrolledModalClose = (props) => { 8 | const { tag, ...otherProps } = props; 9 | const Tag = tag; 10 | 11 | return ( 12 | 13 | { 14 | (value) => ( 15 | value.toggleModal() } 18 | /> 19 | ) 20 | } 21 | 22 | ) 23 | }; 24 | UncontrolledModalClose.propTypes = { 25 | tag: PropTypes.oneOfType([ 26 | PropTypes.func, 27 | PropTypes.string 28 | ]) 29 | }; 30 | UncontrolledModalClose.defaultProps = { 31 | tag: Button 32 | }; 33 | 34 | export { UncontrolledModalClose }; 35 | -------------------------------------------------------------------------------- /app/components/UncontrolledModal/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const { Provider, Consumer } = React.createContext(); 4 | 5 | export { 6 | Provider, 7 | Consumer 8 | } 9 | -------------------------------------------------------------------------------- /app/components/UncontrolledModal/index.js: -------------------------------------------------------------------------------- 1 | import { UncontrolledModal } from './UncontrolledModal'; 2 | import { UncontrolledModalClose } from './UncontrolledModalClose'; 3 | 4 | UncontrolledModal.Close = UncontrolledModalClose; 5 | 6 | export default UncontrolledModal; -------------------------------------------------------------------------------- /app/components/UncontrolledPopover/index.js: -------------------------------------------------------------------------------- 1 | import { UncontrollerPopover } from './UncontrolledPopover'; 2 | 3 | export default UncontrollerPopover; -------------------------------------------------------------------------------- /app/components/UncontrolledTabs/UncontrolledTabs.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { Provider } from './context'; 5 | 6 | class UncontrolledTabs extends React.Component { 7 | static propTypes = { 8 | children: PropTypes.node.isRequired, 9 | initialActiveTabId: PropTypes.string 10 | }; 11 | 12 | constructor(props) { 13 | super(props); 14 | 15 | this.state = { 16 | activeTabId: this.props.initialActiveTabId || null 17 | }; 18 | } 19 | 20 | render() { 21 | return ( 22 | { this.setState({ activeTabId: tabId }) }, 24 | activeTabId: this.state.activeTabId 25 | }}> 26 | { this.props.children } 27 | 28 | ); 29 | } 30 | } 31 | 32 | export { UncontrolledTabs }; 33 | -------------------------------------------------------------------------------- /app/components/UncontrolledTabs/UncontrolledTabsNavLink.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import _ from 'lodash'; 5 | import { NavLink } from 'reactstrap'; 6 | 7 | import { Consumer } from './context'; 8 | 9 | const UncontrolledTabsNavLink = (props) => ( 10 | 11 | { 12 | (value) => ( 13 | { value.setActiveTabId(props.tabId) } } 16 | className={ classNames({ active: props.tabId === value.activeTabId }) } 17 | href="javascript:;" 18 | /> 19 | ) 20 | } 21 | 22 | ); 23 | UncontrolledTabsNavLink.propTypes = { 24 | tabId: PropTypes.string.isRequired 25 | }; 26 | 27 | export { UncontrolledTabsNavLink }; 28 | 29 | -------------------------------------------------------------------------------- /app/components/UncontrolledTabs/UncontrolledTabsTabContent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TabContent } from 'reactstrap'; 3 | 4 | import { Consumer } from './context'; 5 | 6 | const UncontrolledTabsTabContent = (props) => ( 7 | 8 | { 9 | (value) => ( 10 | 11 | ) 12 | } 13 | 14 | ); 15 | 16 | export { UncontrolledTabsTabContent }; -------------------------------------------------------------------------------- /app/components/UncontrolledTabs/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const { Provider, Consumer } = React.createContext({}); 4 | 5 | export { 6 | Provider, 7 | Consumer 8 | }; 9 | -------------------------------------------------------------------------------- /app/components/UncontrolledTabs/index.js: -------------------------------------------------------------------------------- 1 | import { UncontrolledTabs } from './UncontrolledTabs'; 2 | import { UncontrolledTabsNavLink } from './UncontrolledTabsNavLink'; 3 | import { UncontrolledTabsTabContent } from './UncontrolledTabsTabContent'; 4 | 5 | UncontrolledTabs.NavLink = UncontrolledTabsNavLink; 6 | UncontrolledTabs.TabContent = UncontrolledTabsTabContent; 7 | 8 | export default UncontrolledTabs; 9 | -------------------------------------------------------------------------------- /app/components/Wizard/index.js: -------------------------------------------------------------------------------- 1 | import { Wizard } from './Wizard'; 2 | import { WizardStep } from './WizardStep'; 3 | 4 | Wizard.Step = WizardStep; 5 | 6 | export default Wizard; 7 | -------------------------------------------------------------------------------- /app/components/agGrid.js: -------------------------------------------------------------------------------- 1 | export * from 'ag-grid-react'; 2 | export * from 'ag-grid-community'; -------------------------------------------------------------------------------- /app/images/avatars/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/1.jpg -------------------------------------------------------------------------------- /app/images/avatars/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/10.jpg -------------------------------------------------------------------------------- /app/images/avatars/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/11.jpg -------------------------------------------------------------------------------- /app/images/avatars/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/12.jpg -------------------------------------------------------------------------------- /app/images/avatars/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/13.jpg -------------------------------------------------------------------------------- /app/images/avatars/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/14.jpg -------------------------------------------------------------------------------- /app/images/avatars/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/15.jpg -------------------------------------------------------------------------------- /app/images/avatars/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/16.jpg -------------------------------------------------------------------------------- /app/images/avatars/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/17.jpg -------------------------------------------------------------------------------- /app/images/avatars/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/18.jpg -------------------------------------------------------------------------------- /app/images/avatars/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/19.jpg -------------------------------------------------------------------------------- /app/images/avatars/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/2.jpg -------------------------------------------------------------------------------- /app/images/avatars/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/20.jpg -------------------------------------------------------------------------------- /app/images/avatars/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/21.jpg -------------------------------------------------------------------------------- /app/images/avatars/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/22.jpg -------------------------------------------------------------------------------- /app/images/avatars/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/23.jpg -------------------------------------------------------------------------------- /app/images/avatars/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/24.jpg -------------------------------------------------------------------------------- /app/images/avatars/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/25.jpg -------------------------------------------------------------------------------- /app/images/avatars/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/26.jpg -------------------------------------------------------------------------------- /app/images/avatars/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/27.jpg -------------------------------------------------------------------------------- /app/images/avatars/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/28.jpg -------------------------------------------------------------------------------- /app/images/avatars/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/29.jpg -------------------------------------------------------------------------------- /app/images/avatars/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/3.jpg -------------------------------------------------------------------------------- /app/images/avatars/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/30.jpg -------------------------------------------------------------------------------- /app/images/avatars/31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/31.jpg -------------------------------------------------------------------------------- /app/images/avatars/32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/32.jpg -------------------------------------------------------------------------------- /app/images/avatars/33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/33.jpg -------------------------------------------------------------------------------- /app/images/avatars/34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/34.jpg -------------------------------------------------------------------------------- /app/images/avatars/35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/35.jpg -------------------------------------------------------------------------------- /app/images/avatars/36.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/36.jpg -------------------------------------------------------------------------------- /app/images/avatars/37.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/37.jpg -------------------------------------------------------------------------------- /app/images/avatars/38.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/38.jpg -------------------------------------------------------------------------------- /app/images/avatars/39.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/39.jpg -------------------------------------------------------------------------------- /app/images/avatars/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/4.jpg -------------------------------------------------------------------------------- /app/images/avatars/40.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/40.jpg -------------------------------------------------------------------------------- /app/images/avatars/41.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/41.jpg -------------------------------------------------------------------------------- /app/images/avatars/42.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/42.jpg -------------------------------------------------------------------------------- /app/images/avatars/43.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/43.jpg -------------------------------------------------------------------------------- /app/images/avatars/44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/44.jpg -------------------------------------------------------------------------------- /app/images/avatars/45.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/45.jpg -------------------------------------------------------------------------------- /app/images/avatars/46.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/46.jpg -------------------------------------------------------------------------------- /app/images/avatars/47.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/47.jpg -------------------------------------------------------------------------------- /app/images/avatars/48.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/48.jpg -------------------------------------------------------------------------------- /app/images/avatars/49.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/49.jpg -------------------------------------------------------------------------------- /app/images/avatars/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/5.jpg -------------------------------------------------------------------------------- /app/images/avatars/50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/50.jpg -------------------------------------------------------------------------------- /app/images/avatars/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/6.jpg -------------------------------------------------------------------------------- /app/images/avatars/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/7.jpg -------------------------------------------------------------------------------- /app/images/avatars/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/8.jpg -------------------------------------------------------------------------------- /app/images/avatars/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/9.jpg -------------------------------------------------------------------------------- /app/images/avatars/avatar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/avatars/avatar-1.jpg -------------------------------------------------------------------------------- /app/images/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /app/images/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /app/images/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /app/images/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/images/favicons/favicon.ico -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | import '@babel/polyfill'; 2 | 3 | import React from 'react'; 4 | import { render } from 'react-dom'; 5 | 6 | import App from './components/App'; 7 | 8 | render( 9 | , 10 | document.querySelector('#root') 11 | ); -------------------------------------------------------------------------------- /app/layout/components/NavbarUser.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import PropTypes from 'prop-types'; 4 | 5 | import { 6 | NavItem, 7 | NavLink 8 | } from './../../components'; 9 | 10 | const NavbarUser = (props) => ( 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | NavbarUser.propTypes = { 18 | className: PropTypes.string, 19 | style: PropTypes.object 20 | }; 21 | 22 | export { NavbarUser }; 23 | -------------------------------------------------------------------------------- /app/layout/components/SidebarANavbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import { 5 | Navbar, 6 | Nav, 7 | NavItem, 8 | SidebarTrigger 9 | } from './../../components'; 10 | 11 | import { NavbarActivityFeed } from './NavbarActivityFeed'; 12 | import { NavbarMessages } from './NavbarMessages'; 13 | import { NavbarUser } from './NavbarUser'; 14 | 15 | export const SidebarANavbar = () => ( 16 | 17 | 27 | 32 | 33 | ); 34 | -------------------------------------------------------------------------------- /app/routes/Apps/AccountEdit/index.js: -------------------------------------------------------------------------------- 1 | import AccountEdit from './AccountEdit'; 2 | 3 | export default AccountEdit; -------------------------------------------------------------------------------- /app/routes/Apps/BillingEdit/index.js: -------------------------------------------------------------------------------- 1 | import BillingEdit from './BillingEdit'; 2 | 3 | export default BillingEdit; -------------------------------------------------------------------------------- /app/routes/Apps/Chat/index.js: -------------------------------------------------------------------------------- 1 | import Chat from './Chat'; 2 | 3 | export default Chat; -------------------------------------------------------------------------------- /app/routes/Apps/Clients/index.js: -------------------------------------------------------------------------------- 1 | import Clients from './Clients'; 2 | 3 | export default Clients; -------------------------------------------------------------------------------- /app/routes/Apps/EmailDetails/index.js: -------------------------------------------------------------------------------- 1 | import EmailDetails from './EmailDetails'; 2 | 3 | export default EmailDetails; -------------------------------------------------------------------------------- /app/routes/Apps/Files/FilesGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { CardColumns } from './../../../components'; 4 | import { FilesCardGrid } from "../../components/Files/FilesCardGrid"; 5 | import { Paginations } from "../../components/Paginations"; 6 | 7 | const FilesGrid = () => ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | ); 25 | 26 | export default FilesGrid; -------------------------------------------------------------------------------- /app/routes/Apps/Files/index.js: -------------------------------------------------------------------------------- 1 | import Files from './Files'; 2 | 3 | export default Files; -------------------------------------------------------------------------------- /app/routes/Apps/GalleryGrid/index.js: -------------------------------------------------------------------------------- 1 | import GalleryGrid from './GalleryGrid'; 2 | 3 | export default GalleryGrid; -------------------------------------------------------------------------------- /app/routes/Apps/GalleryTable/index.js: -------------------------------------------------------------------------------- 1 | import GalleryTable from './GalleryTable'; 2 | 3 | export default GalleryTable; -------------------------------------------------------------------------------- /app/routes/Apps/ImagesResults/index.js: -------------------------------------------------------------------------------- 1 | import ImagesResults from './ImagesResults'; 2 | 3 | export default ImagesResults; -------------------------------------------------------------------------------- /app/routes/Apps/Inbox/index.js: -------------------------------------------------------------------------------- 1 | import Inbox from './Inbox'; 2 | 3 | export default Inbox; -------------------------------------------------------------------------------- /app/routes/Apps/NewEmail/index.js: -------------------------------------------------------------------------------- 1 | import NewEmail from './NewEmail'; 2 | 3 | export default NewEmail; -------------------------------------------------------------------------------- /app/routes/Apps/ProfileDetails/index.js: -------------------------------------------------------------------------------- 1 | import ProfileDetails from './ProfileDetails'; 2 | 3 | export default ProfileDetails; -------------------------------------------------------------------------------- /app/routes/Apps/ProfileEdit/index.js: -------------------------------------------------------------------------------- 1 | import ProfileEdit from './ProfileEdit'; 2 | 3 | export default ProfileEdit; -------------------------------------------------------------------------------- /app/routes/Apps/Projects/ProjectsGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | 4 | import { CardColumns } from './../../../components'; 5 | import { ProjectsCardGrid } from "../../components/Projects/ProjectsCardGrid"; 6 | import { Paginations } from "../../components/Paginations"; 7 | 8 | const ProjectsGrid = () => ( 9 | 10 | 11 | { 12 | _.times(12, (index) => ( 13 | 14 | )) 15 | } 16 | 17 |
18 | 19 |
20 | 21 | ); 22 | 23 | export default ProjectsGrid; -------------------------------------------------------------------------------- /app/routes/Apps/Projects/index.js: -------------------------------------------------------------------------------- 1 | import Projects from './Projects'; 2 | 3 | export default Projects; -------------------------------------------------------------------------------- /app/routes/Apps/SearchResults/index.js: -------------------------------------------------------------------------------- 1 | import SearchResults from './SearchResults'; 2 | 3 | export default SearchResults; -------------------------------------------------------------------------------- /app/routes/Apps/SessionsEdit/index.js: -------------------------------------------------------------------------------- 1 | import SessionsEdit from './SessionsEdit'; 2 | 3 | export default SessionsEdit; -------------------------------------------------------------------------------- /app/routes/Apps/SettingsEdit/index.js: -------------------------------------------------------------------------------- 1 | import SettingsEdit from './SettingsEdit'; 2 | 3 | export default SettingsEdit; -------------------------------------------------------------------------------- /app/routes/Apps/Tasks/TasksGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { CardColumns } from './../../../components'; 4 | import { Paginations } from "../../components/Paginations"; 5 | import { TasksCardGrid } from "../../components/Tasks/TasksCardGrid"; 6 | 7 | const TasksGrid = () => ( 8 | 9 | 10 | 11 | 14 | 17 | 20 | 23 | 26 | 29 | 32 | 35 | 36 |
37 | 38 |
39 | 40 | ); 41 | 42 | export default TasksGrid; -------------------------------------------------------------------------------- /app/routes/Apps/Tasks/index.js: -------------------------------------------------------------------------------- 1 | import Tasks from './Tasks'; 2 | 3 | export default Tasks; -------------------------------------------------------------------------------- /app/routes/Apps/TasksDetails/index.js: -------------------------------------------------------------------------------- 1 | import TasksDetails from './TasksDetails'; 2 | 3 | export default TasksDetails; -------------------------------------------------------------------------------- /app/routes/Apps/TasksKanban/index.js: -------------------------------------------------------------------------------- 1 | import TasksKanban from './TasksKanban'; 2 | 3 | export default TasksKanban; -------------------------------------------------------------------------------- /app/routes/Apps/Users/UsersGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { CardColumns } from './../../../components'; 4 | import { UsersCardGrid } from "../../components/Users/UsersCardGrid"; 5 | import { Paginations } from "../../components/Paginations"; 6 | 7 | const UsersGrid = () => ( 8 | 9 | 10 | 11 | 14 | 17 | 20 | 23 | 26 | 29 | 32 | 35 | 38 | 41 | 44 | 45 |
46 | 47 |
48 | 49 | ); 50 | 51 | export default UsersGrid; -------------------------------------------------------------------------------- /app/routes/Apps/Users/index.js: -------------------------------------------------------------------------------- 1 | import Users from './Users'; 2 | 3 | export default Users; -------------------------------------------------------------------------------- /app/routes/Apps/UsersResults/index.js: -------------------------------------------------------------------------------- 1 | import UsersResults from './UsersResults'; 2 | 3 | export default UsersResults; -------------------------------------------------------------------------------- /app/routes/Apps/VideosResults/index.js: -------------------------------------------------------------------------------- 1 | import VideosResults from './VideosResults'; 2 | 3 | export default VideosResults; -------------------------------------------------------------------------------- /app/routes/Cards/Cards/index.js: -------------------------------------------------------------------------------- 1 | import Cards from './Cards'; 2 | 3 | export default Cards; -------------------------------------------------------------------------------- /app/routes/Cards/CardsHeaders/index.js: -------------------------------------------------------------------------------- 1 | import CardsHeaders from './CardsHeaders'; 2 | 3 | export default CardsHeaders; -------------------------------------------------------------------------------- /app/routes/Dashboards/Analytics/Analytics.scss: -------------------------------------------------------------------------------- 1 | @import "./../../../styles/variables.scss"; 2 | 3 | .sessions { 4 | display: flex; 5 | width: 100%; 6 | margin-bottom: 1rem; 7 | } 8 | 9 | .sessions-progress { 10 | margin-bottom: 2rem; 11 | } 12 | 13 | .session { 14 | flex: 1 1 auto; 15 | 16 | &__percentage { 17 | font-size: 2.5rem; 18 | } 19 | } 20 | 21 | :global(.float-column--size-xs), 22 | :global(.float-column--size-sm) { 23 | .sessions { 24 | flex-direction: column; 25 | } 26 | 27 | .session { 28 | display: flex; 29 | align-items: center; 30 | padding: 0.5rem 0; 31 | 32 | &__values { 33 | margin-left: auto; 34 | } 35 | 36 | &__percentage { 37 | font-size: 1.2rem; 38 | font-weight: bold; 39 | line-height: 1; 40 | } 41 | 42 | &__value { 43 | line-height: 1; 44 | } 45 | 46 | + .session { 47 | border-top: 1px solid $gray-400; 48 | } 49 | } 50 | } 51 | 52 | :global(.float-column--size-xs) { 53 | .sessions-progress { 54 | margin-top: 2rem; 55 | } 56 | 57 | .sessions-info { 58 | display: none; 59 | } 60 | } -------------------------------------------------------------------------------- /app/routes/Dashboards/Analytics/index.js: -------------------------------------------------------------------------------- 1 | import { Analytics } from './Analytics'; 2 | 3 | export default Analytics; -------------------------------------------------------------------------------- /app/routes/Dashboards/Financial/index.js: -------------------------------------------------------------------------------- 1 | import Financial from './Financial'; 2 | 3 | export default Financial; -------------------------------------------------------------------------------- /app/routes/Dashboards/Monitor/index.js: -------------------------------------------------------------------------------- 1 | import Monitor from './Monitor'; 2 | 3 | export default Monitor; -------------------------------------------------------------------------------- /app/routes/Dashboards/Projects/index.js: -------------------------------------------------------------------------------- 1 | import ProjectsDashboard from './ProjectsDashboard'; 2 | 3 | export default ProjectsDashboard; -------------------------------------------------------------------------------- /app/routes/Dashboards/Reports/components/TinyArcChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | PieChart, 4 | Pie, 5 | Cell 6 | } from './../../../../components/recharts'; 7 | 8 | import colors from './../../../../colors'; 9 | 10 | const data = [ 11 | {name: 'Free', value: 40 }, 12 | {name: 'Used', value: 60 }, 13 | ]; 14 | 15 | const COLORS = [ colors['light'], colors['primary'] ]; 16 | const SIZE = 70; 17 | 18 | const TinyArcChart = () => ( 19 | 20 | 31 | { 32 | data.map((entry, index) => ) 33 | } 34 | 35 | 36 | ); 37 | 38 | export { TinyArcChart }; 39 | -------------------------------------------------------------------------------- /app/routes/Dashboards/Reports/components/TinyAreaChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { 4 | ResponsiveContainer, 5 | AreaChart, 6 | Area 7 | } from './../../../../components/recharts'; 8 | 9 | import colors from './../../../../colors'; 10 | 11 | const data = _.times(20, () => ({ pv: Math.random() * 100 })); 12 | 13 | const TinyAreaChart = () => ( 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | export { TinyAreaChart }; 22 | -------------------------------------------------------------------------------- /app/routes/Dashboards/Reports/components/TinyLineChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { 4 | ResponsiveContainer, 5 | LineChart, 6 | Line, 7 | Dot 8 | } from './../../../../components/recharts'; 9 | 10 | import colors from './../../../../colors'; 11 | 12 | const data = _.times(20, () => ({ pv: Math.random() * 100 })); 13 | 14 | const generateDot = ({stroke, ...other}) => ( 15 | 20 | ); 21 | 22 | const TinyLineChart = () => ( 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | 30 | export { TinyLineChart }; 31 | -------------------------------------------------------------------------------- /app/routes/Dashboards/Reports/index.js: -------------------------------------------------------------------------------- 1 | import Reports from './Reports'; 2 | 3 | export default Reports; -------------------------------------------------------------------------------- /app/routes/Dashboards/Stock/index.js: -------------------------------------------------------------------------------- 1 | import Stock from './Stock'; 2 | 3 | export default Stock; -------------------------------------------------------------------------------- /app/routes/Dashboards/System/components/TinyAreaChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import _ from 'lodash'; 4 | import { 5 | ResponsiveContainer, 6 | AreaChart, 7 | Area 8 | } from './../../../../components/recharts'; 9 | 10 | import colors from './../../../../colors'; 11 | 12 | const TinyAreaChart = (props) => { 13 | const data = _.times(20, () => ({ pv: Math.random() * 100 })); 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | }; 22 | 23 | TinyAreaChart.propTypes = { 24 | strokeColor: PropTypes.string, 25 | fillColor: PropTypes.string 26 | }; 27 | TinyAreaChart.defaultProps = { 28 | strokeColor: "600", 29 | fillColor: "200", 30 | }; 31 | 32 | export { TinyAreaChart }; 33 | -------------------------------------------------------------------------------- /app/routes/Dashboards/System/components/TinyBarChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import _ from 'lodash'; 5 | import { 6 | ResponsiveContainer, 7 | BarChart, 8 | Bar 9 | } from './../../../../components/recharts'; 10 | 11 | import colors from './../../../../colors'; 12 | 13 | const TinyBarChart = (props) => { 14 | const data = _.times(40, () => ({ pv: 20+Math.random() * 100 })); 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 | ) 22 | }; 23 | 24 | TinyBarChart.propTypes = { 25 | barColor: PropTypes.string 26 | }; 27 | TinyBarChart.defaultProps = { 28 | barColor: "200" 29 | }; 30 | 31 | export { TinyBarChart }; 32 | -------------------------------------------------------------------------------- /app/routes/Dashboards/System/components/TinyDonutChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | PieChart, 5 | Pie, 6 | Cell 7 | } from './../../../../components/recharts'; 8 | 9 | import colors from './../../../../colors'; 10 | 11 | const TinyDonutChart = (props) => { 12 | const data = [ 13 | {name: 'Group A', value: 40+Math.random()*100}, 14 | {name: 'Group B', value: Math.random()*100} 15 | ]; 16 | return ( 17 | 18 | 26 | 27 | 28 | 29 | ) 30 | }; 31 | 32 | TinyDonutChart.propTypes = { 33 | pieColor: PropTypes.string, 34 | strokeColor: PropTypes.string, 35 | pieBg: PropTypes.string 36 | }; 37 | TinyDonutChart.defaultProps = { 38 | pieColor: "primary", 39 | strokeColor: "white", 40 | pieBg: "200" 41 | }; 42 | 43 | export { TinyDonutChart }; 44 | -------------------------------------------------------------------------------- /app/routes/Dashboards/System/index.js: -------------------------------------------------------------------------------- 1 | import System from './System'; 2 | 3 | export default System; -------------------------------------------------------------------------------- /app/routes/Dashboards/components/TinyLineChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { 4 | ResponsiveContainer, 5 | LineChart, 6 | Line, 7 | Dot 8 | } from './../../../components/recharts'; 9 | 10 | import colors from './../../../colors'; 11 | 12 | const data = _.times(20, () => ({ pv: Math.random() * 100 })); 13 | 14 | // eslint-disable-next-line react/prop-types 15 | const generateDot = ({stroke, ...other}) => ( 16 | 21 | ); 22 | 23 | const TinyLineChart = () => ( 24 | 25 | 26 | 27 | 28 | 29 | ); 30 | 31 | export { TinyLineChart }; 32 | -------------------------------------------------------------------------------- /app/routes/Forms/DatePicker/components/AddonInput.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { 5 | InputGroup, 6 | InputGroupAddon, 7 | Input 8 | } from './../../../../components'; 9 | 10 | // eslint-disable-next-line react/display-name 11 | const AddonInputFR = React.forwardRef((props, ref) => ( 12 | 13 | 14 | 15 | 16 | 22 | 23 | )); 24 | AddonInputFR.propTypes = { 25 | onClick: PropTypes.func, 26 | onChange: PropTypes.func, 27 | value: PropTypes.string, 28 | className: PropTypes.string 29 | } 30 | 31 | export { AddonInputFR as AddonInput }; 32 | -------------------------------------------------------------------------------- /app/routes/Forms/DatePicker/components/ButtonInput.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { 5 | Button 6 | } from './../../../../components'; 7 | 8 | // eslint-disable-next-line react/display-name 9 | const ButtonInputFR = React.forwardRef((props, ref) => ( 10 | 17 | )); 18 | ButtonInputFR.propTypes = { 19 | onClick: PropTypes.func, 20 | value: PropTypes.string 21 | } 22 | 23 | export { ButtonInputFR as ButtonInput }; 24 | -------------------------------------------------------------------------------- /app/routes/Forms/DatePicker/components/index.js: -------------------------------------------------------------------------------- 1 | export * from './Example'; 2 | export * from './ButtonInput'; 3 | export * from './AddonInput'; 4 | -------------------------------------------------------------------------------- /app/routes/Forms/DatePicker/index.js: -------------------------------------------------------------------------------- 1 | import { DatePickerExamples } from './DatePickerExamples'; 2 | 3 | export default DatePickerExamples; 4 | -------------------------------------------------------------------------------- /app/routes/Forms/Dropzone/components/common.scss: -------------------------------------------------------------------------------- 1 | @import "./../../../../styles/variables.scss"; 2 | 3 | .ph--large { 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | min-height: 200px; 8 | background-color: $gray-400; 9 | margin-bottom: 5px; 10 | 11 | > i { 12 | color: #fff; 13 | } 14 | } 15 | 16 | .ph--small { 17 | display: inline-block; 18 | background-color: $gray-400; 19 | padding: 7px 5px; 20 | border-radius: 7px; 21 | 22 | > i { 23 | color: #fff; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /app/routes/Forms/Dropzone/components/index.js: -------------------------------------------------------------------------------- 1 | export * from './FilesGrid'; 2 | export * from './FilesList'; 3 | -------------------------------------------------------------------------------- /app/routes/Forms/Dropzone/index.js: -------------------------------------------------------------------------------- 1 | import { Dropzone } from './Dropzone'; 2 | 3 | export default Dropzone; 4 | -------------------------------------------------------------------------------- /app/routes/Forms/Dropzone/utilities.js: -------------------------------------------------------------------------------- 1 | export const typeToIcon = type => { 2 | const map = { 3 | ['application/msword']: 'fa-file-word-o', 4 | ['application/excel']: 'fa-file-excel-o', 5 | ['application/vnd.oasis.opendocument.spreadsheet']: 'fa-file-excel-o', 6 | ['application/vnd.oasis.opendocument.presentation']: 'fa-file-powerpoint-o', 7 | ['application/mspowerpoint']: 'fa-file-powerpoint-o', 8 | ['application/x-zip-compressed']: 'fa-file-archive-o', 9 | ['image/jpeg']: 'fa-file-image-o', 10 | ['image/png']: 'fa-file-image-o', 11 | ['audio/mp3']: 'fa-file-audio-o', 12 | ['text/plain']: 'fa-file-text-o' 13 | } 14 | return map[type] || null; 15 | } 16 | 17 | export const extToIcon = filename => { 18 | const map = { 19 | ['doc']: 'fa-file-word-o', 20 | ['docx']: 'fa-file-word-o', 21 | ['xls']: 'fa-file-excel-o', 22 | ['xlsx']: 'fa-file-excel-o', 23 | ['ppt']: 'fa-file-powerpoint-o', 24 | ['pdf']: 'fa-file-pdf-o' 25 | } 26 | 27 | return map[filename.split('.').pop()] || null; 28 | } 29 | 30 | export const getFileIcon = file => { 31 | return typeToIcon(file.type) || extToIcon(file.name) || 'fa-file-o'; 32 | } -------------------------------------------------------------------------------- /app/routes/Forms/Editor/index.js: -------------------------------------------------------------------------------- 1 | import { Editor } from './Editor'; 2 | 3 | export default Editor; 4 | -------------------------------------------------------------------------------- /app/routes/Forms/Forms/index.js: -------------------------------------------------------------------------------- 1 | import Forms from './Forms'; 2 | 3 | export default Forms; -------------------------------------------------------------------------------- /app/routes/Forms/FormsLayouts/index.js: -------------------------------------------------------------------------------- 1 | import FormsLayouts from './FormsLayouts'; 2 | 3 | export default FormsLayouts; -------------------------------------------------------------------------------- /app/routes/Forms/InputGroups/index.js: -------------------------------------------------------------------------------- 1 | import InputGroups from './InputGroups'; 2 | 3 | export default InputGroups; -------------------------------------------------------------------------------- /app/routes/Forms/Sliders/Sliders.scss: -------------------------------------------------------------------------------- 1 | .markedSliderWrap { 2 | padding: 0px 20px 50px; 3 | } 4 | 5 | .rangeSliderWrap { 6 | padding: 0 0 20px 0; 7 | } 8 | 9 | .markedSliderVerticalWrap { 10 | width: 100%; 11 | height: 400px; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | padding: 20px 20px 30px 20px; 16 | } 17 | 18 | .inlineInput { 19 | max-width: 70px; 20 | margin-left: 0.5rem; 21 | } 22 | -------------------------------------------------------------------------------- /app/routes/Forms/Sliders/index.js: -------------------------------------------------------------------------------- 1 | import { Sliders } from './Sliders'; 2 | 3 | export default Sliders; 4 | -------------------------------------------------------------------------------- /app/routes/Forms/TextMask/index.js: -------------------------------------------------------------------------------- 1 | import { TextMask } from './TextMask'; 2 | 3 | export default TextMask; 4 | -------------------------------------------------------------------------------- /app/routes/Forms/Toggles/Toggles.scss: -------------------------------------------------------------------------------- 1 | .switchCustomClass > :first-child { 2 | background-color: #ab199f; 3 | } 4 | -------------------------------------------------------------------------------- /app/routes/Forms/Toggles/index.js: -------------------------------------------------------------------------------- 1 | import { Toggles } from './Toggles'; 2 | 3 | export default Toggles; -------------------------------------------------------------------------------- /app/routes/Forms/Typeahead/components/BasicExample.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Typeahead } from 'react-bootstrap-typeahead'; 3 | 4 | import { 5 | CustomInput, 6 | FormGroup 7 | } from './../../../../components'; 8 | import options from './exampleData'; 9 | 10 | export class BasicExample extends React.Component { 11 | state = { 12 | multiple: false, 13 | }; 14 | 15 | render() { 16 | const {multiple} = this.state; 17 | 18 | return ( 19 | 20 | 26 | 27 | this.setState({multiple: e.target.checked})} 30 | type="checkbox" 31 | id="basic-example-multiselect" 32 | label="Multi-Select" 33 | /> 34 | 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app/routes/Forms/Typeahead/components/ControllingSelections.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Typeahead } from 'react-bootstrap-typeahead'; 3 | 4 | import options from './exampleData'; 5 | 6 | export const ControllingSelections = () => ( 7 | 15 | ) 16 | -------------------------------------------------------------------------------- /app/routes/Forms/Typeahead/components/CustomSelections.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Typeahead } from 'react-bootstrap-typeahead'; 3 | 4 | export const CustomSelections = () => ( 5 | 12 | ); 13 | -------------------------------------------------------------------------------- /app/routes/Forms/Typeahead/components/GithubMenuItem.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from 'react'; 3 | 4 | export const GithubMenuItem = ({user}) => ( 5 |
6 | {user.login} 15 | {user.login} 16 |
17 | ); 18 | 19 | GithubMenuItem.propTypes = { 20 | user: PropTypes.shape({ 21 | avatar_url: PropTypes.string.isRequired, 22 | login: PropTypes.string.isRequired, 23 | }).isRequired, 24 | }; -------------------------------------------------------------------------------- /app/routes/Forms/Typeahead/components/LabelKey.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Typeahead } from 'react-bootstrap-typeahead'; 3 | 4 | export const LabelKey = () => ( 5 | `${option.firstName} ${option.lastName}`} 7 | options={[ 8 | {firstName: 'Art', lastName: 'Blakey'}, 9 | {firstName: 'John', lastName: 'Coltrane'}, 10 | {firstName: 'Miles', lastName: 'Davis'}, 11 | {firstName: 'Herbie', lastName: 'Hancock'}, 12 | {firstName: 'Charlie', lastName: 'Parker'}, 13 | {firstName: 'Tony', lastName: 'Williams'}, 14 | ]} 15 | placeholder="Who's the coolest cat?" 16 | /> 17 | ); 18 | -------------------------------------------------------------------------------- /app/routes/Forms/Typeahead/components/PaginationExample.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { Typeahead } from 'react-bootstrap-typeahead'; 4 | 5 | import { 6 | CustomInput, 7 | FormGroup 8 | } from './../../../../components'; 9 | 10 | export class PaginationExample extends React.Component { 11 | state = { 12 | paginate: true, 13 | }; 14 | 15 | render() { 16 | const {paginate} = this.state; 17 | 18 | return ( 19 | 20 | console.log('Results paginated')} 22 | options={_.range(0, 1000).map((o) => o.toString())} 23 | paginate={paginate} 24 | placeholder="Pick a number..." 25 | /> 26 | 27 | this.setState({paginate: !!e.target.checked})} 30 | type="checkbox" 31 | id="enable-pagination" 32 | label="Paginate results" 33 | /> 34 | 35 | 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app/routes/Forms/Typeahead/components/index.js: -------------------------------------------------------------------------------- 1 | export * from './BasicExample'; 2 | export * from './BasicBehaviors'; 3 | export * from './ControllingSelections'; 4 | export * from './InputSize'; 5 | export * from './MenuAlignment'; 6 | export * from './FormExample'; 7 | export * from './PaginationExample'; 8 | export * from './BodyContainer'; 9 | export * from './RenderingExample'; 10 | export * from './LabelKey'; 11 | export * from './Filtering'; 12 | export * from './CustomFiltering'; 13 | export * from './CustomSelections'; 14 | export * from './AsynchronousSearching'; 15 | export * from './AsynchronousPagination'; 16 | export * from './PublicMethods'; 17 | -------------------------------------------------------------------------------- /app/routes/Forms/Typeahead/components/utils.js: -------------------------------------------------------------------------------- 1 | const SEARCH_URI = "https://api.github.com/search/users"; 2 | 3 | export function makeAndHandleRequest(query, page = 1) { 4 | return fetch(`${SEARCH_URI}?q=${query}+in:login&page=${page}&per_page=50`) 5 | .then((resp) => resp.json()) 6 | .then(({ items, total_count }) => { 7 | const options = items.map((i) => ({ 8 | avatar_url: i.avatar_url, 9 | id: i.id, 10 | login: i.login, 11 | })); 12 | return { options, total_count }; 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /app/routes/Forms/Typeahead/index.js: -------------------------------------------------------------------------------- 1 | import { Typeahead } from './Typeahead'; 2 | 3 | export default Typeahead; 4 | -------------------------------------------------------------------------------- /app/routes/Forms/Wizard/index.js: -------------------------------------------------------------------------------- 1 | import { WizardExample } from './Wizard'; 2 | 3 | export default WizardExample; 4 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/PieChartWithCustomizedLabel.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Pie, 4 | ResponsiveContainer, 5 | Cell, 6 | PieChart, 7 | PieValueLabel 8 | } from './../../../../components/recharts'; 9 | 10 | import colors from './../../../../colors'; 11 | 12 | const data = [ 13 | {name: 'Group A', value: 400}, 14 | {name: 'Group B', value: 300}, 15 | {name: 'Group C', value: 300}, 16 | {name: 'Group D', value: 200} 17 | ]; 18 | const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; 19 | 20 | export const PieChartWithCustomizedLabel = () => ( 21 | 22 | 23 | } 29 | outerRadius={80} 30 | fill="#8884d8" 31 | > 32 | { 33 | data.map((entry, index) => ) 34 | } 35 | 36 | 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | PieChart, 4 | Pie, 5 | Cell, 6 | ResponsiveContainer 7 | } from './../../../../components/recharts'; 8 | 9 | import colors from './../../../../colors'; 10 | 11 | const data = [ 12 | {name: 'Group A', value: 400}, 13 | {name: 'Group B', value: 300}, 14 | {name: 'Group C', value: 300}, 15 | {name: 'Group D', value: 200} 16 | ]; 17 | 18 | const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; 19 | 20 | export const PieChartWithPaddingAngle = () => ( 21 | 22 | 23 | 32 | { 33 | data.map((entry, index) => ) 34 | } 35 | 36 | 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/PieChartWithPaddingAngleHalf.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | PieChart, 4 | Pie, 5 | Cell, 6 | ResponsiveContainer 7 | } from './../../../../components/recharts'; 8 | 9 | import colors from './../../../../colors'; 10 | 11 | const data = [ 12 | {name: 'Group A', value: 400}, 13 | {name: 'Group B', value: 300}, 14 | {name: 'Group C', value: 300}, 15 | {name: 'Group D', value: 200} 16 | ]; 17 | 18 | const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; 19 | 20 | export const PieChartWithPaddingAngleHalf = () => ( 21 | 22 | 23 | 34 | { 35 | data.map((entry, index) => ) 36 | } 37 | 38 | 39 | 40 | ); -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/SimpleAreaChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | AreaChart, 4 | CartesianGrid, 5 | XAxis, 6 | YAxis, 7 | Tooltip, 8 | ResponsiveContainer, 9 | Area 10 | } from './../../../../components/recharts'; 11 | 12 | import colors from './../../../../colors'; 13 | 14 | const data = [ 15 | {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, 16 | {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, 17 | {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, 18 | {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, 19 | {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, 20 | {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, 21 | {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, 22 | ]; 23 | 24 | const SimpleAreaChart = () => ( 25 | 26 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ) 37 | 38 | export { SimpleAreaChart }; 39 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/StraightAnglePieChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Pie, 4 | ResponsiveContainer, 5 | PieChart 6 | } from './../../../../components/recharts'; 7 | 8 | import colors from './../../../../colors'; 9 | 10 | const data = [ 11 | { name: 'Group A', value: 400 }, 12 | { name: 'Group B', value: 300 }, 13 | { name: 'Group C', value: 300 }, 14 | { name: 'Group D', value: 200 }, 15 | { name: 'Group E', value: 278 }, 16 | { name: 'Group F', value: 189 } 17 | ]; 18 | 19 | const StraightAnglePieChart = () => ( 20 | 21 | 22 | 32 | 33 | 34 | 35 | ) 36 | 37 | export { StraightAnglePieChart }; 38 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/TinyAreaChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { 4 | ResponsiveContainer, 5 | AreaChart, 6 | Area 7 | } from './../../../../components/recharts'; 8 | 9 | import colors from './../../../../colors'; 10 | 11 | const data = _.times(20, () => ({ pv: Math.random() * 100 })); 12 | 13 | /* 99% - some wierd HACK that makes the container resize properly */ 14 | const TinyAreaChart = () => ( 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | 22 | export { TinyAreaChart }; 23 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/TinyBarChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { 4 | ResponsiveContainer, 5 | BarChart, 6 | Bar 7 | } from './../../../../components/recharts'; 8 | 9 | import colors from './../../../../colors'; 10 | 11 | const data = _.times(40, () => ({ pv: Math.random() * 100 })); 12 | 13 | const TinyBarChart = () => ( 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | export { TinyBarChart }; 22 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/TinyDonutChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | PieChart, 4 | Pie, 5 | Cell 6 | } from './../../../../components/recharts'; 7 | 8 | import colors from './../../../../colors'; 9 | 10 | const data = [ 11 | {name: 'Group A', value: 400}, 12 | {name: 'Group B', value: 300}, 13 | {name: 'Group C', value: 300}, 14 | {name: 'Group D', value: 200} 15 | ]; 16 | 17 | const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; 18 | 19 | const TinyDonutChart = () => ( 20 | 21 | 29 | { 30 | data.map((entry, index) => ) 31 | } 32 | 33 | 34 | ); 35 | 36 | export { TinyDonutChart }; 37 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/TinyLineChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { 4 | ResponsiveContainer, 5 | LineChart, 6 | Line, 7 | Dot 8 | } from './../../../../components/recharts'; 9 | 10 | import colors from './../../../../colors'; 11 | 12 | const data = _.times(20, () => ({ pv: Math.random() * 100 })); 13 | 14 | const generateDot = ({stroke, ...other}) => ( 15 | 22 | ); 23 | 24 | const TinyLineChart = () => ( 25 | 26 | 27 | 28 | 29 | 30 | ); 31 | 32 | export { TinyLineChart }; 33 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/components/TinyPieChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | PieChart, 4 | Pie, 5 | Cell 6 | } from './../../../../components/recharts'; 7 | 8 | import colors from './../../../../colors'; 9 | 10 | const data = [ 11 | {name: 'Group A', value: 400}, 12 | {name: 'Group B', value: 300}, 13 | {name: 'Group C', value: 300}, 14 | {name: 'Group D', value: 200} 15 | ]; 16 | 17 | const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; 18 | 19 | const TinyPieChart = () => ( 20 | 21 | 28 | { 29 | data.map((entry, index) => ) 30 | } 31 | 32 | 33 | ); 34 | 35 | export { TinyPieChart }; 36 | -------------------------------------------------------------------------------- /app/routes/Graphs/ReCharts/index.js: -------------------------------------------------------------------------------- 1 | import ReCharts from './ReCharts'; 2 | 3 | export default ReCharts; 4 | -------------------------------------------------------------------------------- /app/routes/Icons/index.js: -------------------------------------------------------------------------------- 1 | import Icons from './Icons'; 2 | 3 | export default Icons; -------------------------------------------------------------------------------- /app/routes/Interface/Accordions/index.js: -------------------------------------------------------------------------------- 1 | import Accordions from './Accordions'; 2 | 3 | export default Accordions; -------------------------------------------------------------------------------- /app/routes/Interface/Alerts/index.js: -------------------------------------------------------------------------------- 1 | import Alerts from './Alerts'; 2 | 3 | export default Alerts; -------------------------------------------------------------------------------- /app/routes/Interface/Avatars/index.js: -------------------------------------------------------------------------------- 1 | import Avatars from './Avatars'; 2 | 3 | export default Avatars; -------------------------------------------------------------------------------- /app/routes/Interface/BadgesLabels/index.js: -------------------------------------------------------------------------------- 1 | import BadgesLabels from './BadgesLabels'; 2 | 3 | export default BadgesLabels; -------------------------------------------------------------------------------- /app/routes/Interface/Breadcrumbs/index.js: -------------------------------------------------------------------------------- 1 | import Breadcrumbs from './Breadcrumbs'; 2 | 3 | export default Breadcrumbs; 4 | -------------------------------------------------------------------------------- /app/routes/Interface/Buttons/index.js: -------------------------------------------------------------------------------- 1 | import Buttons from './Buttons'; 2 | 3 | export default Buttons; -------------------------------------------------------------------------------- /app/routes/Interface/Calendar/index.js: -------------------------------------------------------------------------------- 1 | import { Calendar } from './Calendar'; 2 | 3 | export default Calendar; 4 | -------------------------------------------------------------------------------- /app/routes/Interface/Colors/index.js: -------------------------------------------------------------------------------- 1 | import Colors from './Colors'; 2 | 3 | export default Colors; -------------------------------------------------------------------------------- /app/routes/Interface/CropImage/images/image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/routes/Interface/CropImage/images/image-1.jpg -------------------------------------------------------------------------------- /app/routes/Interface/CropImage/images/image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0wczar/airframe-react/999e89b9a8ab80056ff2afdc112cdc521e8306a8/app/routes/Interface/CropImage/images/image-2.jpg -------------------------------------------------------------------------------- /app/routes/Interface/CropImage/index.js: -------------------------------------------------------------------------------- 1 | import { CropImage } from './CropImage'; 2 | 3 | export default CropImage; 4 | -------------------------------------------------------------------------------- /app/routes/Interface/DragAndDropElements/components/common.scss: -------------------------------------------------------------------------------- 1 | @import "./../../../../styles/variables.scss"; 2 | 3 | .list { 4 | transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 5 | 6 | &--drag-over { 7 | background-color: lighten($primary, 45%); 8 | } 9 | } 10 | 11 | .list-group-item { 12 | border-left: 1px solid transparent !important; 13 | border-right: 1px solid transparent !important; 14 | transition: border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 15 | 16 | &:first-child { 17 | border-top: 1px solid transparent !important; 18 | } 19 | 20 | &--dragging { 21 | &:first-child { 22 | border-top-color: $primary !important; 23 | } 24 | border-color: $primary !important; 25 | } 26 | } 27 | 28 | .table { 29 | transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 30 | 31 | &--drag-over { 32 | background-color: lighten($primary, 45%); 33 | } 34 | } 35 | 36 | .row { 37 | transition: border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 38 | background: $white; 39 | 40 | &--dragging { 41 | border: 1px solid $primary !important; 42 | } 43 | } -------------------------------------------------------------------------------- /app/routes/Interface/DragAndDropElements/components/index.js: -------------------------------------------------------------------------------- 1 | export * from './MultipleVerticalLists'; 2 | export * from './DraggableTable'; 3 | export * from './HorizontalLists'; -------------------------------------------------------------------------------- /app/routes/Interface/DragAndDropElements/components/utilities.js: -------------------------------------------------------------------------------- 1 | export const reorder = (list, startIndex, endIndex) => { 2 | const result = Array.from(list); 3 | const [removed] = result.splice(startIndex, 1); 4 | result.splice(endIndex, 0, removed); 5 | 6 | return result; 7 | }; 8 | 9 | export const move = (source, destination, droppableSource, droppableDestination) => { 10 | const sourceClone = Array.from(source); 11 | const destClone = Array.from(destination); 12 | const [removed] = sourceClone.splice(droppableSource.index, 1); 13 | 14 | destClone.splice(droppableDestination.index, 0, removed); 15 | 16 | const result = {}; 17 | result[droppableSource.droppableId] = sourceClone; 18 | result[droppableDestination.droppableId] = destClone; 19 | 20 | return result; 21 | }; -------------------------------------------------------------------------------- /app/routes/Interface/DragAndDropElements/index.js: -------------------------------------------------------------------------------- 1 | import { DragAndDropElements } from './DragAndDropElements'; 2 | 3 | export default DragAndDropElements; 4 | -------------------------------------------------------------------------------- /app/routes/Interface/Dropdowns/index.js: -------------------------------------------------------------------------------- 1 | import Dropdowns from './Dropdowns'; 2 | 3 | export default Dropdowns; -------------------------------------------------------------------------------- /app/routes/Interface/Images/index.js: -------------------------------------------------------------------------------- 1 | import { Images } from './Images'; 2 | 3 | export default Images; -------------------------------------------------------------------------------- /app/routes/Interface/ListGroups/index.js: -------------------------------------------------------------------------------- 1 | import ListGroups from './ListGroups'; 2 | 3 | export default ListGroups; -------------------------------------------------------------------------------- /app/routes/Interface/MediaObjects/index.js: -------------------------------------------------------------------------------- 1 | import MediaObjects from './MediaObjects'; 2 | 3 | export default MediaObjects; -------------------------------------------------------------------------------- /app/routes/Interface/Modals/index.js: -------------------------------------------------------------------------------- 1 | import { Modals } from './Modals'; 2 | 3 | export default Modals; 4 | -------------------------------------------------------------------------------- /app/routes/Interface/Navbars/index.js: -------------------------------------------------------------------------------- 1 | import Navbars from './Navbars'; 2 | 3 | export default Navbars; -------------------------------------------------------------------------------- /app/routes/Interface/Notifications/index.js: -------------------------------------------------------------------------------- 1 | import { Notifications } from './Notifications'; 2 | 3 | export default Notifications; 4 | -------------------------------------------------------------------------------- /app/routes/Interface/Paginations/index.js: -------------------------------------------------------------------------------- 1 | import Paginations from './Paginations'; 2 | 3 | export default Paginations; -------------------------------------------------------------------------------- /app/routes/Interface/ProgressBars/index.js: -------------------------------------------------------------------------------- 1 | import ProgressBars from './ProgressBars'; 2 | 3 | export default ProgressBars; -------------------------------------------------------------------------------- /app/routes/Interface/TabsPills/index.js: -------------------------------------------------------------------------------- 1 | import TabsPills from './TabsPills'; 2 | 3 | export default TabsPills; -------------------------------------------------------------------------------- /app/routes/Interface/TooltipsPopovers/index.js: -------------------------------------------------------------------------------- 1 | import TooltipsPopovers from './TooltipsPopovers'; 2 | 3 | export default TooltipsPopovers; -------------------------------------------------------------------------------- /app/routes/Interface/Typography/index.js: -------------------------------------------------------------------------------- 1 | import Typography from './Typography'; 2 | 3 | export default Typography; -------------------------------------------------------------------------------- /app/routes/Layouts/DragAndDropLayout/index.js: -------------------------------------------------------------------------------- 1 | import { DragAndDropLayout } from './DragAndDropLayout'; 2 | 3 | export default DragAndDropLayout; 4 | -------------------------------------------------------------------------------- /app/routes/Layouts/NavbarOnly/index.js: -------------------------------------------------------------------------------- 1 | import { NavbarOnly } from './NavbarOnly'; 2 | import { LayoutNavbar } from './components/LayoutNavbar'; 3 | 4 | NavbarOnly.Navbar = LayoutNavbar; 5 | 6 | export default NavbarOnly; 7 | -------------------------------------------------------------------------------- /app/routes/Layouts/SidebarA/index.js: -------------------------------------------------------------------------------- 1 | import { SidebarA } from './SidebarA'; 2 | 3 | export default SidebarA; 4 | -------------------------------------------------------------------------------- /app/routes/Layouts/SidebarDefault/index.js: -------------------------------------------------------------------------------- 1 | import { SidebarDefault } from './SidebarDefault'; 2 | 3 | export default SidebarDefault; 4 | -------------------------------------------------------------------------------- /app/routes/Layouts/SidebarWithNavbar/index.js: -------------------------------------------------------------------------------- 1 | import { SidebarWithNavbar } from './SidebarWithNavbar'; 2 | import { 3 | SidebarWithNavbarNavbar 4 | } from './../../../layout/components/SidebarWithNavbarNavbar'; 5 | import { 6 | DefaultSidebar 7 | } from './../../../layout/components/DefaultSidebar'; 8 | 9 | SidebarWithNavbar.Navbar = SidebarWithNavbarNavbar; 10 | SidebarWithNavbar.Sidebar = DefaultSidebar; 11 | 12 | export default SidebarWithNavbar; 13 | -------------------------------------------------------------------------------- /app/routes/Pages/ComingSoon/index.js: -------------------------------------------------------------------------------- 1 | import ComingSoon from './ComingSoon'; 2 | 3 | export default ComingSoon; -------------------------------------------------------------------------------- /app/routes/Pages/Confirmation/index.js: -------------------------------------------------------------------------------- 1 | import Confirmation from './Confirmation'; 2 | 3 | export default Confirmation; -------------------------------------------------------------------------------- /app/routes/Pages/Danger/Danger.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import { EmptyLayout } from './../../../components'; 5 | import { HeaderAuth } from "../../components/Pages/HeaderAuth"; 6 | import { FooterAuth } from "../../components/Pages/FooterAuth"; 7 | 8 | const Danger = () => ( 9 | 10 | 11 | { /* START Header */} 12 | 17 | { /* END Header */} 18 | { /* START Bottom Links */} 19 |
20 | 21 | Correct Errors 22 | 23 |
24 | { /* END Bottom Links */} 25 | { /* START Footer */} 26 | 27 | { /* END Footer */} 28 | 29 | 30 | ); 31 | 32 | export default Danger; 33 | -------------------------------------------------------------------------------- /app/routes/Pages/Danger/index.js: -------------------------------------------------------------------------------- 1 | import Danger from './Danger'; 2 | 3 | export default Danger; -------------------------------------------------------------------------------- /app/routes/Pages/Error404/index.js: -------------------------------------------------------------------------------- 1 | import Error404 from './Error404'; 2 | 3 | export default Error404; -------------------------------------------------------------------------------- /app/routes/Pages/ForgotPassword/index.js: -------------------------------------------------------------------------------- 1 | import ForgotPassword from './ForgotPassword'; 2 | 3 | export default ForgotPassword; -------------------------------------------------------------------------------- /app/routes/Pages/LockScreen/index.js: -------------------------------------------------------------------------------- 1 | import LockScreen from './LockScreen'; 2 | 3 | export default LockScreen; -------------------------------------------------------------------------------- /app/routes/Pages/Login/index.js: -------------------------------------------------------------------------------- 1 | import Login from './Login'; 2 | 3 | export default Login; -------------------------------------------------------------------------------- /app/routes/Pages/Register/index.js: -------------------------------------------------------------------------------- 1 | import Register from './Register'; 2 | 3 | export default Register; -------------------------------------------------------------------------------- /app/routes/Pages/Success/index.js: -------------------------------------------------------------------------------- 1 | import Success from './Success'; 2 | 3 | export default Success; -------------------------------------------------------------------------------- /app/routes/Pages/Timeline/index.js: -------------------------------------------------------------------------------- 1 | import Timeline from './Timeline'; 2 | 3 | export default Timeline; -------------------------------------------------------------------------------- /app/routes/Tables/AgGrid/index.js: -------------------------------------------------------------------------------- 1 | import AgGrid from './AgGrid'; 2 | 3 | export default AgGrid; 4 | -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/components/BasicTable.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import _ from "lodash"; 3 | import BootstrapTable from "react-bootstrap-table-next"; 4 | import { faker } from "@faker-js/faker"; 5 | 6 | const columns = [ 7 | { 8 | dataField: "id", 9 | text: "Product ID", 10 | }, 11 | { 12 | dataField: "name", 13 | text: "Product Name", 14 | }, 15 | { 16 | dataField: "price", 17 | text: "Product Price", 18 | }, 19 | ]; 20 | 21 | const data = _.times(5, (index) => ({ 22 | id: index, 23 | name: faker.commerce.productName(), 24 | price: Math.round(2000 + Math.random() * 500), 25 | })); 26 | 27 | export const BasicTable = () => ( 28 | 29 |
Basic Table
30 | 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/components/BorderedTable.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import _ from "lodash"; 3 | import BootstrapTable from "react-bootstrap-table-next"; 4 | import { faker } from "@faker-js/faker"; 5 | 6 | const columns = [ 7 | { 8 | dataField: "id", 9 | text: "Product ID", 10 | }, 11 | { 12 | dataField: "name", 13 | text: "Product Name", 14 | }, 15 | { 16 | dataField: "price", 17 | text: "Product Price", 18 | }, 19 | ]; 20 | 21 | const data = _.times(5, (index) => ({ 22 | id: index, 23 | name: faker.commerce.productName(), 24 | price: Math.round(2000 + Math.random() * 500), 25 | })); 26 | 27 | export const BorderedTable = () => ( 28 | 29 |
Bordered Table
30 | 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/components/CustomExportButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Button 5 | } from './../../../../components'; 6 | 7 | export const CustomExportCSV = ({children, onExport, ...props}) => { 8 | return ( 9 | 15 | ); 16 | } 17 | 18 | CustomExportCSV.propTypes = { 19 | size: PropTypes.string, 20 | outline: PropTypes.bool, 21 | onExport: PropTypes.func, 22 | children: PropTypes.node 23 | } 24 | 25 | CustomExportCSV.defaultProps = { 26 | size: 'sm', 27 | outline: true 28 | } -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/components/CustomPaginationPanel.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { map, isInteger } from 'lodash'; 4 | import { Pagination, PaginationItem, PaginationLink, Col } from './../../../../components'; 5 | 6 | const mapToFa = { 7 | '<': , 8 | '<<': , 9 | '>': , 10 | '>>': 11 | } 12 | 13 | export const CustomPaginationPanel = ({ onPageChange, pages, ...otherProps }) => ( 14 | 15 | 16 | { 17 | map(pages, page => ( 18 | 19 | onPageChange(page.page)}> 20 | { isInteger(page.page) ? page.page : mapToFa[page.page] } 21 | 22 | 23 | )) 24 | } 25 | 26 | 27 | ); 28 | CustomPaginationPanel.propTypes = { 29 | pages: PropTypes.array, 30 | onPageChange: PropTypes.func 31 | }; 32 | -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/components/CustomPaginationTotal.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | export const CustomPaginationTotal = ({ from, to, size }) => ( 5 | 6 | Showing { from } to { to } of { size } Results 7 | 8 | ); 9 | CustomPaginationTotal.propTypes = { 10 | from: PropTypes.number, 11 | to: PropTypes.number, 12 | size: PropTypes.number, 13 | }; 14 | -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/components/LargeTable.scss: -------------------------------------------------------------------------------- 1 | .table-scroll-wrap { 2 | max-height: 380px; 3 | overflow-y: auto; 4 | } -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/components/SelectAll.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import _ from "lodash"; 3 | import BootstrapTable from "react-bootstrap-table-next"; 4 | import { faker } from "@faker-js/faker"; 5 | 6 | const columns = [ 7 | { 8 | dataField: "id", 9 | text: "Product ID", 10 | }, 11 | { 12 | dataField: "name", 13 | text: "Product Name", 14 | }, 15 | { 16 | dataField: "price", 17 | text: "Product Price", 18 | }, 19 | ]; 20 | 21 | const data = _.times(5, (index) => ({ 22 | id: index, 23 | name: faker.commerce.productName(), 24 | price: Math.round(2000 + Math.random() * 500), 25 | })); 26 | 27 | const selectRow = { 28 | mode: "checkbox", 29 | clickToSelect: true, 30 | }; 31 | 32 | export const SelectAll = () => ( 33 | 34 |
Select All
35 | 43 | 44 | ); 45 | -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/components/SortTable.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import _ from "lodash"; 3 | import BootstrapTable from "react-bootstrap-table-next"; 4 | import { faker } from "@faker-js/faker"; 5 | 6 | const sortCaret = (order) => { 7 | if (!order) return ; 8 | if (order) return ; 9 | }; 10 | 11 | const columns = [ 12 | { 13 | dataField: "id", 14 | text: "Product ID", 15 | }, 16 | { 17 | dataField: "name", 18 | text: "Product Name", 19 | sort: true, 20 | sortCaret, 21 | }, 22 | { 23 | dataField: "price", 24 | text: "Product Price", 25 | sort: true, 26 | sortCaret, 27 | }, 28 | ]; 29 | 30 | const data = _.times(10, (index) => ({ 31 | id: index, 32 | name: faker.commerce.productName(), 33 | price: Math.round(2000 + Math.random() * 500), 34 | })); 35 | 36 | export const SortTable = () => ( 37 | 38 |
Sort Table
39 | 46 | 47 | ); 48 | -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/components/index.js: -------------------------------------------------------------------------------- 1 | export * from './AdvancedTableA'; 2 | export * from './AdvancedTableB'; 3 | export * from './BasicTable'; 4 | export * from './BorderedTable'; 5 | export * from './CellEdit'; 6 | export * from './ClearSearch'; 7 | export * from './CustomExportButton'; 8 | export * from './CustomSearch'; 9 | export * from './LargeTable'; 10 | export * from './SelectAll'; 11 | export * from './SortTable'; 12 | -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/filters/index.js: -------------------------------------------------------------------------------- 1 | export * from './textFilter'; 2 | export * from './selectFilter'; 3 | export * from './numberFilter'; -------------------------------------------------------------------------------- /app/routes/Tables/ExtendedTable/index.js: -------------------------------------------------------------------------------- 1 | import { ExtendedTable } from './ExtendedTable'; 2 | 3 | export default ExtendedTable; 4 | -------------------------------------------------------------------------------- /app/routes/Tables/Tables/components/TrTableHeads.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { faker } from "@faker-js/faker"; 3 | import _ from "lodash"; 4 | 5 | import { Badge } from "./../../../../components"; 6 | 7 | /*eslint-disable */ 8 | const colorStatus = ["danger", "success", "warning", "secondary"]; 9 | /*eslint-enable */ 10 | 11 | const TrTableHeads = () => ( 12 | 13 | {_.times(4, (index) => ( 14 | 15 | 1 16 | {faker.person.firstName()} 17 | {faker.person.lastName()} 18 | {faker.internet.email()} 19 | {faker.internet.userName()} 20 | 21 | {faker.person.jobType()} 22 | 23 | 24 | ))} 25 | 26 | ); 27 | 28 | export { TrTableHeads }; 29 | -------------------------------------------------------------------------------- /app/routes/Tables/Tables/components/TrTableHoverable.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { faker } from "@faker-js/faker"; 3 | 4 | const TrTableHoverable = () => ( 5 | 6 | 7 | 8 | Invoice #{faker.finance.mask()} 9 | 10 | 11 | {faker.person.firstName()} {faker.person.lastName()} 12 | 13 | $ {faker.finance.amount()} 14 | 15 | {faker.date.weekday()}, 12 {faker.date.month()}, 2018 16 | 17 | 18 | 19 | ); 20 | 21 | export { TrTableHoverable }; 22 | -------------------------------------------------------------------------------- /app/routes/Tables/Tables/components/TrTableSmall.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { faker } from "@faker-js/faker"; 3 | import _ from "lodash"; 4 | 5 | import { Badge } from "./../../../../components"; 6 | 7 | /*eslint-disable */ 8 | const payment = ["success", "danger", "warning", "secondary"]; 9 | /*eslint-enable */ 10 | 11 | const TrTableSmall = () => ( 12 | 13 | {_.times(4, (index) => ( 14 | 15 | #{faker.finance.mask()} 16 | 17 | {faker.person.firstName()} {faker.person.lastName()} 18 | 19 | $ {faker.finance.amount()} 20 | 21 | 22 | {faker.finance.transactionType()} 23 | 24 | 25 | 26 | ))} 27 | 28 | ); 29 | 30 | export { TrTableSmall }; 31 | -------------------------------------------------------------------------------- /app/routes/Tables/Tables/components/TrTableStriped.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { faker } from "@faker-js/faker"; 3 | import _ from "lodash"; 4 | 5 | /*eslint-disable */ 6 | const lastMonth = [ 7 | 8 | 92.02% 9 | , 10 | 11 | 23.02% 12 | , 13 | ]; 14 | /*eslint-enable */ 15 | /*eslint-disable */ 16 | const no = ["1", "2", "3", "4"]; 17 | /*eslint-enable */ 18 | 19 | const TrTableStriped = () => ( 20 | 21 | {_.times(4, (index) => ( 22 | 23 | {no[index % 4]}. 24 | 25 | {faker.commerce.productName()} 26 | 27 | 28 | {faker.date.weekday()}, 12 {faker.date.month()}, 2018 29 | 30 | {lastMonth[index % 2]} 31 | 32 | ))} 33 | 34 | ); 35 | 36 | export { TrTableStriped }; 37 | -------------------------------------------------------------------------------- /app/routes/Tables/Tables/index.js: -------------------------------------------------------------------------------- 1 | import Tables from './Tables'; 2 | 3 | export default Tables; -------------------------------------------------------------------------------- /app/routes/Widgets/index.js: -------------------------------------------------------------------------------- 1 | import Widgets from './Widgets'; 2 | 3 | export default Widgets; 4 | -------------------------------------------------------------------------------- /app/routes/components/Analytics/SessionsByDevice.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const SessionsByDevice = (props) => ( 5 | 6 |
7 | { props.title } 8 |
9 |

10 | { props.valuePercent }% 11 |

12 |
13 | { props.value } 14 |
15 | 16 | ) 17 | SessionsByDevice.propTypes = { 18 | title: PropTypes.node, 19 | titlePercentColor: PropTypes.node, 20 | valuePercent: PropTypes.string, 21 | valuePercentColor: PropTypes.node, 22 | value: PropTypes.node, 23 | valueColor: PropTypes.node 24 | }; 25 | SessionsByDevice.defaultProps = { 26 | title: "Title", 27 | titlePercentColor: "text-inverse", 28 | valuePercent: "00,0", 29 | valuePercentColor: "text-muted", 30 | value: "000,000", 31 | valueColor: "text-muted" 32 | }; 33 | 34 | 35 | export { SessionsByDevice }; 36 | -------------------------------------------------------------------------------- /app/routes/components/Analytics/TinyAreaChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import _ from 'lodash'; 4 | import { 5 | ResponsiveContainer, 6 | AreaChart, 7 | Area 8 | } from 'recharts'; 9 | 10 | import colors from './../../../colors'; 11 | 12 | const data = _.times(20, () => ({ pv: Math.random() * 100 })); 13 | 14 | const TinyAreaChart = ({ height }) => ( 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | TinyAreaChart.propTypes = { 22 | height: PropTypes.number, 23 | }; 24 | TinyAreaChart.defaultProps = { 25 | height: 25, 26 | }; 27 | 28 | export { TinyAreaChart }; 29 | -------------------------------------------------------------------------------- /app/routes/components/Analytics/TinyAreaChartSpend.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { 4 | ResponsiveContainer, 5 | AreaChart, 6 | Area 7 | } from 'recharts'; 8 | 9 | import colors from './../../../colors'; 10 | 11 | const data = _.times(20, () => ({ pv: Math.random() * 100 })); 12 | 13 | const TinyAreaChartSpend = () => ( 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | export { TinyAreaChartSpend }; 22 | -------------------------------------------------------------------------------- /app/routes/components/Analytics/TrTableTrafficChannels.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import _ from "lodash"; 3 | import { faker } from "@faker-js/faker"; 4 | import { Media, Avatar, AvatarAddOn } from "./../../../components"; 5 | 6 | import { randomArray } from "./../../../utilities"; 7 | 8 | import { TinyAreaChart } from "./TinyAreaChart"; 9 | 10 | const channel = ["Organic Search", "Display", "Direct", "Paid Search"]; 11 | 12 | const change = ["75,0% ", "34,4% ", "12,9%", "23,0%"]; 13 | 14 | const TrTableTrafficChannels = () => ( 15 | 16 | {_.times(5, (index) => ( 17 | 18 | {randomArray(channel)} 19 | {faker.finance.amount()} 20 | {faker.finance.amount()} 21 | 22 | {randomArray(change)}{" "} 23 | 24 | 25 | 26 | 27 | 28 | 29 | ))} 30 | 31 | ); 32 | 33 | export { TrTableTrafficChannels }; 34 | -------------------------------------------------------------------------------- /app/routes/components/CardFooterInfo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const CardFooterInfo = (props) => ( 5 | 6 |
7 | 8 | { props.text } 9 |
10 | 11 | 12 | ) 13 | CardFooterInfo.propTypes = { 14 | icon: PropTypes.node, 15 | iconClassName: PropTypes.node, 16 | text: PropTypes.node, 17 | }; 18 | CardFooterInfo.defaultProps = { 19 | icon: "question-circle", 20 | iconClassName: "text-muted", 21 | text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam beatae, nesciunt incidunt laudantium. Eveniet ratione quis accusantium dolorum velit maiores illo mollitia." 22 | }; 23 | 24 | export { CardFooterInfo }; 25 | -------------------------------------------------------------------------------- /app/routes/components/CardTextDemo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { CardText } from './../../components'; 4 | 5 | const CardTextDemo = (props) => ( 6 | 7 | 8 | #{ props.cardNo } 9 | 10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 11 | Nulla nisl elit, porta a sapien eget, fringilla sagittis ex. 12 | 13 | ) 14 | CardTextDemo.propTypes = { 15 | cardNo: PropTypes.node 16 | }; 17 | CardTextDemo.defaultProps = { 18 | cardNo: "?.??" 19 | }; 20 | 21 | export { CardTextDemo }; 22 | -------------------------------------------------------------------------------- /app/routes/components/Chat/ChatCardFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import { 5 | InputGroup, 6 | InputGroupAddon, 7 | Button, 8 | Input 9 | } from './../../../components'; 10 | 11 | const ChatCardFooter = () => ( 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | ) 28 | 29 | export { ChatCardFooter }; 30 | -------------------------------------------------------------------------------- /app/routes/components/Chat/ChatCardHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { 4 | UncontrolledButtonDropdown, 5 | DropdownToggle, 6 | DropdownMenu, 7 | DropdownItem, 8 | } from './../../../components'; 9 | 10 | const ChatCardHeader = () => ( 11 | 12 |
13 | Chat with Romaine Weber 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Private Message 23 | 24 | 25 | 26 | Search this Thread 27 | 28 | 29 | 30 | 31 | Block this User 32 | 33 | 34 | 35 | 36 | ) 37 | 38 | export { ChatCardHeader }; 39 | -------------------------------------------------------------------------------- /app/routes/components/Dropdowns/DropdownProfile.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { faker } from "@faker-js/faker"; 3 | import PropTypes from "prop-types"; 4 | import { Link } from "react-router-dom"; 5 | 6 | import { DropdownMenu, DropdownItem } from "./../../../components"; 7 | 8 | const DropdownProfile = (props) => ( 9 | 10 | 11 | 12 | {faker.person.firstName()} {faker.person.lastName()} 13 | 14 | 15 | 16 | My Profile 17 | 18 | 19 | Settings 20 | 21 | 22 | Billings 23 | 24 | 25 | 26 | 27 | Sign Out 28 | 29 | 30 | 31 | ); 32 | DropdownProfile.propTypes = { 33 | position: PropTypes.string, 34 | right: PropTypes.bool, 35 | }; 36 | DropdownProfile.defaultProps = { 37 | position: "", 38 | }; 39 | 40 | export { DropdownProfile }; 41 | -------------------------------------------------------------------------------- /app/routes/components/Financial/TinyDonutChartBig.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | PieChart, 5 | Pie, 6 | Cell 7 | } from 'recharts'; 8 | 9 | import colors from './../../../colors'; 10 | 11 | const data = [ 12 | {name: 'Group A', value: 400}, 13 | {name: 'Group B', value: 300}, 14 | {name: 'Group C', value: 300}, 15 | {name: 'Group C', value: 300} 16 | ]; 17 | 18 | const COLORS = [ colors['primary'], colors['purple'], colors['success'], colors['yellow']]; 19 | 20 | const TinyDonutChartBig = (props) => ( 21 | 22 | 30 | { 31 | data.map((entry, index) => ) 32 | } 33 | 34 | 35 | ); 36 | 37 | TinyDonutChartBig.propTypes = { 38 | pieBg: PropTypes.spring 39 | }; 40 | TinyDonutChartBig.defaultProps = { 41 | pieBg: "300" 42 | }; 43 | 44 | export { TinyDonutChartBig }; 45 | -------------------------------------------------------------------------------- /app/routes/components/Financial/TrTableRecentFundings.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import _ from "lodash"; 3 | import { faker } from "@faker-js/faker"; 4 | 5 | const TrTableRecentFundings = () => ( 6 | 7 | {_.times(6, (index) => ( 8 | 9 | 10 | {faker.company.name()} 11 | 12 | ${faker.commerce.price()} 13 | 20-02-2015 14 | 15 | 16 | View 17 | 18 | 19 | 20 | ))} 21 | 22 | ); 23 | 24 | export { TrTableRecentFundings }; 25 | -------------------------------------------------------------------------------- /app/routes/components/FooterText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const FooterText = (props) => ( 5 | 6 | (C) { props.year } All Rights Reserved. This is the "{ props.name }" built with { props.desc }. 7 | Designed and implemented by{' '} 8 | 14 | www.webkom.co 15 | 16 | 17 | ) 18 | FooterText.propTypes = { 19 | year: PropTypes.node, 20 | name: PropTypes.node, 21 | desc: PropTypes.node, 22 | }; 23 | FooterText.defaultProps = { 24 | year: "2018", 25 | name: "Admin Theme", 26 | desc: "Bootstrap 4, React 16 (latest) & NPM" 27 | }; 28 | 29 | export { FooterText }; 30 | -------------------------------------------------------------------------------- /app/routes/components/HeaderDemo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Media } from 'reactstrap'; 4 | 5 | const HeaderDemo = (props) => ( 6 | 7 | 8 |

9 | {props.no}. 10 |

11 | 12 | 13 |

14 | {props.title} 15 |

16 |

{props.children || props.subTitle}

17 | 18 | 19 | ) 20 | HeaderDemo.propTypes = { 21 | no: PropTypes.oneOfType([ 22 | PropTypes.string, 23 | PropTypes.number 24 | ]), 25 | title: PropTypes.string, 26 | subTitle: PropTypes.string, 27 | children: PropTypes.node, 28 | className: PropTypes.string 29 | }; 30 | HeaderDemo.defaultProps = { 31 | no: 0, 32 | title: "Waiting for Data...", 33 | subTitle: "Waiting for Data..." 34 | }; 35 | 36 | export { HeaderDemo }; 37 | -------------------------------------------------------------------------------- /app/routes/components/HeaderMain.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const HeaderMain = (props) => ( 5 | 6 | { /* START H1 Header */} 7 |
8 |

9 | { props.title } 10 |

11 |
12 | { /* END H1 Header */} 13 | 14 | ) 15 | HeaderMain.propTypes = { 16 | title: PropTypes.string, 17 | subTitle: PropTypes.node, 18 | className: PropTypes.string 19 | }; 20 | HeaderMain.defaultProps = { 21 | title: "Waiting for Data...", 22 | subTitle: "Waiting for Data...", 23 | className: "my-4" 24 | }; 25 | 26 | export { HeaderMain }; 27 | -------------------------------------------------------------------------------- /app/routes/components/Logos/LogoNavbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const LogoNavbar = (props) => ( 5 | 6 | { /* START Logo: Visible on: md, lg, xl */} 7 | 8 | { /* END Logo: Visible on: md, lg, xl */} 9 | { /* START Logo: Visible on: xs, sm */} 10 | 11 | { /* END Logo: Visible on: xs, sm */} 12 | 13 | ) 14 | 15 | LogoNavbar.propTypes = { 16 | logo: PropTypes.node 17 | }; 18 | LogoNavbar.defaultProps = { 19 | logo: "send" 20 | }; 21 | 22 | export { LogoNavbar }; 23 | -------------------------------------------------------------------------------- /app/routes/components/Logos/LogotypeNavbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const LogotypeNavbar = (props) => ( 5 | 6 | { /* START Logotype: Visible on: md, lg, xl */} 7 |
8 | { props.logotype } 9 |
10 | { /* END Logotype: Visible on: md, lg, xl */} 11 | { /* START Logotype: Visible on: xs, sm */} 12 |
13 | { props.logotype } 14 |
15 | { /* END Logotype: Visible on: xs, sm */} 16 |
17 | Version: React, { props.version } 18 |
19 | 20 | ) 21 | 22 | LogotypeNavbar.propTypes = { 23 | logoH: PropTypes.node, 24 | logotype: PropTypes.node, 25 | version: PropTypes.node, 26 | }; 27 | LogotypeNavbar.defaultProps = { 28 | logoH: "h5", 29 | logotype: "react", 30 | version: "2.0" 31 | }; 32 | 33 | export { LogotypeNavbar }; 34 | -------------------------------------------------------------------------------- /app/routes/components/Monitor/TinyAreaChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { 4 | ResponsiveContainer, 5 | AreaChart, 6 | Area 7 | } from './../../../components/recharts'; 8 | 9 | import colors from './../../../colors'; 10 | 11 | const data = _.times(20, () => ({ pv: Math.random() * 100 })); 12 | 13 | const TinyAreaChart = () => ( 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | export { TinyAreaChart }; 22 | -------------------------------------------------------------------------------- /app/routes/components/Monitor/TinyDonutChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | PieChart, 4 | Pie, 5 | Cell 6 | } from 'recharts'; 7 | 8 | import colors from './../../../colors'; 9 | 10 | const data = [ 11 | {name: 'Group A', value: 400}, 12 | {name: 'Group B', value: 300}, 13 | {name: 'Group C', value: 300} 14 | ]; 15 | 16 | const COLORS = [ colors['primary'], colors['info'], colors['300']]; 17 | 18 | const TinyDonutChart = () => ( 19 | 20 | 28 | { 29 | data.map((entry, index) => ) 30 | } 31 | 32 | 33 | ); 34 | 35 | export { TinyDonutChart }; 36 | -------------------------------------------------------------------------------- /app/routes/components/Monitor/TinyDonutChartBig.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | PieChart, 5 | Pie, 6 | Cell 7 | } from 'recharts'; 8 | 9 | import colors from './../../../colors'; 10 | 11 | const data = [ 12 | {name: 'Group A', value: 400}, 13 | {name: 'Group B', value: 300} 14 | ]; 15 | 16 | const TinyDonutChartBig = (props) => ( 17 | 18 | 26 | 27 | 28 | 29 | ); 30 | 31 | TinyDonutChartBig.propTypes = { 32 | pieColor: PropTypes.string, 33 | pieBg: PropTypes.string 34 | }; 35 | TinyDonutChartBig.defaultProps = { 36 | pieColor: "secondary", 37 | pieBg: "300" 38 | }; 39 | 40 | export { TinyDonutChartBig }; 41 | -------------------------------------------------------------------------------- /app/routes/components/Pages/FooterAuth.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import PropTypes from 'prop-types'; 4 | import { FooterText } from '../FooterText'; 5 | 6 | const FooterAuth = ({ className }) => ( 7 |

8 | 9 |

10 | ); 11 | FooterAuth.propTypes = { 12 | className: PropTypes.string 13 | }; 14 | 15 | export { FooterAuth }; 16 | -------------------------------------------------------------------------------- /app/routes/components/Paginations.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { 4 | Pagination, 5 | PaginationItem, 6 | PaginationLink 7 | } from 'reactstrap'; 8 | 9 | const Paginations = () => ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1 20 | 21 | 22 | 23 | 24 | 2 25 | 26 | 27 | 28 | 29 | 3 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | ) 39 | 40 | export { Paginations }; 41 | -------------------------------------------------------------------------------- /app/routes/components/Profile/DlRowAddress.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const DlRowAddress = (props) => ( 5 | 6 |
7 |
Adress
8 |
700 Zemlak Glen
9 |
City
10 |
Jacobiton
11 |
State
12 |
West Virginia
13 |
ZIP
14 |
87032
15 |
16 | 17 | ) 18 | DlRowAddress.propTypes = { 19 | leftSideClassName: PropTypes.node, 20 | rightSideClassName: PropTypes.node 21 | }; 22 | DlRowAddress.defaultProps = { 23 | leftSideClassName: "", 24 | rightSideClassName: "" 25 | }; 26 | 27 | export { DlRowAddress }; 28 | -------------------------------------------------------------------------------- /app/routes/components/ProjectsDashboards/TasksMedia.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { faker } from "@faker-js/faker"; 3 | import PropTypes from "prop-types"; 4 | import { Link } from "react-router-dom"; 5 | 6 | import { Media, CustomInput } from "./../../../components"; 7 | 8 | const TasksMedia = (props) => ( 9 | 10 | 11 | 12 | 18 | 19 | 20 |
21 | 22 | {faker.hacker.phrase()} 23 | 24 |
25 |
{faker.date.past().toString()}
26 | 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | TasksMedia.propTypes = { 34 | iconColor: PropTypes.node, 35 | id: PropTypes.node, 36 | }; 37 | TasksMedia.defaultProps = { 38 | iconColor: "muted", 39 | id: "1", 40 | }; 41 | 42 | export { TasksMedia }; 43 | -------------------------------------------------------------------------------- /app/routes/components/ProjectsDashboards/TinyDonutChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | PieChart, 4 | Pie, 5 | Cell 6 | } from 'recharts'; 7 | 8 | import colors from './../../../colors'; 9 | 10 | const data = [ 11 | {name: 'Group A', value: 200}, 12 | {name: 'Group B', value: 300}, 13 | {name: 'Group C', value: 300} 14 | ]; 15 | 16 | const COLORS = [ colors['yellow'], colors['red'], colors['success'], colors['yellow']]; 17 | 18 | const TinyDonutChart = () => ( 19 | 20 | 28 | { 29 | data.map((entry, index) => ) 30 | } 31 | 32 | 33 | ); 34 | 35 | export { TinyDonutChart }; 36 | -------------------------------------------------------------------------------- /app/routes/components/ProjectsDashboards/TinyDonutChartAllProjects.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | PieChart, 4 | Pie, 5 | Cell 6 | } from 'recharts'; 7 | 8 | import colors from './../../../colors'; 9 | 10 | const data = [ 11 | {name: 'Group A', value: 200}, 12 | {name: 'Group B', value: 200}, 13 | {name: 'Group C', value: 300} 14 | ]; 15 | 16 | const COLORS = [ colors['primary'], colors['info'], colors['purple'], colors['yellow']]; 17 | 18 | const TinyDonutChartAllProjects = () => ( 19 | 20 | 28 | { 29 | data.map((entry, index) => ) 30 | } 31 | 32 | 33 | ); 34 | 35 | export { TinyDonutChartAllProjects }; 36 | -------------------------------------------------------------------------------- /app/routes/components/SearchResults/SearchResultsHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { 4 | InputGroup, 5 | InputGroupAddon, 6 | Input, 7 | Button, 8 | } from './../../../components'; 9 | 10 | const SearchResultsHeader = () => ( 11 | 12 |
13 |

14 | 15 | Search Results for 16 | "Content Designer" 17 | 18 | 19 | About 1,370 result (0.13 seconds) 20 | 21 | 22 |

23 | 24 | 25 | 26 | 29 | 30 | 31 |
32 | 33 | ) 34 | 35 | export { SearchResultsHeader }; 36 | -------------------------------------------------------------------------------- /app/routes/components/Stock/TrTableSummary.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import _ from 'lodash'; 3 | import { randomArray } from './../../../utilities'; 4 | 5 | const name = [ 6 | "PE", 7 | "CROIC", 8 | "Magic Y", 9 | "EV/EBITDA", 10 | "P/FCF", 11 | "ROA" 12 | ]; 13 | 14 | const tr2013 = [ 15 | "33*4%", 16 | "10*4", 17 | "2*5" 18 | ]; 19 | 20 | const ttm = [ 21 | "28*3%", 22 | "16*5" 23 | ]; 24 | 25 | const TrTableSummary = () => ( 26 | 27 | { 28 | _.times(9, (index) => ( 29 | 30 | 31 | { randomArray(name) } 32 | 33 | 34 | { randomArray(tr2013) } 35 | 36 | 37 | { randomArray(tr2013) } 38 | 39 | 40 | { randomArray(ttm) } 41 | 42 | 43 | )) 44 | } 45 | 46 | ) 47 | 48 | export { TrTableSummary }; 49 | -------------------------------------------------------------------------------- /app/styles/bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import '~@owczar/dashboard-style--airframe/scss/bootstrap/bootstrap'; -------------------------------------------------------------------------------- /app/styles/components/float-grid.scss: -------------------------------------------------------------------------------- 1 | @import './../variables.scss'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | 4 | .float-grid-parent { 5 | margin: 0 auto; 6 | padding-left: $grid-gutter-width / 2; 7 | padding-right: $grid-gutter-width / 2; 8 | 9 | &.float-grid-parent__static { 10 | @media (min-width: breakpoint-min('sm', $grid-breakpoints)) { 11 | width: map-get($container-max-widths, 'sm'); 12 | } 13 | @media (min-width: breakpoint-min('md', $grid-breakpoints)) { 14 | width: map-get($container-max-widths, 'md'); 15 | } 16 | @media (min-width: breakpoint-min('lg', $grid-breakpoints)) { 17 | width: map-get($container-max-widths, 'lg'); 18 | } 19 | @media (min-width: breakpoint-min('xl', $grid-breakpoints)) { 20 | width: map-get($container-max-widths, 'xl'); 21 | } 22 | } 23 | } 24 | 25 | .float-col { 26 | padding-left: $grid-gutter-width / 2; 27 | padding-right: $grid-gutter-width / 2; 28 | } 29 | -------------------------------------------------------------------------------- /app/styles/components/theme-selector.scss: -------------------------------------------------------------------------------- 1 | .theme-config__body .custom-control .custom-control-label { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /app/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import '~@owczar/dashboard-style--airframe/scss/style'; -------------------------------------------------------------------------------- /app/styles/plugins/_ag-grid.scss: -------------------------------------------------------------------------------- 1 | @import '~@owczar/dashboard-style--airframe/scss/plugins/ag-grid/ag-grid'; 2 | @import '~@owczar/dashboard-style--airframe/scss/plugins/ag-grid/ag-theme-bootstrap'; 3 | -------------------------------------------------------------------------------- /app/styles/plugins/_font-awesome.scss: -------------------------------------------------------------------------------- 1 | $fa-font-path: "~font-awesome/fonts/"; 2 | 3 | @import "~font-awesome/scss/font-awesome"; -------------------------------------------------------------------------------- /app/styles/plugins/_rc-slider.scss: -------------------------------------------------------------------------------- 1 | /* RC Sliders Overrides */ 2 | @import "./../variables.scss"; 3 | 4 | .rc-slider { 5 | .rc-slider-track { 6 | background-color: $primary; 7 | } 8 | 9 | .rc-slider-dot-active { 10 | border-color: $primary !important; 11 | } 12 | 13 | .rc-slider-handle { 14 | border-color: $primary; 15 | 16 | &:active { 17 | border-color: darken($primary, 10%); 18 | box-shadow: 0 0 5px darken($primary, 10%); 19 | } 20 | &:hover { 21 | border-color: darken($primary, 5%); 22 | } 23 | } 24 | 25 | .rc-slider-rail { 26 | background-color: $gray-400; 27 | } 28 | .rc-slider-dot { 29 | background-color: $white; 30 | border: 2px solid $gray-500; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /app/styles/plugins/_react-bootstrap-table.scss: -------------------------------------------------------------------------------- 1 | /*@import "~react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";*/ 2 | 3 | @import "./../variables.scss"; 4 | 5 | .react-bootstrap-table th.sortable { 6 | white-space: nowrap; 7 | } 8 | 9 | .react-bootstrap-table th, 10 | .react-bootstrap-table td { 11 | vertical-align: middle !important; 12 | } 13 | 14 | .react-bootstrap-table .table:not(.table-bordered) tbody tr:last-child td { 15 | border-bottom: 1px solid $table-border-color; 16 | } 17 | 18 | .react-bootstrap-table-pagination { 19 | padding: 0 0.75rem; 20 | } 21 | 22 | .react-bootstrap-table-pagination-list .pagination { 23 | justify-content: flex-end; 24 | } 25 | -------------------------------------------------------------------------------- /app/styles/plugins/_react-bootstrap-typeahead.scss: -------------------------------------------------------------------------------- 1 | /* React Bootstrap Typeahead Overrides */ 2 | .rbt-token { 3 | background-color: $primary !important; 4 | color: $white !important; 5 | } 6 | .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { 7 | color: darken($white,20%) !important; 8 | } 9 | -------------------------------------------------------------------------------- /app/styles/plugins/_react-dropzone.scss: -------------------------------------------------------------------------------- 1 | @import "./../variables.scss"; 2 | 3 | .dropzone { 4 | border: 2px dashed $gray-300; 5 | padding: 20px; 6 | text-align: center; 7 | cursor: pointer; 8 | 9 | &:hover, 10 | &--active { 11 | border-color: $primary; 12 | background-color: rgba($primary, 0.1); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /app/styles/plugins/_react-image-crop.scss: -------------------------------------------------------------------------------- 1 | // @import '~react-image-crop/lib/ReactCrop.scss'; 2 | -------------------------------------------------------------------------------- /app/styles/plugins/_react-toggle.scss: -------------------------------------------------------------------------------- 1 | /* React Toggle Overrides */ 2 | .react-toggle-track { 3 | .fa { 4 | font-size: 12px; 5 | } 6 | } 7 | 8 | .react-toggle-track { 9 | background-color: $gray-500 !important; 10 | } 11 | .react-toggle-thumb { 12 | border: 1px solid $gray-500 !important; 13 | } 14 | 15 | .react-toggle--checked .react-toggle-track { 16 | background-color: $success !important; 17 | } -------------------------------------------------------------------------------- /app/styles/plugins/plugins.css: -------------------------------------------------------------------------------- 1 | @import "~react-toggle/style.css"; 2 | @import '~react-bootstrap-typeahead/css/Typeahead.css'; 3 | @import '~react-bootstrap-typeahead/css/Typeahead-bs4.css'; 4 | @import "~react-quill/dist/quill.snow.css"; 5 | @import "~react-datepicker/dist/react-datepicker.css"; 6 | @import "~react-big-calendar/lib/css/react-big-calendar.css"; 7 | @import "~react-grid-layout/css/styles.css"; 8 | @import "~rc-slider/assets/index.css"; 9 | -------------------------------------------------------------------------------- /app/styles/plugins/plugins.scss: -------------------------------------------------------------------------------- 1 | @import "ag-grid"; 2 | @import "font-awesome"; 3 | @import "react-toastify"; 4 | @import "react-image-crop"; 5 | @import "react-toggle"; 6 | @import "react-bootstrap-typeahead"; 7 | @import "react-quill"; 8 | @import "react-datepicker"; 9 | @import "font-awesome"; 10 | @import "react-big-calendar"; 11 | @import "font-awesome"; 12 | @import "react-grid-layout"; 13 | @import "font-awesome"; 14 | @import "react-dropzone"; 15 | @import "font-awesome"; 16 | @import "rc-slider.scss"; 17 | @import "react-bootstrap-table.scss"; 18 | -------------------------------------------------------------------------------- /app/styles/variables.scss: -------------------------------------------------------------------------------- 1 | @import "~@owczar/dashboard-style--airframe/scss/variables"; -------------------------------------------------------------------------------- /app/utilities.js: -------------------------------------------------------------------------------- 1 | const allAvatars = (ctx => { 2 | let keys = ctx.keys(); 3 | return keys.map(ctx); 4 | })(require.context('./images/avatars', true, /.*/)); 5 | 6 | export function randomArray(arr) { 7 | const index = Math.round(Math.random() * (arr.length - 1)); 8 | return arr[index]; 9 | } 10 | 11 | export function randomAvatar() { 12 | return randomArray(allAvatars); 13 | } -------------------------------------------------------------------------------- /build/cli-tools.js: -------------------------------------------------------------------------------- 1 | var program = require('commander'); 2 | var rimraf = require('rimraf'); 3 | var fs = require('fs'); 4 | var mkdirp = require('mkdirp'); 5 | 6 | var config = require('./../config'); 7 | 8 | function dirParamToPath(dirParam) { 9 | switch(dirParam) { 10 | case 'dist': 11 | return config.distDir; 12 | case 'serve': 13 | return config.serveDir; 14 | } 15 | return null; 16 | } 17 | 18 | var commands = { 19 | clear: function(value) { 20 | var targetPath = dirParamToPath(value); 21 | 22 | if(targetPath) { 23 | rimraf.sync(targetPath); 24 | 25 | console.info('Cleared target directory: %s', targetPath); 26 | } 27 | }, 28 | 29 | create: function(value) { 30 | var targetPath = dirParamToPath(value); 31 | 32 | if(targetPath) { 33 | mkdirp.sync(targetPath); 34 | 35 | console.info('Created target directory: %s', targetPath); 36 | } 37 | } 38 | } 39 | 40 | program 41 | .option('-c, --clear [serve/dist]') 42 | .option('-cr, --create [serve/dist]') 43 | .parse(process.argv); 44 | 45 | for (var commandName in commands) { 46 | if (commands.hasOwnProperty(commandName) && program[commandName]) { 47 | commands[commandName](program[commandName]); 48 | } 49 | } 50 | 51 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | 3 | var root = path.join(__dirname); 4 | 5 | var config = { 6 | rootDir: root, 7 | // Targets ======================================================== 8 | serveDir: path.join(root, ".serve"), 9 | distDir: path.join(root, "dist"), 10 | clientManifestFile: "manifest.webpack.json", 11 | clientStatsFile: "stats.webpack.json", 12 | 13 | // Source Directory =============================================== 14 | srcDir: path.join(root, "app"), 15 | srcServerDir: path.join(root, "server"), 16 | 17 | // HTML Layout ==================================================== 18 | srcHtmlLayout: path.join(root, "app", "index.html"), 19 | 20 | // Site Config ==================================================== 21 | siteTitle: "Airframe", 22 | siteDescription: "Default Dashboard ready for Development", 23 | siteCannonicalUrl: "http://localhost:4100", 24 | siteKeywords: "react dashboard seed bootstrap", 25 | }; 26 | 27 | module.exports = config; 28 | -------------------------------------------------------------------------------- /packages/dashboard-style/js-modules/index.js: -------------------------------------------------------------------------------- 1 | var dashboardVersion = require('./dashboard-version'); 2 | var extendedFaker = require('./extended-faker'); 3 | var SideMenuAnimate = require('./side-menu-animate'); 4 | var SidebarEntryAnimate = require('./sidebar-entry-animate'); 5 | var SlimSidebarAnimate = require('./slim-sidebar-animate'); 6 | var SlimMenuAnimate = require('./slim-menu-animate'); 7 | var DropdownMenuAnimate = require('./dropdown-menu-animate'); 8 | var NestedDropdownAnimate = require('./nested-dropdown-animate'); 9 | var HighchartsTheme = require('./highcharts'); 10 | var Colors = require('./colors'); 11 | 12 | module.exports = { 13 | dashboardVersion: dashboardVersion, 14 | faker: extendedFaker, 15 | SideMenuAnimate: SideMenuAnimate, 16 | SidebarEntryAnimate: SidebarEntryAnimate, 17 | SlimSidebarAnimate: SlimSidebarAnimate, 18 | SlimMenuAnimate: SlimMenuAnimate, 19 | DropdownMenuAnimate: DropdownMenuAnimate, 20 | NestedDropdownAnimate: NestedDropdownAnimate, 21 | HighchartsTheme: HighchartsTheme, 22 | Colors: Colors, 23 | }; 24 | -------------------------------------------------------------------------------- /packages/dashboard-style/js/highcharts/bar-basic.js: -------------------------------------------------------------------------------- 1 | !function o(n,l,u){function s(r,e){if(!l[r]){if(!n[r]){var t="function"==typeof require&&require;if(!e&&t)return t(r,!0);if(d)return d(r,!0);var i=new Error("Cannot find module '"+r+"'");throw i.code="MODULE_NOT_FOUND",i}var a=l[r]={exports:{}};n[r][0].call(a.exports,function(e){return s(n[r][1][e]||e)},a,a.exports,o,n,l,u)}return l[r].exports}for(var d="function"==typeof require&&require,e=0;eWikipedia.org'},xAxis:{categories:["Africa","America","Asia","Europe","Oceania"],title:{text:null}},yAxis:{min:0,title:{text:"Population (millions)",align:"high"},labels:{overflow:"justify"}},tooltip:{valueSuffix:" millions"},plotOptions:{bar:{dataLabels:{enabled:!0}}},legend:{layout:"vertical",align:"right",verticalAlign:"top",x:-40,y:80,floating:!0,borderWidth:1,borderRadius:3,backgroundColor:"#FFFFFF",borderColor:"#DEE2E6",shadow:!1},credits:{enabled:!1},series:[{name:"Year 1800",data:[107,31,635,203,2]},{name:"Year 1900",data:[133,156,947,408,6]},{name:"Year 2000",data:[814,841,3714,727,31]}]})},{}]},{},[1]); 2 | //# sourceMappingURL=bar-basic.js.map 3 | -------------------------------------------------------------------------------- /packages/dashboard-style/js/highcharts/bar-stacked.js: -------------------------------------------------------------------------------- 1 | !function i(o,s,c){function u(r,e){if(!s[r]){if(!o[r]){var t="function"==typeof require&&require;if(!e&&t)return t(r,!0);if(f)return f(r,!0);var a=new Error("Cannot find module '"+r+"'");throw a.code="MODULE_NOT_FOUND",a}var n=s[r]={exports:{}};o[r][0].call(n.exports,function(e){return u(o[r][1][e]||e)},n,n.exports,i,o,s,c)}return s[r].exports}for(var f="function"==typeof require&&require,e=0;e{point.percentage:.1f}%"},credits:!1,plotOptions:{pie:{allowPointSelect:!0,cursor:"pointer",dataLabels:{enabled:!1},showInLegend:!0}},series:[{name:"Brands",colorByPoint:!0,data:[{name:"Chrome",y:61.41,sliced:!0,selected:!0},{name:"Internet Explorer",y:11.84},{name:"Firefox",y:10.85},{name:"Edge",y:4.67}]}]})},{}]},{},[1]); 2 | //# sourceMappingURL=pie-legend.js.map 3 | -------------------------------------------------------------------------------- /packages/dashboard-style/js/highcharts/pie-semi-circle.js: -------------------------------------------------------------------------------- 1 | !function i(a,l,s){function c(r,e){if(!l[r]){if(!a[r]){var t="function"==typeof require&&require;if(!e&&t)return t(r,!0);if(p)return p(r,!0);var n=new Error("Cannot find module '"+r+"'");throw n.code="MODULE_NOT_FOUND",n}var o=l[r]={exports:{}};a[r][0].call(o.exports,function(e){return c(a[r][1][e]||e)},o,o.exports,i,a,l,s)}return l[r].exports}for(var p="function"==typeof require&&require,e=0;eshares
2017",align:"center",verticalAlign:"middle",y:40},tooltip:{pointFormat:"{series.name}: {point.percentage:.1f}%"},credits:!1,plotOptions:{pie:{dataLabels:{enabled:!0,distance:-50,style:{fontWeight:"bold",color:"white"}},startAngle:-90,endAngle:90,center:["50%","75%"],size:"110%"}},series:[{type:"pie",name:"Browser share",innerSize:"50%",data:[["Chrome",58.9],["Firefox",13.29],["Internet Explorer",13],["Edge",3.78]]}]})},{}]},{},[1]); 2 | //# sourceMappingURL=pie-semi-circle.js.map 3 | -------------------------------------------------------------------------------- /packages/dashboard-style/js/nested-dropdown.js: -------------------------------------------------------------------------------- 1 | !function i(u,s,d){function a(n,e){if(!s[n]){if(!u[n]){var o="function"==typeof require&&require;if(!e&&o)return o(n,!0);if(p)return p(n,!0);var r=new Error("Cannot find module '"+n+"'");throw r.code="MODULE_NOT_FOUND",r}var t=s[n]={exports:{}};u[n][0].call(t.exports,function(e){return a(u[n][1][e]||e)},t,t.exports,i,u,s,d)}return s[n].exports}for(var p="function"==typeof require&&require,e=0;e .sidebar-menu__entry__link,.sidebar-submenu__entry--nested > .sidebar-submenu__entry__link");(t=s.filter(function(){return n.location.href===e(this).prop("href")}).first()).parent().addClass("active"),function e(n){var r=n.parents(".sidebar-submenu__entry--nested,.sidebar-menu__entry--nested");0*:first-child { 15 | padding-left: 0; 16 | padding-right: 1rem; 17 | text-align: left; 18 | color: $body-color; 19 | } 20 | &.hr-text-center { 21 | &:before { 22 | content: " "; 23 | } 24 | >*:first-child { 25 | text-align: center; 26 | padding-left: 1rem; 27 | } 28 | } 29 | &.hr-text-right { 30 | &:before { 31 | content: " "; 32 | } 33 | &:after { 34 | content: none; 35 | } 36 | >*:first-child { 37 | text-align: right; 38 | padding-left: 1rem; 39 | padding-right: 0; 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /packages/dashboard-style/scss/_icon-with-badge.scss: -------------------------------------------------------------------------------- 1 | .icon-with-badge { 2 | position: relative; 3 | display: inline-block; 4 | 5 | .icon-with-badge__badge { 6 | position: absolute; 7 | right: -8px; 8 | top: -4px; 9 | padding: 2px 5px; 10 | line-height: 12px; 11 | } 12 | } -------------------------------------------------------------------------------- /packages/dashboard-style/scss/_theme-config.scss: -------------------------------------------------------------------------------- 1 | .theme-config { 2 | width: 200px; 3 | 4 | position: fixed; 5 | top: 50%; 6 | right: 0; 7 | bottom: auto; 8 | left: auto; 9 | transform: translateX(100%) translateY(-50%); 10 | transition: transform 250ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 11 | z-index: 1500; 12 | 13 | &--active { 14 | transform: translateY(-50%); 15 | } 16 | 17 | .theme-config { 18 | &__body.card { 19 | border-top-right-radius: 0; 20 | border-bottom-right-radius: 0; 21 | } 22 | 23 | &__trigger { 24 | border-top-right-radius: 0; 25 | border-bottom-right-radius: 0; 26 | position: absolute; 27 | top: 50%; 28 | left: 0; 29 | transform: translate(-100%, -50%); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/dashboard-style/scss/bootstrap/_functions.scss: -------------------------------------------------------------------------------- 1 | @function map-collect($maps...) { 2 | $collection: (); 3 | 4 | @each $map in $maps { 5 | $collection: map-merge($collection, $map); 6 | } 7 | @return $collection; 8 | } -------------------------------------------------------------------------------- /packages/dashboard-style/scss/plugins/ag-grid/ag-grid.scss: -------------------------------------------------------------------------------- 1 | @import "~ag-grid-community/src/styles/ag-grid.scss"; 2 | -------------------------------------------------------------------------------- /packages/dashboard-style/scss/plugins/highcharts/highcharts.scss: -------------------------------------------------------------------------------- 1 | @import "./../../variables"; 2 | 3 | .highcharts-menu { 4 | hr { 5 | margin: 0.25rem 0; 6 | } 7 | } 8 | 9 | .highcharts-root { 10 | font-family: $font-family-base !important; 11 | font-size: $font-size-base; 12 | } -------------------------------------------------------------------------------- /packages/dashboard-style/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "./animations"; 2 | @import "./avatars"; 3 | @import "./custom-card"; 4 | @import "./custom-card-header"; 5 | @import "./hr-text"; 6 | @import "./icon-with-badge"; 7 | @import "./layout"; 8 | @import "./sidebar"; 9 | @import "./sidebar-menu"; 10 | @import "./navbar"; 11 | @import "./theme-variants"; 12 | @import "./extended-dropdown"; 13 | @import "./fullScreen"; 14 | @import "./nested-dropdown"; 15 | @import "./timeline"; 16 | @import "./theme-config"; -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | }; -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [ 3 | { "source": "/(.*)", "destination": "/" } 4 | ] 5 | } 6 | --------------------------------------------------------------------------------