QuickBill

152 |

153 |

154 | 168 |

169 | 170 |

171 |

172 | Date 173 | this.props.setIssueDate(date)} 178 | onFocusChange={({focused}) => this.setState({ issueFocused: !this.state.issueFocused})} 179 | isOutsideRange={() => false} 180 | /> 181 |

182 | 183 |

184 | Due Date 185 | this.props.setDueDate(date)} 190 | onFocusChange={({focused}) => this.setState({ dueFocused: !this.state.dueFocused})} 191 | isOutsideRange={() => false} 192 | /> 193 |

194 | 195 |

196 | Invoice # 197 | 204 |

205 | 206 |

207 | Job 208 | 215 |

216 |

217 | 218 |

219 |

220 | Bill from: 221 | 229 |

235 |                             <input 
236 |                                 type="text"
237 |                                 className="input-element" 
238 |                                 name="phoneFrom"
239 |                                 value={invoiceDetails.phoneFrom}
240 |                                 onChange={this.handleChange}
241 |                                 placeholder="Phone"
242 |                                 />
243 |                             <input 
244 |                                 type="email"
245 |                                 className="input-element" 
246 |                                 name="emailFrom"
247 |                                 value={invoiceDetails.emailFrom}
248 |                                 onChange={this.handleChange}
249 |                                 placeholder="Email"
250 |                                 />
251 |                         </div>
252 |                         <div className="address-element">
253 |                             <label htmlFor="to">Bill to:</label>
254 |                             <input 
255 |                                 type="text"
256 |                                 className="input-element" 
257 |                                 name="to"
258 |                                 value={invoiceDetails.to}
259 |                                 onChange={this.handleChange}
260 |                                 placeholder="To"
261 |                                 />
262 |                             <textarea 
263 |                                 name="addressTo"
264 |                                 value={invoiceDetails.addressTo}
265 |                                 onChange={this.handleChange}
266 |                                 placeholder="Address"
267 |                             />
268 |                             <input 
269 |                                 type="text"
270 |                                 className="input-element" 
271 |                                 name="phoneTo"
272 |                                 value={invoiceDetails.phoneTo}
273 |                                 onChange={this.handleChange}
274 |                                 placeholder="Phone"
275 |                                 />
276 |                             <input 
277 |                                 type="email"
278 |                                 className="input-element" 
279 |                                 name="emailTo"
280 |                                 value={invoiceDetails.emailTo}
281 |                                 onChange={this.handleChange}
282 |                                 placeholder="Email"
283 |                                 />
284 |                         </div>
285 |                     </div>
286 |                     <hr />
287 |                     <Item />
288 |                     <hr />
289 |                     <div className="invoice__bill">
290 |                         <div className="bill-detail">                        
291 |                             <div>
292 |                                 <span>Subtotal</span>
293 |                                 <h2>{this.props.currency["value"]} {subTotal.toFixed(2)}</h2>
294 |                             </div>
295 |                             {discountElement}
296 |                             <div>
297 |                                 <span>Taxes</span>
298 |                                 <h2>{(this.props.addInfo["tax"] >= 0 ? this.props.addInfo["tax"] : 0) || 0} %</h2>
299 |                             </div>
300 |                             {vatElement}
301 |                             {amountPaidElement}
302 |                             <div>
303 |                                 <span>Total ({this.props.currency["label"]})</span>
304 |                                 <h2 className="bill-total">{this.props.currency["value"]} {amount.toFixed(2)}</h2>
305 |                             </div>
306 |                         </div>
307 |                     </div>
308 |                     <hr />
309 |                 </div>
310 |             </div>
311 |         );
312 |     }
313 | }
314 | 
315 | function mapStateToProps(state, ownProps) {
316 |     return {
317 |         currency: state.currency,
318 |         addInfo: state.addInfo,
319 |         items: state.items,
320 |         invoiceDetails: state.invoiceDetails,
321 |         status: state.status,
322 |         issueDate: state.issueDate,
323 |         dueDate: state.dueDate,
324 |         paidStatus: state.paidStatus
325 |     }
326 | }
327 | 
328 | function mapDispatchToProps(dispatch) {
329 |     return {
330 |         setInvoiceDetails: (name, value) => dispatch(setInvoiceDetails(name, value)),
331 |         setStatus: (statusObj) => dispatch(setStatus(statusObj)),
332 |         setIssueDate: (issueDate) => dispatch(setIssueDate(issueDate)),
333 |         setDueDate: (dueDate) => dispatch(setDueDate(dueDate))
334 |     }
335 | }
336 | 
337 | export default connect(mapStateToProps, mapDispatchToProps)(Invoice);

--------------------------------------------------------------------------------
/app/components/dashboard/ItemRow.js:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | import React, { Component } from "react";
  3 | import { setItem } from "../../actions";
  4 | import { connect } from "react-redux";
  5 | 
  6 | type Props = {
  7 |     items: Object,
  8 |     itemId: number,
  9 |     setItem: Function,
 10 |     width: number
 11 | };
 12 | 
 13 | type State = {
 14 |     obj: {
 15 |         name: string,
 16 |         quantity: ?number,
 17 |         description: string,
 18 |         price: ?number,
 19 |     },
 20 | };
 21 | 
 22 | 
 23 | class ItemRow extends Component {
 24 |     state: State;
 25 | 
 26 |     constructor(props: Props) {
 27 |         super(props);
 28 |         this.state = {
 29 |             obj: {
 30 |                 name: "",
 31 |                 description: "",
 32 |                 price: undefined,
 33 |                 quantity: undefined
 34 |             }
 35 |         }
 36 |     }
 37 | 
 38 |     componentDidMount() {
 39 |         const { items } = this.props;
 40 |         if (items[this.props.itemId] != null) {
 41 |             this.setState({
 42 |                 obj: items[this.props.itemId]
 43 |             });
 44 |         }
 45 |     }
 46 | 
 47 |     handleChange = (e: Event) => {
 48 |         if (e.target instanceof HTMLInputElement) {
 49 |             const { obj } = this.state;
 50 |             const { name, value } = e.target;
 51 |             obj[name] = value;
 52 |             this.setState({
 53 |                 obj
 54 |             });
 55 |             const itemId = this.props.itemId;
 56 | 
 57 |             this.props.setItem(itemId, obj);
 58 |         }
 59 |     }
 60 | 
 61 |     render() {
 62 |         const { obj: data } = this.state;
 63 |         let price;
 64 | 
 65 |         if (parseFloat(data.quantity) * parseFloat(data.price) > 0 && data.quantity && data.price) {
 66 |             price = (<div style={this.props.width >= 700 ? style.inputStyle : responsiveStyle.inputStyle}>
 67 |                         {(data.quantity * data.price).toFixed(2)}
 68 |                     </div>);
 69 |         } else {
 70 |             price = (<div style={this.props.width >= 700 ? style.inputStyle : responsiveStyle.inputStyle}>
 71 |                         0
 72 |                     </div>);
 73 |         }
 74 | 
 75 |         return(
 76 |             <div style={this.props.width >= 700 ? style.itemRow : responsiveStyle.itemRow} className="item-row">
 77 |                 <input
 78 |                     style={this.props.width >= 700 ? style.inputStyle : responsiveStyle.inputStyle} 
 79 |                     name="name"
 80 |                     type="text"
 81 |                     value={data.name}
 82 |                     onChange={this.handleChange}
 83 |                     placeholder="Item Name"
 84 |                 />
 85 |                 <input
 86 |                     style={this.props.width >= 700 ? style.inputStyle : responsiveStyle.inputStyle}
 87 |                     name="description"
 88 |                     type="text"
 89 |                     value={data.description}
 90 |                     onChange={this.handleChange}
 91 |                     placeholder="Description"
 92 |                 />
 93 |                 <input
 94 |                     style={this.props.width >= 700 ? style.inputStyle : responsiveStyle.inputStyle}
 95 |                     name="quantity"
 96 |                     type="text"
 97 |                     value={data.quantity}
 98 |                     onChange={this.handleChange}
 99 |                     placeholder="Quantity"
100 |                 />
101 |                 <input
102 |                     style={this.props.width >= 700 ? style.inputStyle : responsiveStyle.inputStyle}
103 |                     name="price"
104 |                     type="text"
105 |                     value={data.price}
106 |                     onChange={this.handleChange}
107 |                     placeholder="Price"
108 |                 />
109 |                 {price}
110 |             </div>
111 |         );
112 |     }
113 | }
114 | 
115 | const style = {
116 |     itemRow: {
117 |         display: "flex",
118 |         flexDirection: "row",
119 |         alignItems: "center",
120 |         width: "100%"
121 |     },
122 |     inputStyle: {
123 |         border: "0px",
124 |         maxWidth: "160px",
125 |         width: "100%",
126 |         padding: "2px",
127 |         backgroundColor: "#FBFCFC",
128 |     },
129 |     saveButtonStyle: {
130 |         borderRadius: "3px",
131 |         color: "#fff",
132 |         margin: "4px 15px",
133 |         backgroundColor: "#01D58A",
134 |         padding: "3px 12px",
135 |     },
136 |     saveButtonHoverStyle: {
137 |         borderRadius: "3px",
138 |         color: "#fff",
139 |         margin: "4px 15px",
140 |         backgroundColor: "rgba(3, 199, 130, 1)",
141 |         padding: "3px 12px",
142 |     },
143 |     deleteButtonStyle: {
144 |         fontSize: "18px",
145 |         color: "#999",
146 |         margin: "4px 15px 4px 0"
147 |     }
148 | }
149 | 
150 | const responsiveStyle = {
151 |     itemRow: {
152 |         display: "flex",
153 |         flexDirection: "row",
154 |         alignItems: "center",
155 |         width: "100%",
156 |         flexWrap: "Wrap"
157 |     },
158 |     inputStyle: {
159 |         border: "0px",
160 |         maxWidth: "260px",
161 |         width: "100%",
162 |         padding: "5px",
163 |         margin: "2px",
164 |         backgroundColor: "#FBFCFC",
165 |     },
166 | }
167 | 
168 | function mapStateToProps(state, ownProps) {
169 |     return {
170 |         items: state.items,
171 |         width: state.width
172 |     }
173 | }
174 | 
175 | function mapDispatchToProps(dispatch) {
176 |     return {
177 |         setItem: (id, value) => dispatch(setItem(id, value)),
178 |     }
179 | }
180 | 
181 | export default connect(mapStateToProps, mapDispatchToProps)(ItemRow);

