@musetax/compass-widget 0.1.218
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/README.md +1 -0
- package/dist/AddTransactionForm.d.ts +9 -0
- package/dist/AddTransactionForm.js +317 -0
- package/dist/App.d.ts +2 -0
- package/dist/App.js +5 -0
- package/dist/App.test.d.ts +1 -0
- package/dist/App.test.js +8 -0
- package/dist/ClientAuthForm.d.ts +8 -0
- package/dist/ClientAuthForm.js +504 -0
- package/dist/PotentialDeductions.d.ts +3 -0
- package/dist/PotentialDeductions.js +187 -0
- package/dist/ShowToast.d.ts +3 -0
- package/dist/ShowToast.js +42 -0
- package/dist/api.d.ts +2 -0
- package/dist/api.js +18 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +18 -0
- package/dist/reportWebVitals.d.ts +3 -0
- package/dist/reportWebVitals.js +12 -0
- package/dist/setupTests.d.ts +1 -0
- package/dist/setupTests.js +5 -0
- package/dist/taxInsightDashboard.d.ts +2 -0
- package/dist/taxInsightDashboard.js +261 -0
- package/package.json +57 -0
package/README.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
# Widget-Package
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import React from "react";
|
2
|
+
interface AddTransactionFormProps {
|
3
|
+
userId: string;
|
4
|
+
accessToken: string;
|
5
|
+
onSuccess: () => void;
|
6
|
+
onError?: (msg: string) => void;
|
7
|
+
}
|
8
|
+
declare const AddTransactionForm: React.FC<AddTransactionFormProps>;
|
9
|
+
export default AddTransactionForm;
|
@@ -0,0 +1,317 @@
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
8
|
+
});
|
9
|
+
};
|
10
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
11
|
+
import { useState } from "react";
|
12
|
+
import showToast from "./ShowToast";
|
13
|
+
import api from "./api";
|
14
|
+
const defaultFormData = {
|
15
|
+
account_id: "",
|
16
|
+
amount: 0,
|
17
|
+
iso_currency_code: "USD",
|
18
|
+
datetime: new Date().toISOString(),
|
19
|
+
date: new Date().toISOString(),
|
20
|
+
name: "",
|
21
|
+
merchant_name: "",
|
22
|
+
payment_channel: "",
|
23
|
+
transaction_id: "",
|
24
|
+
transaction_type: "",
|
25
|
+
personal_finance_category: {
|
26
|
+
primary: "",
|
27
|
+
detailed: "",
|
28
|
+
},
|
29
|
+
};
|
30
|
+
const AddTransactionForm = ({ userId, accessToken, onSuccess, onError, }) => {
|
31
|
+
const [formData, setFormData] = useState(defaultFormData);
|
32
|
+
const [submitting, setSubmitting] = useState(false);
|
33
|
+
const [error, setError] = useState("");
|
34
|
+
const [fieldErrors, setFieldErrors] = useState({});
|
35
|
+
const validate = () => {
|
36
|
+
const errors = {};
|
37
|
+
if (!formData.name.trim())
|
38
|
+
errors.name = "Transaction name is required.";
|
39
|
+
if (!formData.merchant_name.trim())
|
40
|
+
errors.merchant_name = "Merchant name is required.";
|
41
|
+
if (!formData.amount || formData.amount <= 0)
|
42
|
+
errors.amount = "Amount must be greater than 0.";
|
43
|
+
if (!formData.account_id.trim())
|
44
|
+
errors.account_id = "Account ID is required.";
|
45
|
+
if (!formData.transaction_id.trim())
|
46
|
+
errors.transaction_id = "Transaction ID is required.";
|
47
|
+
if (!formData.payment_channel.trim())
|
48
|
+
errors.payment_channel = "Payment channel is required.";
|
49
|
+
if (!formData.transaction_type.trim())
|
50
|
+
errors.transaction_type = "Transaction type is required.";
|
51
|
+
if (!formData.personal_finance_category.primary.trim())
|
52
|
+
errors.primary = "Primary category is required.";
|
53
|
+
if (!formData.personal_finance_category.detailed.trim())
|
54
|
+
errors.detailed = "Detailed category is required.";
|
55
|
+
setFieldErrors(errors);
|
56
|
+
return Object.keys(errors).length === 0;
|
57
|
+
};
|
58
|
+
const clearError = (field) => {
|
59
|
+
if (fieldErrors[field]) {
|
60
|
+
setFieldErrors((prev) => (Object.assign(Object.assign({}, prev), { [field]: "" })));
|
61
|
+
}
|
62
|
+
};
|
63
|
+
const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
|
64
|
+
var _a, _b;
|
65
|
+
if (!validate())
|
66
|
+
return;
|
67
|
+
setSubmitting(true);
|
68
|
+
setError("");
|
69
|
+
const payload = {
|
70
|
+
user_id: userId,
|
71
|
+
transactions: [formData],
|
72
|
+
};
|
73
|
+
try {
|
74
|
+
const response = yield api.post("/transactions", payload);
|
75
|
+
const data = response.data;
|
76
|
+
setFormData(defaultFormData);
|
77
|
+
setFieldErrors({});
|
78
|
+
onSuccess();
|
79
|
+
showToast("success", "Transaction added successfully");
|
80
|
+
}
|
81
|
+
catch (err) {
|
82
|
+
const msg = ((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) || "Failed to add transaction";
|
83
|
+
setError(msg);
|
84
|
+
onError === null || onError === void 0 ? void 0 : onError(msg);
|
85
|
+
showToast("error", msg);
|
86
|
+
}
|
87
|
+
finally {
|
88
|
+
setSubmitting(false);
|
89
|
+
}
|
90
|
+
});
|
91
|
+
return (_jsxs("div", Object.assign({ style: {
|
92
|
+
width: "100%",
|
93
|
+
maxHeight: "70vh",
|
94
|
+
backgroundColor: "#fff",
|
95
|
+
borderRadius: "12px",
|
96
|
+
boxShadow: "0 0 2px rgba(0,0,0,0.2)",
|
97
|
+
margin: "auto",
|
98
|
+
zIndex: 9998,
|
99
|
+
padding: "0",
|
100
|
+
overflowY: "auto",
|
101
|
+
} }, { children: [_jsx("h2", Object.assign({ style: {
|
102
|
+
fontSize: "1.125rem",
|
103
|
+
fontWeight: "500",
|
104
|
+
color: "#042567",
|
105
|
+
margin: "0px",
|
106
|
+
backgroundColor: "#F1F7FB",
|
107
|
+
padding: "16px 24px",
|
108
|
+
display: "flex",
|
109
|
+
justifyContent: "space-between",
|
110
|
+
alignItems: "center",
|
111
|
+
borderBottom: "1px solid #BFDBFE",
|
112
|
+
marginBottom: "18px",
|
113
|
+
} }, { children: "Add New Transaction" })), _jsxs("div", Object.assign({ style: { padding: "8px 16px" } }, { children: [error && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: error }))), _jsxs("div", Object.assign({ style: {
|
114
|
+
display: "flex",
|
115
|
+
alignItems: "start",
|
116
|
+
gap: "16px",
|
117
|
+
marginBottom: "12px",
|
118
|
+
} }, { children: [_jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
|
119
|
+
fontSize: "14px",
|
120
|
+
fontWeight: "500",
|
121
|
+
color: "#042567",
|
122
|
+
marginBottom: "5px",
|
123
|
+
display: "block",
|
124
|
+
} }, { children: "Transaction Name" })), _jsx("input", { type: "text", placeholder: "Transaction Name", value: formData.name, onChange: (e) => {
|
125
|
+
setFormData(Object.assign(Object.assign({}, formData), { name: e.target.value }));
|
126
|
+
clearError("name");
|
127
|
+
}, style: {
|
128
|
+
width: "calc(100% - 35px)",
|
129
|
+
padding: "10px 16px",
|
130
|
+
border: "1px solid #E6E7EA",
|
131
|
+
borderRadius: "10px",
|
132
|
+
fontSize: "0.875rem",
|
133
|
+
color: "#042567",
|
134
|
+
outline: "none",
|
135
|
+
} })] })), fieldErrors.name && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.name })))] })), _jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
|
136
|
+
fontSize: "14px",
|
137
|
+
fontWeight: "500",
|
138
|
+
color: "#042567",
|
139
|
+
marginBottom: "5px",
|
140
|
+
display: "block",
|
141
|
+
} }, { children: "Merchant Name" })), _jsx("input", { placeholder: "Merchant Name", value: formData.merchant_name, onChange: (e) => {
|
142
|
+
setFormData(Object.assign(Object.assign({}, formData), { merchant_name: e.target.value }));
|
143
|
+
clearError("merchant_name");
|
144
|
+
}, style: {
|
145
|
+
width: "calc(100% - 35px)",
|
146
|
+
padding: "10px 16px",
|
147
|
+
border: "1px solid #E6E7EA",
|
148
|
+
borderRadius: "10px",
|
149
|
+
fontSize: "0.875rem",
|
150
|
+
color: "#042567",
|
151
|
+
outline: "none",
|
152
|
+
} })] })), fieldErrors.merchant_name && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.merchant_name })))] }))] })), _jsxs("div", Object.assign({ style: {
|
153
|
+
display: "flex",
|
154
|
+
alignItems: "start",
|
155
|
+
gap: "16px",
|
156
|
+
marginBottom: "12px",
|
157
|
+
} }, { children: [_jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
|
158
|
+
fontSize: "14px",
|
159
|
+
fontWeight: "500",
|
160
|
+
color: "#042567",
|
161
|
+
marginBottom: "5px",
|
162
|
+
display: "block",
|
163
|
+
} }, { children: "Amount" })), _jsx("input", { placeholder: "Amount", type: "number", value: formData.amount, onChange: (e) => {
|
164
|
+
setFormData(Object.assign(Object.assign({}, formData), { amount: parseFloat(e.target.value) }));
|
165
|
+
clearError("amount");
|
166
|
+
}, style: {
|
167
|
+
width: "calc(100% - 35px)",
|
168
|
+
padding: "10px 16px",
|
169
|
+
border: "1px solid #E6E7EA",
|
170
|
+
borderRadius: "10px",
|
171
|
+
fontSize: "0.875rem",
|
172
|
+
color: "#042567",
|
173
|
+
outline: "none",
|
174
|
+
} })] })), fieldErrors.amount && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.amount })))] })), _jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
|
175
|
+
fontSize: "14px",
|
176
|
+
fontWeight: "500",
|
177
|
+
color: "#042567",
|
178
|
+
marginBottom: "5px",
|
179
|
+
display: "block",
|
180
|
+
} }, { children: "Account ID" })), _jsx("input", { placeholder: "Account ID", value: formData.account_id, onChange: (e) => {
|
181
|
+
setFormData(Object.assign(Object.assign({}, formData), { account_id: e.target.value }));
|
182
|
+
clearError("account_id");
|
183
|
+
}, style: {
|
184
|
+
width: "calc(100% - 35px)",
|
185
|
+
padding: "10px 16px",
|
186
|
+
border: "1px solid #E6E7EA",
|
187
|
+
borderRadius: "10px",
|
188
|
+
fontSize: "0.875rem",
|
189
|
+
color: "#042567",
|
190
|
+
outline: "none",
|
191
|
+
} })] })), fieldErrors.account_id && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.account_id })))] }))] })), _jsxs("div", Object.assign({ style: {
|
192
|
+
display: "flex",
|
193
|
+
alignItems: "start",
|
194
|
+
gap: "16px",
|
195
|
+
marginBottom: "12px",
|
196
|
+
} }, { children: [_jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
|
197
|
+
fontSize: "14px",
|
198
|
+
fontWeight: "500",
|
199
|
+
color: "#042567",
|
200
|
+
marginBottom: "5px",
|
201
|
+
display: "block",
|
202
|
+
} }, { children: "Transaction ID" })), _jsx("input", { placeholder: "Transaction ID", value: formData.transaction_id, onChange: (e) => {
|
203
|
+
setFormData(Object.assign(Object.assign({}, formData), { transaction_id: e.target.value }));
|
204
|
+
clearError("transaction_id");
|
205
|
+
}, style: {
|
206
|
+
width: "calc(100% - 35px)",
|
207
|
+
padding: "10px 16px",
|
208
|
+
border: "1px solid #E6E7EA",
|
209
|
+
borderRadius: "10px",
|
210
|
+
fontSize: "0.875rem",
|
211
|
+
color: "#042567",
|
212
|
+
outline: "none",
|
213
|
+
} })] })), fieldErrors.transaction_id && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.transaction_id })))] })), _jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
|
214
|
+
fontSize: "14px",
|
215
|
+
fontWeight: "500",
|
216
|
+
color: "#042567",
|
217
|
+
marginBottom: "5px",
|
218
|
+
display: "block",
|
219
|
+
} }, { children: "Payment Channel" })), _jsx("input", { placeholder: "Payment Channel", value: formData.payment_channel, onChange: (e) => {
|
220
|
+
setFormData(Object.assign(Object.assign({}, formData), { payment_channel: e.target.value }));
|
221
|
+
clearError("payment_channel");
|
222
|
+
}, style: {
|
223
|
+
width: "calc(100% - 35px)",
|
224
|
+
padding: "10px 16px",
|
225
|
+
border: "1px solid #E6E7EA",
|
226
|
+
borderRadius: "10px",
|
227
|
+
fontSize: "0.875rem",
|
228
|
+
color: "#042567",
|
229
|
+
outline: "none",
|
230
|
+
} })] })), fieldErrors.payment_channel && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.payment_channel })))] }))] })), _jsxs("div", Object.assign({ style: {
|
231
|
+
display: "flex",
|
232
|
+
alignItems: "start",
|
233
|
+
gap: "16px",
|
234
|
+
marginBottom: "12px",
|
235
|
+
} }, { children: [_jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
|
236
|
+
fontSize: "14px",
|
237
|
+
fontWeight: "500",
|
238
|
+
color: "#042567",
|
239
|
+
marginBottom: "5px",
|
240
|
+
display: "block",
|
241
|
+
} }, { children: "Transaction Type" })), _jsx("input", { placeholder: "Transaction Type", value: formData.transaction_type, onChange: (e) => {
|
242
|
+
setFormData(Object.assign(Object.assign({}, formData), { transaction_type: e.target.value }));
|
243
|
+
clearError("transaction_type");
|
244
|
+
}, style: {
|
245
|
+
width: "calc(100% - 35px)",
|
246
|
+
padding: "10px 16px",
|
247
|
+
border: "1px solid #E6E7EA",
|
248
|
+
borderRadius: "10px",
|
249
|
+
fontSize: "0.875rem",
|
250
|
+
color: "#042567",
|
251
|
+
outline: "none",
|
252
|
+
} })] })), fieldErrors.transaction_type && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.transaction_type })))] })), _jsxs("div", Object.assign({ style: { width: "49%" } }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
|
253
|
+
fontSize: "14px",
|
254
|
+
fontWeight: "500",
|
255
|
+
color: "#042567",
|
256
|
+
marginBottom: "5px",
|
257
|
+
display: "block",
|
258
|
+
} }, { children: "Primary Category" })), _jsx("input", { placeholder: "Primary Category", value: formData.personal_finance_category.primary, onChange: (e) => {
|
259
|
+
setFormData(Object.assign(Object.assign({}, formData), { personal_finance_category: Object.assign(Object.assign({}, formData.personal_finance_category), { primary: e.target.value }) }));
|
260
|
+
clearError("primary");
|
261
|
+
}, style: {
|
262
|
+
width: "calc(100% - 35px)",
|
263
|
+
padding: "10px 16px",
|
264
|
+
border: "1px solid #E6E7EA",
|
265
|
+
borderRadius: "10px",
|
266
|
+
fontSize: "0.875rem",
|
267
|
+
color: "#042567",
|
268
|
+
outline: "none",
|
269
|
+
} })] })), fieldErrors.primary && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.primary })))] }))] })), _jsxs("div", Object.assign({ style: {
|
270
|
+
display: "block",
|
271
|
+
marginBottom: "0px",
|
272
|
+
} }, { children: [_jsxs("div", Object.assign({ style: { width: "100%" } }, { children: [_jsx("label", Object.assign({ style: {
|
273
|
+
fontSize: "14px",
|
274
|
+
fontWeight: "500",
|
275
|
+
color: "#042567",
|
276
|
+
marginBottom: "5px",
|
277
|
+
display: "block",
|
278
|
+
} }, { children: "Detailed Category" })), _jsx("input", { placeholder: "Detailed Category", value: formData.personal_finance_category.detailed, onChange: (e) => {
|
279
|
+
setFormData(Object.assign(Object.assign({}, formData), { personal_finance_category: Object.assign(Object.assign({}, formData.personal_finance_category), { detailed: e.target.value }) }));
|
280
|
+
clearError("detailed");
|
281
|
+
}, style: {
|
282
|
+
width: "calc(100% - 35px)",
|
283
|
+
padding: "10px 16px",
|
284
|
+
border: "1px solid #E6E7EA",
|
285
|
+
borderRadius: "10px",
|
286
|
+
fontSize: "0.875rem",
|
287
|
+
color: "#042567",
|
288
|
+
outline: "none",
|
289
|
+
} })] })), fieldErrors.detailed && (_jsx("p", Object.assign({ style: { color: "red", fontSize: "12px", fontWeight: "400" } }, { children: fieldErrors.detailed })))] }))] })), _jsxs("div", Object.assign({ style: {
|
290
|
+
display: "flex",
|
291
|
+
alignItems: "center",
|
292
|
+
justifyContent: "center",
|
293
|
+
marginTop: "20px",
|
294
|
+
marginBottom: "20px",
|
295
|
+
gap: "10px",
|
296
|
+
} }, { children: [_jsx("button", Object.assign({ disabled: submitting, onClick: onSuccess, style: {
|
297
|
+
border: "1px solid #5387F1",
|
298
|
+
backgroundColor: "white",
|
299
|
+
color: "#5387F1",
|
300
|
+
fontSize: "0.875rem",
|
301
|
+
fontWeight: 500,
|
302
|
+
padding: "8px 16px",
|
303
|
+
borderRadius: 8,
|
304
|
+
cursor: "pointer",
|
305
|
+
} }, { children: "Cancel" })), _jsx("button", Object.assign({ onClick: handleSubmit, disabled: submitting, style: {
|
306
|
+
backgroundColor: "#5387F1",
|
307
|
+
border: "1px solid #5387F1",
|
308
|
+
color: "white",
|
309
|
+
fontSize: "0.875rem",
|
310
|
+
fontWeight: 500,
|
311
|
+
padding: "8px 16px",
|
312
|
+
borderRadius: 8,
|
313
|
+
marginRight: 8,
|
314
|
+
cursor: "pointer",
|
315
|
+
} }, { children: submitting ? "Submitting..." : "Submit" }))] }))] })));
|
316
|
+
};
|
317
|
+
export default AddTransactionForm;
|
package/dist/App.d.ts
ADDED
package/dist/App.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
package/dist/App.test.js
ADDED
@@ -0,0 +1,8 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { render, screen } from '@testing-library/react';
|
3
|
+
import App from './App';
|
4
|
+
test('renders learn react link', () => {
|
5
|
+
render(_jsx(App, {}));
|
6
|
+
const linkElement = screen.getByText(/learn react/i);
|
7
|
+
expect(linkElement).toBeInTheDocument();
|
8
|
+
});
|