From db693ab4000405f5b02e71dfaf78efe6884b775b Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Mon, 26 Sep 2022 20:00:09 +0530 Subject: First Commit --- src/App.css | 38 ------ src/App.js | 48 +++++--- src/App.scss | 41 +++++++ src/App.test.js | 8 -- src/classes/brand.js | 44 +++++++ src/classes/item.js | 67 ++++++++++ src/components/editors/item-editor.js | 177 +++++++++++++++++++++++++++ src/components/editors/scss/item-editor.scss | 88 +++++++++++++ src/components/tables/item-table.js | 78 ++++++++++++ src/components/tables/scss/table.scss | 49 ++++++++ src/index.css | 13 -- src/index.js | 7 -- src/logo.svg | 1 - src/reportWebVitals.js | 13 -- src/setupTests.js | 5 - src/views/manage/items.js | 46 +++++++ src/views/new-invoice.js | 33 +++++ 17 files changed, 652 insertions(+), 104 deletions(-) delete mode 100644 src/App.css create mode 100644 src/App.scss delete mode 100644 src/App.test.js create mode 100644 src/classes/brand.js create mode 100644 src/classes/item.js create mode 100644 src/components/editors/item-editor.js create mode 100644 src/components/editors/scss/item-editor.scss create mode 100644 src/components/tables/item-table.js create mode 100644 src/components/tables/scss/table.scss delete mode 100644 src/index.css delete mode 100644 src/logo.svg delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js create mode 100644 src/views/manage/items.js create mode 100644 src/views/new-invoice.js (limited to 'src') diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 3784575..d75d8e5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,34 @@ -import logo from './logo.svg'; -import './App.css'; +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma -function App() { + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import './App.scss'; +import { BrowserRouter, Route, Routes } from "react-router-dom"; +import ManageItemsPage from './views/manage/items'; + +const App = () => { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ +
+ + }/> + 404}/> + +
+ ); } diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..81bde15 --- /dev/null +++ b/src/App.scss @@ -0,0 +1,41 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&display=swap'); + +* { + font-family: 'Open Sans', sans-serif; +} + +body { + margin: 0; + padding: 0; + //background-color: #dfe0e8; + background-color: #282a36; + color: #f8f8f2; +} + +main { + //background-color: #FDFDFD; + background-color: #282a36; + width: 100%; + max-width: 1500px; + margin: 0 auto; + min-height: 100vh; + padding: 0.7rem 0.5rem; + box-sizing: border-box; +} diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/classes/brand.js b/src/classes/brand.js new file mode 100644 index 0000000..48bc974 --- /dev/null +++ b/src/classes/brand.js @@ -0,0 +1,44 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import axios from "axios"; + +/* TODO: implement a better way to handle + * API responses/errors + * + * maybe I can send a notification when a brand + * is successfully added, or when some error occours + */ + +export class Brand { + constructor() { + this.Id = null; + this.Name = ""; + } +} + +export const deleteBrand = (id, ok, fail) => { + axios.delete(`/brand/${id}`) + .then(res => ok()) + .catch(err => fail()) +} + +export const getAllBrands = (ok, fail) => { + axios.get("/brand/all") + .then(res => ok(res.data)) + .catch(err => fail()) +} diff --git a/src/classes/item.js b/src/classes/item.js new file mode 100644 index 0000000..3985e9d --- /dev/null +++ b/src/classes/item.js @@ -0,0 +1,67 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import axios from "axios"; +import { Brand } from "./brand" + +/* TODO: implement a better way to handle + * API responses/errors + * + * maybe I can send a notification when an item + * is successfully added, or when some error occours + */ + +export class Item { + constructor() { + this.Id = null; + this.Brand = new Brand(); + this.UnitOfMeasure = ""; + this.Name = ""; + this.Description = ""; + this.HSN = ""; + this.UnitPrice = 0.00; + this.GSTPercentage = 0.00; + this.MinQuantity = 0.00; + this.MaxQuantity = 0.00; + } +} + +export class InvoiceItem extends Item { + constructor() { + super(); + this.Quantity = 0.00; + this.DiscountPercentage = 0.00; + } +} + +export const saveItem = (item, ok, fail) => { + axios.post("/item/new", item) + .then(res => { console.log(res);ok()}) + .catch((err) => fail()) +} + +export const deleteItem = (id, ok, fail) => { + axios.delete(`/item/${id}`) + .then(res => ok()) + .catch((err) => fail()) +} + +export const getAllItems = (ok, fail) => { + axios.get("/item/all") + .then(res => ok(res.data)) + .catch(err => fail()) +} diff --git a/src/components/editors/item-editor.js b/src/components/editors/item-editor.js new file mode 100644 index 0000000..af505ac --- /dev/null +++ b/src/components/editors/item-editor.js @@ -0,0 +1,177 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import { Item, saveItem } from './../../classes/item' +import { Brand, getAllBrands } from './../../classes/brand' +import './scss/item-editor.scss' + +import { useState, useEffect } from 'react'; + +const ItemEditor = (props) => { + const [name, setName] = useState(""); + const [desc, setDesc] = useState(""); + const [HSN, setHSN] = useState(""); + const [unit, setUnit] = useState(""); + const [unitPrice, setUnitPrice] = useState(0.00); + const [gstP, setGSTP] = useState(0.00); + const [minQty, setMinQty] = useState(0.00); + const [maxQty, setMaxQty] = useState(0.00); + const [brand, setBrand] = useState(new Brand()); + const [savedBrands, setSavedBrands] = useState([]); + + // get saved brands from API + // needed by the brands dropdown menu + useEffect(() => { + // TODO: handle error + getAllBrands(setSavedBrands, () => {}); + }, []) + + const handleSubmit = (e) => { + e.preventDefault(); + + const item = new Item(); + item.Name = name; + item.Description = desc; + item.HSN = HSN; + item.UnitOfMeasure = unit; + item.UnitPrice = unitPrice; + item.GSTPercentage = gstP; + item.MinQuantity = minQty; + item.MaxQuantity = maxQty; + item.Brand = brand; + + // TODO: Save is for new items. implement modification too + saveItem(item, handleSuccess, handleFail); + } + + const handleSuccess = () => { + clearAll(); + props.callback(); + } + + const handleFail = () => { + alert("fail"); + } + + const handleBrandSelect = (e) => { + const b = savedBrands.filter(i => i.Id === e.target.value )[0]; + setBrand(b ? b : new Brand()); + } + + const clearAll = () => { + setName(""); + setDesc(""); + setHSN(""); + setUnit(""); + setUnitPrice(0.00); + setGSTP(0.00); + setMinQty(0.00); + setMaxQty(0.00); + setBrand(new Brand()) + } + + const handleCancel = () => { + // TODO: hide this component or something + clearAll(); + } + + const validateFloatInput = (e, callback) => { + const f = parseFloat(e.target.value); + f && callback(f) + } + + return ( +
+