--------------------------------------------------------------------------------
/app/components/dashboard/Preview.js:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | import React, { Component } from "react";
  3 | import jsPDF from "jspdf";
  4 | import { connect } from "react-redux";
  5 | import moment from "moment";
  6 | 
  7 | type Props = {
  8 |     currency: Object,
  9 |     items: Object,
 10 |     addInfo: {
 11 |         discount: ?number,
 12 |         tax: ?number,
 13 |         amountPaid: ?number,
 14 |         vat: ?number
 15 |     },
 16 |     invoiceDetails: {
 17 |         to: string,
 18 |         from: string,
 19 |         addressTo: string,
 20 |         addressFrom: string,
 21 |         phoneTo: string,
 22 |         phoneFrom: string,
 23 |         emailTo: string,
 24 |         emailFrom: string,
 25 |         invoiceNumber: string,
 26 |         job: string,
 27 |         invoiceType: string
 28 |     },
 29 |     status: {value: ?string, label: ?string},
 30 |     paidStatus: ?boolean,
 31 |     downloadStatus: ?boolean,
 32 |     dateFormat: ?string
 33 | };
 34 | 
 35 | 
 36 | class Preview extends Component {
 37 |     constructor(props) {
 38 |         super(props);
 39 |         this.pdfToHTML = this.pdfToHTML.bind(this);
 40 |     }
 41 | 
 42 |     pdfToHTML: () => void;
 43 | 
 44 |     componentDidMount() {
 45 |         const app = document.querySelector("#app");
 46 |         if (app) {
 47 |             app.className = "fix-navbar";
 48 |         }
 49 |         window.scrollTo(0, 0);
 50 |         if (this.props.downloadStatus) {
 51 |             this.pdfToHTML();
 52 |         }
 53 |     }
 54 | 
 55 |     componentWillUnmount() {
 56 |         const app = document.querySelector("#app");
 57 |         if (app) {
 58 |             app.className = "";
 59 |         }
 60 |     }
 61 | 
 62 |     pdfToHTML() {
 63 |         let element = document.querySelector(".invoice");
 64 |         let options = {
 65 |             onrendered: function(canvas) {
 66 |                 let imgstring = canvas.toDataURL("image/jpeg", 1.0);
 67 |                 let pdf = new jsPDF();
 68 |                 if (element) {
 69 |                     let width = (element.offsetWidth *  0.264583) + 10;
 70 |                     let height = element.offsetHeight *  0.264583;
 71 |                     pdf.deletePage(1);
 72 |                     pdf.addPage(width, height);
 73 |                     pdf.addImage(imgstring, 'JPEG', 5, 5);
 74 |                     pdf.save("download.pdf");
 75 |                 }
 76 |             }
 77 |         };
 78 |         html2canvas(element, options);
 79 |     }
 80 | 
 81 |     render() {
 82 |         const { items, addInfo, invoiceDetails, issueDate, dueDate, dateFormat, width, paidStatus } = this.props;
 83 | 
 84 |         let discountElement;
 85 |         let vatElement;
 86 |         let amount = 0;
 87 |         let subTotal = 0;
 88 |         let discount = 0;
 89 |         let tax = 0;
 90 |         let vat = 0;
 91 |         let job;
 92 |         let itemElement;
 93 |         let amountPaidElement;
 94 | 
 95 |         if (invoiceDetails.job.length > 0) {
 96 |             job = (
 97 |                 <div className="info">
 98 |                     <label htmlFor="job">Job</label>
 99 |                     {invoiceDetails.job}
100 |                 </div>
101 |             );
102 |         }
103 | 
104 |         if (items) {
105 |             itemElement = Object.keys(items).map((key, index) => {
106 |                 let data = items[key];
107 |                 if (data) {
108 |                     let itemPrice = (
109 |                         parseFloat(data["quantity"]) * parseFloat(data["price"]) > 0
110 |                         ? (data["quantity"] * data["price"]).toFixed(2) : 0
111 |                     );                    
112 |                     return (
113 |                         <div key={index} className="invoice__item-list__item">
114 |                             <div>
115 |                                 <h4>Name</h4>
116 |                                 <span>{data["name"]}</span>
117 |                             </div>
118 |                             <div>
119 |                                 <h4>Description</h4>
120 |                                 <span>{data["description"]}</span>
121 |                             </div>
122 |                             <div>
123 |                                 <h4>Qty</h4>
124 |                                 <span>{data["quantity"]}</span>
125 |                             </div>
126 |                             <div>
127 |                                 <h4>Price</h4>
128 |                                 <span>{data["price"]}</span>
129 |                             </div>
130 |                             <div>
131 |                                 <h4>Subamount</h4>
132 |                                 <span>{this.props.currency["value"]} {itemPrice}</span>
133 |                             </div>
134 |                         </div>
135 |                     );
136 |                 } else {
137 |                     return;
138 |                 }
139 |             });
140 |         }
141 | 
142 |         if(addInfo["vat"] && addInfo["vat"] > 0) {
143 |             vatElement = (
144 |                 <div>
145 |                     <span>VAT</span>
146 |                     <h2>{this.props.addInfo["vat"]} %</h2>
147 |                 </div>
148 |             )
149 |         }
150 | 
151 |         if (addInfo["discount"] && addInfo["discount"] > 0) {
152 |             discountElement = (<div>
153 |                             <span>Discount</span>
154 |                             <h2>{addInfo["discount"]} %</h2>
155 |                         </div>);
156 |         }
157 | 
158 |         if (addInfo["amountPaid"] && addInfo["amountPaid"] > 0 && paidStatus) {
159 |             amountPaidElement = (
160 |                         <div>
161 |                             <span>Paid to Date</span>
162 |                             <h2>{this.props.currency["value"]} {addInfo["amountPaid"]}</h2>
163 |                         </div>
164 |                     );
165 |         }
166 | 
167 |         for (let key in items) {
168 |             if (items.hasOwnProperty(key)) {
169 |                 if (items[key] && parseFloat(items[key]["quantity"]) > 0 && parseFloat(items[key]["price"]) > 0) {
170 |                     subTotal = subTotal + (items[key]["quantity"] * items[key]["price"]);
171 |                     let tax = 0;
172 |                     
173 |                     if (addInfo["discount"] && addInfo["discount"] >= 0 ) {
174 |                         discount = (addInfo["discount"] / 100);
175 |                     }
176 |                     if (addInfo["tax"] && addInfo["tax"] >= 0) {
177 |                         tax = (addInfo["tax"] / 100);
178 |                     }
179 |                     if (addInfo["vat"] && addInfo["vat"] >= 0) {
180 |                         vat = (addInfo["vat"] / 100);
181 |                     }
182 |                     if (addInfo["amountPaid"] && addInfo["amountPaid"] > 0 && paidStatus) {
183 |                         amount = (subTotal - (subTotal * discount)) + (subTotal * tax) + (subTotal * vat) - parseFloat(addInfo["amountPaid"]);
184 |                     }
185 |                     else {
186 |                         amount = (subTotal - (subTotal * discount)) + (subTotal * tax) + (subTotal * vat);
187 |                     }
188 |                 }
189 |             }
190 |         }
191 | 
192 |         return ( 
193 |             <div className="dashboard">
194 |                 <div className="preview-wrapper">
195 |                     <div className="preview">
196 |                         <div className="invoice">
197 |                             <link rel="stylesheet" href="/assets/css/styles.css"/>
198 |                             <div className="invoice__header">
199 |                                 <h4>{this.props.status["label"]}</h4>
200 |                                 <h2>{invoiceDetails.invoiceType}</h2>
201 |                             </div>
202 | 
203 |                             <div className="invoice__info">
204 |                                 <div className="info">
205 |                                     <label htmlFor="date">Date</label>
206 |                                     {moment(issueDate).format(dateFormat["value"])}
207 |                                 </div>
208 | 
209 |                                 <div className="info">
210 |                                     <label htmlFor="date">Due Date</label>
211 |                                     {moment(dueDate).format(dateFormat["value"])}
212 |                                 </div>
213 | 
214 |                                 <div className="info">
215 |                                     <label htmlFor="invoice">Invoice #</label>
216 |                                     {invoiceDetails.invoiceNumber}
217 |                                 </div>
218 | 
219 |                                 {job}
220 |                             </div>
221 | 
222 |                             <div className="invoice__info">
223 |                                 <div className="address-element">
224 |                                     <label htmlFor="from">Bill from:</label>
225 |                                     <span>{ invoiceDetails.from }</span>
226 |                                     <span>{ invoiceDetails.addressFrom }</span>
227 |                                     <span>{ invoiceDetails.phoneFrom }</span>
228 |                                     <span>{ invoiceDetails.emailFrom }</span>
229 |                                 </div>
230 |                                 <div className="address-element">
231 |                                     <label htmlFor="to">Bill to:</label>
232 |                                     <span>{ invoiceDetails.to }</span>
233 |                                     <span>{ invoiceDetails.addressTo }</span>
234 |                                     <span>{ invoiceDetails.phoneTo }</span>
235 |                                     <span>{ invoiceDetails.emailTo }</span>
236 |                                 </div>
237 |                             </div>
238 |                             <hr />
239 |                             <div className="invoice__item-list">
240 |                                 <div className="invoice__item-list__head">
241 |                                     <div>Item</div>
242 |                                     <div>Description</div>
243 |                                     <div>Qty</div>
244 |                                     <div>Price</div>
245 |                                     <div>SubAmount</div>
246 |                                 </div>
247 |                                 {itemElement}
248 |                             </div>
249 |                             <hr />
250 |                             <div className="invoice__bill">
251 |                                 <div className="bill-detail">                        
252 |                                     <div>
253 |                                         <span>Subtotal</span>
254 |                                         <h2>{this.props.currency["value"]} {subTotal.toFixed(2)}</h2>
255 |                                     </div>
256 |                                     {discountElement}
257 |                                     <div>
258 |                                     <span>Taxes</span>
259 |                                         <h2>{(this.props.addInfo["tax"] >= 0 ? this.props.addInfo["tax"] : 0) || 0} %</h2>
260 |                                     </div>
261 |                                     {vatElement}
262 |                                     {amountPaidElement}
263 |                                     <div>
264 |                                         <span>Total ({this.props.currency["label"]})</span>
265 |                                         <h2 className="bill-total">{this.props.currency["value"]} {amount.toFixed(2)}</h2>
266 |                                     </div>
267 |                                 </div>
268 |                             </div>
269 |                             <hr />
270 |                         </div>
271 |                     </div>
272 | 
273 |                     <div className="preview-download">
274 |                         <div className="solid-btn solid-btn--ghost solid-btn--dashboard">
275 |                             <a className="ghost-btn ghost-btn--preview" onClick={this.pdfToHTML}>
276 |                                 <i className="fa fa-arrow-circle-down" aria-hidden="true"> </i> Download
277 |                             </a>
278 |                         </div>
279 |                     </div>
280 |                 </div>
281 |             </div>
282 |         );
283 |     }
284 | }
285 | 
286 | function mapStateToProps(state, ownProps) {
287 |     return {
288 |         currency: state.currency,
289 |         addInfo: state.addInfo,
290 |         items: state.items,
291 |         invoiceDetails: state.invoiceDetails,
292 |         status: state.status,
293 |         issueDate: state.issueDate,
294 |         dueDate: state.dueDate,
295 |         dateFormat: state.dateFormat,
296 |         downloadStatus: state.downloadStatus,
297 |         paidStatus: state.paidStatus
298 |     }
299 | }
300 | 
301 | export default connect(mapStateToProps, null)(Preview);

--------------------------------------------------------------------------------
/app/components/dashboard/SideNav.js:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | import React, { Component } from "react";
  3 | import Toggle from "react-toggle";
  4 | import Select from "react-select";
  5 | import { connect } from "react-redux";
  6 | import { Link } from "react-router-dom";
  7 | 
  8 | import { 
  9 |     setAddInfo,
 10 |     setPaidStatus,
 11 |     setCurrency,
 12 |     setDateFormat,
 13 |     setDownloadStatus
 14 | } from "../../actions";
 15 | 
 16 | const currencyData = require("./data.json");
 17 | 
 18 | type Props = {
 19 |     setAddInfo: Function,
 20 |     setPaidStatus: Function,
 21 |     setCurrency: Function,
 22 |     setDateFormat: Function,
 23 |     setDownloadStatus: Function,
 24 |     currency: Object,
 25 |     addInfo: {
 26 |         discount: ?number,
 27 |         tax: ?number,
 28 |         amountPaid: ?number,
 29 |         vat: ?number,
 30 |     },
 31 |     paidStatus: ?boolean,
 32 |     downloadStatus: ?boolean,
 33 |     dateFormat: ?string
 34 | };
 35 | 
 36 | const dateOptions = [
 37 |     { value: "MM/DD/YYYY", label: "MM/DD/YYYY" },
 38 |     { value: "DD/MM/YYYY", label: "DD/MM/YYYY" },
 39 |     { value: "YYYY/MM/DD", label: "YYYY/MM/DD" },
 40 | ]
 41 | 
 42 | class SideNav extends Component {
 43 |     constructor(props: Props) {
 44 |         super(props);
 45 |     }
 46 | 
 47 |     handleChange = (e: Event) => {
 48 |         if (e.target instanceof HTMLInputElement) {
 49 |             let discount = e.target.name == "discount" ? e.target.value : this.props.addInfo.discount;
 50 |             let tax = e.target.name == "tax" ? e.target.value : this.props.addInfo.tax;
 51 |             let vat = e.target.name == "vat" ? e.target.value : this.props.addInfo.vat;
 52 |             let amountPaid = e.target.name == "amountPaid" ? e.target.value: this.props.addInfo.amountPaid;
 53 |             this.props.setAddInfo(discount, tax, amountPaid, vat);
 54 |         }
 55 |     }
 56 | 
 57 |     currencyChange = (val: {value: ?string, label: ?string}) => {
 58 |         if (val) {
 59 |             this.props.setCurrency(val);
 60 |         }
 61 |         else {
 62 |             this.props.setCurrency({"value": "$", "label": "USD"});
 63 |         }
 64 |     }
 65 | 
 66 |     dateFormatChange = (val: {value: ?string, label: ?string }) => {
 67 |         if (val) {
 68 |             this.props.setDateFormat(val);
 69 |         }
 70 |         else {
 71 |             this.props.setDateFormat({value: "MM/DD/YYYY", label: "MM/DD/YYYY"});
 72 |         }
 73 |     }
 74 | 
 75 |     render() {
 76 |         let paidAmountInput;
 77 |         let { paidStatus } = this.props;
 78 |         if (paidStatus) {
 79 |             paidAmountInput = (
 80 |                 <div className="setting setting--paid">
 81 |                     <input 
 82 |                         type="text"
 83 |                         name="amountPaid"
 84 |                         value={this.props.addInfo.amountPaid}
 85 |                         onChange={this.handleChange} />
 86 |                 </div>
 87 |             );
 88 |         }
 89 | 
 90 |         return (
 91 |             <div className="side-nav">
 92 |                 <h4>Invoice Settings</h4>
 93 |                 <hr />
 94 |                 <div className="side-nav__element">
 95 |                     <div className="setting">
 96 |                         <span>Discount</span>
 97 |                         <input 
 98 |                             type="text"
 99 |                             name="discount"
100 |                             value={this.props.addInfo.discount}
101 |                             onChange={this.handleChange} />
102 |                     </div>
103 |                     <div className="setting">
104 |                         <span>Tax</span>
105 |                         <input 
106 |                             type="text"
107 |                             name="tax"
108 |                             value={this.props.addInfo.tax}
109 |                             onChange={this.handleChange} />
110 |                     </div>
111 | 
112 |                     <div className="setting">
113 |                         <span>Value added tax (VAT)</span>
114 |                         <input
115 |                             type="text"
116 |                             name="vat"
117 |                             value={this.props.addInfo.vat}
118 |                             onChange={this.handleChange} />
119 |                     </div>
120 | 
121 |                     <div className="setting setting--inline">
122 |                         <span>Paid to date</span>
123 |                         <label>
124 |                             <Toggle
125 |                                 checked={this.props.paidStatus}
126 |                                 icons={false}
127 |                                 onChange={() => {this.props.setPaidStatus(!this.props.paidStatus)}} />
128 |                         </label>
129 |                     </div>
130 | 
131 |                     {paidAmountInput}
132 | 
133 |                 </div>
134 |                 <hr className="full-line" />
135 |                 <div className="side-nav__inline-element">
136 |                     <div className="side-nav__element side-nav__element--select">
137 |                         <div className="setting">
138 |                             <span>Currency</span>
139 |                             <Select 
140 |                                 name="currency"
141 |                                 value={this.props.currency}
142 |                                 options={currencyData}
143 |                                 onChange={this.currencyChange}
144 |                             />
145 |                         </div>
146 |                     </div>
147 |                     <div className="side-nav__element side-nav__element--select">
148 |                         <div className="setting">
149 |                             <span>Date Format</span>
150 |                             <Select 
151 |                                 name="dateFormat"
152 |                                 searchable={false}
153 |                                 value={this.props.dateFormat}
154 |                                 options={dateOptions}
155 |                                 onChange={this.dateFormatChange}
156 |                             />
157 |                         </div>
158 |                     </div>
159 |                 </div>
160 |                 <hr className="full-line visiblity-check"/>
161 |                 <div className="side-nav__element visiblity-check">
162 |                     <div className="setting">
163 |                         <div className="solid-btn solid-btn--ghost">
164 |                             <Link to="preview" className="ghost-btn">
165 |                                 <i className="fa fa-eye" aria-hidden="true"></i> Preview
166 |                             </Link>
167 |                             <Link
168 |                                 to="preview"
169 |                                 className="ghost-btn"
170 |                                 onClick={() => {this.props.setDownloadStatus(!this.props.downloadStatus)}}
171 |                                 >
172 |                                 <i className="fa fa-arrow-circle-down" aria-hidden="true"></i> Download
173 |                             </Link>
174 |                         </div>
175 |                     </div>
176 |                 </div>
177 |             </div>
178 |         );
179 |     }
180 | }
181 | 
182 | function mapStateToProps(state, ownProps) {
183 |     return {
184 |         addInfo: state.addInfo,
185 |         paidStatus: state.paidStatus,
186 |         currency: state.currency,
187 |         dateFormat: state.dateFormat,
188 |         downloadStatus: state.downloadStatus
189 |     }
190 | }
191 | 
192 | function mapDispatchToProps(dispatch) {
193 |     return {
194 |         setAddInfo: (discount, tax, amountPaid, vat) => dispatch(setAddInfo(discount, tax, amountPaid, vat)),
195 |         setPaidStatus: (paidStatus) => dispatch(setPaidStatus(paidStatus)),
196 |         setCurrency: (currency) => dispatch(setCurrency(currency)),
197 |         setDateFormat: (dateFormat) => dispatch(setDateFormat(dateFormat)),
198 |         setDownloadStatus: (downloadStatus) => dispatch(setDownloadStatus(downloadStatus))
199 |     }
200 | }
201 | 
202 | export default connect(mapStateToProps, mapDispatchToProps)(SideNav);

