I have created this cool and simple one step integration admin dashboard for you with my love
Its simple and easy to use project with all the pre written UI components. you just have to import components from ui-components and you are good to start using it. :)
Its an experimental but ready to use project. please provide feedback in the comment section below
What you will get from this project
Pre written Routes with navs and header
Data components to highlight important data
Card component to wrap your custom content
Header with navigation and dropdowns
Login Page
Signup Page
React Icons
Modal
UI Widgets and buttons
Responsive Design
Github
https://github.com/Rizwan17/aio-dashboard
You can download or clone project from above github link
Docs
Layout Component to provide you Header and Sidebar
Layout Component brings up Top Header and Side Navigation Controls
import Layout from "@aio/components/layout";
const Home = props => (
<Layout>
<p>Hello World</p>
</Layout>
)
Page Header Component with page heading and subheading and action components
import HeaderSection from "@aio/components/HeaderSection";
import ActionButton from "@aio/components/ActionButton";
import { AiOutlinePlusCircle } from "react-icons/ai";
const Profile = (props) => {
return (
<>
<HeaderSection
heading={"Dashboard"}
subHeading={"Welcome to aio dashboard"}
rightItem={() => (
<ActionButton
onClick={() => setModal(true)}
Icon={AiOutlinePlusCircle}
label="Add New User"
/>
)}
/>
</>
);
}
Section Component to wrap page content
Section component is a container which brings alignment and spacing for content
import Section from "@aio/components/Section";
import DataCard from "@aio/components/DataCard";
const Home = () => {
return (
<Section>
<DataCard
label={"Total Revenue"}
value={"23,34,450"}
percentageValue={56.4}
inverse={true}
/>
<DataCard
label={"Total Customer"}
value={"45,09,333"}
percentageValue={3.45}
/>
<DataCard
label={"Total Profit"}
value={"43,54,111"}
percentageValue={10.89}
/>
</Section>
);
}
Table component
import Table from "@aio/components/Table";
const BillingHistory = () => {
return (
<Table
# Main Heading of the table
mainHeading={"Billing history"}
# Sub Heading of the table
subHeading={"Download your previous plan bill and usuage details."}
# Table Right Side Component
headingRightItem={() => (
<ActionButton
onClick={openModal}
label="Download All"
Icon={FaCloudDownloadAlt}
/>
)}
# Table Column Heading [{key: id, heading: Id }, ...]
heading={table_column_heading}
# Table Row data [{id: { value: 1 }}, ....]
data={table_data}
/>
);
}
Modal Component
import Modal from "@aio/components/Modal";
const ExampleModal = (props) => {
const [modal, setModal] = useState(false);
const handleClose = () => {
setModal(false);
};
const handleCancel = () => {
setModal(false);
}
const handleSubmit = () => {
alert('Submit is working..!');
handleClose();
}
return (
<Modal
isOpen={modal}
onClose={handleClose}
heading={"AIO Dashboard"}
positiveText={"Save Changes"}
negativeText={"Cancel"}
onCancel={handleCancel}
onSubmit={handleSubmit}
>
);
}
Input Text Component
import Input from "@aio/components/Input";
<Input
inputContainerStyle={{ padding: "15px 30px" }}
type="text"
placeholder="Email"
onChange={(e) => console.log(e)}
name="email"
label={"Email"} />