Add New Item

+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); +} + +export default ItemEditor; diff --git a/src/components/editors/scss/item-editor.scss b/src/components/editors/scss/item-editor.scss new file mode 100644 index 0000000..968795a --- /dev/null +++ b/src/components/editors/scss/item-editor.scss @@ -0,0 +1,88 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +.editor-wrapper { + width: 100%; + margin: auto; + padding: 0; + margin: 0; + position: relative; + p { + text-align: center; + font-weight: bold; + font-size: 1.7rem; + color: #bd93f9; + } +} + +.editor { + padding-bottom: 2.5rem; + margin: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + min-width: 90%; + + label { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + max-width: 24rem; + width: 90%; + padding: 0.3rem 0.1rem; + border-bottom: 1px dotted #d0afff; + + select,input { + padding: 0.2rem; + max-width: 13rem; + width: 90%; + box-sizing: border-box; + background-color: #00000000; + border: 1px solid #bd93f9; + color: white; + border-radius: 4px; + outline: 0; + } + } + + .buttons { + position: absolute; + display: flex; + justify-content: space-between; + width: 13.5rem; + input { + padding: 0.2rem 0; + width: 4rem; + background-color: #00000000; + border: 1px solid #bd93f9; + color: white; + border-radius: 4px; + transition: background-color 0.4s, color 0.4s; + } + input:hover { + background-color: #bd93f9; + color: black; + } + bottom: 0; + left: 0; + right: 0; + margin: auto; + } +} diff --git a/src/components/tables/item-table.js b/src/components/tables/item-table.js new file mode 100644 index 0000000..c1115c1 --- /dev/null +++ b/src/components/tables/item-table.js @@ -0,0 +1,78 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import './scss/table.scss'; +import { deleteItem } from './../../classes/item'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons' + +const ItemTable = (props) => { + const handleDelete = (i) => { + // TODO: add confirmation prompt + deleteItem(i.Id, handleDelSuccess, handleDelFail); + } + + const handleDelSuccess = () => { + props.refresh(); + } + + const handleDelFail = () => { + alert("fail") + } + + return ( + + + + + + + + + + + + + + + + + + {props.items && props.items.map((i, id=id+1) => ( + + + + + + + + + + + + + + ))} + +
S. NoNameDescriptionBrand NameUOMHSNUnit PriceGST %Min QtyMax Qty
{id+1}{i.Name}{i.Description}{i.Brand.Name}{i.UnitOfMeasure}{i.HSN}{i.UnitPrice}{i.GSTPercentage}{i.MinQuantity}{i.MaxQuantity} + alert("editing coming soon")}/> + handleDelete(i)}/> +
+ ); +} + +export default ItemTable; diff --git a/src/components/tables/scss/table.scss b/src/components/tables/scss/table.scss new file mode 100644 index 0000000..44d7f57 --- /dev/null +++ b/src/components/tables/scss/table.scss @@ -0,0 +1,49 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +table { + width: 90%; + margin: auto; + + th { + box-sizing: border-box; + background-color: #383a59; + font-weight: normal; + text-align: left; + padding-left: 0.3rem; + } + + tr:hover { + background-color: rgba(#383a59, 0.4); + } + + td { + border-bottom: 1px solid white; + } + + td.empty { + border-bottom: 1px solid gray; + } + + td.buttons { + display: flex; + justify-content: space-evenly; + align-items: center; + border: none; + height: 1.4rem; + } +} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index d563c0f..593edf1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( @@ -10,8 +8,3 @@ root.render( ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/src/views/manage/items.js b/src/views/manage/items.js new file mode 100644 index 0000000..3190504 --- /dev/null +++ b/src/views/manage/items.js @@ -0,0 +1,46 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* This page shows a list of all the items + * with options to add/modify/delete items + */ + +import { useState, useEffect } from 'react'; + +import { getAllItems } from '../../classes/item'; +import ItemEditor from './../../components/editors/item-editor'; +import ItemTable from './../../components/tables/item-table'; + +const ManageItemsPage = () => { + const [allItems, setAllItems] = useState([]); + // TODO: handle error + const updateList = () => + getAllItems(setAllItems, () => {}); + + useEffect(() => { + updateList(); + }, []); + + return ( + <> + + + + ); +} + +export default ManageItemsPage; diff --git a/src/views/new-invoice.js b/src/views/new-invoice.js new file mode 100644 index 0000000..bba149a --- /dev/null +++ b/src/views/new-invoice.js @@ -0,0 +1,33 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import NewBrand from './../components/doc-editors/new-brand'; +import ItemEditor from './../components/doc-editors/item-editor'; + +const NewInvoicePage = () => { + return ( + <> +

Billing Page

+

Add new brand:

+ +

Add new item:

+ + + ); +} + +export default NewInvoicePage; -- cgit v1.2.3