--------------------------------------------------------------------------------
/app/components/dashboard/data.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |         "value": "$",
  4 |         "label": "USD"
  5 |     },
  6 |     {
  7 |         "value": "CA$",
  8 |         "label": "CAD"
  9 |     },
 10 |     {
 11 |         "value": "€",
 12 |         "label": "EUR"
 13 |     },
 14 |     {
 15 |         "value": "AED",
 16 |         "label": "AED"
 17 |     },
 18 |     {
 19 |         "value": "Af",
 20 |         "label": "AFN"
 21 |     },
 22 |     {
 23 |         "value": "ALL",
 24 |         "label": "ALL"
 25 |     },
 26 |     {
 27 |         "value": "AMD",
 28 |         "label": "AMD"
 29 |     },
 30 |     {
 31 |         "value": "AR$",
 32 |         "label": "ARS"
 33 |     },
 34 |     {
 35 |         "value": "AU$",
 36 |         "label": "AUD"
 37 |     },
 38 |     {
 39 |         "value": "man.",
 40 |         "label": "AZN"
 41 |     },
 42 |     {
 43 |         "value": "KM",
 44 |         "label": "BAM"
 45 |     },
 46 |     {
 47 |         "value": "Tk",
 48 |         "label": "BDT"
 49 |     },
 50 |     {
 51 |         "value": "BGN",
 52 |         "label": "BGN"
 53 |     },
 54 |     {
 55 |         "value": "BD",
 56 |         "label": "BHD"
 57 |     },
 58 |     {
 59 |         "value": "FBu",
 60 |         "label": "BIF"
 61 |     },
 62 |     {
 63 |         "value": "BN$",
 64 |         "label": "BND"
 65 |     },
 66 |     {
 67 |         "value": "Bs",
 68 |         "label": "BOB"
 69 |     },
 70 |     {
 71 |         "value": "R$",
 72 |         "label": "BRL"
 73 |     },
 74 |     {
 75 |         "value": "BWP",
 76 |         "label": "BWP"
 77 |     },
 78 |     {
 79 |         "value": "BYR",
 80 |         "label": "BYR"
 81 |     },
 82 |     {
 83 |         "value": "BZ$",
 84 |         "label": "BZD"
 85 |     },
 86 |     {
 87 |         "value": "CDF",
 88 |         "label": "CDF"
 89 |     },
 90 |     {
 91 |         "value": "CHF",
 92 |         "label": "CHF"
 93 |     },
 94 |     {
 95 |         "value": "CL$",
 96 |         "label": "CLP"
 97 |     },
 98 |     {
 99 |         "value": "CN¥",
100 |         "label": "CNY"
101 |     },
102 |     {
103 |         "value": "CO$",
104 |         "label": "COP"
105 |     },
106 |     {
107 |         "value": "₡",
108 |         "label": "CRC"
109 |     },
110 |     {
111 |         "value": "CV$",
112 |         "label": "CVE"
113 |     },
114 |     {
115 |         "value": "Kč",
116 |         "label": "CZK"
117 |     },
118 |     {
119 |         "value": "Fdj",
120 |         "label": "DJF"
121 |     },
122 |     {
123 |         "value": "Dkr",
124 |         "label": "DKK"
125 |     },
126 |     {
127 |         "value": "RD$",
128 |         "label": "DOP"
129 |     },
130 |     {
131 |         "value": "DA",
132 |         "label": "DZD"
133 |     },
134 |     {
135 |         "value": "Ekr",
136 |         "label": "EEK"
137 |     },
138 |     {
139 |         "value": "EGP",
140 |         "label": "EGP"
141 |     },
142 |     {
143 |         "value": "Nfk",
144 |         "label": "ERN"
145 |     },
146 |     {
147 |         "value": "Br",
148 |         "label": "ETB"
149 |     },
150 |     {
151 |         "value": "£",
152 |         "label": "GBP"
153 |     },
154 |     {
155 |         "value": "GEL",
156 |         "label": "GEL"
157 |     },
158 |     {
159 |         "value": "GH₵",
160 |         "label": "GHS"
161 |     },
162 |     {
163 |         "value": "FG",
164 |         "label": "GNF"
165 |     },
166 |     {
167 |         "value": "GTQ",
168 |         "label": "GTQ"
169 |     },
170 |     {
171 |         "value": "HK$",
172 |         "label": "HKD"
173 |     },
174 |     {
175 |         "value": "HNL",
176 |         "label": "HNL"
177 |     },
178 |     {
179 |         "value": "kn",
180 |         "label": "HRK"
181 |     },
182 |     {
183 |         "value": "Ft",
184 |         "label": "HUF"
185 |     },
186 |     {
187 |         "value": "Rp",
188 |         "label": "IDR"
189 |     },
190 |     {
191 |         "value": "₪",
192 |         "label": "ILS"
193 |     },
194 |     {
195 |         "value": "Rs",
196 |         "label": "INR"
197 |     },
198 |     {
199 |         "value": "IQD",
200 |         "label": "IQD"
201 |     },
202 |     {
203 |         "value": "IRR",
204 |         "label": "IRR"
205 |     },
206 |     {
207 |         "value": "Ikr",
208 |         "label": "ISK"
209 |     },
210 |     {
211 |         "value": "J$",
212 |         "label": "JMD"
213 |     },
214 |     {
215 |         "value": "JD",
216 |         "label": "JOD"
217 |     },
218 |     {
219 |         "value": "¥",
220 |         "label": "JPY"
221 |     },
222 |     {
223 |         "value": "Ksh",
224 |         "label": "KES"
225 |     },
226 |     {
227 |         "value": "KHR",
228 |         "label": "KHR"
229 |     },
230 |     {
231 |         "value": "CF",
232 |         "label": "KMF"
233 |     },
234 |     {
235 |         "value": "₩",
236 |         "label": "KRW"
237 |     },
238 |     {
239 |         "value": "KD",
240 |         "label": "KWD"
241 |     },
242 |     {
243 |         "value": "KZT",
244 |         "label": "KZT"
245 |     },
246 |     {
247 |         "value": "LB£",
248 |         "label": "LBP"
249 |     },
250 |     {
251 |         "value": "SLRs",
252 |         "label": "LKR"
253 |     },
254 |     {
255 |         "value": "Lt",
256 |         "label": "LTL"
257 |     },
258 |     {
259 |         "value": "Ls",
260 |         "label": "LVL"
261 |     },
262 |     {
263 |         "value": "LD",
264 |         "label": "LYD"
265 |     },
266 |     {
267 |         "value": "MAD",
268 |         "label": "MAD"
269 |     },
270 |     {
271 |         "value": "MDL",
272 |         "label": "MDL"
273 |     },
274 |     {
275 |         "value": "MGA",
276 |         "label": "MGA"
277 |     },
278 |     {
279 |         "value": "MKD",
280 |         "label": "MKD"
281 |     },
282 |     {
283 |         "value": "MMK",
284 |         "label": "MMK"
285 |     },
286 |     {
287 |         "value": "MOP$",
288 |         "label": "MOP"
289 |     },
290 |     {
291 |         "value": "MURs",
292 |         "label": "MUR"
293 |     },
294 |     {
295 |         "value": "MX$",
296 |         "label": "MXN"
297 |     },
298 |     {
299 |         "value": "RM",
300 |         "label": "MYR"
301 |     },
302 |     {
303 |         "value": "MTn",
304 |         "label": "MZN"
305 |     },
306 |     {
307 |         "value": "N$",
308 |         "label": "NAD"
309 |     },
310 |     {
311 |         "value": "₦",
312 |         "label": "NGN"
313 |     },
314 |     {
315 |         "value": "C$",
316 |         "label": "NIO"
317 |     },
318 |     {
319 |         "value": "Nkr",
320 |         "label": "NOK"
321 |     },
322 |     {
323 |         "value": "NPRs",
324 |         "label": "NPR"
325 |     },
326 |     {
327 |         "value": "NZ$",
328 |         "label": "NZD"
329 |     },
330 |     {
331 |         "value": "OMR",
332 |         "label": "OMR"
333 |     },
334 |     {
335 |         "value": "B/.",
336 |         "label": "PAB"
337 |     },
338 |     {
339 |         "value": "S/.",
340 |         "label": "PEN"
341 |     },
342 |     {
343 |         "value": "₱",
344 |         "label": "PHP"
345 |     },
346 |     {
347 |         "value": "PKRs",
348 |         "label": "PKR"
349 |     },
350 |     {
351 |         "value": "zł",
352 |         "label": "PLN"
353 |     },
354 |     {
355 |         "value": "₲",
356 |         "label": "PYG"
357 |     },
358 |     {
359 |         "value": "QR",
360 |         "label": "QAR"
361 |     },
362 |     {
363 |         "value": "RON",
364 |         "label": "RON"
365 |     },
366 |     {
367 |         "value": "din.",
368 |         "label": "RSD"
369 |     },
370 |     {
371 |         "value": "RUB",
372 |         "label": "RUB"
373 |     },
374 |     {
375 |         "value": "RWF",
376 |         "label": "RWF"
377 |     },
378 |     {
379 |         "value": "SR",
380 |         "label": "SAR"
381 |     },
382 |     {
383 |         "value": "SDG",
384 |         "label": "SDG"
385 |     },
386 |     {
387 |         "value": "Skr",
388 |         "label": "SEK"
389 |     },
390 |     {
391 |         "value": "S$",
392 |         "label": "SGD"
393 |     },
394 |     {
395 |         "value": "Ssh",
396 |         "label": "SOS"
397 |     },
398 |     {
399 |         "value": "SY£",
400 |         "label": "SYP"
401 |     },
402 |     {
403 |         "value": "฿",
404 |         "label": "THB"
405 |     },
406 |     {
407 |         "value": "DT",
408 |         "label": "TND"
409 |     },
410 |     {
411 |         "value": "T$",
412 |         "label": "TOP"
413 |     },
414 |     {
415 |         "value": "TL",
416 |         "label": "TRY"
417 |     },
418 |     {
419 |         "value": "TT$",
420 |         "label": "TTD"
421 |     },
422 |     {
423 |         "value": "NT$",
424 |         "label": "TWD"
425 |     },
426 |     {
427 |         "value": "TSh",
428 |         "label": "TZS"
429 |     },
430 |     {
431 |         "value": "₴",
432 |         "label": "UAH"
433 |     },
434 |     {
435 |         "value": "USh",
436 |         "label": "UGX"
437 |     },
438 |     {
439 |         "value": "$U",
440 |         "label": "UYU"
441 |     },
442 |     {
443 |         "value": "UZS",
444 |         "label": "UZS"
445 |     },
446 |     {
447 |         "value": "Bs.F.",
448 |         "label": "VEF"
449 |     },
450 |     {
451 |         "value": "₫",
452 |         "label": "VND"
453 |     },
454 |     {
455 |         "value": "FCFA",
456 |         "label": "XAF"
457 |     },
458 |     {
459 |         "value": "CFA",
460 |         "label": "XOF"
461 |     },
462 |     {
463 |         "value": "YR",
464 |         "label": "YER"
465 |     },
466 |     {
467 |         "value": "R",
468 |         "label": "ZAR"
469 |     },
470 |     {
471 |         "value": "ZK",
472 |         "label": "ZMK"
473 |     },
474 |     {
475 |         "value": "Ᵽ",
476 |         "label": "PPC"
477 |     },
478 |     {
479 |         "value": "₿",
480 |         "label": "BTC"
481 |     }
482 | ]
483 |

--------------------------------------------------------------------------------
/app/components/dashboard/item.js:
--------------------------------------------------------------------------------
  1 | // @flow
  2 | import React, { Component } from "react";
  3 | import { SortableContainer, SortableElement, SortableHandle, arrayMove } from "react-sortable-hoc";
  4 | import ItemRow from "./ItemRow";
  5 | import { addItem, setItemsOrder, removeItem, setWidth } from "../../actions";
  6 | import { connect } from "react-redux";
  7 | 
  8 | type Props = {
  9 |     items: Object,
 10 |     order: Array<number>,
 11 |     setItemsOrder: Function,
 12 |     addItem: Function,
 13 |     removeItem: Function,
 14 |     setWidth: Function,
 15 |     width: number
 16 | };
 17 | 
 18 | const DragHandle = SortableHandle(() => <span><i className="fa fa-bars" aria-hidden="true" style={style.barStyle}></i></span>);
 19 | 
 20 | const SortableItem = SortableElement(({value, onRemove}: Object) => {
 21 |     return (
 22 |         <div style={style.listWrapper}>
 23 |             <li style={style.listStyle}>
 24 |                 <ItemRow itemId={value} />
 25 |                 <DragHandle />
 26 |             </li>
 27 |             <a onClick={() => onRemove(value)}>
 28 |                 <i style={style.deleteButtonStyle} className="fa fa-times" aria-hidden="true"></i>
 29 |             </a>
 30 |         </div>
 31 |     );
 32 | });
 33 | 
 34 | const SortableList = SortableContainer(({order, items, onRemove}: Object) => {
 35 |     return (
 36 |         <ul>
 37 |             {order.map((value, index) => (
 38 |                 <SortableItem key={value} index={index} value={value} onRemove={onRemove} />
 39 |             ))}
 40 |         </ul>
 41 |     );
 42 | });
 43 | 
 44 | const style = {
 45 |     listWrapper: {
 46 |         display: "flex",
 47 |         flexDirection: "row",
 48 |         marginTop: "10px"
 49 |     },
 50 |     listStyle: {
 51 |         display: "flex",
 52 |         flexDirection: "row",
 53 |         width: "calc(100% - 20px)",
 54 |         left: "0",
 55 |         alignItems: "center",
 56 |         backgroundColor: "#FBFCFC",
 57 |         borderRadius: "3px",
 58 |         height: "auto",
 59 |         padding: "2px 8px",
 60 |     },
 61 |     barStyle: {
 62 |         fontSize: "18px",
 63 |         color: "#999",
 64 |         verticalAlign: "middle",
 65 |         transition: "all .3s"
 66 |     },
 67 |     deleteButtonStyle: {
 68 |         fontSize: "17px",
 69 |         color: "#999",
 70 |         margin: "14px 4px"
 71 |     }
 72 | }
 73 | 
 74 | class Item extends Component {
 75 | 
 76 |     constructor(props: Props) {
 77 |         super(props);
 78 |     }
 79 | 
 80 |     onSortEnd = ({oldIndex, newIndex}: Object) => {
 81 |         const { order } = this.props;
 82 |         const newOrder = arrayMove(order, oldIndex, newIndex);
 83 |         this.props.setItemsOrder(newOrder);
 84 |     }
 85 | 
 86 |     addInput = () => {
 87 |         const order = this.props.order;
 88 |         let maxOrderValue = order.length == 0 ? 0 : parseInt(Math.max(...order));
 89 |         this.props.addItem(parseInt(maxOrderValue + 1), null);
 90 |     }
 91 | 
 92 |     componentDidMount() {
 93 |         window.addEventListener('resize', () => {
 94 |             this.props.setWidth(window.innerWidth);
 95 |         });
 96 |     }
 97 | 
 98 |     render() {
 99 |         let { order, items } = this.props;
100 | 
101 |         return (
102 |             <div className="item">
103 |                 <div className="item__head">
104 |                     <div>Item</div>
105 |                     <div>Description</div>
106 |                     <div>Quantity</div>
107 |                     <div>Price</div>
108 |                     <div>SubAmount</div>
109 |                 </div>
110 |                 <SortableList order={order} items={items} onSortEnd={this.onSortEnd} useDragHandle={true} onRemove={this.props.removeItem} />
111 |                 <a onClick={this.addInput} className="solid-btn solid-btn--new">
112 |                     <i className="fa fa-plus-circle" aria-hidden="true"></i>
113 |                     Add Row
114 |                 </a>
115 |             </div>
116 |         );
117 |     }
118 | }
119 | 
120 | function mapStateToProps(state, ownProps) {
121 |     return {
122 |         items: state.items,
123 |         order: state.order,
124 |         width: state.width
125 |     }
126 | }
127 | 
128 | function mapDispatchToProps(dispatch) {
129 |     return {
130 |         setItemsOrder: item => dispatch(setItemsOrder(item)),
131 |         addItem: (id, value) => dispatch(addItem(id, value)),
132 |         removeItem: (id) => dispatch(removeItem(id)),
133 |         setWidth: (width) => dispatch(setWidth(width))
134 |     }
135 | }
136 | 
137 | export default connect(mapStateToProps, mapDispatchToProps)(Item);

