Kindly wait a moment, post will be visible in just 5 seconds.

No Preview

Rizwan Khan

Posted on 7 May 2023

AIO - Admin dashboard Project

Ad Banner
No Preview
Getting Started

To run the AIO Admin Dashboard locally, clone the GitHub repository and execute the following commands: git clone https://github.com/Rizwan17/aio-dashboard.git


cd aio-dashboard


npm install


npm run dev


# or


yarn


yarn dev


Welcome to the AIO Admin Dashboard!


This dashboard has been developed with lots of love using Next.js and comes with a wide range of powerful features that can significantly reduce your development time. Below, you'll find a list of available UI components and their functionalities to help you build a stunning admin interface. Useful UI Components


Layout Component


The Layout component provides a Header and Sidebar for your dashboard, bringing up Top Header and Side Navigation Controls for easy navigation. Example usage: import Layout from "@aio/components/layout";




const Home = (props) => (


    <Layout>


        <p>Hello World</p>


    </Layout>


);


Page Header Component


The Page Header component renders a page heading, subheading, and action components on the right side of the header. It allows you to customize the header based on the page content. Example usage: 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 the AIO dashboard"}


                rightItem={() => (


                    <ActionButton


                        onClick={() => setModal(true)}


                        Icon={AiOutlinePlusCircle}


                        label="Add New User"


                    />


                )}


            />


        </>


    );


};




Section Component


The Section component acts as a container that provides alignment and spacing for your page content, helping you structure the layout easily. Example usage: 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}


      />


      {/* Additional DataCard components or other content can be added here */}


    </Section>


  );


};


Table Component


The Table component allows you to render tables with customizable headings, subheadings, right-side components, column headings, and row data. It is perfect for displaying tabular data in an organized way. Example usage: import Table from "@aio/components/Table";




const BillingHistory = () => {


    return (


        <Table


            mainHeading={"Billing history"}


            subHeading={"Download your previous plan bill and usage details."}


            headingRightItem={() => (


                <ActionButton


                    onClick={openModal}


                    label="Download All"


                    Icon={FaCloudDownloadAlt}


                />


            )}


            heading={table_column_heading}


            data={table_data}


        />


    );


};



Modal Component


The Modal component provides a modal dialog for displaying important information or actions. It offers customization options for the heading, positive/negative button text, and callbacks for handling modal events. Example usage: 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}


        >


            {/* Modal content goes here */}


        </Modal>


    );


};



Input Text Component


The Input Text component renders a customizable text input field. You can adjust styles, placeholders, and handle onChange events for user input. Example usage: import Input from "@aio/components/Input";



<Input


    inputContainerStyle={{ padding: "15px 30px" }}


    type="text"


    placeholder="Email"


    onChange={(e) => console.log(e)}


    name="email"


    label={"Email"}


/>


Thank you for choosing AIO Dashboard. If you have any questions or feedback, feel free to comment and let us know. Happy coding!

0

2K

0

No Preview

Rizwan Khan

India

Coding is an art and I love art

Explore more similar Post

0 Comments

Loading..