Asim-Tahir / linvoice

Linvoice is a simple invoice 📃 management application. It is powered by React, Redux and Redux Toolkit.

Linvoice is simple invoince 📃 management application.

Report Bug  •  Request Feature

Screenshot 👀

The Home Page 🏠

View the services on your invoice

Look at invoices as detailed

Add a Invoice

Add Service to Invoice

Let's talk about statistics 📈

Also have dark/light mode support 🌞/🌚

Installation

1. Clone repo in your local machine

git clone https://github.com/Asim-Tahir/linvoice.git

git clone [e-mail]:Asim-Tahir/linvoice.git

2. Install dependencies

This project uses yarn and yarn workspaces to manage dependencies. Please make sure you have yarn installed.

yarn

3. Run the app

yarn dev

Folder structure

packages/ workspace folder

This folder contains all the packages that are used in the application.

assets/ folder

├───assets │ ├───images │ └───styles

This folder contains all the images and core tailwindcss styles.

components/ folder

This folder contains all the components that are used in the application.

├───components │ ├───atoms │ │ └───a11y │ ├───molecules │ │ ├───cards │ │ ├───chart │ │ └───dashboard │ │ └───invoice │ │ └───table │ ├───organisms │ │ ├───dashboard │ │ │ ├───invoices │ │ │ │ └───table │ │ │ └───services │ │ │ └───table │ │ └───sidebar │ ├───pages │ │ ├───account │ │ └───dashboard │ │ └───invoices │ ├───styled │ │ ├───atoms │ │ │ └───typography │ │ ├───molecules │ │ ├───organisms │ │ ├───pages │ │ └───templates │ └───templates │ └───dashboard

context/ folder

This folder contains all the custom react context that are used in the application.

├───context │ └───tests

hooks/ folder

This folder contains all the custom react hooks that are used in the application.

├───hooks │ └───store

icon/ folder

This folder contains all the icons and Icon component that are used in the application.

├───icon │ ├───icons │ │ ├───account │ │ ├───brand │ │ ├───filled │ │ └───outline │ ├───types │ └───Icon.tsx <- Icon component

router/ folder

This folder contains all routes and route component that are used in the application.

├───router │ ├───routes │ ├───types | └───index.tsx <- Router component

store/ folder

This folder contains redux & redux-toolkit store that are used in the application. And tests for store.

├───store │ ├───tests │ │ ├───invoices │ │ └───services │ └───types

utils/ folder

└───utils

This folder contains all the utils function that are used in the application.

`other` folders

This folders contains all the other files that are used in the application.

types folder contain global typescript types. email folder contain email templates are used for sending emails.

├───types ├───email │ └───templates

config/ workspace folder

This folder contains all the configuration files for the application.

├───eslint-config ├───jest-config │ ├───preset │ │ ├───babel-jest │ │ ├───ts-jest │ │ └───vite │ └───transformer ├───stylelint-config └───tsconfig

src/ folder

This folder contains core application files. And this files is start point for application.

Running tests

yarn workspaces foreach run test

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the Apache License. See LICENSE for more information.

Credits

Windmill Dashboard by Estevan Maito under MIT License

Windmill React UI by Estevan Maito under MIT License