--------------------------------------------------------------------------------
/app/components/home/HomePage.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | export default class HomePage extends Component {
 5 |     render() {
 6 |         return(
 7 |             <div className="home">
 8 |                 <div className="home__banner home__banner--bg">
 9 |                     <div className="overlay"></div>
10 |                     <h2>Free and Simple <span>invoicing</span> for freelancers and businesses.</h2>
11 |                     <Link to="/QuickBill/dashboard" className="solid-btn">Create Invoice</Link>
12 |                     <h4>No signup required</h4>
13 |                 </div>
14 |                 <div className="home__banner home__banner--footer">
15 |                     <h4>Star this project on Github</h4>
16 |                     <div className="github-buttons">
17 |                         <a className="github-button"
18 |                             href="https://github.com/PunitGr/QuickBill"
19 |                             data-icon="octicon-star"
20 |                             data-size="large"
21 |                             data-show-count="true"
22 |                             aria-label="Star PunitGr/QuickBill on GitHub"
23 |                             alt="github-star">
24 |                                 Star
25 |                         </a>
26 |                         <a className="github-button"
27 |                             href="https://github.com/PunitGr/QuickBill/fork"
28 |                             data-icon="octicon-repo-forked" data-size="large"
29 |                             data-show-count="true"
30 |                             aria-label="Fork PunitGr/QuickBill on GitHub"
31 |                             alt="github-fork">
32 |                                 Fork
33 |                         </a>
34 |                     </div>
35 | 
36 |                     <a href="mailto:groove67@gmail.com" className="solid-btn"><i className="fa fa-envelope" aria-hidden="true"></i>Hire me!</a>
37 |                 </div>
38 |             </div>
39 |         );
40 |     }
41 | }

--------------------------------------------------------------------------------
/app/constants/index.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | 
 3 | // Item.js
 4 | export const SORT_ITEMS: string = "SORT_ITEMS";
 5 | export const ADD_ITEM: string = "ADD_ITEM";
 6 | export const REMOVE_ITEM: string = "REMOVE_ITEM";
 7 | 
 8 | // ItemRow.js
 9 | export const SET_ITEM: string = "SET_ITEM";
10 | export const SET_WIDTH: string = "SET_WIDTH";
11 | 
12 | // SideNav.js
13 | export const SET_CURRENCY: string = "SET_CURRENCY";
14 | export const SET_DATE_FORMAT: string = "SET_DATE_FORMAT";
15 | export const SET_PAID_STATUS: string = "SET_PAID_STATUS";
16 | export const SET_ADDINFO: string = "SET_ADDINFO";
17 | 
18 | // Invoice.js
19 | export const SET_ISSUE_DATE: string = "SET_ISSUE_DATE";
20 | export const SET_DUE_DATE: string = "SET_DUE_DATE";
21 | export const SET_STATUS: string = "SET_STATUS";
22 | export const SET_INVOICE_DETAILS: string = "SET_INVOICE_DETAILS";
23 | export const SET_DOWNLOAD_STATUS: string = "SET_DOWNLOAD_STATUS";
24 |

--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import React from "react";
 3 | import { render } from "react-dom";
 4 | import { Provider } from "react-redux";
 5 | 
 6 | import App from "./components/App";
 7 | import configureStore from "./store/configureStore";
 8 | import rootReducer from "./reducers";
 9 | 
10 | let store = configureStore(rootReducer);
11 | 
12 | render(
13 |     <Provider store={store}>
14 |         <App />
15 |     </Provider>,
16 |     document.getElementById("app")
17 | );

--------------------------------------------------------------------------------
/app/reducers/addInfoReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_ADDINFO } from "../constants";
 3 | import type { Action } from "../actions";
 4 | 
 5 | type State = {
 6 |     discount?: string,
 7 |     tax?: string,
 8 |     amountPaid?: string,
 9 |     vat?: string,
10 | };
11 | 
12 | export default function addInfoReducer(state: State = {discount: "0", tax: "0", amountPaid: "0", vat: "0"}, action: Action):State {
13 |     if (action.type === SET_ADDINFO) {
14 |         return {
15 |             discount: action.discount,
16 |             tax: action.tax,
17 |             amountPaid: action.amountPaid,
18 |             vat: action.vat
19 |         }
20 |     }
21 |     return state;
22 | }

--------------------------------------------------------------------------------
/app/reducers/currencyReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_CURRENCY } from "../constants";
 3 | import type { Action } from "../actions";
 4 | 
 5 | type State = Object;
 6 | 
 7 | export default function currencyReducer(state: State = { "value": "$", "label": "USD" }, action: Action) {
 8 |     if (action.type === SET_CURRENCY) {
 9 |         return action.currency;
10 |     }
11 |     return state;
12 | }

--------------------------------------------------------------------------------
/app/reducers/dateFormatReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_DATE_FORMAT } from "../constants";
 3 | import type { Action } from "../actions";
 4 | 
 5 | type State = Object;
 6 | 
 7 | export default function dateFormatReducer(state: State = {value: "MM/DD/YYYY", label: "MM/DD/YYYY"}, action: Action) {
 8 |     if (action.type === SET_DATE_FORMAT) {
 9 |         return action.dateFormat;
10 |     }
11 |     return state;
12 | }

--------------------------------------------------------------------------------
/app/reducers/downloadStatusReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_DOWNLOAD_STATUS } from "../constants";
 3 | import type { Action } from "../actions";
 4 | 
 5 | type State = boolean;
 6 | 
 7 | export default function paidStatusReducer(state: State = false, action: Action) {
 8 |     if (action.type === SET_DOWNLOAD_STATUS) {
 9 |         return action.downloadStatus;
10 |     }
11 |     return state;
12 | }
13 |

--------------------------------------------------------------------------------
/app/reducers/dueDateReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_DUE_DATE } from "../constants";
 3 | import type { Action } from "../actions";
 4 | import moment from "moment";
 5 | 
 6 | type State = Date;
 7 | const tomorrow: Date  = moment(new Date()).add(1,"days");
 8 | 
 9 | export default function dueDateReducer(state: State = tomorrow, action: Action) {
10 |     if (action.type === SET_DUE_DATE) {
11 |         return action.dueDate;
12 |     }
13 |     return state;
14 | }
15 |

--------------------------------------------------------------------------------
/app/reducers/index.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { combineReducers } from "redux";
 3 | import { routerReducer } from "react-router-redux";
 4 | 
 5 | import itemsReducer from "./itemsReducer";
 6 | import currencyReducer from "./currencyReducer";
 7 | import paidStatusReducer from "./paidStatusReducer";
 8 | import dateFormatReducer from "./dateFormatReducer";
 9 | import addInfoReducer from "./addInfoReducer";
10 | import itemOrderReducer from "./itemOrderReducer";
11 | import invoiceDetailsReducer from "./invoiceDetailsReducer";
12 | import statusReducer from "./statusReducer";
13 | import issueDateReducer from "./issueDateReducer";
14 | import dueDateReducer from "./dueDateReducer";
15 | import widthReducer from "./widthReducer";
16 | import downloadStatusReducer from "./downloadStatusReducer";
17 | 
18 | 
19 | const rootReducer = combineReducers({
20 |     routing: routerReducer,
21 |     items: itemsReducer,
22 |     order: itemOrderReducer,
23 |     currency: currencyReducer,
24 |     paidStatus: paidStatusReducer,
25 |     dateFormat: dateFormatReducer,
26 |     addInfo: addInfoReducer,
27 |     invoiceDetails: invoiceDetailsReducer,
28 |     status: statusReducer,
29 |     issueDate: issueDateReducer,
30 |     dueDate: dueDateReducer,
31 |     width: widthReducer,
32 |     downloadStatus: downloadStatusReducer
33 | });
34 | 
35 | export default rootReducer;

--------------------------------------------------------------------------------
/app/reducers/invoiceDetailsReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_INVOICE_DETAILS } from "../constants";
 3 | 
 4 | export type Action = {
 5 |     name: string,
 6 |     val: string
 7 | }
 8 | 
 9 | export type invoiceDetailState = {
10 |     to: string,
11 |     from: string,
12 |     addressTo: string,
13 |     addressFrom: string,
14 |     phoneTo: string,
15 |     phoneFrom: string,
16 |     emailTo: string,
17 |     emailFrom: string,
18 |     invoiceNumber: string,
19 |     job: string,
20 | };
21 | 
22 | const initialState: invoiceDetailState = {
23 |     to: "",
24 |     from: "",
25 |     addressTo: "",
26 |     addressFrom: "",
27 |     phoneTo: "",
28 |     phoneFrom: "",
29 |     emailTo: "",
30 |     emailFrom: "",
31 |     invoiceNumber: "001",
32 |     job: "",
33 |     invoiceType: "Invoice"
34 | };
35 | 
36 | export default function invoiceDetailsReducer(state: invoiceDetailState = initialState, action: Action) {
37 |     if (action.type === SET_INVOICE_DETAILS) {
38 |         return {...state, [action.name]: action.val};
39 |     }
40 |     return state;
41 | }

--------------------------------------------------------------------------------
/app/reducers/issueDateReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_ISSUE_DATE } from "../constants";
 3 | import type { Action } from "../actions";
 4 | import moment from "moment";
 5 | 
 6 | type State = Date;
 7 | const today: Date = moment();
 8 | 
 9 | export default function issueDateReducer(state: State = today, action: Action) {
10 |     if (action.type === SET_ISSUE_DATE) {
11 |         return action.issueDate;
12 |     }
13 |     return state;
14 | }
15 |

--------------------------------------------------------------------------------
/app/reducers/itemOrderReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { ADD_ITEM, SORT_ITEMS, REMOVE_ITEM } from "../constants";
 3 | import type { Action } from "../actions";
 4 | 
 5 | export type State = Array<number>;
 6 | 
 7 | export default function itemOrderReducer(state: State = [], action: Action): State {
 8 |     if (action.type === SORT_ITEMS) {
 9 |         if (action.order) {
10 |             return action.order;
11 |         }
12 |         return state;
13 |     }
14 |     else if (action.type === ADD_ITEM) {
15 |         if (action.id) {
16 |             return [...state, action.id];
17 |         }
18 |         return state;
19 |     }
20 |     else if (action.type === REMOVE_ITEM) {
21 |         return state.filter(item => item !== action.id);
22 |     }
23 |     return state;
24 | }

--------------------------------------------------------------------------------
/app/reducers/itemsReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { ADD_ITEM, SET_ITEM, REMOVE_ITEM } from "../constants";
 3 | import type { Action } from "../actions";
 4 | 
 5 | type State = Object;
 6 | 
 7 | export default function itemsReducer(state: State = {}, action: Action): State {
 8 |     if (action.type === ADD_ITEM || action.type === SET_ITEM) {
 9 |         return {...state, [action.id]: action.value};
10 |     }
11 |     else if (action.type === REMOVE_ITEM) {
12 |         if (action.id) {
13 |             let { [action.id.toString()]: del, ...newState } = state;
14 |             return newState;
15 |         }
16 |         return state;
17 |     }
18 |     return state;
19 | }
20 |

--------------------------------------------------------------------------------
/app/reducers/paidStatusReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_PAID_STATUS } from "../constants";
 3 | import type { Action } from "../actions";
 4 | 
 5 | type State = boolean;
 6 | 
 7 | export default function paidStatusReducer(state: State = false, action: Action) {
 8 |     if (action.type === SET_PAID_STATUS) {
 9 |         return action.paidStatus;
10 |     }
11 |     return state;
12 | }
13 |

--------------------------------------------------------------------------------
/app/reducers/statusReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_STATUS } from "../constants";
 3 | import type { Action } from "../actions";
 4 | 
 5 | type State = Object;
 6 | 
 7 | export default function statusReducer(state: State = { value: "paid", label: "Paid"}, action: Action) {
 8 |     if (action.type === SET_STATUS) {
 9 |         return action.status;
10 |     }
11 |     return state;
12 | }

--------------------------------------------------------------------------------
/app/reducers/widthReducer.js:
--------------------------------------------------------------------------------
 1 | // @flow
 2 | import { SET_WIDTH } from "../constants";
 3 | import type { Action } from "../actions";
 4 | 
 5 | export type widthState = number;
 6 | 
 7 | const initialState: widthState = (
 8 |     window.innerWidth
 9 | ); 
10 | 
11 | export default function widthReducer(state: widthState = initialState, action: Action) {
12 |     if (action.type === SET_WIDTH) {
13 |         return action.width;
14 |     }
15 |     return state;
16 | }

--------------------------------------------------------------------------------
/app/store/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore } from "redux";
2 | import rootReducer from "../reducers";
3 | 
4 | export default function configureStore() {
5 |     return createStore(rootReducer);
6 | }

--------------------------------------------------------------------------------
/assets/images/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PunitGr/QuickBill/06c80352f25cac194ed9a866ea6efbe43a3a63eb/assets/images/banner.jpg

--------------------------------------------------------------------------------
/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PunitGr/QuickBill/06c80352f25cac194ed9a866ea6efbe43a3a63eb/assets/images/favicon.ico

--------------------------------------------------------------------------------
/assets/images/icon-full.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PunitGr/QuickBill/06c80352f25cac194ed9a866ea6efbe43a3a63eb/assets/images/icon-full.png

--------------------------------------------------------------------------------
/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PunitGr/QuickBill/06c80352f25cac194ed9a866ea6efbe43a3a63eb/assets/images/icon.png

--------------------------------------------------------------------------------
/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PunitGr/QuickBill/06c80352f25cac194ed9a866ea6efbe43a3a63eb/assets/images/logo.png

--------------------------------------------------------------------------------
/assets/styles/partials/base/_base.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |     -webkit-font-smoothing: antialiased;
 3 |     text-rendering: optimizeLegibility;
 4 |     -moz-osx-font-smoothing: grayscale;
 5 |     -moz-font-feature-settings: "liga" on;
 6 |     font-family: 'Open Sans', sans-serif;
 7 |     overflow-x: hidden !important;
 8 | }
 9 | 
10 | 
11 | // %heading {
12 | //     color: rgb(96, 92, 98);
13 | //     margin: 0;
14 | //     font-family: 'Open Sans', sans-serif;
15 | //     font-weight: 300;
16 | //     line-height: 53px;
17 | // }
18 | 
19 | // h1 {
20 | //     @extend %heading;
21 | //     font-size: 48px;
22 | // }
23 | 
24 | // h2 {
25 | //     @extend %heading;
26 | //     font-size: 32px;
27 | // }
28 | 
29 | a {
30 |     outline: none;
31 |     cursor: pointer;
32 |     text-decoration: none;
33 | 
34 |     &:hover, &:focus {
35 |         outline: none;
36 |         text-decoration: none
37 |     }
38 | }
39 | 
40 | ul, li {
41 |     margin: 0;
42 |     padding: 0;
43 |     list-style: none;
44 | }
45 | 
46 | input, textarea {
47 |     outline: none;
48 |     text-decoration: none;
49 |     &:focus {
50 |         box-shadow: 0 0 5px rgba(81, 203, 238, 1);
51 |         border: 1px solid rgba(81, 203, 238, 1);
52 |     }
53 | }
54 | 
55 | ::-webkit-input-placeholder { /* Chrome */
56 |     color: #666;
57 |     font-size: 14px;
58 |     font-weight: 300px;
59 | }
60 |     :-ms-input-placeholder { /* IE 10+ */
61 |     color: #666;
62 |     font-size: 14px;
63 |     font-weight: 300px;
64 | }
65 |     ::-moz-placeholder { /* Firefox 19+ */
66 |     color: #666;
67 |     font-size: 14px;
68 |     font-weight: 300px;
69 |     opacity: 1;
70 | }
71 |     :-moz-placeholder { /* Firefox 4 - 18 */
72 |     color: #666;
73 |     font-size: 14px;
74 |     font-weight: 300px;
75 |     opacity: 1;
76 | }
77 | 
78 | .undo-box-sizing * {
79 |     box-sizing: initial;
80 | }
81 |

