@firedrill-tools/quickbooks 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -0
- package/README.md +240 -0
- package/firedrill/agent.target.json +17 -0
- package/firedrill/baseline.scenario.json +2338 -0
- package/firedrill/conformance.suite.json +22 -0
- package/firedrill/payment-response-lost.scenario.json +2344 -0
- package/firedrill/qbo-company-query.drill.json +143 -0
- package/firedrill/qbo-customers-items.drill.json +173 -0
- package/firedrill/qbo-default-identity.drill.json +53 -0
- package/firedrill/qbo-denied.drill.json +53 -0
- package/firedrill/qbo-escape-heavy-invoices.drill.json +160 -0
- package/firedrill/qbo-invalid-auth.drill.json +398 -0
- package/firedrill/qbo-invoice-lifecycle.drill.json +193 -0
- package/firedrill/qbo-large-invoice.drill.json +174 -0
- package/firedrill/qbo-mcp-shapes.drill.json +503 -0
- package/firedrill/qbo-payment-response-lost.drill.json +80 -0
- package/firedrill/qbo-payments.drill.json +110 -0
- package/firedrill/qbo-reports-only.drill.json +398 -0
- package/firedrill/qbo-roles.drill.json +143 -0
- package/firedrill/qbo-throttled.drill.json +398 -0
- package/firedrill/qbo-tight-limits.drill.json +368 -0
- package/firedrill/qbo-write-outage.drill.json +411 -0
- package/firedrill/throttled.scenario.json +2344 -0
- package/firedrill/tight-limits.scenario.json +2338 -0
- package/firedrill/tools/quickbooks/app/assets/ATTRIBUTION.md +33 -0
- package/firedrill/tools/quickbooks/app/assets/fonts/OFL.txt +93 -0
- package/firedrill/tools/quickbooks/app/assets/intuit-quickbooks.svg +1 -0
- package/firedrill/tools/quickbooks/app/assets/quickbooks.svg +1 -0
- package/firedrill/tools/quickbooks/app/site/app.js +157 -0
- package/firedrill/tools/quickbooks/app/site/assets/fonts/figtree-latin.woff2 +0 -0
- package/firedrill/tools/quickbooks/app/site/assets/intuit-quickbooks.svg +1 -0
- package/firedrill/tools/quickbooks/app/site/assets/quickbooks.svg +1 -0
- package/firedrill/tools/quickbooks/app/site/base.css +107 -0
- package/firedrill/tools/quickbooks/app/site/forms.css +85 -0
- package/firedrill/tools/quickbooks/app/site/icons.js +73 -0
- package/firedrill/tools/quickbooks/app/site/index.html +81 -0
- package/firedrill/tools/quickbooks/app/site/nav.css +99 -0
- package/firedrill/tools/quickbooks/app/site/store.js +85 -0
- package/firedrill/tools/quickbooks/app/site/tables.css +114 -0
- package/firedrill/tools/quickbooks/app/site/ui.js +189 -0
- package/firedrill/tools/quickbooks/app/site/views/accounts.js +59 -0
- package/firedrill/tools/quickbooks/app/site/views/batch-actions.js +116 -0
- package/firedrill/tools/quickbooks/app/site/views/batch.js +91 -0
- package/firedrill/tools/quickbooks/app/site/views/common.js +87 -0
- package/firedrill/tools/quickbooks/app/site/views/customer-detail.js +85 -0
- package/firedrill/tools/quickbooks/app/site/views/customer-drawer.js +71 -0
- package/firedrill/tools/quickbooks/app/site/views/customers.js +87 -0
- package/firedrill/tools/quickbooks/app/site/views/home.js +79 -0
- package/firedrill/tools/quickbooks/app/site/views/invoice-actions.js +109 -0
- package/firedrill/tools/quickbooks/app/site/views/invoice-editor.js +126 -0
- package/firedrill/tools/quickbooks/app/site/views/invoice-lines.js +92 -0
- package/firedrill/tools/quickbooks/app/site/views/invoices.js +118 -0
- package/firedrill/tools/quickbooks/app/site/views/items.js +105 -0
- package/firedrill/tools/quickbooks/app/site/views/payments.js +63 -0
- package/firedrill/tools/quickbooks/app/site/views/receive-payment.js +102 -0
- package/firedrill/tools/quickbooks/app/site/views/txn-frame.js +25 -0
- package/firedrill/tools/quickbooks/behavior.mjs +10 -0
- package/firedrill/tools/quickbooks/lib/access.mjs +167 -0
- package/firedrill/tools/quickbooks/lib/common.mjs +204 -0
- package/firedrill/tools/quickbooks/lib/criteria.mjs +107 -0
- package/firedrill/tools/quickbooks/lib/customers.mjs +140 -0
- package/firedrill/tools/quickbooks/lib/fields.mjs +157 -0
- package/firedrill/tools/quickbooks/lib/handlers-read.mjs +81 -0
- package/firedrill/tools/quickbooks/lib/handlers-write.mjs +95 -0
- package/firedrill/tools/quickbooks/lib/invoice-draft.mjs +165 -0
- package/firedrill/tools/quickbooks/lib/invoices.mjs +229 -0
- package/firedrill/tools/quickbooks/lib/items.mjs +117 -0
- package/firedrill/tools/quickbooks/lib/like.mjs +49 -0
- package/firedrill/tools/quickbooks/lib/payments.mjs +200 -0
- package/firedrill/tools/quickbooks/lib/pdf.mjs +96 -0
- package/firedrill/tools/quickbooks/lib/query-eval.mjs +178 -0
- package/firedrill/tools/quickbooks/lib/query-parse.mjs +229 -0
- package/firedrill/tools/quickbooks/lib/views.mjs +88 -0
- package/firedrill/tools/quickbooks/lib/wire.mjs +147 -0
- package/firedrill/tools/quickbooks/quickbooks.tool.json +11014 -0
- package/firedrill/world.json +559 -0
- package/firedrill/write-outage.scenario.json +2344 -0
- package/firedrill.json +5 -0
- package/package.json +52 -0
- package/starter.json +2337 -0
- package/test/conformance.mjs +674 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# Third-party assets used by the QuickBooks Online Tool app
|
|
2
|
+
|
|
3
|
+
The browser app is served from `../site/`. This directory keeps the attribution record, the font licence and the
|
|
4
|
+
original downloads; the copies under `../site/assets/` are byte-identical (the framework serves only
|
|
5
|
+
html/css/js/json/image/font files, so this Markdown file and the licence text cannot live inside the served root).
|
|
6
|
+
|
|
7
|
+
## Logos (trademarks of Intuit Inc.)
|
|
8
|
+
|
|
9
|
+
| file | served copy | source | brand version |
|
|
10
|
+
|---|---|---|---|
|
|
11
|
+
| `quickbooks.svg` | `../site/assets/quickbooks.svg` | https://logos.lndev.me/logos/quickbooks.svg (library: https://github.com/ln-dev7/logos-apps) | The current QuickBooks product mark: the green `#2CA01C` circle with the white "qb" glyph, used unchanged since the 2019 rebrand. Used as the favicon and on transaction forms. |
|
|
12
|
+
| `intuit-quickbooks.svg` | `../site/assets/intuit-quickbooks.svg` | https://upload.wikimedia.org/wikipedia/commons/7/79/Intuit_QuickBooks_logo.svg (file page: https://commons.wikimedia.org/wiki/File:Intuit_QuickBooks_logo.svg, marked public domain / trademark) | The current "intuit quickbooks" lockup (green circle mark with the black lowercase wordmark) shown at the top of the QuickBooks Online navigation. The logo library has no QuickBooks wordmark, so the lockup was taken from Wikimedia Commons. |
|
|
13
|
+
|
|
14
|
+
Downloaded on 2026-09-15 and used unmodified. The library's `intuit.svg` (the blue Intuit corporate wordmark) is
|
|
15
|
+
not the product logo and is not used.
|
|
16
|
+
|
|
17
|
+
QuickBooks, Intuit and their logos are trademarks of Intuit Inc. They identify the simulated service inside a test
|
|
18
|
+
environment only; this package is not affiliated with or endorsed by Intuit.
|
|
19
|
+
|
|
20
|
+
## Font
|
|
21
|
+
|
|
22
|
+
| file | served copy | source | licence |
|
|
23
|
+
|---|---|---|---|
|
|
24
|
+
| — | `../site/assets/fonts/figtree-latin.woff2` | https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2 (Figtree v9, latin subset, variable weight 400–700, as served by https://fonts.googleapis.com/css2?family=Figtree:wght@400..700) | SIL Open Font License 1.1 — `fonts/OFL.txt` (copied from https://raw.githubusercontent.com/google/fonts/main/ofl/figtree/OFL.txt) |
|
|
25
|
+
|
|
26
|
+
Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree). QuickBooks Online renders in
|
|
27
|
+
Intuit's proprietary "Avenir Next forINTUIT" typeface, which cannot be bundled; Figtree is a permissively licensed
|
|
28
|
+
geometric sans with the same round, open proportions and is the face this app uses.
|
|
29
|
+
|
|
30
|
+
## Interface glyphs
|
|
31
|
+
|
|
32
|
+
The monochrome 24 px line glyphs in `../site/icons.js` (navigation, actions, status) are original SVG paths drawn
|
|
33
|
+
for this package in the rounded line style of the QuickBooks Online icon set. No third-party icon font is embedded.
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
|
|
2
|
+
|
|
3
|
+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
4
|
+
This license is copied below, and is also available with a FAQ at:
|
|
5
|
+
http://scripts.sil.org/OFL
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
-----------------------------------------------------------
|
|
9
|
+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
|
10
|
+
-----------------------------------------------------------
|
|
11
|
+
|
|
12
|
+
PREAMBLE
|
|
13
|
+
The goals of the Open Font License (OFL) are to stimulate worldwide
|
|
14
|
+
development of collaborative font projects, to support the font creation
|
|
15
|
+
efforts of academic and linguistic communities, and to provide a free and
|
|
16
|
+
open framework in which fonts may be shared and improved in partnership
|
|
17
|
+
with others.
|
|
18
|
+
|
|
19
|
+
The OFL allows the licensed fonts to be used, studied, modified and
|
|
20
|
+
redistributed freely as long as they are not sold by themselves. The
|
|
21
|
+
fonts, including any derivative works, can be bundled, embedded,
|
|
22
|
+
redistributed and/or sold with any software provided that any reserved
|
|
23
|
+
names are not used by derivative works. The fonts and derivatives,
|
|
24
|
+
however, cannot be released under any other type of license. The
|
|
25
|
+
requirement for fonts to remain under this license does not apply
|
|
26
|
+
to any document created using the fonts or their derivatives.
|
|
27
|
+
|
|
28
|
+
DEFINITIONS
|
|
29
|
+
"Font Software" refers to the set of files released by the Copyright
|
|
30
|
+
Holder(s) under this license and clearly marked as such. This may
|
|
31
|
+
include source files, build scripts and documentation.
|
|
32
|
+
|
|
33
|
+
"Reserved Font Name" refers to any names specified as such after the
|
|
34
|
+
copyright statement(s).
|
|
35
|
+
|
|
36
|
+
"Original Version" refers to the collection of Font Software components as
|
|
37
|
+
distributed by the Copyright Holder(s).
|
|
38
|
+
|
|
39
|
+
"Modified Version" refers to any derivative made by adding to, deleting,
|
|
40
|
+
or substituting -- in part or in whole -- any of the components of the
|
|
41
|
+
Original Version, by changing formats or by porting the Font Software to a
|
|
42
|
+
new environment.
|
|
43
|
+
|
|
44
|
+
"Author" refers to any designer, engineer, programmer, technical
|
|
45
|
+
writer or other person who contributed to the Font Software.
|
|
46
|
+
|
|
47
|
+
PERMISSION & CONDITIONS
|
|
48
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
49
|
+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
|
50
|
+
redistribute, and sell modified and unmodified copies of the Font
|
|
51
|
+
Software, subject to the following conditions:
|
|
52
|
+
|
|
53
|
+
1) Neither the Font Software nor any of its individual components,
|
|
54
|
+
in Original or Modified Versions, may be sold by itself.
|
|
55
|
+
|
|
56
|
+
2) Original or Modified Versions of the Font Software may be bundled,
|
|
57
|
+
redistributed and/or sold with any software, provided that each copy
|
|
58
|
+
contains the above copyright notice and this license. These can be
|
|
59
|
+
included either as stand-alone text files, human-readable headers or
|
|
60
|
+
in the appropriate machine-readable metadata fields within text or
|
|
61
|
+
binary files as long as those fields can be easily viewed by the user.
|
|
62
|
+
|
|
63
|
+
3) No Modified Version of the Font Software may use the Reserved Font
|
|
64
|
+
Name(s) unless explicit written permission is granted by the corresponding
|
|
65
|
+
Copyright Holder. This restriction only applies to the primary font name as
|
|
66
|
+
presented to the users.
|
|
67
|
+
|
|
68
|
+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
|
69
|
+
Software shall not be used to promote, endorse or advertise any
|
|
70
|
+
Modified Version, except to acknowledge the contribution(s) of the
|
|
71
|
+
Copyright Holder(s) and the Author(s) or with their explicit written
|
|
72
|
+
permission.
|
|
73
|
+
|
|
74
|
+
5) The Font Software, modified or unmodified, in part or in whole,
|
|
75
|
+
must be distributed entirely under this license, and must not be
|
|
76
|
+
distributed under any other license. The requirement for fonts to
|
|
77
|
+
remain under this license does not apply to any document created
|
|
78
|
+
using the Font Software.
|
|
79
|
+
|
|
80
|
+
TERMINATION
|
|
81
|
+
This license becomes null and void if any of the above conditions are
|
|
82
|
+
not met.
|
|
83
|
+
|
|
84
|
+
DISCLAIMER
|
|
85
|
+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
86
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
|
87
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
|
88
|
+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
|
89
|
+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
90
|
+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
|
91
|
+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
92
|
+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
|
93
|
+
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 269.65 69"><defs><style>.b,.c,.d{stroke-width:0px;}.c{fill:#2ca01c;}.d{fill:#fff;}</style></defs><path class="c" d="m30.77,61.54c16.99,0,30.77-13.78,30.77-30.77S47.76,0,30.77,0,0,13.78,0,30.77s13.77,30.77,30.77,30.77Z"/><path class="d" d="m20.51,18.8c-6.61,0-11.97,5.36-11.97,11.97s5.35,11.96,11.97,11.96h1.71v-4.44h-1.71c-4.15,0-7.52-3.37-7.52-7.52,0-4.15,3.37-7.52,7.52-7.52h4.11v23.25c0,2.45,1.99,4.44,4.44,4.44V18.8h-8.55,0Zm20.52,23.93c6.61,0,11.97-5.36,11.97-11.96s-5.35-11.96-11.97-11.96h-1.71v4.44h1.71c4.15,0,7.52,3.37,7.52,7.52s-3.37,7.52-7.52,7.52h-4.11V15.04c0-2.45-1.99-4.44-4.44-4.44v32.13h8.55s0,0,0,0Z"/><path class="b" d="m90.75,69h-4.76v-12.05h-.08c-1.23,1.9-3.65,3.09-6.31,3.09-5.79,0-9.36-4.6-9.36-10.15s3.81-10,9.24-10c3.49,0,5.63,1.7,6.58,3.21h.12v-2.66h4.56v28.56h0s0,0,0,0Zm-10.19-12.93c3.49,0,5.59-3.13,5.59-6.11s-2.1-6.19-5.59-6.19c-3.68,0-5.47,3.13-5.47,6.11,0,2.97,1.78,6.19,5.47,6.19h0Zm31.55,3.41h-4.52v-3.06h-.08c-.83,1.9-3.09,3.61-5.91,3.61-4.96,0-7.02-3.81-7.02-7.69v-11.9h4.76v10.55c0,2.26.51,5.07,3.57,5.07s4.44-2.62,4.44-5.15v-10.47h4.76v19.03s0,0,0,0Zm4.78-19.45h4.76v19.04h-4.76s0-19.04,0-19.04Zm22.55,5.69c-.75-1.07-2.38-1.87-3.93-1.87-3.49,0-5.24,3.13-5.24,6.11s1.79,6.11,5.39,6.11c1.47,0,3.09-.6,4.01-1.7l2.97,3.01c-1.59,1.7-4.21,2.66-7.02,2.66-5.63,0-10.31-3.73-10.31-10.07s4.6-10.07,10.19-10.07c2.78,0,5.67,1.11,7.18,2.97l-3.25,2.85h0Zm5.6-16.22h4.76v18.95h.12l7.22-8.01h6.11l-8.25,8.61,8.77,10.43h-6.3l-7.54-9.76h-.12v9.76h-4.76v-29.97h0Zm25.65,0v13.37h.12c.99-1.23,2.89-2.97,6.39-2.97,5.43,0,9.24,4.36,9.24,10s-3.57,10.15-9.36,10.15c-2.66,0-5.24-1.23-6.54-3.41h-.08v2.86h-4.52v-29.99h4.76Zm5.43,14.28c-3.49,0-5.59,3.21-5.59,6.19s2.1,6.11,5.59,6.11c3.69,0,5.47-3.21,5.47-6.19s-1.78-6.11-5.47-6.11h0Zm22.72-3.89c5.75,0,10.35,4.01,10.35,10s-4.6,10.15-10.35,10.15-10.35-4.16-10.35-10.15,4.6-10,10.35-10Zm0,16.18c3.77,0,5.51-3.21,5.51-6.19s-1.74-6.11-5.51-6.11-5.51,3.13-5.51,6.11,1.74,6.19,5.51,6.19Zm22.78-16.18c5.75,0,10.35,4.01,10.35,10s-4.6,10.15-10.35,10.15-10.35-4.16-10.35-10.15,4.6-10,10.35-10Zm0,16.18c3.77,0,5.51-3.21,5.51-6.19s-1.74-6.11-5.51-6.11-5.51,3.13-5.51,6.11c0,2.97,1.74,6.19,5.51,6.19Zm13.23-26.57h4.76v18.95h.12l7.22-8.01h6.1l-8.24,8.61,8.76,10.43h-6.3l-7.54-9.76h-.12v9.76h-4.76v-29.97h0,0Zm31.71,16.02c-.83-1.11-2.42-2.06-4.16-2.06-1.5,0-3.06.56-3.06,2.07s1.47,1.87,4.12,2.5c2.82.68,6.15,1.94,6.15,5.67,0,4.64-3.77,6.35-7.93,6.35-2.93,0-5.99-1.11-7.82-3.13l3.13-2.93c1.03,1.35,2.82,2.38,4.88,2.38,1.39,0,3.06-.56,3.06-2.26,0-1.59-1.47-2.06-4.36-2.74-2.82-.68-5.63-1.82-5.63-5.39,0-4.25,3.81-6.06,7.58-6.06,2.73,0,5.59.95,7.14,2.89l-3.08,2.74h0ZM122.38,14.46c0,4.83,3.86,8.35,8.77,8.35s8.78-3.52,8.78-8.35V3.38h-4.76v10.52c0,2.6-1.74,4.35-4.03,4.35s-4.04-1.74-4.04-4.35V3.38h-4.75s.03,11.08.03,11.08Zm30.27-6.63h5.68v14.6h4.75V7.83h5.67V3.38h-16.1v4.45h0Zm-3.08-4.45h-4.75v19.06h4.75V3.38Zm-46.38,4.45h5.68v14.6h4.75V7.83h5.67V3.38h-16.09v4.45h0Zm-24.94-4.45h-4.75v19.06h4.75V3.38Zm22.44,7.97c0-4.83-3.87-8.35-8.78-8.35s-8.78,3.52-8.78,8.35v11.08h4.75v-10.52c0-2.6,1.74-4.35,4.03-4.35s4.03,1.74,4.03,4.35v10.52h4.75v-11.08s-.01,0-.01,0Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="#2CA01C" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>QuickBooks</title><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm.642 4.1335c.9554 0 1.7296.776 1.7296 1.7332v9.0667h1.6c1.614 0 2.9275-1.3156 2.9275-2.933 0-1.6173-1.3136-2.9333-2.9276-2.9333h-.6654V7.3334h.6654c2.5722 0 4.6577 2.0897 4.6577 4.667 0 2.5774-2.0855 4.6666-4.6577 4.6666H12.642zM7.9837 7.333h3.3291v12.533c-.9555 0-1.73-.7759-1.73-1.7332V9.0662H7.9837c-1.6146 0-2.9277 1.316-2.9277 2.9334 0 1.6175 1.3131 2.9333 2.9277 2.9333h.6654v1.7332h-.6654c-2.5725 0-4.6577-2.0892-4.6577-4.6665 0-2.5771 2.0852-4.6666 4.6577-4.6666Z"/></svg>
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
// QuickBooks Online Tool app: shell wiring, router, Create menu and global search. Every screen calls this Tool's
|
|
2
|
+
// own operations through /_firedrill/client.js; records are re-read after writes and when the world revision moves.
|
|
3
|
+
import { hydrateIcons } from "./icons.js";
|
|
4
|
+
import { app, go, loadCompany, parseRoute, query } from "./store.js";
|
|
5
|
+
import { $, closeMenu, el, errorBanner, isPending, notSimulated, openMenu, quote, watchWorld } from "./ui.js";
|
|
6
|
+
import "./views/home.js";
|
|
7
|
+
import "./views/invoices.js";
|
|
8
|
+
import "./views/customers.js";
|
|
9
|
+
import "./views/customer-detail.js";
|
|
10
|
+
import "./views/items.js";
|
|
11
|
+
import "./views/accounts.js";
|
|
12
|
+
import "./views/payments.js";
|
|
13
|
+
import { openInvoiceEditor } from "./views/invoice-editor.js";
|
|
14
|
+
import { openReceivePayment } from "./views/receive-payment.js";
|
|
15
|
+
import { openCustomerDrawer } from "./views/customer-drawer.js";
|
|
16
|
+
import { openItemDrawer } from "./views/items.js";
|
|
17
|
+
|
|
18
|
+
const NAV_FOR = { home: "home", invoices: "invoices", payments: "payments", customers: "customers", customer: "customers", items: "items", accounts: "accounts" };
|
|
19
|
+
|
|
20
|
+
let token = 0;
|
|
21
|
+
async function render() {
|
|
22
|
+
const route = parseRoute();
|
|
23
|
+
const host = $("#page");
|
|
24
|
+
const name = route.page === "customers" && route.id ? "customer" : route.page;
|
|
25
|
+
const page = app.pages[name];
|
|
26
|
+
const mine = (token += 1);
|
|
27
|
+
markNav(NAV_FOR[name]);
|
|
28
|
+
$("#shell").classList.remove("nav-open");
|
|
29
|
+
closeMenu();
|
|
30
|
+
host.scrollTop = 0;
|
|
31
|
+
if (!page) {
|
|
32
|
+
host.replaceChildren(el("div", { class: "page-inner" }, errorBanner(new Error(`There is no page at ${location.hash}.`), "Page not found")));
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
try {
|
|
36
|
+
await page(host, route);
|
|
37
|
+
} catch (error) {
|
|
38
|
+
if (mine === token) host.replaceChildren(el("div", { class: "page-inner" }, errorBanner(error, "We couldn't load this page")));
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
export function rerender() { return render(); }
|
|
42
|
+
|
|
43
|
+
function markNav(section) {
|
|
44
|
+
const sales = ["invoices", "payments", "customers", "items"].includes(section);
|
|
45
|
+
for (const a of document.querySelectorAll("#leftnav [data-route]")) {
|
|
46
|
+
const r = a.getAttribute("data-route");
|
|
47
|
+
const on = r === section;
|
|
48
|
+
a.classList.toggle("active", on);
|
|
49
|
+
if (a.classList.contains("nav-subitem")) a.classList.toggle("active", r === section);
|
|
50
|
+
}
|
|
51
|
+
$("#group-sales").classList.toggle("open", sales);
|
|
52
|
+
$('#leftnav [data-route="sales"]').classList.toggle("active", sales);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// The left menu collapses to an icon rail, as it does in the real client. Each rail item keeps its label as a tooltip.
|
|
56
|
+
function setUpCollapse() {
|
|
57
|
+
const shell = $("#shell");
|
|
58
|
+
const button = $("#nav-collapse");
|
|
59
|
+
for (const item of document.querySelectorAll("#leftnav .nav-item, #leftnav .create-btn")) {
|
|
60
|
+
if (item === button) continue;
|
|
61
|
+
const label = item.textContent.trim();
|
|
62
|
+
if (label && !item.getAttribute("title")) item.setAttribute("title", label);
|
|
63
|
+
if (label && !item.getAttribute("aria-label")) item.setAttribute("aria-label", label);
|
|
64
|
+
}
|
|
65
|
+
const apply = (collapsed) => {
|
|
66
|
+
shell.classList.toggle("nav-collapsed", collapsed);
|
|
67
|
+
button.setAttribute("aria-expanded", collapsed ? "false" : "true");
|
|
68
|
+
const label = collapsed ? "Expand the menu" : "Collapse the menu";
|
|
69
|
+
button.setAttribute("aria-label", label);
|
|
70
|
+
button.setAttribute("title", label);
|
|
71
|
+
button.querySelector(".nav-collapse-label").textContent = label;
|
|
72
|
+
};
|
|
73
|
+
let stored = null;
|
|
74
|
+
try { stored = sessionStorage.getItem("qbo-nav-collapsed"); } catch { /* storage unavailable */ }
|
|
75
|
+
apply(stored === "1");
|
|
76
|
+
button.addEventListener("click", () => {
|
|
77
|
+
const collapsed = !shell.classList.contains("nav-collapsed");
|
|
78
|
+
apply(collapsed);
|
|
79
|
+
try { sessionStorage.setItem("qbo-nav-collapsed", collapsed ? "1" : "0"); } catch { /* storage unavailable */ }
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
const CREATE = [
|
|
84
|
+
["Customers", [["Invoice", () => openInvoiceEditor()], ["Receive payment", () => openReceivePayment()], ["Statement"], ["Estimate"], ["Credit memo"], ["Sales receipt"], ["Refund receipt"], ["Delayed credit"], ["Delayed charge"], ["Add customer", () => openCustomerDrawer()]]],
|
|
85
|
+
["Vendors", [["Expense"], ["Check"], ["Bill"], ["Pay bills"], ["Purchase order"], ["Vendor credit"], ["Credit card credit"], ["Print checks"]]],
|
|
86
|
+
["Team", [["Single time activity"], ["Weekly timesheet"]]],
|
|
87
|
+
["Other", [["Bank deposit"], ["Transfer"], ["Journal entry"], ["Inventory qty adjustment"], ["Pay down credit card"], ["Add product/service", () => openItemDrawer()]]],
|
|
88
|
+
];
|
|
89
|
+
function openCreate(anchor) {
|
|
90
|
+
const pop = openMenu(anchor, [], { className: "create-grid" });
|
|
91
|
+
for (const [heading, entries] of CREATE) {
|
|
92
|
+
const col = el("div", { class: "create-col" }, el("h3", { text: heading }));
|
|
93
|
+
for (const [label, run] of entries) {
|
|
94
|
+
col.append(el("button", { type: "button", class: "mi", role: "menuitem", text: label, title: run ? undefined : "Not simulated by this Tool", onclick: () => { closeMenu(); run ? run() : notSimulated(label); } }));
|
|
95
|
+
}
|
|
96
|
+
pop.append(col);
|
|
97
|
+
}
|
|
98
|
+
const r = anchor.getBoundingClientRect();
|
|
99
|
+
pop.style.left = `${r.left}px`;
|
|
100
|
+
pop.style.top = `${r.bottom + 4}px`;
|
|
101
|
+
pop.querySelector(".mi")?.focus();
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// ---- global search: customers by name, invoices by number, products by name ----
|
|
105
|
+
let searchSeq = 0;
|
|
106
|
+
async function runSearch(text) {
|
|
107
|
+
const box = $("#gsearch-results");
|
|
108
|
+
const q = text.trim();
|
|
109
|
+
const seq = (searchSeq += 1);
|
|
110
|
+
if (!q) { box.hidden = true; return; }
|
|
111
|
+
const like = quote(`%${q}%`);
|
|
112
|
+
const tasks = [
|
|
113
|
+
query(`select * from Customer where DisplayName LIKE ${like} MAXRESULTS 5`).catch(() => []),
|
|
114
|
+
query(`select * from Item where Name LIKE ${like} MAXRESULTS 5`).catch(() => []),
|
|
115
|
+
/^\w[\w-]*$/.test(q) ? query(`select * from Invoice where DocNumber LIKE ${quote(`${q}%`)} MAXRESULTS 5`).catch(() => []) : Promise.resolve([]),
|
|
116
|
+
];
|
|
117
|
+
const [customers, items, invoices] = await Promise.all(tasks);
|
|
118
|
+
if (seq !== searchSeq) return;
|
|
119
|
+
const rows = [];
|
|
120
|
+
const add = (head, list, map) => { if (list.length) { rows.push(el("div", { class: "res-head", text: head })); for (const r of list) rows.push(map(r)); } };
|
|
121
|
+
const res = (label, kind, run) => el("a", { class: "res", href: "#", role: "option", onclick: (e) => { e.preventDefault(); box.hidden = true; $("#gsearch-input").value = ""; run(); } }, [el("span", { text: label }), el("span", { class: "res-kind", text: kind })]);
|
|
122
|
+
add("Customers", customers, (c) => res(c.DisplayName, "Customer", () => go(`#/customers/${encodeURIComponent(c.Id)}`)));
|
|
123
|
+
add("Transactions", invoices, (i) => res(`Invoice ${i.DocNumber ?? i.Id}`, i.CustomerRef?.name ?? "", () => openInvoiceEditor(i.Id)));
|
|
124
|
+
add("Products and services", items, (i) => res(i.Name, i.Type === "NonInventory" ? "Non-inventory" : i.Type, () => go(`#/items?q=${encodeURIComponent(i.Name)}`)));
|
|
125
|
+
if (!rows.length) rows.push(el("div", { class: "res-head", text: "No results" }));
|
|
126
|
+
box.replaceChildren(...rows);
|
|
127
|
+
box.hidden = false;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
async function boot() {
|
|
131
|
+
hydrateIcons();
|
|
132
|
+
$("#create-btn").addEventListener("click", (e) => { e.stopPropagation(); openCreate(e.currentTarget); });
|
|
133
|
+
$("#menu-toggle").addEventListener("click", () => $("#shell").classList.toggle("nav-open"));
|
|
134
|
+
setUpCollapse();
|
|
135
|
+
for (const b of document.querySelectorAll("[data-not-simulated]")) b.addEventListener("click", () => notSimulated(b.getAttribute("data-not-simulated")));
|
|
136
|
+
let timer;
|
|
137
|
+
const input = $("#gsearch-input");
|
|
138
|
+
input.addEventListener("input", () => { clearTimeout(timer); timer = setTimeout(() => runSearch(input.value), 250); });
|
|
139
|
+
input.addEventListener("keydown", (e) => { if (e.key === "Escape") { $("#gsearch-results").hidden = true; } });
|
|
140
|
+
$("#gsearch").addEventListener("submit", (e) => { e.preventDefault(); runSearch(input.value); });
|
|
141
|
+
document.addEventListener("click", (e) => { if (!$("#gsearch").contains(e.target)) $("#gsearch-results").hidden = true; });
|
|
142
|
+
try {
|
|
143
|
+
await loadCompany();
|
|
144
|
+
$("#company-name").textContent = app.company.CompanyName;
|
|
145
|
+
const initials = app.company.CompanyName.split(/\s+/).map((w) => w[0]).join("").slice(0, 1).toUpperCase();
|
|
146
|
+
$("#avatar").textContent = initials || "Q";
|
|
147
|
+
document.title = `${app.company.CompanyName} - QuickBooks (synthetic)`;
|
|
148
|
+
} catch (error) {
|
|
149
|
+
$("#company-name").textContent = "QuickBooks";
|
|
150
|
+
app.companyError = error;
|
|
151
|
+
}
|
|
152
|
+
if (!location.hash) location.replace("#/home");
|
|
153
|
+
window.addEventListener("hashchange", render);
|
|
154
|
+
await render();
|
|
155
|
+
watchWorld(async () => { await loadCompany().catch(() => {}); await render(); }, () => !isPending() && !app.dirty && !document.querySelector(".txn, .drawer, .scrim"));
|
|
156
|
+
}
|
|
157
|
+
boot();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 269.65 69"><defs><style>.b,.c,.d{stroke-width:0px;}.c{fill:#2ca01c;}.d{fill:#fff;}</style></defs><path class="c" d="m30.77,61.54c16.99,0,30.77-13.78,30.77-30.77S47.76,0,30.77,0,0,13.78,0,30.77s13.77,30.77,30.77,30.77Z"/><path class="d" d="m20.51,18.8c-6.61,0-11.97,5.36-11.97,11.97s5.35,11.96,11.97,11.96h1.71v-4.44h-1.71c-4.15,0-7.52-3.37-7.52-7.52,0-4.15,3.37-7.52,7.52-7.52h4.11v23.25c0,2.45,1.99,4.44,4.44,4.44V18.8h-8.55,0Zm20.52,23.93c6.61,0,11.97-5.36,11.97-11.96s-5.35-11.96-11.97-11.96h-1.71v4.44h1.71c4.15,0,7.52,3.37,7.52,7.52s-3.37,7.52-7.52,7.52h-4.11V15.04c0-2.45-1.99-4.44-4.44-4.44v32.13h8.55s0,0,0,0Z"/><path class="b" d="m90.75,69h-4.76v-12.05h-.08c-1.23,1.9-3.65,3.09-6.31,3.09-5.79,0-9.36-4.6-9.36-10.15s3.81-10,9.24-10c3.49,0,5.63,1.7,6.58,3.21h.12v-2.66h4.56v28.56h0s0,0,0,0Zm-10.19-12.93c3.49,0,5.59-3.13,5.59-6.11s-2.1-6.19-5.59-6.19c-3.68,0-5.47,3.13-5.47,6.11,0,2.97,1.78,6.19,5.47,6.19h0Zm31.55,3.41h-4.52v-3.06h-.08c-.83,1.9-3.09,3.61-5.91,3.61-4.96,0-7.02-3.81-7.02-7.69v-11.9h4.76v10.55c0,2.26.51,5.07,3.57,5.07s4.44-2.62,4.44-5.15v-10.47h4.76v19.03s0,0,0,0Zm4.78-19.45h4.76v19.04h-4.76s0-19.04,0-19.04Zm22.55,5.69c-.75-1.07-2.38-1.87-3.93-1.87-3.49,0-5.24,3.13-5.24,6.11s1.79,6.11,5.39,6.11c1.47,0,3.09-.6,4.01-1.7l2.97,3.01c-1.59,1.7-4.21,2.66-7.02,2.66-5.63,0-10.31-3.73-10.31-10.07s4.6-10.07,10.19-10.07c2.78,0,5.67,1.11,7.18,2.97l-3.25,2.85h0Zm5.6-16.22h4.76v18.95h.12l7.22-8.01h6.11l-8.25,8.61,8.77,10.43h-6.3l-7.54-9.76h-.12v9.76h-4.76v-29.97h0Zm25.65,0v13.37h.12c.99-1.23,2.89-2.97,6.39-2.97,5.43,0,9.24,4.36,9.24,10s-3.57,10.15-9.36,10.15c-2.66,0-5.24-1.23-6.54-3.41h-.08v2.86h-4.52v-29.99h4.76Zm5.43,14.28c-3.49,0-5.59,3.21-5.59,6.19s2.1,6.11,5.59,6.11c3.69,0,5.47-3.21,5.47-6.19s-1.78-6.11-5.47-6.11h0Zm22.72-3.89c5.75,0,10.35,4.01,10.35,10s-4.6,10.15-10.35,10.15-10.35-4.16-10.35-10.15,4.6-10,10.35-10Zm0,16.18c3.77,0,5.51-3.21,5.51-6.19s-1.74-6.11-5.51-6.11-5.51,3.13-5.51,6.11,1.74,6.19,5.51,6.19Zm22.78-16.18c5.75,0,10.35,4.01,10.35,10s-4.6,10.15-10.35,10.15-10.35-4.16-10.35-10.15,4.6-10,10.35-10Zm0,16.18c3.77,0,5.51-3.21,5.51-6.19s-1.74-6.11-5.51-6.11-5.51,3.13-5.51,6.11c0,2.97,1.74,6.19,5.51,6.19Zm13.23-26.57h4.76v18.95h.12l7.22-8.01h6.1l-8.24,8.61,8.76,10.43h-6.3l-7.54-9.76h-.12v9.76h-4.76v-29.97h0,0Zm31.71,16.02c-.83-1.11-2.42-2.06-4.16-2.06-1.5,0-3.06.56-3.06,2.07s1.47,1.87,4.12,2.5c2.82.68,6.15,1.94,6.15,5.67,0,4.64-3.77,6.35-7.93,6.35-2.93,0-5.99-1.11-7.82-3.13l3.13-2.93c1.03,1.35,2.82,2.38,4.88,2.38,1.39,0,3.06-.56,3.06-2.26,0-1.59-1.47-2.06-4.36-2.74-2.82-.68-5.63-1.82-5.63-5.39,0-4.25,3.81-6.06,7.58-6.06,2.73,0,5.59.95,7.14,2.89l-3.08,2.74h0ZM122.38,14.46c0,4.83,3.86,8.35,8.77,8.35s8.78-3.52,8.78-8.35V3.38h-4.76v10.52c0,2.6-1.74,4.35-4.03,4.35s-4.04-1.74-4.04-4.35V3.38h-4.75s.03,11.08.03,11.08Zm30.27-6.63h5.68v14.6h4.75V7.83h5.67V3.38h-16.1v4.45h0Zm-3.08-4.45h-4.75v19.06h4.75V3.38Zm-46.38,4.45h5.68v14.6h4.75V7.83h5.67V3.38h-16.09v4.45h0Zm-24.94-4.45h-4.75v19.06h4.75V3.38Zm22.44,7.97c0-4.83-3.87-8.35-8.78-8.35s-8.78,3.52-8.78,8.35v11.08h4.75v-10.52c0-2.6,1.74-4.35,4.03-4.35s4.03,1.74,4.03,4.35v10.52h4.75v-11.08s-.01,0-.01,0Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="#2CA01C" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>QuickBooks</title><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm.642 4.1335c.9554 0 1.7296.776 1.7296 1.7332v9.0667h1.6c1.614 0 2.9275-1.3156 2.9275-2.933 0-1.6173-1.3136-2.9333-2.9276-2.9333h-.6654V7.3334h.6654c2.5722 0 4.6577 2.0897 4.6577 4.667 0 2.5774-2.0855 4.6666-4.6577 4.6666H12.642zM7.9837 7.333h3.3291v12.533c-.9555 0-1.73-.7759-1.73-1.7332V9.0662H7.9837c-1.6146 0-2.9277 1.316-2.9277 2.9334 0 1.6175 1.3131 2.9333 2.9277 2.9333h.6654v1.7332h-.6654c-2.5725 0-4.6577-2.0892-4.6577-4.6665 0-2.5771 2.0852-4.6666 4.6577-4.6666Z"/></svg>
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
/* QuickBooks Online look: palette, type, buttons, shared primitives. */
|
|
2
|
+
@font-face {
|
|
3
|
+
font-family: "Figtree";
|
|
4
|
+
src: url("./assets/fonts/figtree-latin.woff2") format("woff2");
|
|
5
|
+
font-weight: 400 700;
|
|
6
|
+
font-style: normal;
|
|
7
|
+
font-display: swap;
|
|
8
|
+
}
|
|
9
|
+
:root {
|
|
10
|
+
--green: #2ca01c;
|
|
11
|
+
--green-dark: #108000;
|
|
12
|
+
--green-hover: #1f8c10;
|
|
13
|
+
--green-tint: #e6f4e4;
|
|
14
|
+
--green-soft: #b4dcae;
|
|
15
|
+
--text: #393a3d;
|
|
16
|
+
--text-2: #6b6c72;
|
|
17
|
+
--text-3: #8d9096;
|
|
18
|
+
--border: #d4d7dc;
|
|
19
|
+
--border-strong: #babec5;
|
|
20
|
+
--ground: #f4f5f8;
|
|
21
|
+
--panel: #ffffff;
|
|
22
|
+
--hover: #eceef1;
|
|
23
|
+
--link: #0077c5;
|
|
24
|
+
--orange: #e48900;
|
|
25
|
+
--orange-deep: #ff8000;
|
|
26
|
+
--red: #d52b1e;
|
|
27
|
+
--blue-grey: #c0c4cc;
|
|
28
|
+
--focus: #0077c5;
|
|
29
|
+
--radius: 4px;
|
|
30
|
+
--shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
|
31
|
+
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18);
|
|
32
|
+
color-scheme: light;
|
|
33
|
+
}
|
|
34
|
+
* { box-sizing: border-box; }
|
|
35
|
+
[hidden] { display: none !important; }
|
|
36
|
+
html, body { height: 100%; }
|
|
37
|
+
body {
|
|
38
|
+
margin: 0;
|
|
39
|
+
font-family: "Figtree", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
|
|
40
|
+
font-size: 14px;
|
|
41
|
+
line-height: 1.43;
|
|
42
|
+
color: var(--text);
|
|
43
|
+
background: var(--ground);
|
|
44
|
+
-webkit-font-smoothing: antialiased;
|
|
45
|
+
}
|
|
46
|
+
button, input, select, textarea { font: inherit; color: inherit; }
|
|
47
|
+
a { color: var(--link); text-decoration: none; }
|
|
48
|
+
a:hover { text-decoration: underline; }
|
|
49
|
+
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
|
|
50
|
+
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
|
51
|
+
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px; z-index: 100; }
|
|
52
|
+
.skip-link:focus { left: 8px; }
|
|
53
|
+
svg.i { width: 20px; height: 20px; flex: none; display: block; }
|
|
54
|
+
|
|
55
|
+
.btn {
|
|
56
|
+
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
|
57
|
+
height: 36px; padding: 0 16px; border-radius: var(--radius);
|
|
58
|
+
border: 2px solid var(--border-strong); background: #fff; color: var(--text);
|
|
59
|
+
font-weight: 600; cursor: pointer; white-space: nowrap;
|
|
60
|
+
}
|
|
61
|
+
.btn:hover:not(:disabled) { background: var(--hover); }
|
|
62
|
+
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
|
|
63
|
+
.btn.primary:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); }
|
|
64
|
+
.btn.danger { border-color: var(--red); color: var(--red); }
|
|
65
|
+
.btn.tertiary { border-color: transparent; background: transparent; color: var(--link); padding: 0 8px; }
|
|
66
|
+
.btn.tertiary:hover:not(:disabled) { background: var(--hover); }
|
|
67
|
+
.btn.small { height: 28px; padding: 0 10px; font-size: 13px; }
|
|
68
|
+
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
69
|
+
.btn svg.i { width: 16px; height: 16px; }
|
|
70
|
+
.split { display: inline-flex; }
|
|
71
|
+
.split .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
|
|
72
|
+
.split .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,0.5); padding: 0 8px; }
|
|
73
|
+
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font-weight: 600; cursor: pointer; }
|
|
74
|
+
.link-btn:hover { text-decoration: underline; }
|
|
75
|
+
.link-btn:disabled { color: var(--text-3); cursor: not-allowed; text-decoration: none; }
|
|
76
|
+
.icon-btn {
|
|
77
|
+
width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--text-2);
|
|
78
|
+
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
|
|
79
|
+
}
|
|
80
|
+
.icon-btn:hover { background: var(--hover); color: var(--text); }
|
|
81
|
+
|
|
82
|
+
.loading { display: flex; align-items: center; gap: 10px; padding: 48px; color: var(--text-2); }
|
|
83
|
+
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #d4d7dc; border-top-color: var(--green); animation: spin 0.9s linear infinite; }
|
|
84
|
+
@keyframes spin { to { transform: rotate(360deg); } }
|
|
85
|
+
.skeleton { background: linear-gradient(90deg, #eceef1 25%, #f4f5f8 50%, #eceef1 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 4px; height: 14px; }
|
|
86
|
+
@keyframes shimmer { to { background-position: -200% 0; } }
|
|
87
|
+
|
|
88
|
+
.toast {
|
|
89
|
+
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
|
|
90
|
+
background: #393a3d; color: #fff; padding: 12px 16px; border-radius: 4px; box-shadow: var(--shadow-lg);
|
|
91
|
+
display: flex; gap: 12px; align-items: center; max-width: 560px;
|
|
92
|
+
}
|
|
93
|
+
.toast[hidden] { display: none; }
|
|
94
|
+
.toast.success::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--green); flex: none; }
|
|
95
|
+
.toast.error { background: #fff; color: var(--text); border-left: 4px solid var(--red); }
|
|
96
|
+
.toast button { background: none; border: 0; color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
|
|
97
|
+
|
|
98
|
+
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 4px; border: 1px solid; margin: 0 0 16px; background: #fff; }
|
|
99
|
+
.banner.error { border-color: var(--red); background: #fdf1f0; }
|
|
100
|
+
.banner.warn { border-color: var(--orange); background: #fff7eb; }
|
|
101
|
+
.banner.info { border-color: var(--link); background: #eef7fc; }
|
|
102
|
+
.banner .banner-title { font-weight: 700; }
|
|
103
|
+
.banner .banner-detail { color: var(--text-2); font-size: 13px; }
|
|
104
|
+
.banner svg.i { color: inherit; margin-top: 1px; }
|
|
105
|
+
.banner.error svg.i { color: var(--red); }
|
|
106
|
+
.banner.warn svg.i { color: var(--orange); }
|
|
107
|
+
.banner.info svg.i { color: var(--link); }
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* Dialogs, drawers, full-screen transaction forms (invoice, receive payment). */
|
|
2
|
+
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; }
|
|
3
|
+
.dialog { background: #fff; border-radius: 4px; box-shadow: var(--shadow-lg); width: 480px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
|
|
4
|
+
.dialog.wide { width: 760px; }
|
|
5
|
+
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px 24px; }
|
|
6
|
+
.dialog-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
|
|
7
|
+
.dialog-body { padding: 8px 24px 16px; overflow-y: auto; }
|
|
8
|
+
.dialog-body p { margin: 0 0 10px; }
|
|
9
|
+
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 20px; }
|
|
10
|
+
|
|
11
|
+
.drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 80; }
|
|
12
|
+
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100%; background: #fff; box-shadow: var(--shadow-lg); z-index: 81; display: flex; flex-direction: column; }
|
|
13
|
+
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--border); }
|
|
14
|
+
.drawer-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
|
|
15
|
+
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
|
|
16
|
+
.drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--border); }
|
|
17
|
+
.section-title { font-size: 16px; font-weight: 700; margin: 12px 0 8px; }
|
|
18
|
+
|
|
19
|
+
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
|
|
20
|
+
.field > label { font-size: 13px; font-weight: 600; color: var(--text); }
|
|
21
|
+
.field input, .field select, .field textarea, .cell-input {
|
|
22
|
+
height: 36px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 10px; background: #fff; width: 100%; outline: none;
|
|
23
|
+
}
|
|
24
|
+
.field textarea { height: 72px; padding: 8px 10px; resize: vertical; }
|
|
25
|
+
.field input:focus, .field select:focus, .field textarea:focus, .cell-input:focus { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-tint); }
|
|
26
|
+
.field.invalid input, .field.invalid select, .field.invalid textarea, .cell-input.invalid { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
|
|
27
|
+
.field .err { color: var(--red); font-size: 12px; }
|
|
28
|
+
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
|
|
29
|
+
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
|
|
30
|
+
.checkline { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
|
|
31
|
+
|
|
32
|
+
/* Full-screen transaction form */
|
|
33
|
+
.txn { position: fixed; inset: 0; z-index: 75; background: var(--ground); display: flex; flex-direction: column; }
|
|
34
|
+
.txn-head { height: 56px; flex: none; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 12px 0 24px; }
|
|
35
|
+
.txn-head h1 { font-size: 20px; font-weight: 600; margin: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
|
|
36
|
+
.txn-head h1 img { width: 26px; height: 26px; }
|
|
37
|
+
.txn-body { flex: 1; overflow-y: auto; padding: 24px; }
|
|
38
|
+
.sheet { background: #fff; max-width: 1160px; margin: 0 auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.12); padding: 28px 32px 32px; }
|
|
39
|
+
.sheet-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
|
|
40
|
+
.sheet-company .co-name { font-size: 18px; font-weight: 700; }
|
|
41
|
+
.sheet-company div { color: var(--text-2); font-size: 13px; }
|
|
42
|
+
.sheet-balance { text-align: right; }
|
|
43
|
+
.sheet-balance .lbl { font-size: 12px; text-transform: uppercase; color: var(--text-2); font-weight: 700; }
|
|
44
|
+
.sheet-balance .val { font-size: 36px; font-weight: 700; }
|
|
45
|
+
.sheet-grid { display: grid; grid-template-columns: 280px 280px 1fr; gap: 0 24px; margin: 20px 0 8px; }
|
|
46
|
+
.sheet-grid .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
|
|
47
|
+
.hr { height: 1px; background: var(--border); margin: 16px 0; }
|
|
48
|
+
.lines { width: 100%; border-collapse: collapse; margin-top: 8px; }
|
|
49
|
+
.lines th { font-size: 12px; text-transform: uppercase; color: var(--text-2); text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--border); white-space: nowrap; }
|
|
50
|
+
.lines td { padding: 6px; border-bottom: 1px solid #e3e5e8; vertical-align: top; }
|
|
51
|
+
.lines td.n { width: 28px; color: var(--text-2); padding-top: 14px; text-align: right; }
|
|
52
|
+
.lines td.amt, .lines th.amt { text-align: right; }
|
|
53
|
+
.lines td.amt { padding-top: 14px; font-variant-numeric: tabular-nums; }
|
|
54
|
+
.lines .cell-input { height: 34px; }
|
|
55
|
+
.lines .cell-input.num { text-align: right; }
|
|
56
|
+
.lines td.del { width: 36px; }
|
|
57
|
+
.line-actions { display: flex; gap: 8px; margin: 12px 0; }
|
|
58
|
+
.totals { margin-left: auto; width: 320px; }
|
|
59
|
+
.totals .t { display: flex; justify-content: space-between; padding: 6px 0; }
|
|
60
|
+
.totals .t.big { font-size: 18px; font-weight: 700; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
|
|
61
|
+
.sheet-bottom { display: flex; gap: 24px; align-items: flex-start; margin-top: 16px; flex-wrap: wrap; }
|
|
62
|
+
.sheet-bottom .notes { flex: 1; min-width: 260px; }
|
|
63
|
+
.txn-foot { height: 64px; flex: none; background: #393a3d; color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 24px; }
|
|
64
|
+
.txn-foot .grow { flex: 1; }
|
|
65
|
+
.txn-foot .btn { border-color: #fff; background: transparent; color: #fff; }
|
|
66
|
+
.txn-foot .btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
|
|
67
|
+
.txn-foot .btn.primary { background: var(--green); border-color: var(--green); }
|
|
68
|
+
.txn-foot .btn.primary:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); }
|
|
69
|
+
.txn-foot .foot-link { background: none; border: 0; color: #fff; font-weight: 600; cursor: pointer; }
|
|
70
|
+
.txn-foot .foot-link:hover { text-decoration: underline; }
|
|
71
|
+
.outstanding td input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); }
|
|
72
|
+
.amount-received { font-size: 13px; }
|
|
73
|
+
.pdf-frame { background: #fff; border: 1px solid var(--border); padding: 32px; font-size: 13px; }
|
|
74
|
+
@media (max-width: 900px) {
|
|
75
|
+
.sheet-grid, .row2, .row3 { grid-template-columns: 1fr; }
|
|
76
|
+
.sheet { padding: 16px; }
|
|
77
|
+
.txn-body { padding: 8px; }
|
|
78
|
+
.txn-foot { padding: 0 8px; gap: 6px; }
|
|
79
|
+
.txn-foot .foot-link { display: none; }
|
|
80
|
+
}
|
|
81
|
+
.lines th:nth-child(4), .lines td:nth-child(4), .lines th:nth-child(5), .lines td:nth-child(5) { width: 110px; }
|
|
82
|
+
.lines th:nth-child(6), .lines td:nth-child(6) { width: 120px; }
|
|
83
|
+
.lines th:nth-child(2), .lines td:nth-child(2) { width: 26%; }
|
|
84
|
+
.outstanding th:nth-child(1), .outstanding td:nth-child(1) { width: 40px; }
|
|
85
|
+
.outstanding th:nth-child(6), .outstanding td:nth-child(6) { width: 150px; }
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
// Monochrome 24px line glyphs drawn for this package in the rounded, 1.75px-stroke style of the QuickBooks icon set.
|
|
2
|
+
const NS = "http://www.w3.org/2000/svg";
|
|
3
|
+
const P = {
|
|
4
|
+
plus: ["M12 5v14", "M5 12h14"],
|
|
5
|
+
bookmark: ["M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1z"],
|
|
6
|
+
home: ["M4 11l8-7 8 7", "M6 9.5V20h4v-6h4v6h4V9.5"],
|
|
7
|
+
feed: ["M5 5h14v14H5z", "M8 9h8", "M8 12h8", "M8 15h5"],
|
|
8
|
+
reports: ["M5 20V10", "M10 20V4", "M15 20v-7", "M20 20v-11"],
|
|
9
|
+
apps: ["M5 5h5v5H5z", "M14 5h5v5h-5z", "M5 14h5v5H5z", "M14 14h5v5h-5z"],
|
|
10
|
+
accounting: ["M4 7h16", "M4 12h16", "M4 17h16", "M9 4v16"],
|
|
11
|
+
expenses: ["M6 3h12v18l-3-2-3 2-3-2-3 2z", "M9 8h6", "M9 12h6"],
|
|
12
|
+
sales: ["M4 17l5-5 4 4 7-8", "M15 8h5v5"],
|
|
13
|
+
customers: ["M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z", "M3 20c.5-3.5 3-5.5 6-5.5s5.5 2 6 5.5", "M16 11a3 3 0 1 0 0-6", "M18 14.5c1.7.6 2.8 2.4 3 5.5"],
|
|
14
|
+
bank: ["M3 9l9-5 9 5", "M5 10v8", "M9.5 10v8", "M14.5 10v8", "M19 10v8", "M3 20h18"],
|
|
15
|
+
payroll: ["M3 7h18v10H3z", "M12 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z", "M6 10v4", "M18 10v4"],
|
|
16
|
+
taxes: ["M6 3h9l4 4v14H6z", "M9 16l6-6", "M9.5 10.5h.01", "M14.5 15.5h.01"],
|
|
17
|
+
team: ["M12 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z", "M5 20c.6-3.8 3.4-6 7-6s6.4 2.2 7 6"],
|
|
18
|
+
customize: ["M4 7h10", "M18 7h2", "M16 5v4", "M4 17h2", "M10 17h10", "M8 15v4"],
|
|
19
|
+
mileage: ["M4 16a8 8 0 1 1 16 0", "M4 16h16", "M12 16l4-5", "M7.5 12.5h.01", "M12 10h.01", "M16.5 12.5h.01"],
|
|
20
|
+
accountant: ["M12 10.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M5.5 20c.6-3.2 3.2-5 6.5-5s5.9 1.8 6.5 5", "M16.5 4.5l2.5 1.2-2.5 1.2"],
|
|
21
|
+
collapse: ["M13 7l-5 5 5 5", "M19 5v14"],
|
|
22
|
+
expand: ["M11 7l5 5-5 5", "M5 5v14"],
|
|
23
|
+
menu: ["M4 7h16", "M4 12h16", "M4 17h16"],
|
|
24
|
+
search: ["M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z", "M15.5 15.5L20 20"],
|
|
25
|
+
experts: ["M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z", "M4 20c1-4 4-6 8-6s7 2 8 6"],
|
|
26
|
+
help: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z", "M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6", "M12 17h.01"],
|
|
27
|
+
bell: ["M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15z", "M10 20.5a2 2 0 0 0 4 0"],
|
|
28
|
+
gear: ["M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M19.4 13.5l1.6 1.2-2 3.4-1.9-.7a7.5 7.5 0 0 1-1.7 1l-.3 2h-4l-.3-2a7.5 7.5 0 0 1-1.7-1l-1.9.7-2-3.4 1.6-1.2a7.4 7.4 0 0 1 0-3L3 9.3l2-3.4 1.9.7a7.5 7.5 0 0 1 1.7-1l.3-2h4l.3 2a7.5 7.5 0 0 1 1.7 1l1.9-.7 2 3.4-1.6 1.2a7.4 7.4 0 0 1 0 3z"],
|
|
29
|
+
close: ["M6 6l12 12", "M18 6L6 18"],
|
|
30
|
+
chevronDown: ["M6 9l6 6 6-6"],
|
|
31
|
+
chevronLeft: ["M15 6l-6 6 6 6"],
|
|
32
|
+
chevronRight: ["M9 6l6 6-6 6"],
|
|
33
|
+
more: ["M5 12h.01", "M12 12h.01", "M19 12h.01"],
|
|
34
|
+
trash: ["M5 7h14", "M10 7V4h4v3", "M7 7l1 13h8l1-13"],
|
|
35
|
+
alert: ["M12 3l10 18H2z", "M12 10v5", "M12 18h.01"],
|
|
36
|
+
info: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z", "M12 11v6", "M12 7.5h.01"],
|
|
37
|
+
check: ["M5 12.5l4.5 4.5L19 7.5"],
|
|
38
|
+
clock: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z", "M12 7v5l3 2"],
|
|
39
|
+
print: ["M7 9V3h10v6", "M6 18H4v-8h16v8h-2", "M7 14h10v7H7z"],
|
|
40
|
+
history: ["M4 12a8 8 0 1 0 2.3-5.6", "M4 4v4h4", "M12 8v4l3 2"],
|
|
41
|
+
filter: ["M4 5h16l-6 8v5l-4 2v-7z"],
|
|
42
|
+
settingsSm: ["M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"],
|
|
43
|
+
lock: ["M6 11h12v9H6z", "M8.5 11V8a3.5 3.5 0 0 1 7 0v3"],
|
|
44
|
+
mail: ["M3 6h18v12H3z", "M3 7l9 6 9-6"],
|
|
45
|
+
edit: ["M4 20h4L19 9l-4-4L4 16z", "M13.5 6.5l4 4"],
|
|
46
|
+
export: ["M12 4v11", "M7.5 8.5L12 4l4.5 4.5", "M5 15v5h14v-5"],
|
|
47
|
+
invoice: ["M6 3h12v18H6z", "M9 8h6", "M9 12h6", "M9 16h3"],
|
|
48
|
+
payment: ["M3 6h18v12H3z", "M3 10h18", "M7 15h3"],
|
|
49
|
+
drag: ["M9 6h.01", "M15 6h.01", "M9 12h.01", "M15 12h.01", "M9 18h.01", "M15 18h.01"],
|
|
50
|
+
};
|
|
51
|
+
export function icon(name, cls = "") {
|
|
52
|
+
const svg = document.createElementNS(NS, "svg");
|
|
53
|
+
svg.setAttribute("viewBox", "0 0 24 24");
|
|
54
|
+
svg.setAttribute("class", `i ${cls}`.trim());
|
|
55
|
+
svg.setAttribute("aria-hidden", "true");
|
|
56
|
+
svg.setAttribute("fill", "none");
|
|
57
|
+
svg.setAttribute("stroke", "currentColor");
|
|
58
|
+
svg.setAttribute("stroke-width", "1.75");
|
|
59
|
+
svg.setAttribute("stroke-linecap", "round");
|
|
60
|
+
svg.setAttribute("stroke-linejoin", "round");
|
|
61
|
+
for (const d of P[name] ?? P.info) {
|
|
62
|
+
const path = document.createElementNS(NS, "path");
|
|
63
|
+
path.setAttribute("d", d);
|
|
64
|
+
svg.append(path);
|
|
65
|
+
}
|
|
66
|
+
return svg;
|
|
67
|
+
}
|
|
68
|
+
export function hydrateIcons(root = document) {
|
|
69
|
+
for (const host of root.querySelectorAll("[data-icon]")) {
|
|
70
|
+
if (host.firstElementChild) continue;
|
|
71
|
+
host.append(icon(host.getAttribute("data-icon")));
|
|
72
|
+
}
|
|
73
|
+
}
|