--------------------------------------------------------------------------------
/assets/styles/partials/base/_helper.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PunitGr/QuickBill/06c80352f25cac194ed9a866ea6efbe43a3a63eb/assets/styles/partials/base/_helper.scss

--------------------------------------------------------------------------------
/assets/styles/partials/components/_buttons.scss:
--------------------------------------------------------------------------------
  1 | %btn {
  2 |     display: inline-block;
  3 |     min-width: 80px;
  4 |     padding: 4px 18px;
  5 |     height: 30px;
  6 |     font-weight: 400;
  7 |     font-size: 14px;
  8 |     letter-spacing: 0.01em;
  9 |     text-decoration: none;
 10 |     text-align: center;
 11 |     margin: 5px 0;
 12 |     cursor: pointer;
 13 |     outline: none;
 14 |     color: #fff;
 15 | }
 16 | 
 17 | .solid-btn {
 18 |     @extend %btn;
 19 | 
 20 |     color: #fff;
 21 |     background-color: transparent;
 22 |     border: 1px solid #fff;
 23 |     border-radius: 999em;
 24 | 
 25 |     &:hover, &:focus {
 26 |         color: #fafafa;
 27 |         border-color: #fafafa;
 28 |     }
 29 | 
 30 |     @include modifier("rect") {
 31 |         width: 100%;
 32 |         color: #fff;
 33 |         border-radius: 3px;
 34 |         height: 32px;
 35 |         padding: 0;
 36 |         background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
 37 |         line-height: 2.2;
 38 |         font-size: 13px;
 39 |         margin-top: 10px;
 40 | 
 41 |         &:hover, &:focus {
 42 |             background-image: linear-gradient(-20deg, #b321f9 0%, #21cff7 100%);
 43 |         }
 44 |     }
 45 | 
 46 |     @include modifier("new") {
 47 |         background-color: #31D600;
 48 |         border-color: #31D600;
 49 |         color: #fff;
 50 |         border-radius: 3px;
 51 |         margin: 15px 15px 15px 2px;
 52 |         width: 120px;
 53 | 
 54 |         &:hover, &:focus {
 55 |             border-color: #30cc02;
 56 |             background-color: #30cc02;
 57 |         }
 58 | 
 59 |         @media screen and (max-width: 699px) {
 60 |             margin: 10px auto;
 61 |             width: 180px;
 62 |             letter-spacing: .03em;
 63 |             display: flex;
 64 |             justify-content: center;
 65 |             padding: 18px;
 66 |             font-size: 15px;
 67 |             align-items: center;
 68 |         }
 69 |     }
 70 | 
 71 |     @include modifier("save") {
 72 |         &:hover, &:focus {
 73 |             background: #30cc02;
 74 |         }
 75 |     }
 76 | 
 77 |     @include modifier("ghost") {
 78 |         width: 100%;
 79 |         border: 1px solid #D0D6DC;
 80 |         color: #fff;
 81 |         border-radius: 3px;
 82 |         height: 32px;
 83 |         padding: 0;
 84 |         background: transparent;
 85 |         display: flex;
 86 |         flex-direction: row;
 87 |         align-items: center;
 88 |         justify-content: space-between;
 89 |         font-size: 13px;
 90 | 
 91 |         &:hover, &:focus {
 92 |             color: #555;
 93 |             border-color: #D0D6DC;
 94 |         }
 95 |         
 96 |         .ghost-btn {
 97 |             margin: 0;
 98 |             width: 50%;
 99 |             height: 100%;
100 |             color: #444;
101 |             border: 0;
102 |             border-radius: 0;
103 |             padding: 0;
104 |             line-height: 2.2;
105 |             background: #fff;
106 | 
107 |             &:hover, &:focus {
108 |                 color: #888;
109 |                 border-color: #D0D6DC;
110 |             }
111 | 
112 |             &:first-child {
113 |                 border-right: 1px solid #D0D6DC;
114 |             }
115 | 
116 |             @include modifier("preview") {
117 |                 width: 100%;
118 |                 padding: 5px;
119 |                 font-size: 16px;
120 | 
121 |                 &:first-child {
122 |                     border-right: 0;
123 |                 }
124 |             }
125 |         }
126 |     }
127 | 
128 |     @include modifier("dashboard") {
129 |         height: 40px;
130 |         line-height: 1;
131 |         display: flex;
132 |         justify-content: center;
133 |         align-items: center;
134 |         font-size: 16px;
135 |         letter-spacing: .01em;
136 | 
137 |         .ghost-btn {
138 |             display: flex;
139 |             justify-content: center;
140 |             align-items: center;
141 |         }
142 |     }
143 | }

--------------------------------------------------------------------------------
/assets/styles/partials/components/_dashboard.scss:
--------------------------------------------------------------------------------
 1 | .dashboard {
 2 |     margin-top: 70px;
 3 |     width: 100%;
 4 |     background-color: #f2f5f7;
 5 | 
 6 |     @media screen and (max-width: 961px) {
 7 |         display: flex;
 8 |         flex-direction: column;
 9 |         background-color: #fff;
10 |     }
11 | 
12 |     .wrapper {
13 |         width: calc(100% - 281px);
14 |         padding: 10px 50px;
15 |         margin-left: 281px;
16 | 
17 |         @media screen and (min-width: 961px) and (max-width: 1200px) {
18 |             width: calc(100% - 261px);
19 |             padding: 10px 25px;
20 |             margin-left: 261px;
21 |         }
22 | 
23 |         @media screen and (min-width: 1440px) {
24 |             padding: 10px 80px;
25 |         }
26 | 
27 |         @media screen and (max-width: 960px) {
28 |             width: 100%;
29 |             margin-left: 0;
30 |             padding: 10px 15px;
31 |         }
32 |     }
33 | 
34 |     .preview-wrapper {
35 |         padding: 40px 0;
36 | 
37 |         @media screen and (max-width: 812px) {
38 |             padding-top: 0;
39 |         }
40 |     }
41 | 
42 |     @include element("element") {
43 |         display: none;
44 |         @media screen and (max-width: 960px) {
45 |             display: block;
46 |             padding: 0 54px 50px;
47 | 
48 |             i {
49 |                 margin-right: 5px;
50 |             }
51 |         }
52 |     }
53 | }

--------------------------------------------------------------------------------
/assets/styles/partials/components/_home.scss:
--------------------------------------------------------------------------------
  1 | .home {
  2 | 
  3 |     @include element("banner") {
  4 |         margin: 0;
  5 |         padding: 70px 15px;
  6 |         text-align: center;
  7 |         background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
  8 |         color: #fff;
  9 |         
 10 |         @media screen and (max-width: 700px) {
 11 |             padding: 50px 15px;
 12 |         }
 13 | 
 14 |         @include modifier("bg") {
 15 |             padding: 220px 15px 80px;
 16 |             position: relative;
 17 |             background-image: url("../images/banner.jpg");
 18 | 
 19 |             @include bg();
 20 |         }
 21 | 
 22 |         .overlay {
 23 |             position: absolute;
 24 |             top: 0;
 25 |             left: 0;
 26 |             width: 100%;
 27 |             height: 100%;
 28 |             background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
 29 |             opacity: .8;
 30 |         }
 31 | 
 32 |         h2 {
 33 |             font-weight: 300;
 34 |             position: relative;
 35 |             margin-bottom: 40px;
 36 | 
 37 |             span {
 38 |                 font-weight: 700;
 39 |             }
 40 | 
 41 |             @media screen and (max-width: 700px) {
 42 |                 margin-top: 0;
 43 |                 font-size: 26px;
 44 |             }
 45 |         }
 46 | 
 47 |         .solid-btn {
 48 |             font-size: 18px;
 49 |             padding: 14px 40px;
 50 |             height: auto;
 51 |             background-color: #fff;
 52 |             border-color: #fff;
 53 |             position: relative;
 54 |             color: #6772e5;
 55 |             box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
 56 | 
 57 |             &:hover, &:focus {
 58 |                 transform: translateY(-1px);
 59 |                 color: #6772e5;
 60 |             }
 61 |         }
 62 | 
 63 |         h4 {
 64 |             position: relative;
 65 |             font-weight: 400;
 66 |             font-size: 18px;
 67 |         }
 68 | 
 69 |         .github-buttons {
 70 |             display: flex;
 71 |             justify-content: space-between;
 72 |             max-width: 220px;
 73 |             width: 100%;
 74 |         }
 75 |     
 76 |         @include modifier("footer") {
 77 |             color: #000;
 78 |             background-image: none;
 79 |             display: flex;
 80 |             flex-direction: column;
 81 |             align-items: center;
 82 |             justify-content: center;
 83 |             
 84 | 
 85 |             >h4 {
 86 |                 font-weight: 400;
 87 |                 font-size: 20px;
 88 |                 margin-top: 0;
 89 |                 margin-bottom: 30px;
 90 |             }
 91 | 
 92 |             .solid-btn {
 93 |                 background-color: #495aff;
 94 |                 border-color: #495aff;
 95 |                 margin: 30px 0 0;
 96 |                 color: #fff;
 97 |                 
 98 |                 &:hover, &:focus {
 99 |                     transform: translateY(-1px);
100 |                     color: #fff;
101 |                     border-color: #495aff;
102 |                 }
103 |                 .fa-envelope {
104 |                     margin-right: 5px;
105 |                 }
106 |             }
107 |         }
108 |     }
109 | }

--------------------------------------------------------------------------------
/assets/styles/partials/components/_invoice.scss:
--------------------------------------------------------------------------------
  1 | .invoice {
  2 |     margin: 30px auto;
  3 |     background-color: #fff;  
  4 |     box-shadow: 0 3px 12px rgba(222,222,252,.5);
  5 |     padding: 50px;
  6 | 
  7 |     @media screen and (max-width: 500px) {
  8 |         padding: 25px 15px;
  9 |     }
 10 | 
 11 |     hr {
 12 |         max-width: 100%;
 13 |         margin: 40px 0;
 14 |         border: 1px solid #f2f2f2;
 15 |     }
 16 | 
 17 |     @include element("header") {
 18 |         display: flex;
 19 |         flex-direction: row;
 20 |         justify-content: space-between;
 21 | 
 22 |         .Select {
 23 |             max-width: 120px;
 24 |             width: 100%;
 25 |             font-weight: 400;
 26 |             margin: 10px 0;
 27 |             font-size: 15px;
 28 | 
 29 |             .Select-input {
 30 |                 height: 46px;
 31 |             }
 32 |             
 33 |             .Select-placeholder {
 34 |                 line-height: 46px;
 35 |                 font-weight: 400;
 36 |             }
 37 | 
 38 |             .Select-control {
 39 |                 height: 46px;
 40 |                 border-radius: 3px;
 41 |                 border-color: #D0D6DC;
 42 | 
 43 |                 .Select-value {
 44 |                     line-height: 46px;
 45 |                 }
 46 | 
 47 |                 .Select-clear-zone {
 48 |                     .Select-clear {
 49 |                         line-height: 2;
 50 |                     }
 51 |                 }
 52 |             }
 53 | 
 54 |             .Select-value-label {
 55 |                 font-weight: 400;
 56 |             }
 57 |         }
 58 | 
 59 |         .invoice-type {
 60 |             width: 180px;
 61 |             height: 52px;
 62 |             align-self: center;
 63 |             font-size: 32px;
 64 |             font-weight: 400;
 65 |             color: #555;
 66 |             letter-spacing: .003em;
 67 |             border: 1px solid #D2D8DE;
 68 |             border-radius: 2px;
 69 |             text-align: right;
 70 |             padding: 5px;
 71 | 
 72 |             @media screen and (max-width: 375px) {
 73 |                 width: 140px;
 74 |             }
 75 | 
 76 |             @media screen and (max-width: 320px) {
 77 |                 width: 115px;
 78 |                 padding: 5px 0;
 79 |             }
 80 |         }
 81 |     }
 82 | 
 83 |     @include element("info") {
 84 |         display: flex;
 85 |         flex-direction: row;
 86 |         flex-wrap: wrap;
 87 |         max-width: 640px;
 88 |         width: 100%;
 89 |         flex-direction: row;
 90 |         justify-content: space-between;
 91 |         align-items: center;
 92 |         margin-top: 15px;
 93 |  
 94 |         .info {
 95 |             &>label {
 96 |                 font-weight: 400;
 97 |                 font-size: 13px;
 98 |                 margin-right: 5px;
 99 |                 color: #555;
100 |             }
101 | 
102 |             .SingleDatePicker {
103 | 
104 |                 @include element("picker") {
105 |                     top: 35px;
106 | 
107 |                     .DayPickerKeyboardShortcuts {
108 | 
109 |                         @include element("show") {
110 | 
111 |                             @include modifier("bottom-right") {
112 |                                 &:hover {
113 |                                     border-right: 33px solid #4846DE;
114 |                                 }
115 |                             }
116 |                         }
117 |                     }
118 |                 }
119 | 
120 |                 .SingleDatePickerInput {
121 |                     border: 0px;
122 |                 }
123 | 
124 |                 .DateInput {
125 |                     font-weight: 400;
126 |                     font-size: 14px;
127 |                     line-height: 1.2;
128 |                     padding: 0px;
129 |                     width: 90px;
130 | 
131 |                     &:focus {
132 |                         border: 1px solid #D0D6DC;
133 |                     }
134 | 
135 |                     @include modifier("with-caret") {
136 |                         &:before {
137 |                             top: 25px;
138 |                         }
139 | 
140 |                         &:after {
141 |                             top: 26px;
142 |                         }
143 |                     }
144 | 
145 |                     @include element("display-text") {
146 | 
147 |                         @include modifier("focused") {
148 |                             background: #fff;
149 |                             color: #222;
150 |                         }
151 |                     }
152 |                 }
153 |             }
154 | 
155 |             .input-element {
156 |                 width: 90px;
157 |                 border: 1px solid #D2D8DE;
158 |                 border-radius: 2px;
159 |                 font-weight: 400;
160 |                 height: 30px;
161 |                 color: #222;
162 | 
163 |                 @include modifier("number") {
164 |                     width: 50px;
165 |                 }
166 | 
167 |                 @include modifier("job") {
168 |                     width: 160px;
169 |                 }
170 | 
171 |                 &:focus {
172 |                     border-radius: 3px;
173 |                     border: 1px solid #D0D6DC;
174 |                 }
175 |             }
176 | 
177 |             &>input {
178 |                 font-size: 14px;
179 |                 padding: 5px;
180 |             }
181 |             
182 |             @media screen and (max-width: 960px) {
183 |                 margin-top: 5px;
184 | 
185 |                 &>label {
186 |                     margin-right: 6px;
187 |                 }
188 | 
189 |                 .SingleDatePicker {
190 |                     margin-bottom: 4px;
191 | 
192 |                     .DateInput {
193 |                         font-size: 14px;
194 |                     }
195 |                 }
196 | 
197 |                 .input-element {
198 |                     width: 100px;
199 |                     font-size: 15px;
200 |                     margin-bottom: 4px;
201 | 
202 |                     @include modifier("number") {
203 |                         width: 80px;
204 |                     }
205 | 
206 |                     @include modifier("job") {
207 |                         width: 200px;
208 |                     }
209 |                 }
210 |                 
211 |                 &>input {
212 |                     font-size: 14px;
213 |                     padding: 16px 5px;
214 |                 }
215 |             }
216 |         }
217 | 
218 |         .address-element {
219 |             display: flex;
220 |             flex-direction: column;
221 |             width: 50%;
222 | 
223 |             &>label {
224 |                 text-transform: uppercase;
225 |                 color: #21d4fd;
226 |                 font-size: 18px;
227 |                 font-weight: 600;
228 |             }
229 | 
230 |             &>input {
231 |                 margin: 10px 0 0;
232 |                 font-size: 14px;
233 |                 padding: 5px;
234 |                 max-width: 270px;
235 |                 width: 100%;
236 |                 border: 1px solid #D2D8DE;
237 |                 border-radius: 2px;
238 |             }
239 | 
240 |             &>textarea {
241 |                 resize: none;
242 |                 max-width: 270px;
243 |                 height: 60px;
244 |                 margin-top: 10px;
245 |                 font-size: 14px;
246 |                 padding: 5px;
247 |                 border: 1px solid #D2D8DE;
248 |                 border-radius: 2px;
249 |             }
250 | 
251 |             @media screen and (max-width: 960px) {
252 |                 margin-top: 15px;
253 |                 width: 80%;
254 | 
255 |                 &>input {
256 |                     padding: 10px;
257 |                 }
258 | 
259 |                 &>textarea {
260 |                     padding: 10px;
261 |                     height: 75px;
262 |                 }
263 |             }
264 |         }
265 | 
266 |         @media screen and (max-width: 960px) {
267 |             flex-direction: column;
268 |             align-items: flex-start;
269 |         }
270 |     }
271 | 
272 |     @include element("bill") {
273 |         display: flex;
274 |         width: 100%;
275 |         flex-direction: column;
276 |         align-items: flex-end;
277 |         padding-right: 40px;
278 | 
279 |         .bill-detail {
280 |             display: flex;
281 |             flex-direction: column;
282 |             width: 200px;
283 |             
284 |             &>div {
285 |                 display: flex;
286 |                 flex-direction: row;
287 |                 justify-content: space-between;
288 |                 margin-bottom: 10px;
289 |                 line-height: 1.2;
290 | 
291 |                 &>span {
292 |                     display: flex;
293 |                     align-items: center;
294 |                     color: #b9bec1;
295 |                     font-size: 15px;
296 |                 }
297 | 
298 |                 &>h2 {
299 |                     margin: 0px;
300 |                     font-size: 14px;
301 |                     color: #666;
302 |                 }
303 | 
304 |                 .bill-total {
305 |                     font-size: 19px;
306 |                     color: #888;
307 |                 }
308 |             }
309 | 
310 |             @media screen and (max-width: 740px) {
311 |                 width: 240px;
312 |             }
313 |         }
314 |     }
315 | 
316 | }

--------------------------------------------------------------------------------
/assets/styles/partials/components/_item.scss:
--------------------------------------------------------------------------------
 1 | .item {
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     width: 100%;
 5 |     
 6 |     @include element("head") {
 7 |         display: flex;
 8 |         flex-direction: row;
 9 |         align-items: center;
10 |         width: calc(100% - 50px);
11 | 
12 |         &>div {
13 |             text-transform: uppercase;
14 |             max-width: 160px;
15 |             width: 100%;
16 |             color: #555;
17 |             font-size: 13px;
18 |             font-weight: 300;
19 |             padding: 0 8px;
20 |         }
21 | 
22 |         @media screen and (max-width: 699px) {
23 |             display: none;
24 |         }
25 |     }
26 | 
27 |     .item-row {
28 | 
29 |         &>input[type=text]:focus {
30 |             // border-radius: 3px;
31 |             // border: 1px solid #D0D6DC;
32 |             box-shadow: 0px 1px 5px -3px rgba(0,0,0,0.1);
33 |         }
34 |         
35 |         &>input[type=number]:focus {
36 |             // border-radius: 3px;
37 |             // border: 1px solid #D0D6DC;
38 |             box-shadow: 0px 1px 5px -3px rgba(0,0,0,0.1);
39 |         }
40 | 
41 |         input[type=number]::-webkit-inner-spin-button, 
42 |         input[type=number]::-webkit-outer-spin-button { 
43 |             -webkit-appearance: none; 
44 |         }
45 |     }
46 |     
47 |     .fa-plus-circle {
48 |         font-size: 14px;
49 |         margin-right: 3px;
50 |         color: #fff;
51 |     }
52 | }
53 |

--------------------------------------------------------------------------------
/assets/styles/partials/components/_navbar.scss:
--------------------------------------------------------------------------------
 1 | .navbar {
 2 |     position: fixed;
 3 |     width: 100%;
 4 |     background: transparent;
 5 |     color: #fff;
 6 |     border-radius: 0;
 7 |     height: 70px;
 8 |     border-radius: 0;
 9 |     margin: 0;
10 |     z-index: 10;
11 |     top: 0;
12 | 
13 |     ul {
14 |         display: flex;
15 |         flex-direction: row;
16 |         align-items: center;
17 |         width: 100%;
18 | 
19 |         .navbar__logo {
20 |             flex-grow: 2;
21 |             letter-spacing: .03em;
22 |             line-height: 2.0;
23 |             font-size: 20px;
24 |             font-weight: 700;
25 |             padding: 15px 0 15px 40px;
26 | 
27 |             a {
28 |                 text-decoration: none;
29 |                 color: #fff;
30 |             }
31 | 
32 |         }
33 |     }
34 | }
35 | 
36 | #app.fix-navbar {
37 |     .navbar {
38 |         color: #555;
39 |         border-bottom: 1px solid #f6f6f6;
40 |         background-color: rgba(255,255,255,0.985);
41 |         // box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1);
42 | 
43 |         .navbar__logo {
44 |             a {
45 |                 color: #555;
46 |             }
47 |         }
48 | 
49 |         .solid-btn {
50 |             color: #555;
51 |             border: 1px solid #555;
52 | 
53 |             &:hover, &:focus {
54 |                 color: #888;
55 |                 border-color: #888;
56 |             }
57 |         }
58 |     }
59 | }
60 |

--------------------------------------------------------------------------------
/assets/styles/partials/components/_pdf-preview.scss:
--------------------------------------------------------------------------------
  1 | .preview {
  2 |     max-width: 800px;
  3 |     width: 100%;
  4 |     background-color: #fff;
  5 |     box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  6 |     margin: 0px auto;
  7 | 
  8 |     .invoice {
  9 |         hr {
 10 |             max-width: 100%;
 11 |             margin: 40px 0;
 12 |             border: 1px solid #f2f2f2;
 13 |         }
 14 | 
 15 |         @media screen and (max-width: 812px) {
 16 |             margin: 0;
 17 |         }
 18 | 
 19 |         @include element("header") {
 20 |             align-items: center;
 21 |             max-width: 100%;
 22 | 
 23 |             h2, h4 {
 24 |                 margin: 0;
 25 |             }
 26 | 
 27 |             h2 {
 28 |                 font-weight: 600;
 29 |             }
 30 |         }
 31 | 
 32 |         @include element("info") {
 33 |             margin-top: 30px;
 34 |             align-items: flex-start;
 35 |             max-width: 540px;
 36 |             
 37 |             .info {
 38 |                 >label {
 39 |                     font-weight: 600;
 40 |                     color: #777;
 41 |                     font-size: 13px;
 42 |                 }
 43 |             }
 44 | 
 45 |             .address-element {
 46 |                 height: auto;
 47 |                 >label {
 48 |                     text-transform: uppercase;
 49 |                     color: #21d4fd;
 50 |                     font-size: 16px;
 51 |                     font-weight: 600;
 52 |                 }
 53 | 
 54 |                 span {
 55 |                     white-space: pre-line;
 56 |                 }
 57 |             }
 58 |         }
 59 | 
 60 |         @include element("item-list") {
 61 |             display: flex;
 62 |             flex-direction: column;
 63 |             width: 100%;
 64 | 
 65 |             @include element("head") {
 66 |                 margin: 0 15px;
 67 |                 padding: 15px 0px 15px 10px;
 68 |                 display: flex;
 69 |                 align-items: center;
 70 |                 border-bottom: 1px solid #f2f2f2;
 71 | 
 72 |                 >div {
 73 |                     text-transform: uppercase;
 74 |                     max-width: 140px;
 75 |                     font-size: 12px;
 76 |                     font-weight: 600;
 77 |                     width: 100%;
 78 |                     color: #999;
 79 |                 }
 80 | 
 81 |                 @media screen and (max-width: 600px) {
 82 |                     margin: 0px;
 83 |                     padding-left: 0;
 84 | 
 85 |                     >div {
 86 |                         max-width: 90px; 
 87 |                     }
 88 |                 }
 89 | 
 90 |                 @media screen and (max-width: 500px) {
 91 |                     display: none;
 92 |                 }
 93 |             }
 94 |             
 95 |             @include element("item") {
 96 |                 margin: 10px 15px;
 97 |                 padding: 15px 0px 15px 10px;
 98 |                 display: flex;
 99 |                 
100 |                 >div {
101 |                     display: flex;
102 |                     align-items: center;
103 |                     max-width: 140px;
104 |                     width: 100%;
105 | 
106 |                     >h4 {
107 |                         margin: 0;
108 |                         padding: 0;
109 |                         display: none;
110 |                         text-transform: uppercase;
111 |                         font-size: 12px;
112 |                         font-weight: 600;
113 |                         width: 100%;
114 |                         color: #999;
115 |                     }
116 | 
117 |                     span {
118 |                         font-size: 15px;
119 |                         font-weight: 500;
120 |                         color: #555;
121 |                     }
122 |                 }
123 | 
124 |                 @media screen and (max-width: 600px) {
125 |                     margin: 0px;
126 |                     
127 |                     >div {
128 |                         max-width: 100px;
129 |                     }
130 |                 }
131 | 
132 |                 @media screen and (max-width: 500px) {
133 |                     margin: 10px 0px;
134 |                     display: flex;
135 |                     flex-direction: column;
136 |                     border-bottom: 1px solid #f2f2f2;
137 | 
138 |                     >div {
139 |                         max-width: 100%;
140 |                         margin: 5px 5px;
141 |                         height: auto;
142 |                         display: flex;
143 |                         align-items: flex-start;
144 | 
145 |                         >h4 {
146 |                             display: block;
147 |                             width: 97px;
148 |                         }
149 | 
150 |                         span {
151 |                             margin: -5px 3px;
152 |                             width: calc(100% - 97px);
153 |                         }
154 |                     }
155 |                 }
156 |             }
157 |         }
158 |     }
159 | }
160 | 
161 | .preview-download {
162 |     max-width: 800px;
163 |     width: 100%;
164 |     margin: 50px auto 20px;
165 |     
166 |     i {
167 |         margin-right: 5px;
168 |     }
169 | 
170 |     @media screen and (max-width: 812px) {
171 |         padding: 5px 15px;
172 |     }
173 | }

--------------------------------------------------------------------------------
/assets/styles/partials/components/_react-select.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * React Select
  3 |  * ============
  4 |  * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
  5 |  * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
  6 |  * MIT License: https://github.com/JedWatson/react-select
  7 | */
  8 | .Select
  9 | {
 10 |     position: relative;
 11 | 
 12 |     max-width: 450px;
 13 |     margin: 20px auto;
 14 | 
 15 |     text-align: left;
 16 | }
 17 | .Select,
 18 | .Select div,
 19 | .Select input,
 20 | .Select span
 21 | {
 22 |     box-sizing: border-box;
 23 | }
 24 | .Select.is-disabled > .Select-control
 25 | {
 26 |     background-color: #f9f9f9;
 27 | }
 28 | .Select.is-disabled > .Select-control:hover
 29 | {
 30 |     box-shadow: none;
 31 | }
 32 | .Select.is-disabled .Select-arrow-zone
 33 | {
 34 |     cursor: default;
 35 |     pointer-events: none;
 36 | 
 37 |     opacity: .35;
 38 | }
 39 | .Select-control
 40 | {
 41 |     position: relative;
 42 | 
 43 |     display: table;
 44 |     overflow: hidden;
 45 | 
 46 |     width: 100%;
 47 |     height: 48px;
 48 | 
 49 |     border-spacing: 0;
 50 |     border-collapse: separate;
 51 | 
 52 |     cursor: default;
 53 | 
 54 |     color: #333;
 55 |     border: 1px solid #ccc;
 56 |     border-color: #d9d9d9 #ccc #b3b3b3;
 57 |     border-radius: 4px;
 58 |     outline: none;
 59 |     background-color: #fff;
 60 | }
 61 | .Select-control:hover
 62 | {
 63 |     box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
 64 | }
 65 | .Select-control .Select-input:focus
 66 | {
 67 |     outline: none;
 68 | }
 69 | .is-searchable.is-open > .Select-control
 70 | {
 71 |     cursor: text;
 72 | }
 73 | .is-open > .Select-control
 74 | {
 75 |     border-color: #b3b3b3 #ccc #d9d9d9;
 76 |     border-bottom-right-radius: 0;
 77 |     border-bottom-left-radius: 0;
 78 |     background: #fff;
 79 | }
 80 | .is-open > .Select-control > .Select-arrow
 81 | {
 82 |     border-width: 0 5px 5px;
 83 |     border-color: transparent transparent #999;
 84 | }
 85 | .is-searchable.is-focused:not(.is-open) > .Select-control
 86 | {
 87 |     cursor: text;
 88 | }
 89 | .is-focused:not(.is-open) > .Select-control
 90 | {
 91 |     border-color: #007eff;
 92 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(0, 126, 255, .1);
 93 | }
 94 | .Select-placeholder,
 95 | .Select--single > .Select-control .Select-value
 96 | {
 97 |     line-height: 46px;
 98 | 
 99 |     position: absolute;
100 |     top: 0;
101 |     right: 0;
102 |     bottom: 0;
103 |     left: 0;
104 | 
105 |     overflow: hidden;
106 | 
107 |     max-width: 100%;
108 |     padding-right: 10px;
109 |     padding-left: 10px;
110 | 
111 |     white-space: nowrap;
112 |     text-overflow: ellipsis;
113 | 
114 |     color: #aaa;
115 | }
116 | .has-value.Select--single > .Select-control .Select-value .Select-value-label,
117 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label
118 | {
119 |     color: #333;
120 | }
121 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label,
122 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label
123 | {
124 |     cursor: pointer;
125 |     text-decoration: none;
126 | }
127 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
128 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
129 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
130 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus
131 | {
132 |     text-decoration: underline;
133 | 
134 |     color: #007eff;
135 |     outline: none;
136 | }
137 | .Select-input
138 | {
139 |     height: 46px;
140 |     padding-right: 10px;
141 |     padding-left: 10px;
142 | 
143 |     vertical-align: middle;
144 | }
145 | .Select-input > input
146 | {
147 |     font-family: inherit;
148 |     font-size: inherit;
149 |     line-height: 28px;
150 | 
151 |     display: inline-block;
152 | 
153 |     width: 100%;
154 |     margin: 0;
155 |     /* For IE 8 compatibility */
156 |     padding: 8px 0 12px;
157 | 
158 |     cursor: default;
159 | 
160 |     border: 0 none;
161 |     outline: none;
162 |     background: none transparent;
163 |     box-shadow: none;
164 |     /* For IE 8 compatibility */
165 | 
166 |     -webkit-appearance: none;
167 | }
168 | .is-focused .Select-input > input
169 | {
170 |     cursor: text;
171 | }
172 | .has-value.is-pseudo-focused .Select-input
173 | {
174 |     opacity: 0;
175 | }
176 | .Select-control:not(.is-searchable) > .Select-input
177 | {
178 |     outline: none;
179 | }
180 | .Select-loading-zone
181 | {
182 |     position: relative;
183 | 
184 |     display: table-cell;
185 | 
186 |     width: 16px;
187 | 
188 |     cursor: pointer;
189 |     text-align: center;
190 |     vertical-align: middle;
191 | }
192 | .Select-loading
193 | {
194 |     position: relative;
195 | 
196 |     display: inline-block;
197 | 
198 |     box-sizing: border-box;
199 |     width: 16px;
200 |     height: 16px;
201 | 
202 |     -webkit-animation: Select-animation-spin 400ms infinite linear;
203 |          -o-animation: Select-animation-spin 400ms infinite linear;
204 |             animation: Select-animation-spin 400ms infinite linear;
205 |     vertical-align: middle;
206 | 
207 |     border: 2px solid #ccc;
208 |     border-right-color: #333;
209 |     border-radius: 50%;
210 | }
211 | .Select-clear-zone
212 | {
213 |     position: relative;
214 | 
215 |     display: none;
216 | 
217 |     width: 17px;
218 | 
219 |     cursor: pointer;
220 |     -webkit-animation: Select-animation-fadeIn 200ms;
221 |          -o-animation: Select-animation-fadeIn 200ms;
222 |             animation: Select-animation-fadeIn 200ms;
223 |     text-align: center;
224 |     vertical-align: middle;
225 | 
226 |     color: #999;
227 | }
228 | .Select-clear-zone:hover
229 | {
230 |     color: #d0021b;
231 | }
232 | .Select-clear
233 | {
234 |     font-size: 18px;
235 |     line-height: 1;
236 | 
237 |     display: inline-block;
238 | }
239 | .Select--multi .Select-clear-zone
240 | {
241 |     width: 17px;
242 | }
243 | .Select-arrow-zone
244 | {
245 |     position: relative;
246 | 
247 |     display: table-cell;
248 | 
249 |     width: 25px;
250 |     padding-right: 5px;
251 | 
252 |     cursor: pointer;
253 |     text-align: center;
254 |     vertical-align: middle;
255 | }
256 | .Select-arrow
257 | {
258 |     display: inline-block;
259 | 
260 |     width: 0;
261 |     height: 0;
262 | 
263 |     border-width: 5px 5px 2.5px;
264 |     border-style: solid;
265 |     border-color: #999 transparent transparent;
266 | }
267 | .is-open .Select-arrow,
268 | .Select-arrow-zone:hover > .Select-arrow
269 | {
270 |     border-top-color: #666;
271 | }
272 | .Select--multi .Select-multi-value-wrapper
273 | {
274 |     display: inline-block;
275 | }
276 | .Select .Select-aria-only
277 | {
278 |     display: inline-block;
279 |     overflow: hidden;
280 |     clip: rect(0, 0, 0, 0);
281 | 
282 |     width: 1px;
283 |     height: 1px;
284 |     margin: -1px;
285 | }
286 | @-webkit-keyframes Select-animation-fadeIn
287 | {
288 |     from
289 |     {
290 |         opacity: 0;
291 |     }
292 |     to
293 |     {
294 |         opacity: 1;
295 |     }
296 | }
297 | @keyframes Select-animation-fadeIn
298 | {
299 |     from
300 |     {
301 |         opacity: 0;
302 |     }
303 |     to
304 |     {
305 |         opacity: 1;
306 |     }
307 | }
308 | .Select-menu-outer
309 | {
310 |     position: absolute;
311 |     z-index: 1;
312 |     top: 100%;
313 | 
314 |     box-sizing: border-box;
315 |     width: 100%;
316 |     max-height: 200px;
317 |     margin-top: -1px;
318 | 
319 |     border: 1px solid #ccc;
320 |     border-top-color: #e6e6e6;
321 |     border-bottom-right-radius: 4px;
322 |     border-bottom-left-radius: 4px;
323 |     background-color: #fff;
324 |     box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
325 | 
326 |     -webkit-overflow-scrolling: touch;
327 | }
328 | .Select-menu
329 | {
330 |     overflow-y: auto;
331 | 
332 |     max-height: 198px;
333 | }
334 | .Select-option
335 | {
336 |     display: block;
337 | 
338 |     box-sizing: border-box;
339 |     padding: 8px 10px;
340 | 
341 |     cursor: pointer;
342 | 
343 |     color: #666;
344 |     background-color: #fff;
345 | }
346 | .Select-option:last-child
347 | {
348 |     border-bottom-right-radius: 4px;
349 |     border-bottom-left-radius: 4px;
350 | }
351 | .Select-option.is-selected
352 | {
353 |     color: #333;
354 |     background-color: #f5faff;
355 |     /* Fallback color for IE 8 */
356 |     background-color: rgba(0, 126, 255, .04);
357 | }
358 | .Select-option.is-focused
359 | {
360 |     color: #333;
361 |     background-color: #ebf5ff;
362 |     /* Fallback color for IE 8 */
363 |     background-color: rgba(0, 126, 255, .08);
364 | }
365 | .Select-option.is-disabled
366 | {
367 |     cursor: default;
368 | 
369 |     color: #ccc;
370 | }
371 | .Select-noresults
372 | {
373 |     display: block;
374 | 
375 |     box-sizing: border-box;
376 |     padding: 8px 10px;
377 | 
378 |     cursor: default;
379 | 
380 |     color: #999;
381 | }
382 | .Select--multi .Select-input
383 | {
384 |     margin-left: 10px;
385 |     padding: 0;
386 | 
387 |     vertical-align: middle;
388 | }
389 | .Select--multi.has-value .Select-input
390 | {
391 |     margin-left: 5px;
392 | }
393 | .Select--multi .Select-value
394 | {
395 |     font-size: .9em;
396 |     line-height: 1.4;
397 | 
398 |     display: inline-block;
399 | 
400 |     margin-top: 5px;
401 |     margin-left: 5px;
402 | 
403 |     vertical-align: top;
404 | 
405 |     color: #007eff;
406 |     border: 1px solid #c2e0ff;
407 |     /* Fallback color for IE 8 */
408 |     border: 1px solid rgba(0, 126, 255, .24);
409 |     border-radius: 2px;
410 |     background-color: #ebf5ff;
411 |     /* Fallback color for IE 8 */
412 |     background-color: rgba(0, 126, 255, .08);
413 | }
414 | .Select--multi .Select-value-icon,
415 | .Select--multi .Select-value-label
416 | {
417 |     display: inline-block;
418 | 
419 |     vertical-align: middle;
420 | }
421 | .Select--multi .Select-value-label
422 | {
423 |     padding: 2px 5px;
424 | 
425 |     cursor: default;
426 | 
427 |     border-top-right-radius: 2px;
428 |     border-bottom-right-radius: 2px;
429 | }
430 | .Select--multi a.Select-value-label
431 | {
432 |     cursor: pointer;
433 |     text-decoration: none;
434 | 
435 |     color: #007eff;
436 | }
437 | .Select--multi a.Select-value-label:hover
438 | {
439 |     text-decoration: underline;
440 | }
441 | .Select--multi .Select-value-icon
442 | {
443 |     padding: 1px 5px 3px;
444 | 
445 |     cursor: pointer;
446 | 
447 |     border-right: 1px solid #c2e0ff;
448 |     /* Fallback color for IE 8 */
449 |     border-right: 1px solid rgba(0, 126, 255, .24);
450 |     border-top-left-radius: 2px;
451 |     border-bottom-left-radius: 2px;
452 | }
453 | .Select--multi .Select-value-icon:hover,
454 | .Select--multi .Select-value-icon:focus
455 | {
456 |     color: #0071e6;
457 |     background-color: #d8eafd;
458 |     /* Fallback color for IE 8 */
459 |     background-color: rgba(0, 113, 230, .08);
460 | }
461 | .Select--multi .Select-value-icon:active
462 | {
463 |     background-color: #c2e0ff;
464 |     /* Fallback color for IE 8 */
465 |     background-color: rgba(0, 126, 255, .24);
466 | }
467 | .Select--multi.is-disabled .Select-value
468 | {
469 |     color: #333;
470 |     border: 1px solid #e3e3e3;
471 |     background-color: #fcfcfc;
472 | }
473 | .Select--multi.is-disabled .Select-value-icon
474 | {
475 |     cursor: not-allowed;
476 | 
477 |     border-right: 1px solid #e3e3e3;
478 | }
479 | .Select--multi.is-disabled .Select-value-icon:hover,
480 | .Select--multi.is-disabled .Select-value-icon:focus,
481 | .Select--multi.is-disabled .Select-value-icon:active
482 | {
483 |     background-color: #fcfcfc;
484 | }
485 | @keyframes Select-animation-spin
486 | {
487 |     to
488 |     {
489 |         transform: rotate(1turn);
490 |     }
491 | }
492 | @-webkit-keyframes Select-animation-spin
493 | {
494 |     to
495 |     {
496 |         -webkit-transform: rotate(1turn);
497 |     }
498 | }
499 |

--------------------------------------------------------------------------------
/assets/styles/partials/components/_react-toggle.scss:
--------------------------------------------------------------------------------
  1 | .react-toggle {
  2 |     touch-action: pan-x;
  3 |     display: inline-block;
  4 |     position: relative;
  5 |     cursor: pointer;
  6 |     background-color: transparent;
  7 |     border: 0;
  8 |     padding: 0;
  9 |     user-select: none;
 10 |     -webkit-tap-highlight-color: rgba(0,0,0,0);
 11 |     -webkit-tap-highlight-color: transparent;
 12 | 
 13 |     @include modifier("disabled") {
 14 |         cursor: not-allowed;
 15 |         opacity: 0.5;
 16 |         transition: opacity 0.25s;
 17 |     }
 18 | 
 19 |     @include modifier("checked") {
 20 | 
 21 |         .react-toggle-track-check {
 22 |             opacity: 1;
 23 |             transition: opacity 0.25s ease;
 24 |         }
 25 | 
 26 |         .react-toggle-track-x {
 27 |             opacity: 0;
 28 |         }
 29 | 
 30 |         .react-toggle-thumb {
 31 |             left: 27px;
 32 |             border-color: #4846DE;
 33 |             background-color: #4846DE;
 34 | 
 35 |             &:after {
 36 |                 content: "✓";
 37 |                 display: block;
 38 |                 color: #fff;
 39 |                 position: relative;
 40 |                 width: 100%;
 41 |                 height: 100%;
 42 |                 text-align: center;
 43 |                 font-size: 10px;
 44 |                 line-height: 1.2;
 45 |             }
 46 |         }
 47 |     }
 48 | 
 49 |     @media screen and (max-width: 960px) {
 50 |         .react-toggle-track {
 51 |             width: 52px;
 52 |             height: 12px;
 53 |         }
 54 | 
 55 |         .react-toggle-thumb {
 56 |             width: 18px;
 57 |             height: 18px;
 58 | 
 59 |             &:after {
 60 |                 font-size: 10px;
 61 |                 top: 0;
 62 |             }
 63 |         }
 64 | 
 65 |         @include modifier("checked") {
 66 | 
 67 |             .react-toggle-thumb {
 68 |                 left: 34px;
 69 | 
 70 |                 &:after {
 71 |                     line-height: 1.7;
 72 |                 }
 73 |             }
 74 |         }
 75 |     }
 76 | }
 77 | 
 78 | .react-toggle-screenreader-only {
 79 |     border: 0;
 80 |     clip: rect(0 0 0 0);
 81 |     height: 1px;
 82 |     margin: -1px;
 83 |     overflow: hidden;
 84 |     padding: 0;
 85 |     position: absolute;
 86 |     width: 1px;
 87 | }
 88 | 
 89 | .react-toggle-track {
 90 |     width: 42px;
 91 |     height: 10px;
 92 |     padding: 0;
 93 |     border: 1px solid #D0D6DC;
 94 |     border-radius: 30px;
 95 |     background-color: #F8F9FA;
 96 |     transition: all 0.2s ease;
 97 | }
 98 | 
 99 | .react-toggle-track-check {
100 |     position: absolute;
101 |     width: 14px;
102 |     height: 10px;
103 |     top: 0px;
104 |     bottom: 0px;
105 |     margin-top: auto;
106 |     margin-bottom: auto;
107 |     line-height: 0;
108 |     left: 8px;
109 |     opacity: 0;
110 |     transition: opacity 0.25s ease;
111 | }
112 | 
113 | 
114 | .react-toggle-track-x {
115 |     position: absolute;
116 |     width: 10px;
117 |     height: 10px;
118 |     top: 0px;
119 |     bottom: 0px;
120 |     margin-top: auto;
121 |     margin-bottom: auto;
122 |     line-height: 0;
123 |     right: 10px;
124 |     opacity: 1;
125 |     transition: opacity 0.25s ease;
126 | }
127 | 
128 | .react-toggle-thumb {
129 |     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
130 |     position: absolute;
131 |     top: -3px;
132 |     left: 0px;
133 |     width: 16px;
134 |     height: 16px;
135 |     border: 1px solid #F84000;
136 |     border-radius: 50%;
137 |     background-color: #F84000;
138 | 
139 |     box-sizing: border-box;
140 | 
141 |     transition: all 0.25s ease;
142 | 
143 |     &:after {
144 |         content: "✕";
145 |         display: block;
146 |         color: #fff;
147 |         position: relative;
148 |         width: 100%;
149 |         height: 100%;
150 |         text-align: center;
151 |         font-size: 9px;
152 |         top: 1px;
153 |     }
154 | }

--------------------------------------------------------------------------------
/assets/styles/partials/components/_sidenav.scss:
--------------------------------------------------------------------------------
  1 | .side-nav {
  2 |     display: flex;
  3 |     flex-direction: column;
  4 |     position: fixed;
  5 |     padding: 20px 0;
  6 |     height: 100%;
  7 |     width: 280px;
  8 |     background-color: #fff;
  9 |     border-top: 1px solid #f6f6f6;
 10 |     box-shadow: 2px 0px 4px 0 rgba(156,156,156,0.2);
 11 |     color: #555;
 12 |     
 13 |     h4 {
 14 |         margin-left: 40px;
 15 |         margin-right: 40px;
 16 |         font-weight: 700;
 17 |         font-size: 16px;
 18 |     }
 19 | 
 20 |     hr {
 21 |         margin: 8px 40px;
 22 |         border: 1px solid #f2f2f2;
 23 |         max-width: 100%;
 24 |         border-top: 0;
 25 |     }
 26 | 
 27 |     .full-line {
 28 |         margin: 8px 0;
 29 |     }
 30 | 
 31 |     .visiblity-check {
 32 |         display: block;
 33 |     }
 34 | 
 35 |     @include element("element") {
 36 |         margin: 2px 40px 0 40px;
 37 | 
 38 |         .setting {
 39 |             margin-bottom: 10px;
 40 | 
 41 |             span {
 42 |                 font-weight: 700;
 43 |                 font-size: 13px;
 44 |             }
 45 | 
 46 |             > input {
 47 |                 width: 100%;
 48 |                 margin-top: 10px;
 49 |                 border: 1px solid #D2D8DE;
 50 |                 border-radius: 2px;
 51 |             }
 52 | 
 53 |             > input[type=text] {
 54 |                 padding: 6px 10px;
 55 |                 font-size: 14px;
 56 |                 font-weight: 300;
 57 |                 color: #555;
 58 |                 letter-spacing: .003em;
 59 |             }
 60 | 
 61 |             @include modifier("inline") {
 62 |                 display: flex;
 63 |                 flex-direction: row;
 64 |                 justify-content: space-between;
 65 |                 margin-top: 15px;
 66 |                 margin-bottom: 0px;
 67 |             }
 68 | 
 69 |             @include modifier("paid") {
 70 |                 padding: 0;
 71 |             }
 72 | 
 73 |             .Select {
 74 |                 max-width: 200px;
 75 |                 width: 100%;
 76 |                 font-weight: 400;
 77 |                 margin: 10px auto;
 78 |                 margin-bottom: 0px;
 79 | 
 80 |                 .Select-input {
 81 |                     height: 32px;
 82 | 
 83 |                     &>input {
 84 |                         padding: 0;
 85 |                     }
 86 |                 }
 87 |                 
 88 |                 .Select-placeholder {
 89 |                     line-height: 32px;
 90 |                     font-weight: 400;
 91 |                 }
 92 | 
 93 |                 .Select-control {
 94 |                     height: 32px;
 95 |                     border-radius: 3px;
 96 |                     border-color: #D0D6DC;
 97 | 
 98 |                     .Select-value {
 99 |                         line-height: 32px;
100 |                     }
101 |                 }
102 | 
103 |                 .Select-value-label {
104 |                     font-weight: 400;
105 |                 }
106 |             }
107 | 
108 |             .fa-paper-plane {
109 |                 font-size: 12px;
110 |             }
111 |         }
112 |     }
113 |     
114 |     @media screen and (min-width: 961px) and (max-width: 1200px){
115 |         width: 260px;
116 |     }
117 | 
118 |     @media screen and (max-width: 960px) {
119 |         width: 100%;
120 |         position: relative;
121 |         height: auto;
122 |         margin-bottom: 0;
123 | 
124 |         .visiblity-check {
125 |             display: none;
126 |         }
127 | 
128 |         @include element ("inline-element") {
129 |             display: flex;
130 |             flex-direction: row;
131 |             justify-content: space-between;
132 |         }
133 | 
134 |         @include element ("element") {
135 |             @include modifier ("select") {
136 |                 margin: 10px 40px 0 40px;
137 |                 width: 100%;
138 | 
139 |                 &:first-child {
140 |                     margin-right: 20px;
141 |                 }
142 | 
143 |                 &:nth-child(2) {
144 |                     margin-left: 20px;
145 |                 }
146 |             }
147 | 
148 |             .setting {
149 |                 padding-top: 10px;
150 | 
151 |                 span {
152 |                     font-size: 14px;
153 |                 }
154 | 
155 |                 > input[type=text] {
156 |                     padding: 10px 10px;
157 |                 }
158 | 
159 |                 .Select {
160 |                     max-width: 100%;
161 | 
162 |                     .Select-input {
163 |                         height: 42px;
164 | 
165 |                         &> input {
166 |                             line-height: 42px;
167 |                         }
168 |                     }
169 |                     
170 |                     .Select-control {
171 |                         height: 42px;
172 | 
173 |                         .Select-value {
174 |                             line-height: 42px;
175 |                         }
176 |                     }
177 |                 }
178 |             }
179 |         }
180 |     }
181 | }

--------------------------------------------------------------------------------
/assets/styles/partials/settings/_global.scss:
--------------------------------------------------------------------------------
1 | $react-dates-color-primary:  #495aff;
2 | $react-dates-color-secondary: #0acffe;
3 |

--------------------------------------------------------------------------------
/assets/styles/partials/tools/_mixins.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /// Block Element
 3 | /// @access public
 4 | /// @param {String} $element - Element's name
 5 | @mixin element($element) {
 6 |     &__#{$element} {
 7 |         @content;
 8 |     }
 9 | }
10 | 
11 | /// Block Modifier
12 | /// @access public
13 | /// @param {String} $modifier - Modifier's name
14 | @mixin modifier($modifier) {
15 |     &--#{$modifier} {
16 |         @content;
17 |     }
18 | }
19 | 
20 | @mixin transition($e: 'all', $d: '0.3', $a: 'ease') {
21 |     -webkit-transition: #{$e} #{$d}s #{$a};
22 |             transition: #{$e} #{$d}s #{$a};
23 | }
24 | 
25 | @mixin bg($pos: 'center') {
26 |     background-size: cover;
27 |     background-position: #{$pos} center;
28 | }
29 | 
30 | @mixin ellipsis() {
31 |     white-space: nowrap;
32 |     overflow: hidden;
33 |     text-overflow: ellipsis;
34 | }
35 | 
36 | @mixin keyframes($name) {
37 |     @keyframes #{$name} {
38 |         0%, 100% {
39 |             transform: rotate(0);
40 |         }
41 |         20%,
42 |         60% {
43 |             transform: rotate(-25deg)
44 |         }
45 |         40%,
46 |         80% {
47 |             transform: rotate(10deg)
48 |         }
49 |     }
50 | }
51 |

--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>QuickBill</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="description" content="Free and Simple invoicing for freelancers and businesses.">
 8 |     <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
 9 |     <link rel="manifest" href="./manifest.json">
10 |     <link rel="canonical" href="https://PunitGr.github.io/QuickBill/">
11 |     <meta name="mobile-web-app-capable" content="yes">
12 |     <meta name="apple-mobile-web-app-capable" content="yes">
13 |     <meta name="application-name" content="QuickBill">
14 |     <meta name="apple-mobile-web-app-status-bar-style" content="black">
15 |     <meta name="apple-mobile-web-app-title" content="QuickBill">
16 |     <link rel="icon" sizes="192x192" href="assets/images/icon.png">
17 |     <link rel="apple-touch-icon" href="assets/images/icon.png">
18 |     <meta name="msapplication-TileImage" content="assets/images/icon.png">
19 |     <meta name="msapplication-TileColor" content="#5564f5">
20 |     <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
21 | 
22 |     <meta name="theme-color" content="#5564f5">
23 |     <meta property="og:title" content="QuickBill">
24 |     <meta property="og:type" content="website">
25 |     <meta property="og:image" content="https://PunitGr.github.io/QuickBill/assets/images/icon.png">
26 |     <meta property="og:url" content="https://PunitGr.github.io/QuickBill/">
27 |     <meta property="og:description" content="Free and Simple invoicing for freelancers and businesses.">
28 |     <meta name="twitter:card" content="summary">
29 |     <meta name="twitter:url" content="https://PunitGr.github.io/QuickBill/">
30 |     <meta name="twitter:title" content="QuickBill">
31 |     <meta name="twitter:description" content="The best and easiest way to create free invoices for freelancers and businesses. No install or signup required, just use it right away in your browser!">
32 |     <meta name="twitter:image" content="https://PunitGr.github.io/QuickBill/assets/images/icon.png">
33 |     <meta name="twitter:creator" content="@punitgr">   
34 | 
35 |     <link rel="stylesheet" href="assets/css/styles.css">
36 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
37 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
38 |     <style>
39 |         .github-corner:hover .octo-arm {
40 |             animation: octocat-wave 560ms ease-in-out
41 |         }
42 | 
43 |         @keyframes octocat-wave {
44 |             0%,
45 |             100% {
46 |                 transform: rotate(0)
47 |             }
48 |             20%,
49 |             60% {
50 |                 transform: rotate(-25deg)
51 |             }
52 |             40%,
53 |             80% { 
54 |                 transform: rotate(10deg) 
55 |             }
56 |         }
57 | 
58 |         @media (max-width:500px) {
59 |             .github-corner:hover .octo-arm {
60 |                 animation: none
61 |             }
62 |             .github-corner .octo-arm {
63 |                 animation: octocat-wave 560ms ease-in-out
64 |             }
65 |         }
66 |     </style>
67 | </head>
68 | <body>
69 |     <div id="app"></div>
70 |     <script src="dist/index.bundle.js"></script>
71 |     <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
72 |     <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
73 |     <script async defer src="https://buttons.github.io/buttons.js"></script>
74 |     <script>
75 |         if ('serviceWorker' in navigator) {
76 |             window.addEventListener('load', () => {
77 |                 navigator.serviceWorker.register('service-worker.js').then((registration) => {
78 |                     console.log("ServiceWorker Registration successful with scope: ", registration.scope);
79 |                 }, (err) => {
80 |                     console.log("Service Worker registration failed");
81 |                 }).catch((err) => {
82 |                     console.log(err);
83 |                 });
84 |                 navigator.serviceWorker.ready.then(function(registration) {
85 |                     console.log('Service Worker Ready');
86 |                 });
87 |             });
88 |         } else {
89 |             console.log("Service Worker is not supported");
90 |         }
91 |     </script>
92 | </body>
93 | </html>

--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "background_color": "#fff",
 3 |   "display": "standalone",
 4 |   "icons": [
 5 |     {
 6 |       "sizes": "192x192",
 7 |       "src": "assets/images/icon.png",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "name": "QuickBill Web App",
12 |   "short_name": "QuickBill",
13 |   "start_url": "./?utm_source=web_app_manifest",
14 |   "theme_color": "#5564f5"
15 | }

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "QuickBill",
 3 |   "version": "1.0.0",
 4 |   "description": "Invoice Generator",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start-dev": "webpack-dev-server --content-base . --history-api-fallback --hot --inline --progress --colors --port 8000",
 8 |     "compile-sass": "sass --watch assets/styles:assets/css --style compressed",
 9 |     "start": "NODE_ENV=development concurrently \"npm run start-dev\" \"npm run compile-sass\"",
10 |     "start-server": "node server.js",
11 |     "build": "webpack -p"
12 |   },
13 |   "repository": "git@github.com:PunitGr/MakeInvoice.git",
14 |   "author": "PunitGr <groove679@gmail.com>",
15 |   "license": "MIT",
16 |   "devDependencies": {
17 |     "babel-cli": "^6.24.1",
18 |     "babel-core": "^6.24.1",
19 |     "babel-loader": "^7.0.0",
20 |     "babel-preset-es2015": "^6.24.1",
21 |     "babel-preset-flow": "^6.23.0",
22 |     "babel-preset-react": "^6.24.1",
23 |     "babel-preset-stage-1": "^6.24.1",
24 |     "concurrently": "^3.4.0",
25 |     "flow-bin": "^0.47.0",
26 |     "react-hot-loader": "^1.3.1",
27 |     "webpack": "^2.6.1",
28 |     "webpack-dev-server": "^2.4.5"
29 |   },
30 |   "dependencies": {
31 |     "express": "^4.15.3",
32 |     "jspdf": "^1.3.3",
33 |     "moment": "^2.18.1",
34 |     "react": "^15.5.4",
35 |     "react-addons-shallow-compare": "^15.5.2",
36 |     "react-dates": "^12.1.2",
37 |     "react-dom": "^15.5.4",
38 |     "react-redux": "^5.0.5",
39 |     "react-router-dom": "^4.1.1",
40 |     "react-router-redux": "^4.0.8",
41 |     "react-select": "^1.0.0-rc.5",
42 |     "react-sortable-hoc": "^0.6.3",
43 |     "react-toggle": "^4.0.1",
44 |     "redux": "^3.7.0"
45 |   }
46 | }
47 |

--------------------------------------------------------------------------------
/screenshots/Dashboard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PunitGr/QuickBill/06c80352f25cac194ed9a866ea6efbe43a3a63eb/screenshots/Dashboard.png

--------------------------------------------------------------------------------
/screenshots/Preview Screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PunitGr/QuickBill/06c80352f25cac194ed9a866ea6efbe43a3a63eb/screenshots/Preview Screen.png

--------------------------------------------------------------------------------
/screenshots/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PunitGr/QuickBill/06c80352f25cac194ed9a866ea6efbe43a3a63eb/screenshots/home.png

--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const express = require("express");
 3 | 
 4 | const app = express();
 5 | 
 6 | app.use('/dist', express.static(__dirname + '/dist'));
 7 | app.use('/assets', express.static(__dirname + '/assets'));
 8 | 
 9 | app.get('*', function response(req, res) {
10 |     res.sendFile(path.join(__dirname, 'index.html'));
11 | });
12 | 
13 | app.listen(8000, function () {
14 |     console.log('App listening on port 8000!');
15 | });

--------------------------------------------------------------------------------
/service-worker.js:
--------------------------------------------------------------------------------
 1 | let CACHE_NAME = 'QuickBill';
 2 | 
 3 | let urlsToCache = [
 4 |     './index.html',
 5 |     './404.html',
 6 |     '/assets/css/styles.css',
 7 |     '/assets/images/**.*',
 8 |     '/dist/index-bundle.js'
 9 | ];
10 | 
11 | self.addEventListener('activate',  event => {
12 |     event.waitUntil(self.clients.claim());
13 | });
14 | 
15 | self.addEventListener("install", function(event) {
16 |     event.waitUntil(
17 |         caches.open(CACHE_NAME)
18 |             .then(function(cache) {
19 |                 fetch("manifest.json")
20 |                     .then(resp => {
21 |                         resp.json();
22 |                     })
23 |                     .then(() => {
24 |                         cache.addAll(urlsToCache);
25 |                         console.log('cached');
26 |                     })
27 |             })
28 |     )
29 | })
30 | 
31 | self.addEventListener('fetch', function(event) {
32 |     event.respondWith(
33 |         caches.match(event.request, {ignoreSearch:true}).then(function(response) {
34 |             return response || fetch(event.request);
35 |         })
36 |     );
37 | });

--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | 
 4 | let env = process.env.NODE_ENV === 'production' ? 'production' : 'development';
 5 | 
 6 | let BASE_URL = {
 7 |     development: "'http://localhost:8000'"
 8 | }
 9 | 
10 | module.exports = {
11 |     entry: {
12 |         index: './app/index.js'
13 |     },
14 |     output: {
15 |         path: path.join(__dirname, "./dist"),
16 |         publicPath: "/dist/",
17 |         filename: "[name].bundle.js"
18 |     },
19 |     module: {
20 |         rules: [
21 |             {
22 |                 test: /.jsx?$/,
23 |                 loader: 'babel-loader',
24 |                 exclude: /node_modules/
25 |             }
26 |         ]
27 |     }
28 | }
29 | 
30 | if (env === 'production') {
31 |     config.plugins.push(
32 |         new webpack.optimize.UglifyJsPlugin({
33 |             compressor: {
34 |                 pure_getters: true,
35 |                 unsafe: true,
36 |                 unsafe_comps: true,
37 |                 warnings: false,
38 |             },
39 |             output: {
40 |                 comments: false,
41 |             },
42 |             sourceMap: false,
43 |         })
44 |     );
45 | }
46 | 
47 |

--------------------------------------------------------------------------------